⼩程序项⽬总结之记账⼩程序功能的实现（包括后
端）
⼀、⼩程序部分
1. 项⽬描述
(1). 此项⽬为记账⼩程序
(2). 包括账单、图表、搜索、⽤户等多个⼦模块
(3). 使⽤⼩程序技术
(4). 采⽤模块化、组件化、⼯程化等模式开发
2. 项⽬功能界⾯
在 1.0.2版本中删除了扇形图
3. 项⽬⽬录
* pages：页⾯
* components：组件
* utils：⼯具类
|-- util.js：⼯具类
|-- wxcharts.js：图表插件
* images：资源图⽚
* config：配置⽂件
* filter：过滤器
* http：⽹络请求
|-- http.js：对 wx.request 的封装
|-- api.js：对⽹络请求接⼝的封装
4. 请求封装
⼀开始使⽤ wx.request 对数据进⾏⽹络请求，可写完后，发现太过冗余，也太⿇烦，故对其做了封装。通过创建⼀个函数返回 Promise 对象，就可以屏蔽公共的部分
// http/http.js
/**
* 对普通⽹络请求封装
* @param url  请求地址
* @param data 请求的参数
* @param method  请求的⽅法类型
* @param headers  头部信息，在这⾥主要是 token 认证功能
* @returns {Promise<unknown>} 返回请求的 Promise 对象
*/
function http({url, data, method, headers = {}}) {
return new Promise((resolve, reject) => {
url,
method,
data,
header: {
Authorization: ken,
expiresIn: piresIn
},
success: (result) => {
const res = result.data;
if (de === 0) {
resolve(res.data);
} else if (de === 1) {
reject(res.msg);
}
// 隐藏 loading
wx.hideLoading();
},
fail: (err) => {
<('server error', err);
}
});
})
}
/**
* 对⽂件上传接⼝封装
* @param url  请求地址
* @param fileOptions  ⽂件配置项
* @param data 请求发送的数据
* @param headers  头部信息，在这⾥主要是 token 认证功能
* @returns {Promise<unknown>} 返回请求的 Promise 对象
*/
function uploadFile({url, fileOptions, data, headers = {}}) {
return new Promise(((resolve, reject) => {
wx.uploadFile({
url: url,
filePath: fileOptions.filePath,
name: fileOptions.name || 'file',
header: {
Authorization: ken,
expiresIn: piresIn
},
formData: data,
success: (res) => {
console.log(res.data);
if (JSON.parse(res.data).code === 0) {
resolve(res.data);
} else if (de === 1) {
reject(res.msg);
}
},
fail: (err) => {
<('server error', err);
}
})
}))
}
http,
uploadFile
};
5. 遇到的问题
(1). 在更新账单数据后，如何更新账单界⾯的数据？
这个问题我的解决⽅案是，在 globalData 中添加⼀个全部变量 isRefreshBills，默认为 false，
当更新账单数据成功后，将 isRefreshBills 修改为 true，同时返回到账单界⾯，在账单界⾯的    onShow()⽅法中，判断 isRefreshBills 是否为 true，若为 true 则重新请求数据，同时将 isRefreshBills 设为 false，否则不请求。这样就避免了没有更新数据的情况下多次请求数据。
对这个解法，还有⼀种更加节流的⽅法，就是更新后不去请求，⽽是对原来的获取到的数据进⾏个别删除。⽐如当
更新数据成功后，获取⼀个被更新的这条数据的id，然后在账单页⾯的 onShow() ⽅法中，遍历到这个 id 对
应的
数据，并删除这条数据也能达到数据更新的效果
(2). 在进⾏类别添加的时候，⾃定义的类别会出现双倍？
由于我有⼀分部初始数据是存在 globalData 中的，每次从服务器获取⾃定义类别时，都会对其进⾏拼接，
在拼接的时候修改了原来的 globalData 中的值，所以每次添加后都会请求⼀次⾃定义数据，进⾏拼接。
解决⽅案：禁⽌更新 globalData 中的数据
(3). 返回哪个页⾯问题？
在账单页⾯可以进去修改账单的页⾯，在搜索页⾯也可以进⼊修改账单账单的页⾯，他们⽤的是同⼀个组件，那么如何保证在账单页⾯进⼊修改账单页⾯后返回到账单页⾯，在搜索页⾯进⼊修改账单页⾯后返回到搜索页⾯。
⾸先在路由跳转的时候添加当前路由信息，然后在修改账单页⾯中接受这个路由信息，最后通过这个路由信息返回到原来的路由
6. 总结
这个项⽬是我5⽉份参加学校⼩程序的项⽬，两个礼拜仓促的做了这么⼀个项⽬，前后端都有，最后荣获⼀等奖。
写文章的小程序
在之前⽐赛⽤的版本中其实有很多的 bug 以及卡顿现象居多，故这两天我有对这个项⽬进⾏了⼀定的维护，发现原来的代码实在
惨不忍睹，现在经过升级，页⾯卡顿现象减少，若后期再想维护，也相对于之前的版本好维护多了，但是还有很多可以维护的空间。
其实我并不对这个项⽬很满意，⽐如之前我没做分页加载，现在想加个分页加载的功能，我发现并不是⼀下⼦就能搞定的，
因为我的数据结构不是很合理，因为后端返回的数据和前端要显⽰的数据格式是不⼀致，故前端要重新定义数据结构，
所以对分页来说就有⼀定的困难。在我对项⽬进⾏维护后，代码⽐以前更简洁，可读性相对于之前的版本来说要更加好。
⼆、服务器部分
1.简述
这个项⽬的⽬录是这样的
config: 配置⽂件
routes: 路由配置
utils: ⼯具类
db: 操作数据库的代码
controller: 控制是当前地址否要 token 验证
service: 如何调⽤操作数据库函数（我也不知道为什么要写controller，service，感觉这两个写⼀个就可以了）2.遇到的问题
(1). token 验证问题？
关于 token 验证问题我使⽤了 jsonwebtoken 插件，故先⽤ npm 安装这个插件。
token 验证流程⼤概如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。