Goddess-Questionnaire女神问卷

各位大神若有项目问题可进群有小伙伴解答

女神问卷演示视频（问卷部分）：https://v.youku.com/v_show/id_XNDI3Mjc5MzExMg==.html?spm=a2h3j.8428770.3416059.1

女神问卷全部视频演示：https://v.youku.com/v_show/id_XNDI3Mjc5Njg2MA==.html?spm=a2h3j.8428770.3416059.1

程序下载链接：

SSM框架下基于微信小程序的女神问卷源代码_微信小程序问卷调查源代码-Java代码类资源-CSDN下载

河北农业大学

本科毕业设计说明书

题目： 问卷调查系统的设计与实现

学院：

专业班级：

学号：

学生姓名： 崔胜利

指导教师姓名：

指导教师职称：

2019年 5 月 23 日

摘要

传统模式下，发起者需要提前制作问卷、试卷，统一作答，过后统一阅卷处理，不仅会消耗大量人力物力，还由于人工方式的局限性，常常存在各种不可避免的失误。由此可见，传统方式已经不能满足现代工作环境的需求。近年来，随着移动互联网浪潮中全面信息化的普及和发展，2018年中国移动端智能设备使用率达到68%远远高于PC端，移动互联的佼佼者莫过于微信，微信月活用户已经达到10亿，目前在国内市场依旧有着非常大的增长潜力。因此，整合现有的资源提供移动端基于微信小程序的在线问卷调查平台，解决新形势下传统模式的弊端，成为办公信息化和提高工作效率的必然选择。

本文介绍了一个B/S结构下微信小程序的在线问卷调查系统，其后台可在主流浏览器上进行操作，前台采用微信小程序。它使用集成框架Spring+Sring MVC+MyBatis，存储数据库选用关系型数据库MySql，缓存数据库采用非关系型数据库Redis，服务器选用Apache Tomcat和Nginx相结合的方式。它的代码部分主要开发工具为IntelliJ IDEA和微信开发者工具。以图表的方式实现对问卷结果的数据分析。代码部分实现了前端问卷调查系统和后端管理系统的分离。采用Redis数据库做高速缓存提高访问效率。利用FFmpeg将MP4视频转为m3u8格式实现在线播放视频。

关键词：微信小程序；问卷调查；在线投票；在线考试

Abstract

In the traditional mode, the initiator needs to make questionnaires and test papers in advance, and make a unified answer. After the unified review, it will not only consume a lot of manpower and material resources, but also due to the limitations of manual methods, there are often inevitable mistakes. It can be seen that the traditional way can no longer meet the needs of the modern working environment. In recent years, with the popularization and development of comprehensive information in the wave of mobile Internet, the use rate of smart devices in China's mobile terminals reached 68% in 2018, which is much higher than that of PCs. The leader of mobile internet is WeChat, WeChat monthly users have already It has reached 1 billion and currently has a very large growth potential in the domestic market. Therefore, integrating existing resources to provide mobile-based online questionnaire survey platform based on WeChat applet, to solve the drawbacks of the traditional model under the new situation, has become an inevitable choice for office informationization and work efficiency.

This question introduces an online questionnaire survey system of WeChat applet under the B/S structure. The background can be operated on the mainstream browser, and the WeChat applet is used in the foreground. It uses the integration framework Spring+Sring MVC+MyBatis, the storage database uses the relational database MySql, the cache database uses the non-relational database Redis, and the server uses the combination of Apache Tomcat and Nginx. Its main part of the code development tools are IntelliJ IDEA and WeChat Developer Tools. Data analysis of the questionnaire results was carried out graphically. The code part realizes the separation of the front-end questionnaire system and the back-end management system. Using the Redis database for caching improves access efficiency. Use FFmpeg to convert MP4 video to m3u8 format to play video online.

Keywords: WeChat applet; questionnaire survey; online voting; online exam.

1绪论... 1

1.1 项目背景及意义... 1

1.2 国内外现状分析... 1

1.3 基本目标和研究内容... 1

1.4 论文内容组织安排... 1

2可行性分析与需求分析... 3

2.1 可行性分析... 3

2.2 需求分析... 3

2.2.1 功能性需求分析... 3

2.2.2 非功能性需求分析... 4

3系统设计... 5

3.1系统架构... 5

3.2 流程设计... 7

3.3 数据库设计... 8

4系统实现... 13

4.1系统的开发与实施环境... 13

4.2 核心技术简介... 13

4.3 底层接口和类的封装... 14

4.3.1公共类的实现... 14

4.3.2关于ResultResponse统一接口参数的实现... 15

4.3.3关于数据分页的实现... 15

4.3.4关于自定义的验证方式和校验工具类的实现... 16

4.3.5关于微信小程序端的js封装... 17

4.4 前端系统的实现... 18

4.4.1界面UI实现... 18

4.4.2问卷添加页面... 18

4.4.3问卷题型实现... 19

4.4.4投票页面实现... 19

4.4.5数据分析的实现... 20

4.4.6其他部分效果实现... 21

4.5 后端管理的实现... 22

4.5.1用户登录的实现... 22

4.5.2资源管理的实现... 22

4.5.3验证方式的实现... 23

结束语... 24

参考文献... 25

致谢... 26

1绪论

1.1 项目背景及意义

随着用户对全方位多维度海量数据的需求日益增长，问卷调查作为获得数据的重要途径，在很多领域的运用已经十分广泛。反观传统问卷调查，地域限制、灵活性限制、人工失误这些不可避免的缺陷，使得用户需求与传统问卷的矛盾日益凸显。在校园里，存在各种信息统计，经常会有各种各样的问卷表单，师生需要在此消耗极大的精力和时间。随着我国移动互联技术的浪潮，智能设备用户的增长，给问卷调查带来全新的改革方案，那就是在线问卷调查。在线问卷成本低、时效性强、跨地域、表现形式丰富、覆盖范围广，可极大程度上减少人力资源的使用，满足了用户基本需求。微信小程序的问卷调查系统有很强的实用性。

1.2 国内外现状分析

问卷调查系统在国外起步较早例如：SurveySavvy于2009年推出，是一款易于使用的桌版问卷调查工具。SurveySavvy的SavvyConnect提供触手可及的调查。此外，SurveySavvy的VIP计划使用安全，先进的技术在用户上网时收集数据。SurveySavvy的用户在网上冲浪并获得额外的付费研究机会时获得现金奖励[1]。

目前随着我国网络环境的发展和完善，在线问卷调查系统带来的便利开始崭露头角，大有可能取代传统的问卷调查模式的趋势。目前在线问卷调查平台正在从小型化逐渐转向全方面多维度的高信息化。近年来国内出现了一大批问卷星，腾讯问卷，调查派等等优秀的在线问卷调查平台。他们都具有良好的的跨平台性支持PC、移动WEB、微信小程序三种平台。以为问卷星为例，它支持丰富的题型高达32种，不仅实现了调查问卷的制作和发布更是对收集到的数据加以分析利用，数据统计结果以环状图、饼状图、柱状图等可读性较强的图表形式展示给用户，在方便用户对结果数据分析的同时降低对用户软件操作和数据分析能力的要求。

1.3 基本目标和研究内容

本课题意在为问卷、投票活动发起者提供移动端基于微信小程序的在线问卷调查系统，让被调查用户能够快速便捷的完成问卷调查。问卷调查结束自动统计整理分析问卷结果数据，反馈给发起者结果报表，以图表的形式实现对结果的数据分析。以此为目标研究内容如下：考察市场现有的在线问卷调查系统，明确系统范围确定模块边界。具体开发实施完成系统数据库、业务逻辑、后台管理页面、前台小程序页面的实现。进行系统测试与BUG调试后发布项目，根据用户反馈优化功能。

1.4 论文内容组织安排

本论文按照软件开发过程逐章编写，本文共分为四个章节：

第一章绪论。本章主要描述了项目背景及意义，国内现状分析以及目标和研究内容。

第二章可行性分析与需求分析。本章从经济、技术两个角度进行可行性分析，从软件都有哪些用户分别需要什么功能进行功能性需求分析，从软件的性能需求、UI设计、平台兼容性方面分析了非功能性需求。

第三章系统设计。本章先论述了系统综合架构，然后画出了软件流程图，模块划分图，最后进行数据库设计。

第四章系统实现。本章先阐述开发和实施环境和所涉及到的技术，然后到具体功能代码的实现，最后介绍前台UI实现和后台功能实现。

2可行性分析与需求分析

2.1 可行性分析

软件开发可行性的分析主要从：经济可行性、技术可行性、操作可行性、社会可行性、组织可行性等方面进行分析，本节将从经济、技术方面进行可行性分析，为后期设计、开发、维护工作提供可行性理论依据。

（1）经济可行性：从经济效益来分析，软件的开发的持续投入较低。系统服务器采用Apache Tomcat及Nginx[2]，数据库采用MySql[3]及Redis[4]。这些软件也都是绿色开源软件,不需要支付额外费用。软件运行对服务器硬件资源的要求较低。系统所带来的的经济效益远超过它的开发成本，所以具有经济可行性。

（2）技术可行性：技术层面腾讯提供微信小程序的开发工具和官方文档、Java基于SSM框架的系统技术也比较成熟且有丰富的资料可供参考、百度提供用于数据分析的工具EChart[5]并提供技术支持和官方API文档说明。且本人在此之前已经参与实现过数个基于微信的小程序参与实现数个SSM框架系统，有充分的开发经验。

2.2 需求分析

2.2.1 功能性需求分析

为实现本系统目标，系统应具有前台页面和后台页面两大部分。后台需要具备管理和维护系统、用户权限分配管理功能的管理员称之为超级管理员，由超级管理员创建并指定权限的管理管理员称为活动管理员。前台需要实现发起问卷、发起投票、数据分析、答卷和投票的功能，前台用户均采用微信用户信息，用户在发起问卷、发起投票、数据分析时被称为活动发起者，在投票或答卷是被称为被调查者。

后台用户分为活动管理员和超级管理员两种角色。超级管理员拥有后端的全部权限负责维护和管理系统，超级管理员有角色管理的权限可以管理其他管理员。活动管理员负责处理违规被举报的活动，活动管理员的权限由超级管理员指定和分配。

（1）超级管理员功能需求：

1后台权限控制

管理后台用户，管理后台角色，可为用户分配多种角色，每个角色可以拥有多个菜单权限，一个菜单可以被多个角色使用。

2系统设置

具备对系统名称的管理，系统服务邮箱的配置，系统介绍视频的编辑。

3前台权限管理

配置前台用户的访问权限，管理前台角色。

前台用户分为调查活动发起者和活动被调查者。活动发起者发布和管理个人的调查问卷和投票、被调查者参与投票问卷活动发表评论。

（2）活动管理员功能需求：

1投票管理、问卷管理

实现管理员对用户发起的问卷调查的控制，处理用户投诉举报。

（1）被调查者功能需求：

1活动大厅

展示公开的投票活动，展示公开的问卷活动以供用户投票作答。

2个人中心

设置投票浏览历史、问卷浏览历史、我参与的投票、我参与的问卷。

3问卷部分

问卷作答页面。

4投票部分

查询投票详情、为候选项进行拉票评论、投票页面。

5综合部分

用户权限不足时跳转到未授权界面，提供分享界面和活动海报便于用户在多渠道宣传、观看问卷调查系统的介绍视频。

（2）活动发起者功能需求：

1个人中心

设置我发起的投票、我发起的问卷。

2问卷部分

复制问卷模板、提供草稿保存、添加问卷、管理问卷题目、问卷预览、编辑问卷、暂停问卷、统计问卷、查询问卷详情、通过图表的形式查看问卷数据分析、提供自动发送问卷统计结果的选择。

3投票部分

添加投票、提供草稿保存、管理投票候选项、报名成为候选项、编辑投票、暂停投票、统计投票、通过图表的形式查看问卷数据分析、投票页面。

2.2.2 非功能性需求分析

（1）安全性需求：数据库数据定时备份、不同用户访问权限控制、密码加密、使用Https协议提供数据传输的安全，使用恰当的安全策略在满足基本信息安全的情况下，最大程度上提高用户舒适度，做到预防Ddos攻击和防止sql注入式攻击[6]。

（2）稳定性需求：系统本身具备可移植能力适应多种环境，满足Windows 或Linux两种系统，提供并发处理措施配置服务器集群，常用的不经常变化的数据放入缓存数据库提高访问效率。

（3）界面需求：用户界面友好美观，提供丰富的提示提高交互性，方便使用，可操作性强，页面加载跳转等提供加载动画，常见异常错误界面美化。

（4）兼容性需求：本系统中考虑到用户群体的广泛性，其使用的设备有很大差异：设备操作系统差异，主要要兼容IOS、Android两大平台、屏幕尺寸差异，要实现移动端的响应式布局[7]。

3系统设计

3.1系统架构

后台用户通过浏览器访问进行后台管理，前台用户通过微信小程序进行操作，使用MySql作为主数据库，为提高访问效率采用Redis作为缓存服务器。

MVC设计模式是Model（实体）、View（视图层）、Controller（控制层）的简称，是一种软件设计中经典的设计模式。在该系统实现基于该思想改进控制层将其分为Controller（页面跳转控制层）和Servive（逻辑控制层）Dao（数据库操作层），使用json数据通讯达到前后分离的效果[8]。

系统架构图如图3.1所示。

图3.1 系统框架图

问卷调查系统包括四个子系统。每个子系统又进行了模块划分为日后的开发和维护提供方便。子系统分为Basics基础子系统、Manage权限子系统、Wx微信服务子系统、Wenjuan调查子系统：

Basics基础子系统

该子系统主要负责基础模块的集合例如数据校验模块负责数据的处理和验证、文件管理模块负责系统文件资源的上传和下载功能有文件管理的功能、基础模块封装底层实现类和接口供其他模块调用和继承。

Manage权限子系统

该子系统主要负责用户权限管理功能的实现，有资源管理、角色管理、用户管理以及为角色分配资源为用户分配角色的功能。子系统内部实现了Shiro框架下实现权限认证管理，前台部分基于Url的权限访问控制，后台采用基于Url加标签的权限控制。

Wx微信服务子系统

该子系统主要负责与微信的数据交互功能。在前端部分它实现了获取微信用户的OpenId和微信用户登录及获取微信用户详细信息的功能，在后端它通过定时任务框架Quartz实现了每1.5小时一次向微信服务器获取小程序accessToken的功能，以确保与其他微信接口之间的通讯顺畅。

Wenjuan调查子系统

该子系统主要实现了投票管理、问卷管理、数据分析的功能是该系统的核心业务子系统。该子系统的功能主要在微信小程序端实现，它采用百度ECharts做数据分析为用户提供良好数据展示效果。

问卷调查系统系统模块划分图如图3.2所示。

图3.2 系统模块划分图

3.2 流程设计

后台采用多用户多角色多资源的关系设计，用户和角色为多对多关系，角色和资源为多对多关系，实体表与实体表之间采用存储id方式的弱关联。前台用户分为用户和微信用户，其关系为一对一关系[3]。

前台用户登录流程图如图3.3所示。

图3.3 前台用户登录流程图

后台用户登录流程图如图3.4所示。

图3.4 后台用户登录流程图

3.3 数据库设计

问卷调查系统下属的四个子系统总使用数据表27个，各表名称及功能如表3.1所示。

表3.1系统数据库列表

表名称	说明
basics_file	文件索引表，用于保存前台的图片信息
manage_api	后台页面Api接口表，用于权限系统中url的允许
manage_environment	系统环境配置表，保存系统名称，邮件服务，系统介绍视频
manage_frontlink	前台链接表，存储前台需角色方能访问的用户资源权限url
manage_frontrole	前台用户角色表，记录前台用户角色分配
manage_link_role	前台链接角色关系表，存储角色和前台url的多对多关系
manage_resource	后台按钮资源表，保存后台用户的按钮资源
manage_resource_role	后台按钮资源角色关系表，存储后台角色和按钮资源的多对多关系
manage_role	后台用户角色表，用于后台用户角色的管理[9]
manage_subscriber	前台用户表，用于记录前台用户信息
manage_subscriber_role	前台用户角色关系表，存储前台用户和前台角色的多对多关系

续表3.1

manage_user	后台用户表，后台管理员信息表
manage_user_role	后台用户角色关系表，存储后台管理员与后台角色的多对多关系
wj_candidate	投票候选项表，保存投票活动的候选项
wj_check	填空验证规则表，记录问卷填空题题型的内容验证规则
wj_choice	选择题选项表，存储问卷中选择题的选项内容
wj_comment	评论信息表，存储系统中评论及评论关系表
wj_commentrecord	评论点赞记录表，记录用户对评论的点赞，拍砖
wj_problem	问卷问题表，保存问卷调查的问卷的问题
wj_question	问卷调查表，保存问卷调查活动信息
wj_vote	投票表，存储投票活动信息
wj_voterecord	投票记录表，记录用户对投票候选项的投票记录
wx_param	微信参数表，配置微信的参数，用于与微信开方接口通讯
wj_answer	用户答题答案表，存储用户对每道题的答案
wj_reply	用户问卷表，记录存储用户参加作答的问卷
wj_footprint	足迹表，用于记录用户的访问浏览记录
wx_user	微信用户表，存储从微信接口获取到的用户信息

以下主要介绍5个核心表。

（1）文件索引表basics_file，为用户上传的文件或图片提供数据索引方便使用和查找详情如表3.2所示。

表3.2 文件索引表basics_file

字段	数据类型	长度	是否为空	主键	说明
id	bigint	20	否	是	自增长字段
createTime	timestamp		是	否	创建时间
state	int	2	是	否	状态
realName	varchar	1024	是	否	文件真实名称
uniName	varchar	1024	是	否	唯一名称
filePath	varchar	1024	是	否	文件路径
fileType	varchar	32	是	否	文件类型
imgFlag	int	2	是	否	是否是图片
surface	varchar	64	是	否	数据库表名
nature	varchar	64	是	否	字段名称
surfaceId	bigint	20	是	否	数据库表信息Id

（2）评论信息表wj_comment，属于Wenjuan调查子系统用户存储用户评论详情如表3.3所示。

表3.3 评论信息表wj_comment

字段	数据类型	长度	是否为空	主键	说明
id	bigint	20	否	是	自增长字段
createTime	timestamp		是	否	创建时间
state	int	2	是	否	状态
comment	varchar	2048	是	否	评论内容
useless	bigint	8	是	否	拍砖数量
fabulous	bigint	8	是	否	点赞数量
subscriberId	bigint	20	否	否	主人表 id
subscriberSurface	varchar	64	否	否	主人表名称
subscriberNature	varchar	64	否	否	主人表文字信息段
surface	varchar	64	否	否	被评论表表名
nature	varchar	64	否	否	被评论表字段名
surfaceId	bigint	20	否	否	被评论标 id
costSurface	varchar	64	是	否	代价表表名
costNature	varchar	64	是	否	代价表字段名称
costSurfaceId	bigint	20	是	否	代价表 id

（3）投票表wj_vote，属于Wenjuan调查子系统，记录投票活动内容的38个字段详情如表3.4所示。

表3.4投票表wj_vote

字段	数据类型	长度	是否为空	主键	说明
id	bigint	20	否	是	自增长字段
createTime	timestamp		是	否	创建时间
state	int	2	否	否	状态
Name	varchar	64	否	否	投票活动名称
Cover	varchar	512	是	否	活动封面图片id列表
introduce	varchar	2048	是	否	投票活动介绍
imgIntroduce	varchar	512	是	否	活动介绍图片id列表
themeColor	varchar	10	是	否	活动1600万主题色
repeatFlag	int	2	是	否	是否重复多日投票
frequency	int	3	否	否	每日投票次数
restrictFlag	int	2	否	否	是否限制IP和地区
province	varchar	64	否	否	限制地区省份
City	varchar	64	否	否	限制地区城市
district	varchar	64	否	否	限制地区区县
ipWxUserFrequency	int	3	是	否	每个IP允许的用户数
overt	int	2	是	否	是否公开投票
comment	int	2	是	否	是否开启评论

续表3.4

Outside	int	2	是	否	是否公开报名
sponsor	int	2	是	否	是否显示主办方
sponsorName	varchar	48	是	否	主办方名称
sponsorPhone	varchar	16	是	否	主办方电话
reward	int	2	是	否	设置奖励
rewardDesc	varchar	2048	是	否	奖励说明
rewarImg	varchar	512	是	否	奖励图片 id列表
startTime	timestamp		是	否	开始时间
endTime	timestamp		是	否	结束时间
voteType	int	2	是	否	1文字2 图片3 图文
unusual	int	2	是	否	管理标志
unusualEplain	varchar	256	是	否	异常原因
reportEplain	varchar	256	是	否	举报信息
rWxUserId	bigint	20	是	否	举报人 id
wxUserId	bigint	20	是	否	发起人id
candidateNum	int	3	是	否	候选数量
candidateIndex	int	3	是	否	候选项序号
supNum	int	20	是	否	投票活动总票数
voteDataStr	text		是	否	投票活动Json字符串
voteCode	varchar	16	是	否	投票活动密码
suspend	int	2	是	否	是否暂停

（4）候选项表wj_candidate，用于保存投票活动的各个候选项详情如表3.5所示。

表3.5候选项表wj_candidate

字段	数据类型	长度	是否为空	主键	说明
id	bigint	20	否	是	自增长字段
createTime	timestamp		是	否	创建时间
state	int	2	否	否	状态
orderNum	int	5	否	否	排序号候选项选手号
cover	varchar	512	是	否	活动封面图片id列表
introduce	varchar	1024	是	否	候选项介绍
imgIntroduce	varchar	512	是	否	选项介绍图片id列表
name	varchar	64	是	否	候选项名称
supNum	int	20	是	否	选项票数
useFlag	int	2	否	否	拒绝，审核中，通过
voteId	bigint	20	否	否	投票活动id
voteType	int	3	否	否	投票类型
wxUserId	bigint	20	否	否	报名人微信用户id

续表3.5

comment

varchar

否

评论数量

（5）问题表wj_problem，用于记录问卷中各个题目详情如表3.6所示。

表3.6 问题表wj_problem

字段	数据类型	长度	是否为空	主键	说明
id	bigint	20	否	是	自增长字段
createTime	timestamp		是	否	创建时间
state	int	2	是	否	状态
name	varchar	256	是	否	问题问题表
questionId	bigint	20	是	否	所属问卷id
orderNum	int	5	是	否	题号
qType	varchar	26	是	否	问题类型
cover	varchar	1024	是	否	题目封面id列表
must	int	2	是	否	是否必须作答
choicesNunber	int	4	是	否	选择题选项数量
answerNumber	int	4	是	否	选择题答案数量
lineNumber	int	2	是	否	简答题文本框行数
checkType	varchar	32	是	否	填空检查类型
checkId	bigint	20	是	否	填空检查id
maxFen	int	2	是	否	评分题最高分
score	int	3	是	否	本题分数
genre	int	2	是	否	类型
wxUserId	bigint	20	是	否	所属用户id
examineFlag	int	2	是	否	是否考试题目

4系统实现

4.1系统的开发与实施环境

系统的开发环境如下：

（1）技术平台： J2EE[10]

（2）开发软件：IntelliJ IDEA 、微信开发者工具

（3）开发语言：Java[11]、Jsp、微信小程序

（4）web服务器：Tomcat 7

（5）数据库：MySql 5.5、Redis 3.2

（6）版本控制：Tortoise SVN

（7）Jar包管理：Maven 3.5

（8）操作系统：Windows 10 专业版

实施环境：

（1）数据库：MySql 5.5、Redis 3.2

（2）web服务器：Tomcat 7 、Nginx[12]

（3）操作系统：Windows Server 2012

4.2 核心技术简介

本系统所涉及的技术如表4.1所示。

表4.1核心技术

技术名称	说明
Apache Shiro	用于做权限控制的轻量级框架，在本系统中采用基于url和基于标签的控制方式[13]
MyBatis	是一款持久层框架，用于操作数据库
Spring MVC	属SpringFrameWor的子产品，将Web层进行职责分层帮助开发者敏捷开发。
Spring	开源的实现IOC容器和AOP的耦合性轻量级框架[14]
Apache POI	操作Microsoft Office文件的开源库，用于为excel文件的生成和读取等操作
Quartz	由java编写的开源作业调度框架，Wx微信服务子系统以每1.5小时频率向微信请求accessToken
Common Email	是对java自带的mail模块的封装，轻松的实现不同类型邮件发送，为用户发送报表[15]
Apache Log4j	一个强有力的日志操作包，用于系统日志的记录
Google zxing	谷歌发布的用来识别多种格式条形码的开源项目
FFmpeg	用来操作音频、视频的开源计算机程序，用于将上传后的MP4视频转化为m3u8格式
JQuery	是一个 JavaScript 库，封装了大量js原生代码方便开发者使用
Layer	一个基于JQuery的弹出层插件，可自定义页面，提示消息，对话框
Ajaxfileupload	是异步文件上传插件，项目已停止维护，为兼容JQuery版本在项目用有修改部分源码
JQuery Validate	一款文本数据验证的插件，方便在前端校验数据减少服务器负荷
Ztree	是一款轻量级的树结构框架，用于按钮菜单树的操作和实现树型显示数据
H-ui	轻量级前端框架，简单免费，兼容性好，用于做后台管理页面的布局设计

续表4.1

ECharts	百度推出的一款数据分析与数据可视化插件，用于数据分析和报表
BMap	百度地图推出的小程序端的地图插件，用于定位用户信息，分析用户特征

4.3 底层接口和类的封装

4.3.1公共类的实现

在本系统中改进MVC的三层架构将控制层细分为页面跳转控制层、逻辑控制层、数据操作层。对于在数据操作层对数据库的操作，逻辑控制层中增、删、改、查、检验实体对象的逻辑中常用的业务需求是很多的每个实体类的操作十分雷同。于是为方便起见，我们对各个实体类对数据库的访问操作做了进一步的提取。利用java中提供的泛型和继承得出BasicsAdminMapper数据访问层公共类，各个实体dao操作类均继承该公共类，以提高代码的复用性。基于泛型和反射的知识，对逻辑控制层做提取得到BasicsService逻辑控制层公共类。

BasicsService公共类实现如表4.2所示。

表4.2 BasicsService公共类实现

方法名称	说明
getBasicsAdminMapper()	抽象方法钩子函数，子类中实现让父类也可以使用子类的属性
addSave(E pojo)	添加实方法，方法中调用验证方法通过后会自定设置状态插入数据库
editSave(E pojo)	抽象方法由子类实现
delete(Long id)	对象的逻辑删除，修改状态字段state的值为0表示停用，提供了id为String类型的重载
deleteByPrimaryKey(Long id)	对象的物理删除，直接从数据库中删除，提供了id为String类型的重载
selectByPrimaryKey(Long id)	根据id查找对象并返回，提供了id为String类型的重载
listByAttribute(String attribute, String checkVal)	根据属性查找只找状态为启用的 state=1
istByAttrValueMap(Map<String,String>attrValue, int state)	传递一个字段、值Map，状态生成需要查询的sql语句并执行返回结果列表
listByAttrValueMap(Map<String,String> attrValue)	传递一个字段、值Map，默认状态为1成需要查询的sql语句
listByAttributeResponse(String attribute)	根据属性查找只找状态为启用的 state=1，返回值ResultResponse在后边介绍
listJson(TableUploadUtil tableUploadUtil)	根据分页条件计算页数，查询当前页内容列表，返回值TableReturnUtil在后详细介绍
loadCheckAttributeIsExistence(String attribute, String checkVal, Long checkId)	用于对象某字段的字段值已存在的判断，checkId为0存在即为存在，checkId为当前实体对象id会判断存在的值是否是本身的

续表4.2

checkInfo(E pojo)

在将对象持久化入数据库之前，做对象实体的属性验证功能，用到自定义的多种验证规则后边详述

BasicsAdminMapper公共类实现由表4.3所示。

表4.3 BasicsAdminMapper公共类实现

方法名称	说明
insert(T record)	用于实体T的添加，其中采用主键返回策略将自动id返回给
updateByPrimaryKey(T record)	实体类T的更新工作，更新主键id为关键不能改变
deleteByPrimaryKey(Long id)	实体类T的删除，这个方法是实体类的物理删除方法
selectByPrimaryKey(Long id)	实体类T根据id的查询，返回一个T的一个实体对象使用频率极高
listByAttribute(String attribute, String checkVal, Integer state)	利用MyBatis中$和#两种符号的功能差异实现，可以用来查询指定字段、指定字段值的实体列表
listByAttrValueMap( String attrValueMap, Integer state)	原理与listByAttribute方法相同，这可以查询多个指定字段的指定值，使用时切忌数据库表中要存在这些字段
getCount(TableUploadUtil tableUploadUtil)	根据分页信息查询返回所有复合条数的数据数量，用于统一的数据列表分页，TableUploadUtil类会在后边详细叙述
listPageObjs(TableUploadUtil tableUploadUtil)	根据条件查询分页中当前页的数据，返回实体类T的对象列表

4.3.2关于ResultResponse统一接口参数的实现

系统采用前后分离的方式，最有效的实现方式就是通过权限token和json数据通讯，采用接口的方式，常存在不同接口间返回值的差异带来的不必要麻烦，为此系统中统一设计接口返回值达到接口返回值的一致性规范性，为使用提供便利。

ResultResponse统一接口如表4.4所示。

表4.4 ResultResponse统一接口

字段名称	说明
String resultMsg	返回信息提示用于对话框提示用户
String resultCode	结果码：200操作正常400返回操作异常401权限不足
Object data	成功后存放用户请求的数据

4.3.3关于数据分页的实现

系统中分页的实现主要有两种方式：方法一，页面一次将全部数据请求到页面缓存，用前台分页插件做分页，显示当前页的内容；方法二，采用数据库分页技术，每次请求得到符合条件的数量和当前页应显示的数据信息。方法一请求次数少但大量数据可能存在浪费过剩还有带来带宽占用过大的问题，方法二虽然请求次数高于方法一但每一条数据都是用户选择的，没有数据过剩的情况，大大降低带宽的占用提高访问速度。综上所述结合本项目的海量数据问题我们选择第二种实现方式。前端使用jquery.dataTables插件做分页的页面渲染，后端我们设计了适用于该插件的分页请求参数类TableUploadUtil和分页结果返回类TableReturnUtil。

分页请求类如表4.5所示。

表4.5 TableUploadUtil分页请求参数类

字段名称	说明
int start	开始记录数
int draw	前台传过来的要请求的页数
int length	每页记录数，分页大小默认为10
String searchdetail	搜索条件值
String searchdeAttribute	搜索条件属性
String sql	附加搜索sql

分页结果返回类如表4.6所示。

表4.6 TableReturnUtil分页结果返回类

字段名称	说明
long pageLength	分页大小默认为10，用于微信小程序分页
int draw	当前页数
long length	每页记录数，分页大小默认为10
long pageNum	符合条件的总页数，用于微信小程序分页
long recordsTotal	符合条件的信息总条数
Object data	当前页数据信息

4.3.4关于自定义的验证方式和校验工具类的实现

在项目中大多数需要用到数据验证，确保数据库的安全防止sql注入攻击和规范用户输入信息，数据校验多采用两种实现思路：一、前端的数据校验，可以有效减少后端验证带来的带宽占用问题减少对后端接口的请求，但是不能拦截技术人员绕过前言验证的攻击；二、在后端中做数据校验可以有效解决数据安全性问题。在本系统中采用二者结合的方式前端验证作为验证的第一道防线减少对后端的请求，用后端验证作为数据安全和数据规范保证数据完整性的最后一道屏障。前端验证使用jquery-validation插件。后端验证定义了运行时的CheckAnnotation，该类包括：type()方法默认值为“required”用于确定验证类型、message()方法返回验证失败的提示信息、attribute()方法确定要验证的数实体属性。在CheckAnnotationUtil类中存有验证类型与数据校验类的方法名称，通过反射的方式动态执行验证方法。系统实现了RegexUtil类作为数据校验的工具类。以此实现验证规则通过在实体类属性上加一个CheckAnnotation的简单方式实现多种多样的数据校验。RegexUtil数据校验类表如表4.7所示。

表4.7 RegexUtil数据校验类

字段名称	说明
htmlFilter(String inputString)	过滤html代码
isContainsSpecialChar(String text)	是否包含中英文特殊字符，除英文"-_"字符外
isChineseChar(String text)	判断中文字符(包括汉字和符号)
isEnglish(String text)	判断英文字符(a-zA-Z)
isZipCode(String text)	邮政编码验证
isIdCardNo(String text)	第二代身份证号码验证
isMobile(String text)	手机号码验证
isPhone(String text)	电话号码验证
isNumeric(String str)	验证手机号或电话号码
isDigits(String str)	只能输入数字
isEmail(String str)	匹配Email地址验证

4.3.5关于微信小程序端的js封装

微信小程序在2016年内测，正式发布于2017年，相比于其他技术平台起步较晚，但是借助腾讯公司的超大用户基数，势头迅猛发展迅速。微信小程序支持JavaScript的ES6标准，web上的js插件经过简单修改，即可在微信小程序上使用。为统一开发本系统封装了：dateTimePicker.js用于为时间picker提供最高年月日时分秒6级的时间选择数据；redis.js用于统一管理操作微信小程序缓存；bmapLocation.js结合百度官方bmap接口类实现对用户的定位和位置服务；dialog.js用户消息提示和弹出式对话框的操作；urls.js配置微信小程序用于和后端服务接口地址；util.js提供常用的操作如访问服务器api、时间字符串操作等等；

Dialog对话框如表4.8所示。

表4.8 dialog.js对话框的方法

方法名称	说明
warnModalBack(title, content, callback)	带确认按钮的对话框，其中callback为回调函数
warnModal(title, content)	带确认按钮的提示框
warnModalError(content)	带确认按钮的错误提示框
warnModalSuccess(content)	带确认按钮的成功提示框
warnModalTrueBack(title, content, callback)	带“是”“否”按钮的询问框，callback为回调函数
showToastAutoError(title)	带错误图片自动消失的提示框
showToastAutoSuccess(title)	带成功图片自动消失的提示框
showToastSuccess(title)	微信原装的成功提示框
showToastLoading(title)	微信原装的加载动画对话框

4.4 前端系统的实现

4.4.1界面UI实现

为能给用户提供一套简洁大气UI，本系统规定：

（1）不同页面统一字体大小为30rpx。

（2）Icon主题颜色色值为# 1296DB、大小为32rpx。

（3）页面统一背景颜色为#F3F3F3。

（4）页面标题颜色色值#FFF、页面标题背景颜色色值#336799。

（5）核心按钮均采用#1262DB至#12CADB的椭圆动态背景渐变色。

4.4.2问卷添加页面

问卷添加页面以选项卡效果呈现。页面分为活动内容、问卷设置、题目项三部分。利用上一步下一步按钮进行切换，每次下一步被触发时将会触发隐藏任务保存草稿，当用户中途退出程序后再次进入时询问用户是否使用草稿。

问卷添加页面界面效果如图4.1所示。

图4.1 问卷添加页面

（1）活动部分包括设置问卷封面（必须上传）、问卷名称（1到20个字之间）、问卷介绍（不能为空）、问卷图片介绍（任意张）

（2）问卷设置部分包括设置主题颜色（默认#000000）的弹出式拾色器、问卷开始时间和结束时间、设置地区和IP限制的开关、省市区三级联动选择器（默认北京市-北京-东城区）、数字按钮组的同IP微信用户数量（默认为1）、提供是否公开是否可以评论是否显示主办方的开关，主办方名称（在开启显示主办方的开关时不能为空），主办方电话（在开启显示主办方的开关时必须为手机号）

（3）题目项部分包括设置是否试卷类型的开关（默认为关）、添加题目的按钮（试卷模式下只能添加单选题和多选题）、点击可选中某题目将显示该题的编辑复制上移下移删除按钮、提供预览功能为方便用户操作、发布问卷后清除草稿询问用户是否跳转到问卷答题页面是则跳转否则后退回个人中心。

4.4.3问卷题型实现

问卷提供单选题、多选题、填空题、简答题、评分题、定位题、位置题、文件题、图片题九种题型可供用户选择进而设计具有强大功能的问卷。

（1）单选题界面提供题目图片的上传、选项图片的上传、可以选择被调查者是否必须作答、单选题选项数量不能低于2个、在选择问卷模式为试卷后必须设置其中一个为正确答案。

（2）多选题提供题目选项的图片上传、选择是否必须作答、选项数量不能低于两个、在选择问卷模式为试卷后必须至少设置其中两个为正确答案。

（3）填空题可上传题目图片、设置是否必须作答、可在手机号、邮箱、二代身份证号等选择一种验证方式限制被调查者输入信息。

（4）简答题提供题目的图片上传、选择是否必答、选择显示时多行文本的行数。

（5）评分题可设置题目图片、在2-10之间选择设置最高分、选择被调查者是否必须作答。

（6）定位题、位置题、文件题、图片题这四种题型默认为必答题。

问卷各类型问题界面效果如图4.2所示

图4.2 问卷各类型问题

4.4.4投票页面实现

投票的添加部分与问卷的添加页面雷同，不再赘述。投票详情页面部分主要包括详情页面、活动详情页面、候选选投票页面、选项报名页面、候选项管理页面。

详情页面需要根据发起者设置是否开启评论进而选择是否显示评论点赞部分，候选项显示主要有根据选手号显示和根据排行榜显示，排行榜显示时前三名分别采用金银铜三个icon其余选手则为排名名次。根据投票类型的不同，选手号列表显示效果不同，文字类投票会采用文字瀑布流的形式显示，图片和图文类型均采用图片显示。

投票UI设计具体界面如图所示。

图4.3 投票UI设计

4.4.5数据分析的实现

在完成问卷活动结束后对数据分析处理是一个重要的功能。本系统提供五种类型的图表：仪表盘用于时间进度图显示活动进度、折线图根据活动时间长短显示各时段用户答卷数分布、饼状图用于对单选题的选择数量分析、柱状图显示多选题个选项的选择率、地图用于定位用户具体位置。具体页面如下图4.4和图4.5所示。

图4.4 数据分析页面1

图4.5 数据分析页面2

4.4.6其他部分效果实现

在用户权限不足时会自动跳转到401权限不足页面，提醒用户到登录界面切换账号登录。本系统提供介绍视频供用户学习使用本系统，在视频介绍页面即可查看。由于微信小程序不能直接播放m3u8格式的视频，介绍页面采用web-view标签将服务器视频播放页面导入的方法实现。

部分在其他效果如图4.6所示。

图4.6 其他部分页面

4.5 后端管理的实现

4.5.1用户登录的实现

后台管理利用Shiro框架采用Url加标签级的权限控制方式利用Redis数据库做用户权限的高速缓存，用户全部权限存储Redis中有效期为10分钟，Key的生成规则如下："session_"+LoginType.ADMIN.toString()+"_"+us.getUserName()+"_"+us.getUserPassword()。LoginType.ADMIN.toString()为用户的登录类型、us.getUserName()为用户名称、us.getUserPassword()为用户密码。当用户权限不足或session过期时自动跳转到登录页面，当Key权限过期时自动加载刷新当前用户的权限放入Redis缓存。登录后跳转到后台主页默认加载欢迎页面。

登录页面下图4.7所示。

图4.7 登录页面

4.5.2资源管理的实现

本系统按钮资源、角色、用户之间为多对多对多关系两两之间采用关联表进行关联。可任意创建角色分配资源也可以创建用户分配角色超级管理员角色拥有全部权限。

资源列表页面如下图4.8所示。

图4.8 资源列表页面

4.5.3验证方式的实现

本系统填空题验证通过正则表达式实现共有：非空、手机、邮箱、姓名、身份证、日期、含零整数、非零整数、QQ九种。超级管理员可以后期对验证方式进行管理。

验证列表页面如下图4.9所示。

图4.9 验证列表页面

结束语

在学校领导的安排下和指导老师的帮助下，我们进行了数月的毕业设计工作。完成了从系统分析到考察现有软件再到设计开发一款基于微信小程序的工作。完成了发布问卷投票、和数据收集、数据分析的功能设计。我深深地感受到了，单单在课本上学知识是没有用的，必须贴合实际，在学中应用，在应用中在继续学习，只有这样形成良好循环，才能学以致用，提高自身的学习能力和学习效率。

本系统有如下优点：

（1）设计之初采用了前后分离的模式为以后跨平台提供了扩展基础。

（2）使用Shiro采用Url加标签级的权限控制方式利用Redis数据库做高速缓存。

（3）本系统用Nginx配合Toncat服务器实现简易的负载均衡

（4）采用微信小程序端的百度EChart实现对问卷结果的数据分析

（5）使用FFmpeg软件将MP4格式的视频转为m3u8格式视频并，实现前端页面对视频的分步加载和播放。

此次毕业设计程序凝聚了我这本科两年专科三年学习的大部分内容，更是对全部知识的最后一次重大检阅。由于此次毕业设计过程中认识不足对程序编写部分出现过于低估，导致毕设后期时间严重不足，难免带来设计上的缺陷和不足，敬请老师们同学们指出。