这个项目是我5月份参加学校微信小程序的项目，两个礼拜仓促的做了这么一个项目，前后端都有，最后荣获一等奖。
在之前比赛用的版本中其实有很多的 bug 以及卡顿现象居多，故这两天我有对这个项目进行了一定的维护，发现原来的代码实在
惨不忍睹，现在经过升级，页面卡顿现象减少，若后期再想维护，也相对于之前的版本好维护多了，但是还有很多可以维护的空间。
其实我并不对这个项目很满意，比如之前我没做分页加载， 现在想加个分页加载的功能，我发现并不是一下子就能搞定的，
因为我的数据结构不是很合理，因为后端返回的数据和前端要显示的数据格式是不一致，故前端要重新定义数据结构，
所以对分页来说就有一定的困难。在我对项目进行维护后，代码比以前更简洁，可读性相对于之前的版本来说要更加好。
二、服务器部分
1.简述
这个项目是微信小程序记账 app 的后端代码，使用技术：MongoDB+Express。
GitHub：https://github.com/GeorgeLeoo/finance-server
这个项目的目录是这样的
config: 配置文件
routes: 路由配置
utils: 工具类
db: 操作数据库的代码
controller: 控制是当前地址否要 token 验证
service: 如何调用操作数据库函数（我也不知道为什么要写controller，service，感觉这两个写一个就可以了）
2.遇到的问题
(1). token 验证问题？
关于 token 验证问题我使用了 jsonwebtoken 插件，故先用 npm 安装这个插件。
token 验证流程大概如下图：
使用这个插件: 定义两个方法，一个用来生成 token，另一个用来验证 token。
/** * 生成token * @param {object} content 对某个内容生成 token */ const access_token=function (content) { let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘钥 let expiresIn = Math.round((new Date().getTime()/1000)) + 3600; // 过期时间 let token = jwt.sign(content, secret, { expiresIn }); return { token, expiresIn }; } /** * 验证token * @param {string} token token值 */ const check_token= function (token) { let secret = 'jizhangxitongfinancegeorgeleeo'; // 秘钥，根生成的 token 要一致 return new Promise((resolve, reject) => { jwt.verify(token, secret, (err, decode) => { if (err) { //时间失效或伪造 token 或 token 不存在 reject({ status: 10010, error: 'invalid_token' }); } else { resolve(); } }); }) }
在controller.js 中，去判断 token 验证成功与否
function billController(method, options, req, res) { // 验证 token utils.check_token(req.headers.authorization, res).then(() => { // token验证成功，调用操作数据库的方法 billService[method](options).then((data) => { res.json(data); }).catch((err) => { res.json(err) }); }).catch((err) => { // token 验证失败 res.json(err) }) }
(2). 文件上传问题？
在这个项目中，有使用文件上传的功能，express 默认是带这个功能的，所以就必须使用 npm
安装 express-fileupload 这个插件，然后再 app.js 中引入并注册这个插件
var fileUpload = require('express-fileupload'); app.use(fileUpload());
当前端发送文件时，后端从 req.files['name']获取 file 对象，然后通过 file.mv()方法进行文件存储
file.mv(fileSavePath, function (e) { if (e) { // 失败时 } else { // 成功时 } });
比如我的项目中，上传图片代码抽取出来就是
// 小程序代码 wx.uploadFile({ url: 'http://localhost:3000/users/avatar', filePath: 'XXXXXXX', name: 'avatar', header: { Authorization: headers.token, expiresIn: headers.expiresIn }, formData: data, success: (res) => {}, fail: (err) => {} }); // 服务器代码 let file = req.files.avatar file.mv('upload/a.png', function (e) { if (e) { // 失败时 } else { // 成功时 } });
(3). 关于前端读取upload中图片的问题
本来想用服务器的 ip 来读取项目中 upload 中的图片，但是发现并不能读取，或显示404，故最后将 upload 文件放在了项目的外边，
然后对这个 upload 文件单独开了一个服务，把他当做图片服务器来使用。
3. 总结