寄语：前端开发也需要了解后端嘛？答案是肯定的，了解后端的数据的存储，模块划分、以及接口设计对于我们前端开发也是非常有好处的。
先上一张效果图
server端
1. 数据库 mysql, redis
考虑到session访问比较频繁，以及后续判断用户登录状态。采用内存缓存数据库redis,加快访问速度。封装redis操作：
const redis = require("redis");
const { REDIS_CONF } = require("../conf/db");
const redisClient = redis.createClient(REDIS_CONF.port, REDIS_CONF.host);
redisClient.on("error", err => {
console.log("err", err);
});
const set = (key, value) => {
if (typeof value === "object") {
value = JSON.stringify(value);
}
redisClient.set(key, value, redis.print);
};
const get = key => {
return new Promise((resolve, reject) => {
redisClient.get(key, (err, value) => {
if (err) {
reject(err);
return;
}
if (value == null) {
resolve(null);
return;
}
try {
resolve(JSON.parse(value));
} catch {
resolve(value);
}
});
});
};
module.exports = {
get,
set
};
mysql可以用来存储一些大数据量数据。封装mysql操作：
const mysql = require('mysql')
const { MYSQL_CONF } = require('../conf/db')
const con = mysql.createConnection(MYSQL_CONF)
con.connect()
const exec = sql => {
return new Promise((resolve, reject) => {
con.query(sql, (err, result) => {
if (err) {
reject(err)
return
}
resolve(result)
})
})
}
module.exports = {
exec
}
2. 接口、路由设计
将请求头中的cookie解析成key,value,存储到req.cookie. 用户首次登录判断cookie中是否存在userId(判断用户标识字段)。没有则给响应头cookie中设置一个userId
将get请求的参数封装成key,value.存储到request.query
将post接口参数是存储到request.body
请求url路径判断，分别做对应的接口路由处理。每次处理前需要判断userId是否在有效的登录期内。 eg:
if (method === "POST" && req.path === "/api/blob/new") {
const loginCheckResult = loginCheck(req);
if (loginCheckResult) {
return loginCheckResult;
}
req.body.author = req.session.username;
const result = newBlob(req.body);
return result.then(data => new SuccessModel(data));
}
3. controller
拿到从路由传过来的请求参数，拼接对应的sql语句， 并返回结果
const newBlob = (blobData = {}) => {
const { title, content, author, createTime = Date.now() } = blobData;
const sql = `insert into blogs (title, content, createTime, author)
values('${title}', '${content}', ${createTime}, '${author}')
`;
return exec(sql).then(insertData => insertData.insertId);
};
客户端
特别提醒： 前端服务，和后端服务在不同端口，因此有浏览器跨域限制，可以在umi中配置代理服务器eg:
proxy: {
'/api': {
target: 'http://localhost:9000',
changeOrigin: true
}
}
至此，整个项目前后端联调完成
未完待续， todo-next:
- 密码加密
- server端日志
