问卷系统

问卷系统开发 ---服务端

github:https://github.com/Snail017/testsystem-mysql-express.git

1. 数据库建表

• redis 数据库 （存放token，做为辅助数据库）

  redis 查询速度快，可是做为内存数据库，没法存储过大数据。存放缓存有助于提升性能

• mysql 数据库 （存放大规模数据，做为主数据库）

  存储在硬盘中。能够支持更大规模的数据，成本更低。

使用sequelize 操做mysql数据库。

出卷人要指定答卷人，

建了一个 关联指定答卷人和试卷table，

产品需求须要一个答卷人列表，须要根据答卷的状态，关键字进行搜索，

建表 就须要先在 指定答卷人和试卷table 里根据user_id获得他所须要考试的全部试卷，而后逐个筛选状态和关键字

实战：ORM数据模型（Object/Relational Mapping）

将数据库操做经过实例对象的语法完成。使用框架sequlize

• 数据库table  --->  类（class）
• 记录（record,行数据）---> 对象（object）
• 字段（filed）-->对象属性（attribute）

命名规范：

1. 一个类对应一张表。类名是单数，且首字母大写；表名是复数，且所有是小写。好比，表books对应类Book。
2. 若是名字是不规则复数，则类名依照英语习惯命名，好比，表mice对应类Mouse，表people对应类Person。
3. 若是名字包含多个单词，那么类名使用首字母所有大写的骆驼拼写法，而表名使用下划线分隔的小写单词。好比，表book_clubs对应类BookClub，表line_items对应类LineItem。
4. 每一个表都必须有一个主键字段，一般是叫作id的整数字段。外键字段名约定为单数的表名 + 下划线 + id，好比item_id表示该字段对应items表的id字段。

感受这样好复杂，有没有更好的建表方式，或者处理方式？

2.数据加密

加密的两种方式

1.RES非对称加密：加密解密的秘钥不一样，私钥加密，公钥解密。

1. AES对称加密

实战：使用RES 加密用户信息

使用加密插件crypto，进行RES非对称加密+md5不可逆加密

关于加密解密引用一则动漫解读：https://mp.weixin.qq.com/s/1ojSrhc9LZV8zlX6YblMtA

3.用户认证

用户认证方法   token方法和session认证

• 目的：防止CSRF(cross-site request forgery)网站攻击。

• 网站攻击经常使用的两种方式：XSS,CSRF;

  CSRF:查看wiki解释。
  防护方式：1.检查refrence 字段  2.添加token

• CSS:代码注入

  防护措施：htmlentites  过滤输出。

1.token认证：JWT实现

• JWT的组成：Header + Payload + Signature

• JWT 优势：

  1. 可拓展性好。（session须要放在数据库中，可是jwt只须要放在客户端中）
  2. 无状态（JWT 不在服务端存储任何状态）

• JWT缺点：

  1. 安全性(bse64编码，没有加密)
  2. 性能（JWT数据比较长 ，通常存储在localstorage中）
  3. 一次性

2.传统session认证

实战:用户自动登陆（JWT实现）

设置token自动刷新时间

• 用户登陆时设置access_token 和refresh_token，access-token为key,fresh_token为value存入redis数据库。并将access_token返回给客户端。access_token时间能够设置为1个小时，refresh_token时间设置为一周（refresh_token有效时间越长，token有效期越长）。

    > 1. 当时access_token 失效时，根据access_toke获得refresh_token判断是否有效。
    > 2. 有效返回新的access_token给客户端，设置Authorization。将新的access_token 和refresh_token存入redis数据库。
    > 3. 无效从新登陆。
    >

---

问卷系统开发 --- 前端

1. vue.config.js 配置

使用 dev-server 代理请求

具体使用能够参考文档webpack中文网

const path = require('path');

function resolve(_dir) {
    return path.join(__dirname, _dir)
}
const webpack = require("webpack")
let webpackConfig = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "windows.jQuery": "jquery"
            }),
        ]
    },

    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('/src'));
        config.resolve.symlinks(true);
    },

    devServer: {
        hot: true,
        disableHostCheck: true,
        // 设置代理
        proxy: {
            '/': {
                ws: false,
                target: 'http://localhost:3000',
                changeOrigin: true,     //为true，本地能够虚拟一个服务器接受请求并代理发送该请求
                pathRewrite: {
                    '^/': '/'
                }
            },
        }
    },

    css: {
      extract: false
    }
}
module.exports = webpackConfig;

2. main.js 获取公钥

路径 ：/src/main.js
项目执行获取公钥存储在浏览器localStorage

//获取公钥
Vue.prototype.$http({
    method: 'get',
    url: "/publicKey",
}).then((res) => {
    res = res.data;
    if (res.code == 200) {
        window.localStorage.setItem("public_key", res.msg);
    }
})

3. http.js 设置路由防备

验证token 每次路由跳转作权限校验

import axios from 'axios';
import router from './router';

//定义一个路由防卫，每次路由跳转，咱们都来作一下权限校验
router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否须要登陆权限
      if (localStorage.token&&localStorage.token!='') { //判断token是否存在
        console.log("token存在");
        next();
      } else {
        console.log("token不存在");
        next({
          path: '/login', // 将跳转的路由path做为参数，登陆成功后跳转到该路由
          query: {redirect: to.fullPath}
        })
      }
    }
    else { // 若是不须要权限校验，直接进入路由界面
      next();
    }
  });
  
// http request 拦截器
axios.interceptors.request.use(
  config => {
    if (localStorage.token) { //判断token是否存在
      config.headers.Authorization = localStorage.token;  //将token设置成请求头
    }
    return config;
  },
  err => {
    return Promise.reject(err);
  }
);

// http response 拦截器
axios.interceptors.response.use(
  response => {
    if (response.data.code === 401) {
      router.replace('/login');
      console.log("token过时");
    }else if(response.headers.authorization){
      localStorage.token=response.headers.authorization;
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);
export default axios;

---

摸索学习，有什么不对的欢迎指教。