微信小程序項目總結-記賬小程序（包括後端）
- 2019 年 10 月 3 日
- 筆記
一、小程序部分
這是理財系統的前端,江蘇海洋大學微信小程序比賽，最後獲得了一等獎
GitHub：https://github.com/GeorgeLeoo/finance
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) => { wx.request({ url, method, data, header: { Authorization: headers.token, expiresIn: headers.expiresIn }, success: (result) => { const res = result.data; if (res.code === 0) { resolve(res.data); } else if (res.code === 1) { reject(res.msg); } // 隱藏 loading wx.hideLoading(); }, fail: (err) => { console.error('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: headers.token, expiresIn: headers.expiresIn }, formData: data, success: (res) => { console.log(res.data); if (JSON.parse(res.data).code === 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()方法中，判斷 isRefreshBills 是否為 true，若為 true 則重新請求數據，同時將 isRefreshBills 設為 false，否則不請求。這樣就避免了沒有更新數據的情況下多次請求數據。 對這個解法，還有一種更加節流的方法，就是更新後不去請求，而是對原來的獲取到的數據進行個別刪除。比如當 更新數據成功後，獲取一個被更新的這條數據的id，然後在賬單頁面的 onShow() 方法中，遍歷找到這個 id 對應的 數據，並刪除這條數據也能達到數據更新的效果 (2). 在進行類別添加的時候，自定義的類別會出現雙倍？ 由於我有一分部初始數據是存在 globalData 中的，每次從服務器獲取自定義類別時，都會對其進行拼接， 在拼接的時候修改了原來的 globalData 中的值，所以每次添加後都會請求一次自定義數據，進行拼接。 解決方案：禁止更新 globalData 中的數據 (3). 返回哪個頁面問題？ 在賬單頁面可以進去修改賬單的頁面，在搜索頁面也可以進入修改賬單賬單的頁面，他們用的是同一個組件， 那麼如何保證在賬單頁面進入修改賬單頁面後返回到賬單頁面，在搜索頁面進入修改賬單頁面後返回到搜索頁面。 首先在路由跳轉的時候添加當前路由信息，然後在修改賬單頁面中接受這個路由信息，最後通過這個路由信息返回到原來的路由 6. 總結
這個項目是我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. 總結
當初選用 Express + MongoDB 的唯一原因就是開發快，因為基本上每天都滿課，所以快速開發是我的需要。 在這個項目中其實還有很多可以優化的地方，還有一定的冗餘，比如在操作數據的時候，所有的查詢成功或失敗的函數 都可以存放到一個公共類裏面，而不是每一對應的文件里都有一個這個方法。Github:
小程序：https://github.com/GeorgeLeoo/finance
服務器：https://github.com/GeorgeLeoo/finance-server
