node+vue，实战demo
该项目功能
页面内容：
1.注册
2.登录
3.退登、修改密码/修改昵称
4.列表页（可新增，删除，修改，查询）
5.子账号页（可增，删，改，查）==》仅对超级管理员开放
用到技术：
1.反向代理
2.数据库建表，请求mysql数据库
3.进行node模块化开发，分模块处理请求()
具体功能：
1.生成验证码
2.token：前端用uuid加密生成token实现验证码一一对应
3.用redis（可支持：键/值对，哈希表，链表，集合）缓存token以及用户信息,并设置过期时效
redis使用：
1.先跑起来redis服务：到redis文件目录下：redis-server redis.window.conf
2.在打开可视化工具（redis desktop manager）查看
**前端代码 https://github.com/miaSlady/modular_html.git **
**node后台代码 https://github.com/miaSlady/modular.git **
具体实现过程
数据库部分
数据库搭建
1.建立读书计划表
2.建立用户列表
后台node部分
1.安装以下依赖
"koa": "^2.12.0",
"koa-bodyparser": "^4.3.0",
"koa-router": "^8.0.8",
"koa-session": "^6.0.0",
"koa2-cors": "^2.0.6",
"mysql": "^2.18.1",
"redis": "^3.0.2",
"svg-captcha": "^1.4.0"
"crypto": "^1.0.1"
koa 写后台；mysql连接服务器；svg-captcha生成二维码；redis写token校验；crypto配合redis使用
2.配置跨域
1.在公共方法utils里头新建中间件koa-cors.js
注：1.allowDomain允许访问的域名
2.对options进行处理：method = OPTIONS 时, 属于预检(复杂请求), 当为预检时, 可以直接返回空响应体
module.exports = async (ctx, next) => {
const allowDomain=[
"http://172.16.0.128:1818/",
"http://172.16.0.25:1818/",
"http://localhost:1818/",
]
if(allowDomain.includes(ctx.header.referer) || allowDomain.includes(ctx.header.origin + '/')){
// ctx.set('Access-Control-Allow-Origin', '*'); //允许来自所有域名请求(不携带cookie请求可以用*，如果有携带cookie请求必须指定域名)
ctx.set("Access-Control-Allow-Origin", ctx.header.origin); // 只允许指定域名http://localhost:8080的请求
ctx.set('Access-Control-Allow-Methods', 'OPTIONS, GET, PUT, POST, DELETE'); // 设置所允许的HTTP请求方法
ctx.set('Access-Control-Allow-Headers', 'x-requested-with, accept, origin, content-type,token'); // 字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段.
// 服务器收到请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。
ctx.set('Content-Type', 'application/json;charset=utf-8'); // Content-Type表示具体请求中的媒体类型信息
ctx.set('Access-Control-Allow-Credentials', true); // 该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。
// 当设置成允许请求携带cookie时，需要保证"Access-Control-Allow-Origin"是服务器有的域名，而不能是"*";
ctx.set('Access-Control-Max-Age', 300); // 该字段可选，用来指定本次预检请求的有效期，单位为秒。
// 当请求方法是PUT或DELETE等特殊方法或者Content-Type字段的类型是application/json时，服务器会提前发送一次请求进行验证
// 下面的的设置只本次验证的有效时间，即在该时间段内服务端可以不用进行验证
ctx.set('Access-Control-Expose-Headers', 'myData'); // 需要获取其他字段时，使用Access-Control-Expose-Headers，
// getResponseHeader('myData')可以返回我们所需的值
/*
CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：
Cache-Control、
Content-Language、
Content-Type、
Expires、
Last-Modified、
Pragma。
*/
/* 解决OPTIONS请求 */
if (ctx.request.method == 'OPTIONS') {
ctx.status = 200;
} else {
await next();
}
}else{
ctx.throw(500);
}
};
3.连接服务器
1.在middlewares文件下创建databases.js。
const mysql=require("mysql");
const db=mysql.createConnection({
host:"localhost",
port:3306,
user:'root',
password:'123456',
database:'modular',//数据库名
multipleStatements: true,//可执行多条sql语句
});
const connectDb=function(){
db.connect(err=>{
if(err) throw err;
console.log("连接成功");
})
}
module.exports={
db,
connectDb
}
> 暴露出db用于sql查询，connectDb在app.js中进行全局引入
2.在app.js添加
const {connectDb}=require('./middlewares/databases')
connectDb();
3.分模块管理路由
注：
（1）app.js写全局注入
（2）controller.js里头写接口封装
（3）controllers 里头写各个模块调用的接口封装
1.在app.js
// 导入controller middleware:
const controller = require('./controller');//对路由分模块处理
controller(app);
2.在controller.js(具体写法查看github项目：https://github.com/miaSlady/modular.git)
module.exports = function (app,dir) {
let
controllers_dir = dir || 'controllers',
router = require('koa-router')();
addControllers(router, controllers_dir);
//token拦截中间件
app.use(async (ctx,next)=>{
...
})
app.use(router.routes());
// return router.routes();
};
3.token拦截中间件配置
配置逻辑：
（1）除获取验证码接口，其他接口需携带token
（2）注册、登录接口无需校验，直接去调用接口await next()，会在接口处去校验token、code是否匹配
（3）其他接口需校验token判断code上传是否正确（先判断token是否存在，再获取用户信息），在ctx里头存用户信息，便于其他接口调用ctx.state.user=user;
//token拦截中间件
app.use(async (ctx,next)=>{
var url=ctx.request.URL.pathname;
if(url!='/login/code'){//非获取验证码（需携带token）
const {token}=ctx.request.header;
let response={
code:401,
success:false,
msg:'登录失效，请重新登录'
};
if(token){
ctx.state.token=token;
return new Promise((res,req)=>{
console.log(3)
if(url!='/login/signUp' && url!='/login/login'){//不是注册且不是登录进行token校验
client.hexists('codeUserInfo',token, (err, data)=>{//判断token是否失效
console.log(4,data)
if(data){//token未失效获取用户信息
client.hgetall('codeUserInfo', (err, obj)=>{
let user=obj[token];
user=JSON.parse(user);
ctx.state.user=user;
res(true)
});
}else{//token失效
res(false)
}
})
}else{//注册或登录无需进行token校验
res(true)
}
}).then(async(bool)=>{
if(bool){
console.log('调接口去');
await next();
}else{
ctx.response.body=response
}
})
}else{//没携带token
ctx.response.body=response
}
}else{//获取验证码code
await next();
}
})
4.用基于uuid生成随机数用于token
const uuidv4 = require('uuid/v4');
token=uuidv4()
5.生成验证码
const svgCaptcha = require('svg-captcha');//生成验证码
let captcha = svgCaptcha.create({
size:4,//验证码个数
fontSize:50,//验证码字体大小
width:135,//宽度
heigth:47,//高度
background:'#cc9966'//背景大小
});
ctx.response.type="image/svg+xml";//设置返回的数据格式
let token=uuidv4(),obj={};
obj[token]=captcha.text;
client.hmset('codeVerify', obj, redis.print);
client.expire('codeVerify',180);//3分钟自动过期
6.redis存取（我用的hash）
var redis = require('redis')//中间件：缓存哈希表（1.注册/登录判断code是否输入正确；2.登录用token对应用户信息）
var client = redis.createClient(6379, '127.0.0.1')
client.hmset('codeUserInfo', userInfo , redis.print);//存
client.expire('codeUserInfo',24*60*60);//1天自动过期（设置过期时间）
client.hgetall('codeVerify', (err, obj)=>{//获取
console.log('我获取到了',obj);
if(err){
rej(err)
}else{
res(obj)
}
})
client.hexists('codeUserInfo',token, (err, data)=>{//查存在
if(data){
client.hdel('codeUserInfo', token,async (err,data)=>{//删除
res()
});
}else{
res()
}
});
7.登录逻辑
（1）调接口获取验证码，后台在验证码接口用uuid生成随机数作为token返给前端，存在redis里头的codeVerify对象（自己可命名，设置时效3分钟，可自己定），键为token（这串uuid加密的随机数），值为code的值
（2）前端登录/注册请求头带token请求接口，后台去redis里头的codeVerify校验code是否正确，若正确获取用户信息，存在redis里头的codeUserInfo对象（键token，值用户信息，设置时效3天，可自己定），以后每个接口请求头携带token。
