一、小程序部分

这是财务管理系统前端，江苏海洋大学微信小程序大赛，最终获得一等奖的GitHub:https://github.com/GeorgeLeoo/finance

1.项目描述

(1).这个项目是一个记账小程序(2)。它包括账单、图表、搜索、用户等几个子模块。(3).它使用微信小程序技术(4)。它以模块化、组件化和工程化模式开发。

2.项目功能界面

1.0.2版中删除了扇形图

3.项目目录

* pages:page * components:components * utils:工具类| - util.js:工具类| - wxcharts.js:图表插件* images:资源图片* config:配置文件* filter:filter * http:network request |-http . js:wx . request的封装|。

一开始是用wx.request对数据进行网络请求，但是写完之后发现太冗余太麻烦，就封装了。通过创建一个返回Promise对象的函数，可以屏蔽公共部分

//http/http.js/** *封装微信普通网络请求* @param url请求地址* @param数据请求参数* @param方法请求方法类型* @param headers标头信息，在这种情况下，令牌验证函数* @返回{ promiseunknown }返回请求的Promise对象*/函数http ({URL，数据，方法，标头={ }){返回新的Promise((解析，拒绝)={ wx.request({ url，方法，数据，标头： { Authorization:标头。if(RES . code===0){ resolve(RES . data)；} else if(RES . code===1){ reject(RES . msg)；}//hide loading wx . HideLoading()；}，fail :(err)={ console . error(' server error '，err)；} });})}/* * *封装文件上传接口* @param url请求地址* @param fileOptions文件配置项* @param数据请求数据* @param headers标头信息，在这种情况下，令牌身份验证函数* @返回{ Promiseunknown }返回请求的Promise对象*/函数uploadfile ({URL，文件选项，数据，标头={ }){返回新Promise(((解析，拒绝)={ wx.uploadFile({ url: url，文件路径3360 fileOptions.filePath，名称336)if (JSON.parse(res.data))。代码====0){ resolve(RES . data)；} else if(RES . code===1){ reject(RES . msg)；} }，fail :(err)={ console . error(' server error '，err)；} })}))module . exports={ http，uploadFile }；5.遇到的问题

(1)计费数据更新后，如何更新计费界面中的数据？我对这个问题的解决方案是在globalData中添加一个完整的变量isRefreshBills，默认为false。成功更新账单数据后，将isRefreshBills更改为true，返回账单界面。在票据接口的onShow()方法中，确定isrefreshbeals是否为真，如果为真，则重新请求数据，并将isrefreshbeals设置为假，否则不请求。这样，避免了多次请求数据而不更新数据。对于这个解决方案，有一个更节流的方法，就是更新后不请求，而是单独删除原始数据。比如数据更新成功后，获取更新数据的一个id，然后遍历在账单页面的onShow()方法中找到这个id对应的数据，删除这个数据，也可以达到数据更新的效果。(2)增加类别时，自定义类别会翻倍？由于我有一部分初始数据存储在全局数据中，所以每次从服务器获取自定义类别时，我都会拼接它，并在拼接过程中修改原始全局数据中的值，所以每次添加时，我都会请求自定义数据进行拼接。解决方案：不要更新全局数据(3)中的数据。返回哪个页面问题？在票据页面，可以进入修改票据页面，在搜索页面，也可以进入修改票据页面。它们使用相同的组件，那么如何保证进入修改票据页面后返回到票据页面，进入修改票据页面后返回到搜索页面。首先，在路由跳转时添加当前路由信息，然后在修改后的账单页面中接受该路由信息，最后通过该路由信息返回到原始路由

6.摘要

这个项目是我5月份参加学校微信小程序的那个。我在两周时间里匆匆做了这样一个项目，前后两端都有，最后获得了一等奖。其实之前的版本有很多bug和卡壳现象，所以这两天我维护了这个项目一段时间，发现原来的代码真的很可怕。现在升级后，页面的卡顿现象减少了。如果以后要维护的话，比之前的版本要容易维护很多，但是维护的空间还是很大的。其实我对这个项目不是很满意。比如之前没有做分页加载，现在想增加分页加载功能。我发现我的数据结构不是很合理。由于后端返回的数据与前端要显示的数据格式不一致，前端需要重新定义数据结构，因此分页比较困难。在我维护这个项目之后，代码比以前更简单，可读性更强。

第二，服务器部分

1.简要描述

这个项目是微信小程序记账app的后端代码，使用的是MongoDB Express。https://github.com/GeorgeLeoo/finance-server

这个项目的目录是这样的

Config:配置文件路由：路由配置实用程序：工具类db:操作代码数据库控制器：控制是当前地址。要不要token验证service:是如何调用操作数据库函数的(不知道为什么要写controller和service，但是觉得写这两个中的一个就可以了)2。遇到的问题

(1).令牌验证问题？

至于令牌验证，我使用了jsonwebtoken插件，所以我先用npm安装了这个插件。令牌验证过程大致如下：

使用此插件：定义两种方法，一种用于生成令牌，另一种用于验证令牌。

/* * *生成标记* @param {object} content为某个内容生成标记*/const access _ token=function(content){ let secret=' jizhangxitongfinancegeorgeeo '；//密钥在=math.round()中过期(新日期()。gettime()/1000))3600；//到期时间lettoken=jwt.sign (content，secret，{ expires in })；返回{ token，expire resin }；}/* * *验证标记* @param {string}标记标记值*/const check _ token=function(token){ let secret=' jizhangxitongfinancegeorgeeo '；//密钥，根生成的令牌应该一致。返回新的承诺((解决，拒绝)={jwt。verify (token，secret，(err，Decode)={if (err) {//时间过期或token是伪造的或token不存在拒绝({status : 10010，错误： ' invalid _ token ' })；} else { resolve()；} });})}在controller.js中，判断令牌验证是否成功

功能账单控制器(方法、选项、请求、RES){//验证令牌实用程序。check _ token(请求。标题。授权，res)。然后(()={//令牌验证成功。调用方法bill service[方法](选项)。然后((数据)={res.json(数据)；}).catch((err)={ RES . JSON(err)})；}).catch((err)={//令牌验证失败res.json(err) })}(2)。文件上传问题？

在这个项目中，有使用文件上传的功能，而express默认有这个功能，所以必须使用npm安装插件express-fileupload，然后在app.js中引入并注册这个插件

var file upload=require(' express-file upload ')；app . use(FileUpload())；前端发送文件时，后端从req.files['name']获取文件对象，然后通过file.mv()方法存储文件

file.mv(文件保存路径，函数(e){ if(e){//fail } else {//success } })；例如，在我的项目中，上传的图像代码被提取

//applet代码wx . upload file({ URL : ' http://localhost 33603000/users/avatar '、file path 3360 '