诗词打卡微信小程序整体的功能模块包括管理员+普通用户两个模块，其总体设计模块图如图3-1所示。

图3-1?诗词打卡微信小程序功能模块图

下面是整个诗词打卡微信小程序中主要的数据库表总E-R实体关系图。

图3-2?诗词打卡微信小程序总E-R关系图

通过上一节中诗词打卡微信小程序中总E-R关系图上得出一共需要创建很多个数据表。在此我主要罗列几个主要的数据库表结构设计。

诗词打卡微信小程序的详细设计与实现主要是根据前面的诗词打卡微信小程序的需求分析和诗词打卡微信小程序的总体设计来设计页面并实现业务逻辑，开发工具采用ecplice，数据库在MYSQL中存储，运用了当下比较主流的SSM框架。

4.1.1 前台首页界面

当进入诗词打卡微信小程序的时候，系统以上中下的布局进行展示，首先映入眼帘的是系统的导航栏，下面是轮播图，再往下是公告栏信息，其主界面展示如下图4-1所示。

图4-1?前台首页界面图

4.1.2 登录界面

诗词打卡微信小程序中的前台上注册后的用户是可以通过自己的账户名和密码进行登录的，当会员输入完整的自己的账户名和密码信息并点击“登录”按钮后，将会首先验证输入的有没有空数据，再次验证输入的账户名+密码和数据库中当前保存的用户信息是否一致，只有在一致后将会登录成功并自动跳转到诗词打卡微信小程序的首页中；否则将会提示相应错误信息，用户登录界面如下图4-2所示。

图4-2登录界面图

登录关键代码如下所示。

?

????@PostMapping("login")

????public Map<String，?Object> login(@RequestBody Map<String，?String> data，?HttpServletRequest httpServletRequest) {

????????log.info("[执行登录接口]");

????????String username = data.get("username");

????????String email = data.get("email");

????????String phone = data.get("phone");

????????String password = data.get("password");

????????List resultList = null;

????????QueryWrapper wrapper = new QueryWrapper<User>();

????????Map<String，?String> map = new HashMap<>();

????????if(username != null && "".equals(username) == false){

????????????map.put("username"，?username);

????????????resultList = service.selectbaseList(service.select(map，?new HashMap<>()));

????????}

????????else if(email != null && "".equals(email) == false){

????????????map.put("email"，?email);

????????????resultList = service.selectbaseList(service.select(map，?new HashMap<>()));

????????}

????????else if(phone != null && "".equals(phone) == false){

????????????map.put("phone"，?phone);

????????????resultList = service.selectbaseList(service.select(map，?new HashMap<>()));

????????}else{

????????????return error(30000，?"账号或密码不能为空");

????????}

????????if (resultList == null || password == null) {

????????????return error(30000，?"账号或密码不能为空");

????????}

????????//判断是否有这个用户

????????if (resultList.size()<=0){

????????????return error(30000，"用户不存在");

????????}

????????User byUsername = (User) resultList.get(0);

????????Map<String，?String> groupMap = new HashMap<>();

????????groupMap.put("name"，byUsername.getUserGroup());

????????List groupList = userGroupService.selectbaseList(userGroupService.select(groupMap，?new HashMap<>()));

????????if (groupList.size()<1){

????????????return error(30000，"用户组不存在");

????????}

????????UserGroup userGroup = (UserGroup) groupList.get(0);

????????//查询用户审核状态

????????if (!StringUtils.isEmpty(userGroup.getSourceTable())){

????????????String res = service.selectExamineState(userGroup.getSourceTable()，byUsername.getUserId());

????????????if (res==null){

????????????????return error(30000，"用户不存在");

????????????}

????????????if (!res.equals("已通过")){

????????????????return error(30000，"该用户审核未通过");

????????????}

????????}

????????//查询用户状态

????????if (byUsername.getState()!=1){

????????????return error(30000，"用户非可用状态，不能登录");

????????}

????????String md5password = service.encryption(password);

????????if (byUsername.getPassword().equals(md5password)) {

????????????// 存储Token到数据库

????????????AccessToken accessToken = new AccessToken();

????????????accessToken.setToken(UUID.randomUUID().toString().replaceAll("-"，?""));

????????????accessToken.setUser_id(byUsername.getUserId());

????????????tokenService.save(accessToken);

????????????// 返回用户信息

????????????JSonObject user = JSONObject.parseObject(JSONObject.toJSonString(byUsername));

????????????user.put("token"，?accessToken.getToken());

????????????JSonObject ret = new JSonObject();

????????????ret.put("obj"，user);

????????????return success(ret);

????????} else {

????????????return error(30000，?"账号或密码不正确");

????????}

}

????public String select(Map<String，String> query，Map<String，String> config){

????????StringBuffer sql = new StringBuffer("select ");

????????sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");

????????sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query，?"0".equals(config.get(FindConfig.LIKE))));

????????if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){

????????????sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");

????????}

????????if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){

????????????sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");

????????}

????????if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){

????????????int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;

????????????int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;

????????????sql.append(" limit ").append( (page-1)*limit ).append(" ，?").append(limit);

????????}

????????log.info("[{}] - 查询操作，sql: {}"，table，sql);

????????return sql.toString();

}

????public List selectbaseList(String select) {

????????List<Map<String，Object>> mapList = baseMapper.selectbaseList(select);

????????List<E> list = new ArrayList<>();

????????for (Map<String，Object> map:mapList) {

????????????list.add(JSON.parseObject(JSON.toJSonString(map)，eClass));

????????}

????????return list;

}

4.1.3注册界面

诗词打卡微信小程序的用户可以进行注册登录，当用户左上角“注册”按钮的时候，当填写上自己的账号+密码+确认密码+昵称+邮箱+手机号，选择身份，然后填写身份信息后再点击“注册”按钮后将会先验证输入的有没有空数据，再次验证密码和确认密码是否是一样的，最后验证输入的账户名和数据库表中已经注册的账户名是否重复，只有都验证没问题后即可注册成功。其用注册界面展示如下图4-3所示。

图4-3注册界面图

所有的用户都可以通过网页进入到诗词打卡微信小程序中对信息进行查看，但是要实现打卡、收藏、评论的话，就不是所有人都能操作的，必须成为诗词打卡微信小程序的会员，注册登录的流程图如下图4-4所示。

图4-4注册登录流程图

登录关键代码如下所示。

?

????@PostMapping("login")

????public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

????????log.info("[执行登录接口]");

????????String username = data.get("username");

????????String email = data.get("email");

????????String phone = data.get("phone");

????????String password = data.get("password");

????????List resultList = null;

????????QueryWrapper wrapper = new QueryWrapper<User>();

????????Map<String, String> map = new HashMap<>();

????????if(username != null && "".equals(username) == false){

????????????map.put("username", username);

????????????resultList = service.selectbaseList(service.select(map, new HashMap<>()));

????????}

????????else if(email != null && "".equals(email) == false){

????????????map.put("email", email);

????????????resultList = service.selectbaseList(service.select(map, new HashMap<>()));

????????}

????????else if(phone != null && "".equals(phone) == false){

????????????map.put("phone", phone);

????????????resultList = service.selectbaseList(service.select(map, new HashMap<>()));

????????}else{

????????????return error(30000, "账号或密码不能为空");

????????}

????????if (resultList == null || password == null) {

????????????return error(30000, "账号或密码不能为空");

????????}

????????//判断是否有这个用户

????????if (resultList.size()<=0){

????????????return error(30000,"用户不存在");

????????}

????????User byUsername = (User) resultList.get(0);

????????Map<String, String> groupMap = new HashMap<>();

????????groupMap.put("name",byUsername.getUserGroup());

????????List groupList = userGroupService.selectbaseList(userGroupService.select(groupMap, new HashMap<>()));

????????if (groupList.size()<1){

????????????return error(30000,"用户组不存在");

????????}

????????UserGroup userGroup = (UserGroup) groupList.get(0);

????????//查询用户审核状态

????????if (!StringUtils.isEmpty(userGroup.getSourceTable())){

????????????String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());

????????????if (res==null){

????????????????return error(30000,"用户不存在");

????????????}

????????????if (!res.equals("已通过")){

????????????????return error(30000,"该用户审核未通过");

????????????}

????????}

????????//查询用户状态

????????if (byUsername.getState()!=1){

????????????return error(30000,"用户非可用状态，不能登录");

????????}

????????String md5password = service.encryption(password);

????????if (byUsername.getPassword().equals(md5password)) {

????????????// 存储Token到数据库

????????????AccessToken accessToken = new AccessToken();

????????????accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

????????????accessToken.setUser_id(byUsername.getUserId());

????????????tokenService.save(accessToken);

????????????// 返回用户信息

????????????JSonObject user = JSONObject.parseObject(JSONObject.toJSonString(byUsername));

????????????user.put("token", accessToken.getToken());

????????????JSonObject ret = new JSonObject();

????????????ret.put("obj",user);

????????????return success(ret);

????????} else {

????????????return error(30000, "账号或密码不正确");

????????}

}

????public String select(Map<String,String> query,Map<String,String> config){

????????StringBuffer sql = new StringBuffer("select ");

????????sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");

????????sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));

????????if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){

????????????sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");

????????}

????????if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){

????????????sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");

????????}

????????if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){

????????????int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;

????????????int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;

????????????sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);

????????}

????????log.info("[{}] - 查询操作，sql: {}",table,sql);

????????return sql.toString();

}

????public List selectbaseList(String select) {

????????List<Map<String,Object>> mapList = baseMapper.selectbaseList(select);

????????List<E> list = new ArrayList<>();

????????for (Map<String,Object> map:mapList) {

????????????list.add(JSON.parseObject(JSON.toJSonString(map),eClass));

????????}

????????return list;

}

4.1.4诗词圈子详情界面

用户可以查看诗词圈子，在查询到自己想要了解的诗词圈子的时候，可以进入查看详细的介绍，点击“关注”这一按钮以后会跳转到关注信息填写的界面，根据提示填写好关注的信息，在诗词圈子信息详情这个界面，同时支持用户对喜欢的诗词圈子进行收藏、点赞、分享的功能，诗词圈子详情展示页面如图4-5所示。

???????

图4-5诗词圈子详情界面图

4.1.5打卡活动详情界面

用户可以查看打卡活动信息，在查询到自己想要了解的打卡活动的时候，可以进入查看详细的介绍，点击“打卡”这一按钮以后会跳转到打卡信息填写的界面，根据提示填写好打卡的信息，在打卡活动信息详情这个界面，同时支持用户对喜欢的打卡活动进行收藏、点赞的功能，打卡活动详情展示页面如图4-6所示。

?????

图4-6打卡活动详情界面图

在实现打卡操作的时候，没有登录的用户只能进行查看，如果想要实现打卡这个操作的话，打卡的前提必须是登录后才能进行。详见图4-7所示。

?????????????

图4-7?打卡流程图

4.1.6?打卡记录界面

点击导航栏上的“打卡记录”，可以选择活动名称、活动时间、活动类型、打卡用户、姓名、打开日期、打卡次数，然后点击“提交”按钮进行提交打卡记录，打卡记录界面如下图4-8所示。

图4-8打卡记录界面图

4.2.1登录界面

管理员在登录界面输入账号+密码，点击“登录”按钮，系统在用户数据库表中会对管理员，普通管理者的账号进行匹配，账号+密码正确的话，就会登录到系统中各个用户的主管理界面，否则提示对应的信息，返回到登录的界面，如果管理人员忘记密码的话，点击“忘记密码”根据提示可以找回密码，然后再进行登录其主界面展示如下图4-9所示。

图4-9登录界面图

4.2.2用户管理界面

诗词打卡微信小程序中的管理员在“用户管理”这一菜单是中可以对注册的用户以及管理员人员进行管控。界面如下图4-10所示。

图4-10用户管理界面图

用户管理关键代码如下所示。

public List selectbaseList(String select) {

????????List<Map<String，Object>> mapList = baseMapper.selectbaseList(select);

????????List<E> list = new ArrayList<>();

????????for (Map<String，Object> map:mapList) {

????????????list.add(JSON.parseObject(JSON.toJSonString(map)，eClass));

????????}

????????return list;

}

4.2.3公告栏管理界面

公告栏管理模块是对公告栏的设置，只有管理员权限才能进行更新维护。界面如下图4-11所示。

图4-11公告栏管理界面图

4.2.4诗词圈子管理界面

点击“诗词圈子”按钮会显示自己添加的诗词圈子，如果想要添加新的诗词圈子，点击“添加”按钮根据提示输入诗词圈子，点击“提交”后在诗词圈子界面就可以显示了，如果信息有错可以对诗词圈子进行更新维护，也可以直接删除某一诗词圈子，还可以管理评论信息，界面如下图4-12所示。

图4-12诗词圈子管理界面图

4.2.5打卡活动管理界面

点击“打卡活动”按钮会显示自己添加的打卡活动，如果想要添加新的打卡活动，点击“添加”按钮根据提示输入打卡活动，点击“提交”后在打卡活动界面就可以显示了，如果信息有错可以对打卡活动进行更新维护，也可以直接删除某一打卡活动，界面如下图4-13所示。

图4-13打卡活动管理界面图

打卡活动管理关键代码如下所示。

?@RequestMapping("/get_obj")

????public Map<String， Object> obj(HttpServletRequest request) {

????????List resultList = service.selectbaseList(service.select(service.readQuery(request)， service.readConfig(request)));

????????if (resultList.size() > 0) {

????????????JSonObject jsonObject = new JSonObject();

????????????jsonObject.put("obj"，resultList.get(0));

????????????return success(jsonObject);

????????} else {

????????????return success(null);

????????}

}

4.2.6活动排行管理界面

管理员点击“活动排行”会显示出所有的活动排行信息，支持通过活动名称或者活动时间对活动排行信息进行查询，如果想要添加新的活动排行信息，点击“添加”按钮，输入相关信息，点击“提交”按钮就可以添加了，同时可以选择某一条活动排行信息，点击“删除”进行删除，界面如下图4-13所示。

图4-13活动排行管理界面图

在系统的前台、后台、数据库设计完成以后，诗词打卡微信小程序才算是完成了一半，系统的最后一个阶段就是对系统的功能、性能进行测试，测试对一个系统来说是非常重要的，有的时候开发完一个系统，如果测试不合格的话，这个系统是没有办法进行投入使用的，所有我们要用测试对系统的功能、性能等方面进行检验，把不完善的功能尽量完善，把出现的bug及时解决掉，然后给用户呈现出一个完美的系统。

系统测试包括：用户登录功能测试、活动排行展示功能测试、活动排行添加、活动排行搜索、密码修改功能测试，如表5-1、5-2、5-3、5-4、5-5所示：

用户登录功能测试：

表5-1?用户登录功能测试表

活动排行查看功能测试：

表5-2?活动排行查看功能测试表

管理员添加诗词圈子详情界面测试：

表5-3?管理员添加诗词圈子详情界面测试表

活动排行搜索功能测试：

表5-4活动排行搜索功能测试表

密码修改功能测试：

表5-5 密码修改功能测试表

通过编写诗词打卡微信小程序的测试用例，已经检测完毕用户登录模块、活动排行查看模块、活动排行添加模块、活动排行搜索模块、密码修改功能测试，通过这5大模块为诗词打卡微信小程序的后期推广运营提供了强力的技术支撑。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?结论

本文描述了诗词打卡微信小程序设计与实现的原理和开发过程，该系统是通过Spring+SpringMVC+MyBatis框架来搭建后台，中间件使用的是Tomcat服务器，数据库管理平台采用开源的Mysql数据库，前台使用的是JQuery框架，同时使用Validate校验框架，这样就可以减少前端代码的输入量，而且基于JQuery框架的Validat框架使用简单，是流行的前端使用框架，前端使用的主要是Java页面展示技术。

在开发这个诗词打卡微信小程序之前做了许多的准备，比如到学校进行调研，了解现在大学生对诗词打卡微信小程序所要实现的功能，同时在诗词打卡微信小程序的设计和开发过程中去图书馆以及网上查阅和学习了许多相关的文献资料，与此同时从开发这个诗词打卡微信小程序的过程当中我也收获了许许多多宝贵的实践方法以及设计的思路，对系统的开发也起到了很重要的作用，诗词打卡微信小程序的开发技术选用的都是自己比较熟悉的，比如Web、SSM、MYSQL等，这些技术都在平时的课程当中学到，而且平时都能够熟练运用，在开发诗词打卡微信小程序的过程当中许多的设计思路和方法都是在以前不断地学习中摸索出来的经验，开发诗词打卡微信小程序对于我来说工作量还是比较大的，毕竟是一个完整的系统，正是由于之前的积累与准备，才能顺利的完成这个项目，由此看来，积累经验跟做好准备是十分重要的事情。

当然在开发该诗词打卡微信小程序的过程当中也是离不开导师以及同学们的帮助的，在遇到自己搞不定的问题的时候，我首先会和同学们探讨，找出解决方法，实在解决不了的时候，我会请教我的导师，在开发诗词打卡微信小程序的过程中正是因为他们的指导与帮助，我才能够成功的在预期内完成了这个系统。同时诗词打卡微信小程序还有很多需要改进的地方，但是由于专业知识的浅薄，开发的系统并不是十全十美，希望以后有机会可以对其进行完善，让其真正的投入到使用之中。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?致 ?谢

到此，整个诗词打卡微信小程序就算完成了，虽然过程十分艰难，但是等到都完成的时候，我感觉无比的自豪，虽然设计的系统还存在许多的纰漏，但是我已经拼劲全力，给自己的大学四年画上了一个圆满的句号。

在这里我首先要感谢的就是大学四年来所有教导我的老师，是他们教会了我许多的专业知识以及做人的道理，从一进校门对对开发系统一窍不通到现在能自主开发一个管理系统，里面包含了前台框架、后台框架、业务流程、数据结构、操作系统等各种知识，只有把他们统一运用好，才能够完成整个系统，这都是老师的功劳；其次我要感谢我的指导老师，在开发这个系统的时候，我遇到了无数的问题，经常通过线上、线下的方式去请教导师，每次去请教导师，他从来没有不耐烦，都是细心的引导，告诉我怎么样实现这个功能，怎么样才能使得系统更加完善，然后通过自己查询相关资料解决问题，提高了自己自主解决问题的能力，授人以鱼不如授人以渔，指导老师的这种工作态度受益终生，我也会向老师不断靠拢，向他学习，在此我只想说一句：“老师，谢谢您，您辛苦了”！最后我还要感谢我的室友、同学，在一起学习这四年，他们不但学习上给了我很多建议，在生活上更加给了我帮助，正是有他们的帮助，我的大学生涯才如此完美。

最后，希望自己在未来的道路上能够越走越远，不辜负在大学的学习以及老师们的细致的教导，追风赶月莫停留，平荒尽处是春山。