基于微信小程序的微型咨讯系统的设计和实现

2019-03-04鞠宏军钟超恒

电脑知识与技术 2019年34期

鞠宏军钟超恒

摘要：《基于微信小程序的微型咨讯系统》采用了springboot+mybatis框架对系统进行快速搭建，前台页面使用的是node.js编写的，后台业务逻辑使用JAVA语言编写，采用的数据库是mysql，结合mvc设计模式快速完成微型咨讯系统。该系统主要功能有：各用户查看文章，发表文章;管理发表的文章，为文章进行收藏还有评论回复;管理用户自身发表的文章;修改用户信息;删除文章，删除用户，上传视频图片等。

关键词：微信小程序;node.js;springboot;微型咨讯

中图分类号：TP311.52

文献标识码：A

文章编号：1009- 3044（2019）34-0093-04

1 背景

自改革开放以来，科技在日新月异的变化，国家也紧跟时代的进步，快速地得到发展，计算机的各种行业不断发展。从以前的滴滴响的寻呼机到霸气厚重的大哥大，再到轻巧功能简单的小灵通再到加人多媒体的诺基亚手机，再到现在的集多元化功能于一身安卓苹果智能手机，在它们的身影中无不看到了人们对社交的重视性，对外界通讯获取外界信息的渴求。如今，无论是在地铁或公交赶去上班的人，还是在家或学校的学生们都必须佩带一台手机，手机成了人们生活的必需品;与此同时，手机的app也不断地得到多元化，但是随着科技的进步，人们对于app有了更高的要求，app体积越来越大使容量小的手机更加难以承受。因此，小程序应运而生了，人们不再需要为app体积过大而烦恼了，仅仅需要在小程序上授权一下就可以享受更轻便的体验。当人们遇到有趣的事时，便可以拿起手机进行随性所欲的拍摄，分享给更多的人看，传递正能量，人们也可以在这小程序上各抒己见，畅所欲言。本文就是为此现象而开发的微信小程序，通过更轻便的小程序让人们体现到无安装的快感，使生活得快乐传播得更广，尽管小程序不能完全代替app，但是它在人们生活中也占有了重要的一席之地。

2 系统需求分析

2.1 用户登陆授权功能需求

此功能是其他功能的基础，需要通过授权获取微信头像用户呢称，从微信服务器端获取openid作为唯一用户的标识，存人数据库，以便创建新用户或者检查用户是否是已存在的用户等。

2.2 管理個人信息需求

当用户创建新用户时，基本信息是空的，用户可以查看信息，对于错误的自身信息和想要修改的信息也可以点击修改，但是对于用户头像，用户的openid是不能修改的。

2.3 微型咨讯需求

此功能是系统的主要功能之一，主界面采用flex布局设计，对页面加载不能过于慢，能够展示用户头像姓名，文章基本内容，并且能够播放视频，点击图片能够放大预览，对于发布的文章必须附带视频或者图片其中一种，不能两个同时存在。点击发表按钮时可以跳到发表的页面，填写内容可以选着图片或者视频，图片最多可以选择九张，同时可以取消已经选择的视频或者图片;点击按钮能回到文章顶部;下拉操作时能够对咨讯的展示页面进行刷新，上拉时不断加载文章，当文章数到底时需要进行提示，并且文章加载的顺序是按最新发布的在前面。

2.4 互动需求

用户可以对喜欢的文章进行点赞收藏，点赞收藏后该文章的数量需要发生改变，状态也需要发生变化，同时用户对于自己点赞收藏的文章也可以进行查看，或者取消收藏。在微讯主界面浏览文章时，点击某一篇文章时可以进入文章查看详细文章信息，查看详细的用户评论和回复;点击输入框时能够出现蒙板层，遮挡部分文章内容，弹出键盘对文章进行评论发表;当点击回复时也能弹出蒙板层，在输入框内对文章的某条评论进行回复，同时文章相应的评论数目也要发生相应的变化。

2.5 管理用户和文章需求

管理员通过密码登陆可以进入管理界面，进入管理界面后能对用户进行查看，并且可以修改所有用户信息，点击删除用户按钮，会提示是否删除该用户，点击确定时可以删除该用户，同时该用户的所有文章基本资料等都会被删除;管理文章功能，管理员可以查看所有文章，对有非法内容的文章可以进行删除，同时点击删除所有文章按钮时可以删除所有文章，并且把所有文章信息删除。

3 系统设计

3.1 功能设计

1）实现管理员登录的功能。

2）实现管理员对文章还有用户进行管理的功能。

3）实现文章能够清晰展示，图片预览，视频播放，分页加载等功能。

4）实现文章能上传视频图片功能。

5）实现用户能查看评论，发表评论和回复，点赞收藏功能。

6）实现用户能查看用户信息并且修改个人信息功能。

7）实现用户能管理自己发表的文章还有自己收藏的文章功能。

具体功能结构如图1所示：

3.2 系统总E-R图

系统总E-R图如图2所示。

4 系统实现

4.1 系统关键技术分析

本系统采用了springboot+mybatis框架搭建快速部署，通过springboot的轻量级框架，使用注解开发可以降低开发配置的复杂度，同时springboot自带服务器，对于程序的运行调试提供了极大的帮助。持久化层使用mybatis，框架内置的大量sql语句可以省去大部分编写sql语句的麻烦，同时也使用了动态sql提升系统的安全性。对于各种Jar包管理使用的是maven进行管理，不用像以前一样因为缺失包而导致程序报错等。客户端使用的是微信小程序，比APP更加的轻便.同时适配机型调整难度也降低。

4.2 用户授权和管理员登陆

管理员登陆界面比较简洁，此页面作为小程序的首页，首要用户授权获取头像信息才能进入小程序。输入账户和密码，当点击登陆按钮之后会首先进行前端的校验，如果校验出现内容为空，则给出提示，并要求重新输入。如果输入结果不为空，则向服务器发送请求查询是否有该用户与对应的密码，如果成功返回success，提示登录成功;如果没有找到对应账户则提示用户名或密码错误。

4.3 管理员管理文章和用户模块

在本模块中，分为管理文章模块和管理用户模块;文章管理模块以列表的形式展示文章的简单信息，包括发表人头像，名字发表文章的内容部分，文章内容长度过长时会自动进行隐藏用省略号代替，点击文章可以进入文章内部查看详细信息;在每个文章列表的右边会有一个删除按钮，点击删除按钮会弹出提示框提示是否删除，点击确定文章就会删除，同时为了方便操作，在文章列表的最下方也设计了一个删除所有文章的按钮，为了避免误触，该按钮设置了隐藏，点击向上按钮时才会显示;并且文章设置了下拉刷新加载，文章不会一次性地把所有文章加载出来，采用了分页加载。

4.4 文章展示模块

文章的内容不能超过255个字，当点击图片时图片便可以放大预览，图片最多可以附带九张，点击视频时视频能够流畅播放，但是视频的长度不能超过15秒;在视频下方设置了评论数显示，点击评论图标或者点击文章的头部可以进入文章的详细内容，查看文章的所有信息;视频下方还设置了收藏按钮，点击收藏按钮，收藏显示发生变化，同时收藏数量也会发生变化，并且也会记录到个人的收藏里面。

4.5 微讯主界面模块

在本模块中主要涉及多个文章的布局，及多个文章加载，还有用户如何发表。因为采用了分页加载的原理，加载速度比较快，下拉时刷新文章列表，重新加载文章，点击视频播放时也能达到流畅播放效果;由于文章列表可能会过长，所以设计了一个回到顶部的按钮，用于快速跳到头部给用户更好的体验;同时把发表按钮设置成半透明颜色避免遮挡用户视线。

4.6 评论回复模块

此功能模块主要涉及评论和回复，其中细节比较多。细节之一：当用户点击输入框时，此时便會弹起输入框蒙版层，半透明遮住文章内容，同时会触发输入框聚焦事件，设置输入标志为评论，调用键盘进行输入，此时输入的内容为评论内容;当用户想取消输入评论，点击蒙版层的灰暗透明处，蒙版显示标志改变为false，蒙版便会消失，输入框关闭。细节之二：当用户想对某条评论进行回复时，只需要点击该条评论，就会触发聚焦事件，设置输入标志为回复，改变蒙版显示标志唤起输入框，此时输入的内容为回复。

4.7 个人管理模块

此模块主要是供用户个人管理自身信息的模块，主要设计对用户收藏的整理，对用户所发表的文章进行整理。对于自己的收藏可以进行查看详细内容，同时可以取消收藏;对于白己发表过的文章可以进行删除，点击文章列表可以查看详细的内容评论。并且可以对用户信息进行修改，对于填入的必要部分信息会进行非空校验，并且电话号码格式也能进行校验是否是真正的电话。图8为个人管理模块。

5 结束语

本小程序的主要目的是为了让人们更方便的分享生活中的趣味事情，了解更多的咨讯，发表白己的看法，展现更好的自我，畅所欲言，无拘无束。在节奏紧张的时代中，这些信息快餐已经越来越受到人们的追捧，短小而精悍的微讯带来了更多的收获。尽管小程序不能完全代替app，但是它在人们生活中也占有了重要的一席之地。本系统基于微信小程序的平台，开发了一款微型咨讯系统，实现了让用户体会到更简短轻便的咨讯，同时通过微信小程序的平台让用户体验到免安装的快感，对于个人管理，以及管理员管理端也更加的轻便快捷，为其他类似的系统提供良好的思路。

参考文献：

[1]张帆.微信小程序开发零基础入门[M].北京：电子工业出版社.2017.

[2]李刚.轻量级Java EE企业应用实战[M].北京：电子工业出版社.2017.

[3]阮一峰.ES6标准入门[M].3版.北京：电子工业出版社，2017.

[4]埃克尔.Java编程思想[M].4版.北京：机械工业出版社，2007.

[5]周力.UML建模图解教程[M].北京：人民邮电大学出版社，2009.

[6]王延平.21天精通微信小程序开发[M].北京：电子工业出版社，2017.

[7]扎卡斯.JavaScript高级程序设计[M].北京：人民邮电出版社，2006.

[8]高洪涛.从零开始学微信小程序开发[M].北京：电子工业出版社，2017.

【通联编辑：谢媛媛】

收稿日期：2019-10-08

基金项目：华北科技学院教研基金资助项目（项目编号：JYGH201704）