2021 微信小程序 实训报告

一、项目背景

小程序,一句话说,就是所见即所得。微信的负责人张小龙给出了更全面的定义:“小程序是一种不需要下载安装即可使 用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。对于开发者而言,小程序开发门槛相对较低,难度不及APP,能够满足简单的基础应用,适合生活服务类线下商铺以及非刚需低频应用的转换。”

作为计算机专业学生,学习并掌握微信小程序相关知识更是不可或缺的技能。此次实训的目的也是为了加深对微信小程序以及SpringBoot的理解,并在掌握相关理论知识后,运用SpringBoot作为后端WebAPI以及微信小程序作为前端展示制作一些小项目。

我们团队在实训中注重对理论知识的运用,在实训中注重对理论知识的运用,在讲师讲解的内容的基础上,进一步加深难度,设计了两个小项目,分别是以内容分析为目的的记乎微信小程序,以及配套后台管理系统。

我们开发的一款内容分享微信小程序,借助微信拥有跨平台能力,能在Android、IOS、Windows、macOS使用,无论何时何地记乎小程序都能帮助你随时分享身边感动,拍摄照片,录制语音记录,同时强大的推荐能力,让你与远在天涯的知己分享交流。

二、需求分析

(一)业务描述

本次项目实现的是PC网页端的管理后台与记乎微信小程序。PC网页端主要使用了Layui作为前端UI框架,SpringBoot作为后端支持,Thymeleaf作为模板引擎连接前后端。微信小程序实现的功能有文章的发布、评论的发布,微信静默登录等。

(二) 需求分析

1. 功能需求

本次实训项目为微信小程序和后台管理系统。 微信小程序:

  • 增长见识:发现趣味相投的人和新奇的故事;

  • 收获乐趣:关注、收藏、分享感兴趣的内容;

  • 记录生活:创建言集,分享故事与经历;

  • 参与活动:各种平台活动。

管理后台:

  • 文章管理
  • 评论管理
  • 用户管理
  • 管理员登录。

2. 接口需求

本次实训项目所涉及到的接口主要为界面。微信小程序的界面要求简洁大气,风格统一,界面美观,页面效果明显。

3. 性能需求

在微信小程序主界面中,要求能实现文章的下拉刷新,上拉加载,而这些过程都要求响应时间不能过长,并且用户体验好,应伴随动画效果。在微信小程序个人界面,需要能够无感静默微信登陆,并获取用户信息,且注册到后台,

4. 资源需求

本次项目所涉及到的资源主要分硬件资源、软件资源、素材资源三类。硬件资源即为我们实训期间所使用的电脑,软件资源即WebStorm、Chrome,素材资源主要为我们项目实现过程中所使用的图片。

三、概要设计

1. 引言

记乎作为一款类贴吧微信小程序,旨在为用户提供一个以兴趣为主题的交流分享之地。

2. 系统架构

2.1 系统技术原则

前端:

  1. 微信小程序:HTML5 + CSS3 + JavaScript

  2. 后台管理系统:layui

后端:

  1. SpringBoot + Mybatis + Thymeleaf + MySQL
  2. Maven项目管理必备技术
  3. API风格:Restful + Semantic WebAPI

兼容性:

​ 页面兼容Chrome 26.0+、Firefox (Gecko) 16.0+、Opera 12.10+、Safari (WebKit) 3.2+ 浏览器和Internet Explorer 8浏览器。

设计原则:

  1. 在设计上,对于用色、字体、图标、间距必须是严谨的。
  2. 弱化不必要的颜色,减少视觉干扰让用户更容易聚集于内容。
  3. 降低用户学习成本,简化操作流程,提升交互易用性。

2.2 项目架构

图:项目架构示意图

图:用户中心模块数据流程示意图

图:系统架构设计图

2.3 架构说明

1.架构分三层,从上向下依次为UI层、业务层、数据层 UI层:UI层采用MVC架构 组件层:对业务模块的封装;包含:业务模块与业务数据(对业务数据的封装,统一管控) 数据层:操作数据库; 2.层级之间单向依赖(上层依赖下层),拒绝跨层访问。(实现层与层隔离); 3.层级之间使用接口通信; 4.业务层内各模块之间通信基于消息总线、路由总线。(实现模块内隔离) 5.业务层内各模块内部分别定义自己的消息代理、路由代理,实现内部、外部的消息通信处理。 6.业务层子模块内部职责划分: M(Model数据,Manager业务逻辑), V(View,展示与视图逻辑处理), C(Controller调度M层,加载V层,刷新View层), 消息代理(模块间消息交互代理,每个模块一个) 路由代理(模块间路由交互代理,每个模块一个) 7..消息总线 负责APP业务层内部(包括业务模块和业务数据)模块间通信; 8..路由总线 负责APP业务模块层路由跳转;

3. 系统设计

3.1 微信登录 时序图

图:微信小程序-微信登录-时序图

四、详细设计

1. 各模块设计

1.1 微信登录

当用户点击头像进入微信授权登录时,应调用 wx.login(),执行微信授权,wx.login()是静默的,无需用户同意,而我们不仅需要用户在微信的唯一标识,我们还需要用户个人信息,于是调用 wx.getUserInfo(),此项需要用户授权获取个人信息,首先当wx.login返回信息时,将信息发送到后端,后端接收效验信息,再向微信服务发起请求,只有微信服务返回的用户签名信息才可信,利用微信唯一标识,由于事先已经在数据库用户表中设计微信用户相关字段,所以可利用其进行检索,若无此微信用户,说明是新用户,直接添加此用户,分配默认随机密码,这也是大多数微信小程序的做法,无需用户注册,不影响用户体验,然后利用微信用户签名生成token,存储于数据库,再返回给前端(微信小程序),微信小程序存储token,之后请求API资源都将携带token(将token放入 Authorization HTTP Header),注册登录用户后还需要更新用户信息,如果用户是新通过微信注册到本APP,那么将wx.getUserInfo()获取到的用户信息(昵称,头像等)发送到后端作为昵称,头像,该请求也需要携带token,自签token将作为本微信小程序用户唯一身份凭证。

1.2 文章

用户可以通过文章发表分享身边的新鲜事,记录每天的感动,当发表成功时,通过wx.toast()给出发表成功,并在2秒后返回上一页,发表成功后,需要在文章显示页更新列表,由于微信小程序缓存机制,所以这并不会触发onLoad(),于是更新文章列表的操作放在了onShow()确保在每次页面渲染时都更新文章列表。微信小程序首页文章展示页面,下拉刷新,上拉加载,通过标识当前页码实现,每页默认10条数据,通过改变页面实现加载新页数据。管理员可以通过后台管理系统审核文章,删除标记非法敏感文章,冻结违规用户,以达到维护社区作用。

1.3 评论

用户可以通过对文章评论发表自己的看法,分享自己的见解,评论可嵌套。后台删除文章时,也将一并删除相关评论,发布评论时,后端会返回新评论ID,用于之后直接在前端标识此评论,管理员可以通过后台管理系统删除非法敏感评论达到维护作用,反复违规用户可以选择禁言此用户,或者屏蔽此用户IP。

五、实训总结

在本次实训期间,主要学习了SpringBoot与Mybatis, Maven等的使用,以及模板引擎Thymeleaf的语法,微信小程序常用语法,对于前后端开发有了进一步的认识,对接口测试使用了Postman,并且为了方便小组测试,使用了内网穿透技术进行项目测试,编码过程中严格遵守规范,为避免不必要的重复代码进行了许多封装。在微信小程序中,使用 Promise封装了request,并且将API封装为一层,结构与后端controller一致,使得后期更易维护。

在本次实训过程中,我意识到经验的重要性,没做过项目导致缺少实战经验,总是容易处处碰壁,有时只是一个很小的问题都要弄很久才解决,很多小技巧也不知道,效验测试方法也没有,扩展更无从谈起,但在做项目的过程中慢慢也就学会了,所以说实战对于计算机专业来说非常重要而不是停留在书本,项目做得少,也就无法将学到的知识灵活应用,效率也就低下,而这种状态往往容易让人想要放弃,但还好我坚持了下来,没有让一切白白浪费,我相信坚持下去,随着经验的累积,效率自然会提高,

本次实训,学习了SpringBoot在IDEA下配置热部署,这正是一个很棒的方法,不再需要每次重启服务了,尽管它看起来更像是重新编译,算不上热部署;在SpringBoot中controller接收前端传过来的请求数据有很多种方法,它们大多通过注解来标记数据类型,这也是AOP的体现,面向切面编程的体现,项目架构更是采用了了三层,数据访问层,业务服务层,UI展示层,而UI展示层则是典型的MVC,当然对于微信小程序就仅仅是controller了,在项目中使用了Restful风格WebAPI,部分使用了Semantic风格WebAPI(例如登录操作),充分利用了路由path特性,为了后期排错的方便启用了SQL日志,还学习了Mybatis的动态SQL,对IDEA的常见配置也有了认识,更加深刻的体会到了MVC模式的快捷易理解与容易维护,配合Thymeleaf,将数据传到view层,交给模板引擎渲染解析。

总的来说,本次实训收获很大,对于Java Web开发有了进一步的认识,发现各类Web框架大同小异,只要掌握一种再学习其他就能很快入门,差别只是在于各类语言在具体实现上有些许差异,我认为学习Web框架不仅仅是要会使用,更要懂其原理,知其然更要知其所以然!在实训的过程中,我积极写笔记,借助笔记梳理课上所学知识,内化知识为自己所有才算真正学到,在之后的学习中,我也要继续保持学习状态,只有继续学习才能逐渐掌握知识。


Q&A

补充

小组项目答辩答疑表

课程答辩记录
教师主要
提问记录
1. 数据大于两百万 怎么处理?
2. SpringBoot和Mybatis是怎么整合的?
3. 数据分页?
学生回答
问题情况
1. 应尽量避免在where子句中使用 != 或 <>操作符,否则引擎将放弃使用索引而进行全表扫描;对查询进行优化,应尽量避免全表扫描,首先应考虑在where及order by 涉及的列上建立索引;应尽量避免在where子句中对字段进行null值判断,否则将导致引擎放弃使用索引而进行全表扫描;当贵公司业务与盈利水平符合时,可使用HBase等分布式技术代替原有数据库。
2. dao层属于数据访问层,与Mybatis 的xml文件相互映射,实现SQL语句的功能,在application.properities中配置了数据库链接
3. 根据页码取固定页的数据,通过构造SQL,在MySQL中通过 limit pageSize 限制条数,offset偏移取(page-1)*pageSize

参考