崔旭，黑大任，康嘉，张晓贤

摘要：随着手机、平板电脑等电子产品的不断发展及其在青少年中的广泛使用，青少年越来越难以养成健康的生活作息。为了让更多的青少年形成健康的生活习惯，使用 Vue.js技术构建了一个稳定的、用户体验友好的微信小程序。该小程序采用运行在 Docker 容器中的 NodeJS 来提供 Restful风格 API，美观易用，能够很好地帮助用户循序渐进地养成良好的生活习惯。

关键词： Vue.js;微信小程序; NodeJS;习惯养成

中图分类号：TP311        文献标识码：A

文章编号：1009-3044（2021）34-0091-02

当前，很多大学生经常熬夜、缺乏理财意识，导致生活无规律、肆意透支资产等问题。“日广习惯”App针对上述问题并结合大学生学习生活实际，使用游戏化的方式，为用户提供全面的、趣味的习惯养成功能，帮助大学生养成良好的生活作息习惯，并获得较好的理财能力。

1 系统设计

1.1 功能设计

本系统为大学生规划了规律作息、运动、阅读、理财等习惯，并把各种习惯分成不同的阶段， 每一个阶段对应一个章节， 各个章节之间彼此依赖。

第一章：决心。帮助用户养成良好的作息习惯，使用户在工作时间保持头脑清醒， 提高工作效率。

第二章：蝶蛹。借助运动， 冥想等帮助用户进一步提高工作效率。跑步可以改善用户的注意力， 优化大脑的运行机制;而冥想可以帮助用户形成良好的思维习惯。

第三章：化茧。解锁自定义习惯， 允许用户设置自己需要的习惯.

第四章：成蝶。为用户设计了在社会生活中的一些必备技能， 比如记账、储蓄等， 帮助用户形成社会思维。

前面两章为后面的习惯养成提供了实现的基础。另外相关的章节也会不断地进行更新。

1.2 界面设计

针对大学生这样较为年轻的群体， 文章根据 material design 规范设计了一套较为美观的现代交互界面。设计原型如图1所示。

2 技术实现

2.1 前端技术实现

1）前端整体设计

前端采用 mpvue 框架， mpvue 基于 Vue.js， 由美团团队进行开发并开源。借助 Vue.js， 可以较好地应用 MVVM 客户端架构将数据和逻辑从交互层中分离出来， 项目同时对用户界面元素进行组件化处理。

2） 组件规划

借助 mpvue 对 Vue.js 原生语法的支持， 项目得以在小程序中通过 Vue 语法实现组件化， 提高代码复用的能力， 同时由于 Vue 组件之间彼此隔离， 也更加方便进行 Debug。

小程序主体由三个页面组成， 分别是：今日、目标、我&朋友。根据这三个页面设计了一系列组件。

3）集中式状态管理

为了更好地实现组件之间的数据交换，使用 vuex 来进行前端组件之间的状态管理。通过 vuex 可以让组件之间在传统的事件/Props方式传递数据之外， 使用集中式存储前端中所有组件的状态。vuex 把所有的数据放在一处， 方便所有组件进行访问， 解决了同级组件以及多层组件之间的信息传递问题。

4）前后端通讯

前端使用 Axios 库与后端进行通讯，可以在前端和后端提供更加统一的代码风格。 由小程序请求后端服务器以及由服务器请求微信开放接口， 都可以使用同一套方案进行实现， 大大降低了维护成本。

5）微信原生接口

系统使用微信原生 API，实现微信好友直接分享、微信登录以及数据离线存储等功能。

小程序在登录时会调用 wx.setStorageSync 来将数据进行同步写入到缓存，将用户 token 存储在本地。 每次在小程序运行时就会使用 wx.getStorageSync尝试读取， 之后与服务器进行通讯;使用微信缓存读写接口， 对当日的习惯养成状态进行存储， 加快加载速度， 同时减少对服务器的请求， 减少服务器的压力。小程序内置分享功能， 点击“分享”按钮， 小程序将会调用 wx.shareAppMessage， 拉起微信原生通讯录界面， 实现小程序转发。

6） ES6 代码翻译

由于微信小程序对于 ECMAScript 262 标准的 JS 代码支持欠佳， 为了保证使用 ES6 书写的代码能够正常在小程序运行环境中执行， 我们要使用 Babel 来将 ES6 代码翻译成 ES5 标准。

7） 前端代码编译和压缩

为了使针对 web 环境设计的 Vue.js 程序能够运行在微信小程序的运行环境中， 前端项目使用 Webpack 对项目源码进行进一步的优化和翻译。

2.2 后端技术实现

后端整体采用 Linux + Nginx + MongoDB + Express 的类 MEAN 技术栈， 并且大量应用容器技术，支持动态部署。

1） API 设计与实现

API 使用 Express 实现。 Express 是一套基于 NodeJS 实现的轻量级 Web App 开发框架， 可用于构建高性能的后端 API。系统使用 MongoDB 作为主数据库进行数据存储，使用 Mongoose 来设定 Schema， 之后进行存储， 分成 章节信息、 用户日记、 用户好友、 章节内容、用户信息等。

2） API 保护和数据验证

为了防止类似注入这类的攻击， 程序使用多重方式对从 API 传来的数据进行验证。在前端使用 Validator 来对用户输入的数据的长度和类型进行规定;在后端从接口收到数据之后， 后端会首先调用 JOI， 对数据的格式进行验证， 不合规范的数据将被丢弃， 并且由接口返回错误;在 JOI 校验之后， 数据在被数据库存储之前， 还会使用 mongoose 内置的校验器对数据进行校验， 不合规范的数据将不会被存储;前后端之间通讯的数据使用 HTTPS 进行传输， 防止服务端和小程序之间的通讯被第三方非法获取。

3） 用戶验证

系统使用 JWT 和 Bcrypt 对 API 进行用户验证和保护。

Bcrypt 用于密码存储。Bcrypt 满足了 MD5 和 salt 的所有优点， 并且可以实现每一条记录都有单独的 salt， 同时 Bcrypt 计算比 MD5 慢几百倍，且支持多轮加密。黑客即使获取了整个数据库，也无法使用字典进行暴力匹配。

项目使用 JWT 来保持用户的登录状态，相比传统的 session 方式，使用 JWT 来进行用户认证可以无需在前后端同时存储 session ID，减少服务器压力。token 被存放在微信小程序缓存中，也可以防止被恶意获取，进行 CSRF 攻击。

小程序支持使用两种方式进行登录：微信账号登录，账号密码登录。

4） 部署和 Logger

为了便于进行运维，使用 Docker 来对项目进行部署， 同时使用 Swarm 来进行集群管理。将后端的 Nginx， Nodejs环境以及 MongoDB 数据库进行了容器化部署。在 NodeJS 容器中为了方便管理和记录日志，使用 PM2 进行部署。

3 结束语

本系统采用Vue.js 和 NodeJS 等技术，使用游戏化的方式设计并实现了帮助用户养成良好生活习惯的App。本系统具有易用性和稳定性， 为用户带来良好体验。

参考文献：

[1] 金峰.基于微信小程序的家用物联网系统开发[D].杭州：浙江大学，2019.

[2] 王璐，崔保磊，潘红霞，等.基于Vue.js的在线设计开放平台研究与实现[J].信息技术与信息化，2019（11）：168-170.

【通联编辑：代影】