vue axios请求前请求用户信息

发表于 2019-02-28 | 分类于 vue | | 阅读次数

const cusAxios = axios.create({
  baseURL: process.env.API_HOST,
  timeout: 15000
})
// cusAxios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// Add a request interceptor
let userInfoPromise = null
cusAxios.interceptors.request.use((config) => {
  console.log('begin api:', config.url)
  return new Promise((resolve) => {
    let accessToken = store.getters['user/accessToken']
    getUserInfo().then(userInfo => {
      console.log('userInfo', userInfo)
      if (accessToken) {
        config.headers.Authorization = `Bearer ${accessToken}`
      }
      loadingBar.start()
      console.log('after get userInfo api:', config.url)
      resolve(config)
    })
  })
}, function (error) {
  // Do something with request error
  loadingBar.close()
  return Promise.reject(error)
})

function getUserInfo () {
  if (!userInfoPromise) {
    console.log('begin get userInfo')
    userInfoPromise = new Promise(resolve => {
      setTimeout(() => {
        console.log('request get userInfo finished')
        resolve({aaa: 111})
      }, 5000)
    })
  }
  return userInfoPromise.then(info => info)
}

测试：

[HMR] Waiting for update signal from WDS...
api.js?93af:16 begin api: /api/web/um/user/queryUser
api.js?93af:38 begin get userInfo
NavMain.vue?d842:38 {name: "ManageAlumni", meta: {…}, path: "/PersonalOrganization/manageAlumni", hash: "", query: {…}, …}
api.js?93af:16 begin api: /api/web/um/student/queryPage
api.js?93af:41 request get userInfo finished
api.js?93af:21 userInfo {aaa: 111}
api.js?93af:26 after get userInfo api: /api/web/um/user/queryUser
api.js?93af:21 userInfo {aaa: 111}
api.js?93af:26 after get userInfo api: /api/web/um/student/queryPage

Vue 页面过渡动画

发表于 2018-05-16 | | 阅读次数

<template>
  <div id="app">
    <transition name="page-toggle-transition">
      <router-view class="page-toggle-transition"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
  #app {
    .page {
      position: absolute;
      left: 0; right: 0; top: 0; bottom: 0;

      &.page-top-transition {
        transition: opacity .3s ease;
        &.page-top-transition-enter, &.page-top-transition-leave-to {
          opacity: 0;
        }
      }

      &.page-push-transition {
        transition: transform .3s ease, opacity .3s ease;
        &.page-push-transition-enter {
          transform: translateX(100%);
        }
        &.page-push-transition-leave-to {
          opacity: 0;
        }
      }

      &.page-pop-transition {
        transition: transform .3s ease, opacity .3s ease;
        &.page-pop-transition-enter {
          opacity: 0;
        }
        &.page-pop-transition-leave-to {
          transform: translateX(100%);
        }
      }

      &.page-toggle-transition {
        transition: transform .3s ease, opacity .3s ease;
        &.page-toggle-transition-enter {
          transform: translateX(100%);
        }
        &.page-toggle-transition-leave-to {
          transform: translateX(100%);
          opacity: 0;
        }
      }
    }
  }
</style>

迁移文件修改mysql utf8编码到utf8mb4

发表于 2018-03-14 | | 阅读次数

class ConvertUtf8ToUtf8mb4 < ActiveRecord::Migration[5.0]
  def db
    ActiveRecord::Base.connection
  end

  def up 
    execute "ALTER DATABASE `#{db.current_database}` CHARACTER SET utf8mb4;"
    db.tables.each do |table|
      next if %w(ar_internal_metadata schema_migrations).include?(table)
      next if db.views.include?(table) # Skip views. This will not be necessary in Rails 5.1, when `db.tables` will change to only return actual tables.
      execute "ALTER TABLE `#{table}` CHARACTER SET = utf8mb4;"
      db.columns(table).each do |column|
        case column.sql_type 
          when /([a-z]*)text/i
            execute "ALTER TABLE `#{table}` CHANGE `#{column.name}` `#{column.name}` #{$1.upcase}TEXT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
          when /((?:var)?char)\(([0-9]+)\)/i
            # InnoDB has a maximum index length of 767 bytes, so for utf8 or utf8mb4
            # columns, you can index a maximum of 255 or 191 characters, respectively.
            # If you currently have utf8 columns with indexes longer than 191 characters,
            # you will need to index a smaller number of characters.
            indexed_column = db.indexes(table).any? { |index| index.columns.include?(column.name) }

            sql_type = (indexed_column && $2.to_i > 191) ? "#{$1}(191)" : column.sql_type.upcase
            default = (column.default.nil?) ? '' : "DEFAULT '#{column.default}'"
            null = (column.null) ? '' : 'NOT NULL'
            execute "ALTER TABLE `#{table}` CHANGE `#{column.name}` `#{column.name}` #{sql_type} CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci #{default} #{null};"
        end
      end
    end
end

rails sql语句时间分段查询，按时间段分组，分时间段统计

发表于 2018-02-23 | | 阅读次数

1 2	#按小时分组 select DATE_FORMAT(created_at,'%H') hours,count(id) count from doctors group by DATE_FORMAT(created_at,'%H');

时间段字符如下

%a - The abbreviated weekday name (''Sun'')
%A - The  full  weekday  name (''Sunday'')
%b - The abbreviated month name (''Jan'')
%B - The  full  month  name (''January'')
%c - The preferred local date and time representation
%d - Day of the month (01..31)
%H - Hour of the day, 24-hour clock (00..23)
%I - Hour of the day, 12-hour clock (01..12)
%j - Day of the year (001..366)
%m - Month of the year (01..12)
%M - Minute of the hour (00..59)
%p - Meridian indicator (''AM'' or ''PM'')
%S - Second of the minute (00..60)
%U - Week  number  of the current year,
        starting with the first Sunday as the first
        day of the first week (00..53)
%W -Week  number  of the current year,
        starting with the first Monday as the first
        day of the first week (00..53) 该句有错误， 滚动下方参考w3c 一年的第几周，以星期一作为一周的开始计算应该是：%u
%w - Day of the week (Sunday is 0, 0..6)
%x - Preferred representation for the date alone, no time
%X - Preferred representation for the time alone, no date
%y - Year without a century (00..99)
%Y - Year with century
%Z - Time zone name
%% - Literal ''%'' character

使用实例

doctor_chart_new = AgentOrder.find_by_sql("
select DATE_FORMAT(table_a.order_time,'%d') df, count(table_a.id) count from
(SELECT * FROM agent_orders
GROUP BY agent_orders.doctor_id
ORDER BY agent_orders.doctor_id asc) as table_a
WHERE (order_time BETWEEN '#{month_beginning}' AND '#{month_end}')
GROUP BY DATE_FORMAT(table_a.order_time,'%d')")

# w3c 更准确
可以使用的格式有：
格式	描述
%a	缩写星期名
%b	缩写月名
%c	月，数值
%D	带有英文前缀的月中的天
%d	月的天，数值(00-31)
%e	月的天，数值(0-31)
%f	微秒
%H	小时 (00-23)
%h	小时 (01-12)
%I	小时 (01-12)
%i	分钟，数值(00-59)
%j	年的天 (001-366)
%k	小时 (0-23)
%l	小时 (1-12)
%M	月名
%m	月，数值(00-12)
%p	AM 或 PM
%r	时间，12-小时（hh:mm:ss AM 或 PM）
%S	秒(00-59)
%s	秒(00-59)
%T	时间, 24-小时 (hh:mm:ss)
%U	周 (00-53) 星期日是一周的第一天
%u	周 (00-53) 星期一是一周的第一天
%V	周 (01-53) 星期日是一周的第一天，与 %X 使用
%v	周 (01-53) 星期一是一周的第一天，与 %x 使用
%W	星期名
%w	周的天 （0=星期日, 6=星期六）
%X	年，其中的星期日是周的第一天，4 位，与 %V 使用
%x	年，其中的星期一是周的第一天，4 位，与 %v 使用
%Y	年，4 位
%y	年，2 位

更新服务器node版本

发表于 2018-02-07 | | 阅读次数

更新到 Node.js v9.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_9.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_9.x | bash -
apt-get install -y nodejs

更新到 Node.js v8.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_8.x | bash -
apt-get install -y nodejs

更新到 Node.js v7.x:

# Using Ubuntu
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
sudo apt-get install -y nodejs

# Using Debian, as root
curl -sL https://deb.nodesource.com/setup_7.x | bash -
apt-get install -y nodejs

Mysql必备知识

发表于 2017-12-20 | | 阅读次数

join table

工具安装

发表于 2017-12-12 | | 阅读次数

安装 brew

1	$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安装 sequel mysql客户端

1	$ brew cask install sequel-pro

安装 rds redis客户端

1	$ brew cask install rdm

nginx配置【vue、 rails】

发表于 2017-12-09 | | 阅读次数

vue http config

server {
    server_name wap.waimai.com;
    listen 80;
    listen [::]:80;

    root /mnt/www/waimai-wap;
    index index.html;
    location ^~ /static/ {
      gzip_static on;
      expires max;
      add_header Cache-Control public;
    }
    location / {
      try_files $uri $uri/ /index.html;
    }
    location ~* \.(css|js|gif|jpe?g|png)$ {
      expires 100d;
      access_log off;
      add_header Pragma public;
      add_header Cache-Control "public";
    }
}

vue https config

server {
  listen 443;
  listen 80;
  ssl on;
  ssl_certificate /etc/letsencrypt/live/www.itrydo.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.itrydo.com/privkey.pem;

  server_name  www.itrydo.com;
  
  if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){
      rewrite  ^/(.*)$  http://m.itrydo.com$uri redirect;
   }

  root /mnt/www/waimai/current/dist/;
  index index.html;
  location ^~ /static/ {
   gzip_static on;
   expires max;
   add_header Cache-Control public;
  }
  location / {
     try_files $uri $uri/ /index.html;
  }
}

rails config

upstream waimai {
  server unix:///mnt/www/relation_api/shared/tmp/sockets/puma.sock;
}
# http
server {
  listen 80;
  server_name api.itrydo.com api.waimai.com adm.waimai.com bus.waimai.com; # change to match your URL
  index index.html;
  root /mnt/www/relation_api/current/public; # I assume your app is located at that location
  try_files $uri/index.html $uri @app;
  location @app {
    # try_files $uri/index.html $uri =404;
    proxy_pass http://waimai; # match the name of upstream directive which is defined above
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  location /cable {
    proxy_pass http://waimai;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
  }
}

# http redirect https
#server {
#  server_name api.itrydo.com api.waimai.com adm.waimai.com bus.waimai.com;
#  listen 80;
 # return 308 https://$server_name$request_uri;
 # location / {
 #   rewrite ^/(.*)$ https://$server_name/$1 permanent;
 # }
#   rewrite ^ https://$server_name$request_uri? permanent;
#}
# https
server {
  server_name api.itrydo.com api.waimai.com adm.waimai.com bus.waimai.com;
  listen 443 ssl http2;
  index index.html;
  root /mnt/www/relation_api/current/public;
  ssl on;
  ssl_certificate  /home/deploy/letsencrypt/api/api.chained.crt;
  ssl_certificate_key  /home/deploy/letsencrypt/api/api.waimai.com.key;
  ssl_session_cache    shared:SSL:1m;
  ssl_session_timeout  5m;
  ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers  on;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

  try_files $uri/index.html $uri @app;
  
  location /cable {
    proxy_pass http://waimai;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
  }

  location @app {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-Ssl on;
    proxy_set_header X-Forwarded-Port 443;
    proxy_set_header X-Forwarded-Host $host;
    proxy_redirect off;
    proxy_pass http://waimai;
  }
  
}

代码段

wap访问www,重定向到wap

server_name  www.itrydo.com;
if ( $http_user_agent ~* "(Android|iPhone|Windows Phone|UC|Kindle)" ){
   rewrite  ^/(.*)$  http://wap.itrydo.com$uri redirect;
}

ubuntu修改时区

发表于 2017-10-18 | | 阅读次数

执行下面命令，并按照提示选择“Asia/Shanghai”：

1	$ sudo dpkg-reconfigure tzdata

https

发表于 2017-08-04 | | 阅读次数

$ ssh deploy@IPADDRESS
$ cd ~
$ git clone https://github.com/letsencrypt/letsencrypt
$ cd letsencrypt/
$ ./letsencrypt-auto --agree-dev-preview --server https://acme-v01.api.letsencrypt.org/directory auth

1
2
3

$ cd ~
$ mkdir etc
$ openssl dhparam -out dhparams.pem 2048

upstream vitamin {
  server unix:///mnt/www/vitamin/shared/tmp/sockets/puma.sock;
}

server {
  listen 443 ssl;
  server_name xn--n8jhv5b1dva9290n.com;
  root /mnt/www/vitamin/shared/public;

  location / {
    proxy_pass http://vitamin; # match the name of upstream directive which is defined above
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  ssl on;
  ssl_certificate /etc/letsencrypt/live/xn--n8jhv5b1dva9290n.com/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/xn--n8jhv5b1dva9290n.com/privkey.pem;

  ssl_session_timeout 5m;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-DSS-AES128-GCM-SHA256:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-DSS-AES128-SHA256:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:DHE-RSA-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:AES:CAMELLIA:DES-CBC3-SHA:!aNULL:!eNULL:!EXPORT:!DES:!RC4:!MD5:!PSK:!aECDH:!EDH-DSS-DES-CBC3-SHA:!EDH-RSA-DES-CBC3-SHA:!KRB5-DES-CBC3-SHA';
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  ssl_dhparam /home/deploy/etc/dhparams.pem;
}