Server 操作

连接 mysql

添加 dotenv 依赖

数据库的用户名、密码等信息可以放在一个 .env 文件中，用 dotenv 可以把这些信息读出来直接使用。
安装，在 server目录， npm install dotenv --save, 在 server 目录，新建 .env 文件(文件名就是 '.env')，内容

NODE_ENV=development
DB_HOST=localhost
DB_USER=root
DB_PASS=s1mpl3
PORT=3000

添加访问数据库的 helper 文件

在 server 下面新建 utils 文件夹，添加 mysql-helper.js （具体见 repo 中代码）。

添加 mysql 依赖

npm i mysql

测试数据库是否成功

router 下的 index.js

const express = require('express');
const router = express.Router();
const db = require('../utils/mysql-helper');

/* GET home page. */
router.get('/', function(req, res, next) {
  db.getConn().query('select * from tb_user', function(err, result) {
    if (err) {
      console.log(err);
    } else {
      console.log('result okkk');
    }
  });
  res.render('index', { title: 'Express' });
});

module.exports = router;

添加 nodemon

每次修改后台，都要重新启动太麻烦，用 nodemon 实现文件修改后自动重启。先安装，npm i nodemon。在 package.json 修改 start script 为 "start": "nodemon ./bin/www", 。以后启动server，仍然用命令 npm start，但是每次文件修改保存，nodemon 会自动重启。

Client 操作

安装 vuetify 依赖

在 client， npm install vuetify --save, 在 main.js, 添加：

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

加入 CORS

Register 页面做好后，输入 email 和 password，点登录按钮，用 axios 发送 post，得到一个错误：

Failed to load http://localhost:3000/register: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access.

原因是 server 没有允许 CORS，解决办法是在 express 添加 cors 支持。
server 端安装 cors, npm i cors

client 用 vuex 管理登录状态

安装 vuex，在client 新建 store/store.js，添加 states，mutations, actions。
登录成功后，在 states 里面存放 user 的 token， 所以，server 注册成功和登录成功都要返回用户 token。

JWT(JsonWebToken)

server 安装 JWT，npm install jsonwebtoken, 在需要返回 token 的地方定义

function jwtSignUser (user) {
  const ONE_WEEK = 60 * 60 * 24 * 7
  return jwt.sign(user, config.authentication.jwtSecret, {
    expiresIn: ONE_WEEK
  })
}

用 vuex-persistedstate 把 vuex 的 state 存储到 localstorage

安装 $ npm install vuex-persistedstate, 使用

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

应用 passport passport-jwt

安装 npm i passport passport-jwt