文章管理系统微信小程序ssm+论文源码调试讲解
第2章 关键技术简介
2.1 微信小程序
微信小程序，简称小程序，英文名Mini Program，是一种全新的连接用户与服务的方式，可以快速访问、快速传播，并具有良好的使用体验[12]。
小程序的主要开发语言是JavaScript，它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西，是有差异的。网页开发的渲染线程和脚本线程是互斥的，而在小程序中，确实分开的，分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API，进行DOM选中和操作，但小程序不行，它并没有一个完整的浏览器对象，因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外，网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器，，而小程序只，只需面对iOS和Android这两道操作系统下的微信就足够了。
小程序和传统的APP相比，有着开发成本更低，获客成本更低，开发周期更短，发展空间更大等的优点。不过，为了体现“用完即走”、“无需安装”等理念，小程序的功能、性能还有大小都受到了制约，可以说是各有利弊。
2.2 微信开发者工具
为了能够让微信小程序的开发人员有根家优秀的开发环境，腾讯在原有的公众号网页调试工具的基础上，推出了全新的微信web开发者工具。
微信web开发者工具具备编辑、调试、项目、编译、关闭、后台和缓存这七个选项卡，让开发者能够更方便的进行开发和调试，节省开发所耗费的时间。
2.3微信小程序API接口
微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档，里面包含了各种需要使用的接口技术[7]，例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等，总的来说，小程序API是满足一个程序开发的大部分接口。
2.4 WXML 、WXS、JS小程序编写语言
WXML全称是 WeiXin Markup Language，是微信标记语言，是微信小程序的标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。类似于HTML语言，但是他自身也拥有一定的特色。
WXSS(WeiXin Style Sheets)是微信样式表，是微信小程序用于修饰标签语言的样式文件，WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS对CSS语言进行修改和扩充，引入全新尺寸单位rpx，但大体语法于CSS语言不分离。
JS是 JavaScript[4]语言的简称，微信小程序里面也可以叫做WXS，是一门脚本语言，通俗易懂，用于页面交互的语言。
2.5 MYSQL数据库
MySQL 是关系型数据库管理系统的代表，它是属于 Oracle 旗下产品，使用C语言和C++语言编写的，使用了多种技术，由于它体积小，易使用，成本低，灵活性[2]，该数据库在中小企业比较受欢迎。MySQL的灵活性体现在非常多方面，可是适应高要求的环境，通过不同配置适应各种硬件，同时支持各种不同的数据。因为MySQL是其免费开源的，而且MySQL的功能已经足够用对于学习和中小型企业来讲，所以开发中小型网站都会选择MySQL作为网站的数据库。[5]
第3章 系统分析
3.1 可行性分析
需要使用大部分精力开发的基于微信小程序的文章管理系统为了充分降低开发风险，特意在开发之前进行可行性分析这个验证系统开发是否可行的步骤。本文就会从技术角度，经济角度，还有操作角度等进行综合阐述。
3.1.1技术可行性
本文章管理系统采用Java技术，基于微信小程序，采用MYSQL数据库进行开发的。
（1）Java提供了稳定的性能、优秀的升级性、更快速的开发、更简便的管理、全新的语言以及服务。整个系统帮用户做了大部分不重要的琐碎的工作。
（2）基于微信小程序的系统的开发已发展日趋成熟。
（3）作为计算机专业的学生，对数据库比较熟悉，掌握了MYSQL数据库，建立这样一个系统应该在能力范围之内
综上所述：基于微信小程序的文章管理系统的开发技术具有很高可行性。
3.1.2 经济可行性
该系统的开发工具使用的都是免费的开发工具，且内容较为简单，一台计算机便可以开发出这个系统，且后期的维护，修改等对本系统的改动，都可以只通过一台计算机实现，因此开发该系统的成本在有计算机的情况下基本为0，所以本系统在经济上是可行的。
3.1.3 操作可行性
本系统操作页面简洁明了，操作极其容易，用户登陆后一眼便可看到自己所需要的信息，而管理员的操作也十分轻松便捷，只要操作人员具有一定的文字水平以及简单的逻辑思维，就可以轻松操作本系统，因此本系统在操作上是可行的。
3.1.4时间可行性
从2020年11月份我们在学校就没有课程了，同学们大部分选择找工作实习了，我也是在其中。一边找工作的同时，一边忙着完成毕业设计工作。对于我本人来讲，目前的情况是白天我要上班参加实习工作，只有晚上我才有时间完成论文编写工作。论文答辩是在2021年5月份左右，将近半年时间来完成毕业设计，时间上还是很充分。
综上可以看出，本基于微信小程序的文章管理系统的开发在技术、经济、操作以及时间四个方面都具有很高的可行性，开发本程序可行。
3.2 系统性能分析
随着互联网的发展，微信小程序越来越完善，现在的生活中充斥着微信小程序，由于小程序方便快捷，基于微信这个大平台，小程序发展是高速的，吃饭可以通过小程序点餐，出去玩可以用小程序打车，因此文章管理也可以使用小程序。系统性能需求如下：
（1）软件功能清晰明了，尽量多用列表的展示简化用户操作，提升使用者体验，减少下拉菜单这种降低体验的操作。
（2）软件的功能要尽量完整，也要全面。
（3）经常的在以后版本更新完善软件，使得软件保持一个新鲜度，也可以做一些活动来促进用户使用软件。
（4）减少软件使用过程中出错，做好优化，遵循开发逻辑，降低bug的产生率以提升用户体验。
3.3 系统功能分析
本基于微信小程序的文章管理系统满足了不同用户的功能需求，包括用户、作者以及管理员，下面对这不同用户的功能需求进行简介。
（1）管理员功能分析
管理员可进行后台进行管理，包含个人中心、用户管理、作者管理、文章管理、文章分类管理、论坛以及系统管理。
管理员用例图如图3.1所示。
图 3.1 管理员用例图
（2）作者功能分析
作者注册登录后主要功能模块包括首页、文章、论坛以及我的（文章、我的收藏管理、客服、我要发帖、我的发帖）。
作者用例图如图3.2所示。
图 3.2 作者用例图
（3）用户功能分析
没有账号的用户可进行注册操作，注册登录后主要功能模块包括首页、文章、论坛以及我的（文章、我的收藏管理、客服、我要发帖、我的发帖）。
用户用例图如图3.3所示。
图 3.3 用户用例图
3.4 系统流程分析
3.4.1注册登录流程
没有账号的作者和用户均可进行注册，注册后可进行登录系统，注册登录流程图如图3.4所示。
图3.4注册登录流程图
3.4.2添加信息流程
管理员、用户以及作者均可添加信息，下面是添加信息的时候的流程图，如图3.5所示
图3.5 添加信息流程图
3.5系统界面分析
用户界面指的是用户直接看到的图形界面也称为前端设计。用户界面的好坏直接影响到用户操作时的体验、效率，愉快性，而且用户界面设计不当还会导致无法很好的发挥出系统的性能。
1．界面元素
常见的用户界面都会包括：整体页面的主颜色，字体的大小，字体的颜色，整体页面的布局，主要功能在页面上的布局位置，重要的输入界面和输出界面，人机交互界面。用户界面采用的主颜色，还有整体的布局的美观和功能布局的位置是否符合人性的设计都会直接的影响到用户对本系统软件的认同度。
2．用户角色
界面的设计必须建立在用户的角度，只有把自己当作用户思考人们的使用习惯和爱好的时候，才能开发出一个围绕用户的界面。通过调查用户的操作习惯，并将收集而来的纷乱复杂信息，进行总结，抽象得出满足用户的用户界面模型。
3．需求变化
人们的审美和习惯爱好，总是在不断的改变着。故要根据不同用户的喜好，操作习惯作不同的需求设计分析，作出更加符合的用户口味的操作界面。从而得到用户的认可。
4．界面原型
设计的前期通过快速的创建界面原型，通过同学的建议一点一点的改进用户界面从快速的达到理想的效果。用户界面的设计原则要满足以下几点：
（1）页面简洁，操作简单。
（2）对于用户而言，浏览信息比记忆信息更友好。
（3）从用户的角度思考，才能让用户更好的接纳。
（4）利用当今已经流行的页面设计，让用户快速的学会操作。
5．安全性问题
安全性问题应该是人们最看重的。用户界面上输入的信息不会被别人窃取，还有若输入的时候出现错误页面必须能够回退。
第4章 系统设计
4.1系统结构设计
本基于微信小程序的文章管理系统主要实现了作者功能模块、用户功能模块和管理员功能模块三大部分，系统结构图如图4-1所示。
图4.1系统功能结构图
4.2系统顺序图设计
4.2.1登录模块顺序图
登录模块主要满足了管理员、作者和用户的权限登录，登录模块的顺序图如图 4.2 所示。
添加图片注释，不超过 140 字（可选）图4.2登录顺序图
4.2.2添加信息模块顺序图
管理员、用户以及作者登录后均可进行信息的添加操作，添加信息顺序图如图4.3所示
图4.3添加信息顺序图
4.3系统数据库设计
4.3.1 数据库E-R图设计
系统E-R图就是系统的实体关系图，它是用来描述某一组织(单位)的概念模型，提供了表示实体、属性和联系的方法。构成E-R图的基本要素是实体、属性和关系。实体是指客观存在并可相互区分的事特；属性指指实体所具有的每一个特性。根据数据库中的几个表分别绘制数据库的实体图。以下给出本系统中比较重要的实体E-R图。
（1）文章信息实体E- R图，如图4.4所示
图4.4 文章信息实体属性图
（2）论坛信息实体E- R图，如图4.5所示
图4.5 论坛信息实体属性图
（3）管理员信息实体E- R图，如图4.6所示
图4.6 管理员信息实体属性图
（4）用户信息实体E- R图，如图4.7所示
图4.7 用户信息实体属性图
（5）作者信息实体E- R图，如图4.8所示
图4.8 作者信息实体属性图
（6）文章分类信息实体E- R图，如图4.9所示
图4.9 文章分类信息实体属性图
4.3.2 数据库表设计
本基于微信小程序的文章管理系统在开发过程中使用MySQL数据库系统进行系统数据的储存，以下是本系统的主要数据库表信息。
表4.1 wenzhang文章信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | addtime | 创建时间 | timestamp | 否 | 允许 |
| 3 | wenzhangmingcheng | 文章名称 | varchar(200) | 否 | 允许 |
| 4 | leibie | 类别 | varchar(200) | 否 | 允许 |
| 5 | zuozhezhanghao | 作者账号 | varchar(200) | 否 | 允许 |
| 6 | zuozhexingming | 作者姓名 | varchar(200) | 否 | 允许 |
| 7 | fabushijian | 发布时间 | datetime | 否 | 允许 |
| 8 | `fengmian` | 封面 | varchar(200) | 否 | 允许 |
| 9 | `wenzhangneirong` | 文章内容 | longtext | 否 | 允许 |
| 10 | `thumbsupnum | 赞数 | int(11) | 否 | 允许 |
| 11 | crazilynum | 踩数 | int(11) | 否 | 允许 |
| 12 | clicktime | 最近点击时间 | datetime | 否 | 允许 |
| 13 | userid | 用户编号 | bigint(20) | 否 | 允许 |
表4.2 forum`论坛信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | addtime | 创建时间 | timestamp | 否 | 允许 |
| 3 | title | 帖子标题 | varchar(200) | 否 | 允许 |
| 4 | `content | 帖子内容 | longtext | 否 | 允许 |
| 5 | `parentid | 父节点编号 | bigint(20) | 否 | 允许 |
| 6 | userid | 用户编号 | bigint(20) | 否 | 允许 |
| 7 | username | 用户名 | varchar(200) | 否 | 允许 |
| 8 | isdone | 状态 | varchar(200) | 否 | 允许 |
表4.3 users管理员信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | username | 用户名 | varchar(100) | 否 | 允许 |
| 3 | password | 密码 | varchar(100) | 否 | 允许 |
| 4 | role | 角色 | varchar(100) | 否 | 允许 |
| 5 | addtime | 添加时间 | timestamp | 否 | 允许 |
表4.4 yonghu用户信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | addtime | 创建时间 | timestamp | 否 | 允许 |
| 3 | yonghuzhanghao | 用户账号 | varchar(200) | 否 | 允许 |
| 4 | mima | 密码 | varchar(200) | 否 | 允许 |
| 5 | yonghuxingming | 用户姓名 | varchar(200) | 否 | 允许 |
| 6 | xingbie | 性别 | varchar(200) | 否 | 允许 |
| 7 | shouji | 手机 | varchar(200) | 否 | 允许 |
| 8 | youxiang | 邮箱 | varchar(200) | 否 | 允许 |
| 9 | shenfenzheng | 身份证 | varchar(200) | 否 | 允许 |
| 10 | zhaopian | 照片 | varchar(200) | 否 | 允许 |
表4.5 zuozhe作者信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | addtime | 创建时间 | timestamp | 否 | 允许 |
| 3 | zuozhezhanghao` | 作者账号 | varchar(200) | 否 | 允许 |
| 4 | mima | 密码 | varchar(200) | 否 | 允许 |
| 5 | zuozhexingming | 作者姓名 | varchar(200) | 否 | 允许 |
| 6 | xingbie | 性别 | varchar(200) | 否 | 允许 |
| 7 | shouji | 手机 | varchar(200) | 否 | 允许 |
| 8 | youxiang | 邮箱 | varchar(200) | 否 | 允许 |
| 9 | shenfenzheng | 身份证 | varchar(200) | 否 | 允许 |
| 10 | zhaopian | 照片 | varchar(200) | 否 | 允许 |
表4.6 `wenzhangfenlei文章分类信息表
| 序号 | 字段 | 描述 | 类型和长度 | 主键 | 是否可空 |
|---|---|---|---|---|---|
| 1 | id | 编号 | bigint(20) | 是 | 不允许 |
| 2 | addtime | 创建时间 | timestamp | 否 | 允许 |
| 3 | leibie | 类别 | varchar(200) | 否 | 允许 |
第5章 系统的实现
5.1微信端功能模块的实现
5.1.1注册登录界面
没有账号的用户可进行注册操作，注册时可选择注册类型进入对应角色的注册界面，注册后可进行登录系统，微信端注册登录界面展示如图5.1所示。
图5.1 微信端注册登录界面
5.1.2首页界面
所有用户登录后均可进入首页查看首页信息，首页界面展示如图5.2所示。
图5.2首页界面
5.1.3文章界面
用户登录后可查看文章信息，并可根据条件快速查询所需文章，可选择文章进行查看详情操作，文章界面展示如图5.3所示。
图5.3 文章界面
5.1.4我要发帖界面
作者和用户登录后均可进行发帖操作，我要发帖界面展示如图5.4所示。
图5.4 我要发帖界面
5.1.5添加文章界面
作者登录后可进行添加文章操作，添加文章界面展示如图5.5所示。
图5.5 添加文章界面
5.1.6我的收藏管理界面
用户和作者均可管理个人收藏信息，我的收藏管理界面展示如图5.6所示。
图5.6 我的收藏管理界面
5.2管理员功能模块的实现
5.2.1管理员登录界面
管理员要想进入系统后台对系统进行管理操作，必须登录系统后台，管理员登录界面展示如图5.7所示。
图5.7 管理员登录界面
5.2.2用户管理界面
管理员登录后可添加、修改和删除用户信息，用户管理界面如图5.8所示。
图5.8 用户管理界面
5.2.3作者管理界面
管理员在作者管理界面可查看所有作者信息，对已有作者信息可进行编辑和删除操作，同时也可添加作者信息，作者管理界面如图5.9所示。
图5.9 作者管理界面
5.2.4文章管理界面
管理员可管理文章信息，对已有文章信息可进行编辑和删除，文章管理界面展示如图5.10所示。
图5.10 文章管理界面
5.2.5文章分类管理界面
管理员可增删改查文章分类信息，文章分类管理界面展示如图5.11所示。
图5.11 文章分类管理界面
5.2.6论坛管理界面
管理员可管理论坛信息，论坛管理界面展示如图5.12所示。
图5.12 论坛管理界面