基于微信小程序的答疑系统设计与开发

概括

本文叙述了微信小程序答题系统的设计与实现过程。随着互联网技术的发展，软件系统的设计可以依托网络应用，减少对物理设备的依赖。本文结合国内外答题系统的现状，从微信小程序的设计入手，围绕答题系统的基本功能展开设计，实现微信小程序的答题控制器作为答题系统，替代竞争对手的物理按钮，进一步减少系统的物理依赖，达到降低答题系统使用成本的目的。

本文首先阐述了本课题的研究背景及意义、关键开发技术以及微信小程序应用的研究内容。然后从技术和业务两个方面对系统的实施进行可行性分析和系统需求分析。接着进入系统的设计阶段，进行整个软件系统的设计与分析，通过绘制ER图来设计数据库，理清实体类之间的关系和逻辑结构。接下来利用微信小程序平台、Java平台、框架、框架、Vue框架等实现整个系统功能的开发。最后从系统部署到系统功能完整性、页面逻辑的系统测试，完成了本课题的研究内容并做了必要的总结。本问答系统使用微信开发者工具作为前端开发软件、作为后端开发软件、作为后端数据库软件，根据Web应用中程序的特点进行程序开发。

关键词：答疑系统、微信小程序、减少身体依赖

基于微信小程序的答疑系统设计与实现

1 简介

1.1 研究背景

1.1.1 背景

在比赛、活动、考试等场合，通常会使用答题系统。但如果主办方采用包括选手答题、前后端交互等功能的全套实体系统，实体设备的引入无疑会增加比赛的成本。针对这一痛点，本课题从微信小程序与网页交互的可行性出发，研究该问题的可行解决方案。

本课题基于微信小程序进行设计，因为现在微信和智能手机非常普及，如果参赛者使用移动设备作为比赛设备，以微信小程序作为操作平台，可以更方便的实现一般智力竞赛活动所需的功能，降低举办比赛活动的成本。本设计依托微信小程序实现，用户可以通过微信小程序接口实现多端交互操作。

该系统采用微信开发者工具作为开发软件,结合Web应用中程序的特点,采用数据库系统进行程序开发。

1.1.2 选题意义

本设计设想创建一个问答系统，通过微信小程序实现单人问答、选手答题、发布比赛活动、多人问答等功能。对于开发者来说，可以学习和研究微信小程序的开发过程；对于用户来说，活动组织者可以利用此系统

在基本的物理设备（屏幕、手机、电脑）条件下举办小型或中型智力竞赛可以大大降低举办活动的成本。

1.2 研究现状

目前，尚无任何软件系统能够支持仅具备基本物理设备（赛事屏幕）的小型或中型问答赛事，现有的问答系统如“文聚星”等仅支持单一终端设备，且并非为竞赛而设计，无法实现参赛者的快速答题环节。

1.3 论文结构

本次毕业设计的工作内容为：第1章阐述基于微信小程序的问答系统的研究背景和意义。

第2章简单介绍了本系统所涉及的关键技术。

第三章需求分析阶段，对系统进行需求分析和可行性分析。

第四章，系统设计阶段，理清实体类之间的关系，绘制ER图，研究数据库关系。

第五章，系统实现阶段，基于微信小程序的答疑系统各功能模块的实现。

第六章系统测试阶段，对系统进行全面测试，系统地检查系统中存在的问题，并进行修正。

第七章对本次毕业设计进行总结并对未来进行展望。

2. 关键技术介绍

2.1 前端技术

2.1.1 微信小程序平台及微信开发者工具

微信小程序是连接用户和服务的一种新方式，在微信内部可以方便的获取和传播，用户体验极佳。标准微信小程序是指使用微信自己开发的一套标签语言开发的项目，标签语言对应普通网页中的HTML、CSS等，在微信客户端环境中展示。小程序的开发与普通网页非常相似。

微信开发者工具是微信官方提供的微信小程序开发工具，集开发、调试、预览、上传等功能于一体。微信团队已发布微信小程序开发者工具、微信小程序开发文档、微信小程序设计指南。新版开发者工具集开发调试、代码编辑、程序发布功能于一体，帮助开发者简单高效地开发微信小程序。

2.1.2 Vue 框架

Vue 是一个用于构建用户界面的渐进式框架。Vue 的设计理念是自下而上逐层应用。其核心库只关注视图层，不仅易于使用，而且易于与第三方库或现有项目集成。与现代工具链和各种支持库结合使用时，Vue 也完全有能力驱动复杂的单页应用程序。

2.2 后端技术

2.2. 使用框架

目前大部分公司仍以Java为开发语言，Java作为面向对象的编程语言，具有接近C语言的高性能开发语言的特点，此外Java能够提供多线程，同时执行多个线程，是一个快速开发框架，可以快速集成第三方框架，简化XML配置，全部以注解形式实现，内置容器，帮助开发者快速开发部署

。

2.3 数据库技术

2.3. 框架

它是一款优秀的持久层框架，其主要思想是将程序中大量的SQL语句剥离出来，配置在配置文件中，即开发人员无需修改代码，直接修改配置文件中的SQL语句，实现灵活的SQL配置。它封装了通过JDBC访问数据库的操作，支持常见的SQL查询、存储过程和高级映射，几乎省去了所有的JDBC代码和

手动设置参数和检索结果集。配置和映射原始类型、接口和

（，普通的旧 Java 对象）用于数据库中的记录。

2.3. 数据库管理系统

它是最流行的关系数据库管理系统，也是 Web 应用程序中最好的（

STEM：关系数据库管理系统（）应用软件之一。支持大型数据库。可以处理数千万条记录的大型数据库。使用标准SQL数据语言形式，可以在多种系统上运行，支持C、C++、Java、PHP等多种语言。支持5千万条记录的大型数据库和数据仓库。

3.需求分析

3.1 需求分析

3.1.1 功能要求

需要使用微信小程序作为竞答活动的控制器，即用户可以在微信小程序上对活动中的问题进行答题，结果会实时显示在大屏幕上供观众观看。本系统需要实现的重要功能就是微信小程序与PC网页的交互。

3.1.2 技术可行性

本次毕业设计前端微信小程序使用了JS、WXML、JS、JSON技术，后端使用了Java技术和框架，后端网页使用了Vue框架进行开发。这些技术都比较成熟，可以在比较短的时间内学习并上手这些技术，完成项目的设计和开发。

3.1.3 运营可行性

本项目是一个高度集成的微信小程序开发平台，小程序端页面简洁大方，适合每一位智能手机用户。

连接可以完成多个客户端之间的互联互通，本系统后台功能模块采用vue技术与前端框架，前后端分离使得系统可扩展性强，两端开发互不干扰，同时对于具备一定网站开发基础知识和技术的开发者来说，这些技术可以快速的引入和运用，因此在系统的运行上也是可行的。

图3-1 实物设备效果图

3.1.4 业务流程分析

业务流程分析是为了实现最终的开发目标而对一系列活动过程进行的分析。分析方法有很多种，从整体到局部，从抽象到具体等等。如果能在具体的系统设计之前做好业务流程分析，系统开发就会事半功倍。业务流程图如下图3-2所示：

图3-2 通用用户系统业务流程图

图3-3 通用用户系统业务流程图

图3-4 完整系统业务流程图

3.1.5 小程序发展目标

答题系统需要满足智力竞赛主办方的需求，在尽可能减少硬件设备的同时，可以通过参赛者智能手机上的微信客户端小程序进行操作，实现作为答题控制器的功能，替代物理按键的使用。

4.数据库设计

4.1 数据库介绍

简单来说，数据库可以看作是一个电子文件柜——一个存放电子文件的地方，用户可以对文件中的数据进行添加、提取、更新、删除等操作。所谓“数据库”，就是一组按一定方式存储在一起的数据集合，可以被多个用户共享，具有尽可能少的冗余度，并且独立于应用程序。关系数据库是在关系模型的基础上建立起来的数据库，它利用集合代数等数学概念和方法来处理数据库中的数据。现实世界中的各种实体以及实体之间的各种联系都是用关系模型来表示的。几乎所有的数据库管理系统都配备了ODBC驱动程序，以实现数据库之间的集成。这种系统使用功能非常全面、集成度高、易于管理的数据库来存储和管理数据。

4.2 数据库概念设计

系统ER图：ER图设计的正确性取决于数据库设计者是否能真正掌握应用环境的业务流程和业务流程中涉及到的各种客观对象以及它们之间的活动。这需要准确深入的用户需求分析。这些客观对象如果需要记录，就抽象为ER图中的实体（把描述实体的诸多相关数据抽象为实体的属性，把具有相同属性的诸多实体抽象为实体类型）。如果还需要记录它们之间的活动，就抽象为ER图中的连接，这是ER图设计的重点。

图4.2 ER关系图 4.3 实体类字段

用户表字段

用户表用于存储用户名、性别、手机号等用户信息，该表有18个字段，

,,,年龄,性别,,,角色,,,,,,,,如下图所示：

图4.8 用户表字段

用户操作日志表字段

该表用于存储用户的分数，题目类别ID，题目ID等答题信息，该表有6个字段：id,,,,,。

图4.8 用户操作表字段

用户认证令牌表字段

该表用于存储用户的微信密码，用户名等信息，该表一共有7个字段id,,,,,,。

图4.3 用户密码表字段

文本内容记录表字段

表user存储了用户的文本创建开始时间，文本内容ID，文本用户ID等文本信息。该表有3个字段id,,。

图4.4 文本内容记录表字段

竞赛答题纸字段

该表用于存储比赛名称、活动范围、题目类别等比赛答题卡信息，该表有15个字段：id、name、

,,,,,,,,,,,,。

图4.5 标题类别表字段

标题表字段

该表用于存储用户姓名，性别，手机号等基本信息，该表一共有12个字段。

，，，，，，，，，，。

图 4.6 标题表字段

比赛答题纸字段

该表用于存储比赛答题纸相关的信息，如答题纸ID、答题纸类型、答题纸总分等。该表有14个字段

d,,,,,,,,,,,,,。

图 4.7 比赛答题纸字段

比赛答题纸用户答题表字段

用于存储用户的比赛答题纸ID、题目ID、题目文本信息等用户答案信息。

共有14个字段：id,,,d,,,,t_id,,,,,。

图4.8 竞赛答题纸用户答题纸字段

标题类别表字段

该表用于存储主题类型ID、类别名称、活动范围等基本信息，表有名称、类别、活动范围等6个字段。

图4.9 标题类别表字段

． 4 数据库表设计 本系统所采用的数据库为5.7版本。

表4-2 用户操作日志表

表4-3 用户表

表4-4 文本内容表

序列号

字段名称

字段类型

字段长度

它是空的吗？

笔记

整数

11

自动递增

文本内容 ID

文本

是的

文本（json）

是的

（5）问答比赛问题表

表 4-5 智力竞赛试题表

表 4-6 问题表

序列号

字段名称

字段类型

字段长度

它是空的吗？

笔记

整数

11

自动递增

首要的关键

表4-7 比赛问题答题表

表 4-8 用户对竞赛问题的回答

5.1 系统接口设计

5.1.1 用户界面设计原则

遵循用户原则。在用户界面设计中，我们必须明确用户的需求，遵循以用户为中心的原则来制定页面的具体设计。我们需要从用户的立场和角度来考虑设计网页。用户不会在同一个网页上花太多的时间，只要找到了自己想要的信息，就会跳转到另一个页面继续寻找下一个信息。我们要做的是让网站操作起来更加方便、简单，让你一目了然。要做到这一点，就必须了解用户的需求、目标、喜好和操作习惯。

易操作原则。这是网页设计最基本、最重要的原则，应该让用户感觉是在控制软件，而不是被软件控制。记住网页的可操作性，用户的习惯和能力各不相同，他们不是网页设计师，不懂你网页设计的原理和操作方法，再加上绝大多数用户只有很基础的电脑使用经验，只要操作稍微复杂一点，他们就会感觉很费力，所以网页设计师需要注意减少操作，减轻用户的负担，让操作更简单。

e...code=..log(.code,.code) //将表单提交给相应接口进行处理

e...代码=.代码

.log（.代码，.代码）

//将表单提交到相应接口进行处理

5.2.1 微信小程序系统登录功能设计

当用户第一次打开此微信小程序时，前端会向服务器查询用户是否绑定了此小程序，若未绑定，则用户可以通过页面上的注册功能跳转到微信小程序的注册页面，用户完成注册操作后如图5-2-1所示。

图5-2-1 小程序登录功能登录页面及逻辑图 微信小程序登录功能核心代码：

（1）逻辑层代码（）实现如下 wx.({//调用方法(){

如果（.代码）{

//获取微信验证码

应用程序。（/api/wx//auth/bind，e..）

.then(res={.({:});如果(res.code==1){

//将响应结果同步到缓存中

wx.（，res.）

//重定向到小程序首页

wx.({url:///,});

（2）微信小程序登录功能API接口代码（Java）实现如下：

//1.获取用户对象，判断用户是否在数据库中

=.(.());如果（用户==null）{

//返回错误信息

.fail(2，用户名或密码错误);

//2.判断用户名和密码是否匹配

=e.(user,.(),.());if(!){.fail(2,错误的用户名或密码);

//3. 判断用户状态

=.(用户.());if(.==){.fail(3，用户已被禁用);

//4. 获取

=.();

=.(.().(),.().

(),code);if(null==){.fail(4,获取微信失败);

}用户。（）;

=.绑定（用户）；

//返回响应对象令牌

。好的（。（））;

5.2.2 微信小程序系统首页功能设计

竞猜系统微信小程序的主要功能是展示所有竞猜比赛活动，顶部轮播展示当前正在报名或被标记为热门的竞猜比赛封面图，界面中间部分展示已发布的活动，每个活动的右上角标示状态，红色表示

小程序登录功能核心代码：

小程序登录功能核心代码：

（1）逻辑层代码（）实现如下

//将表单提交到相应接口处理请求 list

app.(/api/wx///,this.data.).then(res={//依次执行，并处理返回的结果集

.（{:}）；

//防止下拉刷新

wx.()

//如果请求成功，状态码为1

如果（res.code===1）{=res.

//将数据存储在本地

.({

[.]:re., //将页码存储在数组中

//将页面添加到集合中

:?re.list:此数据..(re.list),

//页数

：关于。}）;

//页码是

if(re.=re.){this.({:,:暂无数据

});

（2）首页界面代码 //View对象

=();

//获取当前用户对象

=();

//答案过滤器

=();

//设置用户级别

。（用户。（））;

//设置固定答题纸类型

.（..（））；

//设置固定答题纸

.（.（））；

//设置固定答题纸

=();

//设置日期和时间

.（（））；

//设置活动范围级别

//设置活动范围级别

。（用户。（））;

//设置答题纸类型

.（..（））；

//创建答案列表

每=.();

//创建答案列表

=.().地图（d-{

//创建视图模型

=.地图（d，.）；

//设置格式化的答题纸创建时间

（.（d.（）））；

//设置格式化的答题纸结束时间

（.（d.（）））；

//返回视图模型

；

}).(.());//将单个视图模型收集到列表中

//设置答案限制

.();

//返回视图模型集合

。好的（）;

5.2.3 微信小程序查看答题结果功能设计

// 根据答题卡ID检查结果

应用程序。（/api/wx////read/+，