本项目主要是为了解决计算机专业的学生在课下自主学习中，由于师生之间缺乏面对面的交流，不可避免地要碰到各种疑难问题，该答疑系统可以通过微信直接登录，老师在线解答学生提出的问题，极大方便了学生和教师的时间成本，提高了学习的效率。该系统主要分为用户端和管理员端两大模块，其中用户端又分为教师和学生两种不同的身份。本文采用mpvue+koa2+mysql技术，设计并实现了计算机基础答疑系统，可以让计算机专业的师生不受时间和地点的限制，互相交流学习的资料和学习中的疑惑。与传统的学习APP相比，功能更具有特定性和目标性。而且现在好多机构都有网上教育平台，大都是以网页形式或APP形式呈现给用户，随着微信在生活中起到不可或缺的作用，微信小程序以不占手机内存空间的优势受到用户的喜爱，所以基于微信小程序来开发一个网上的教育平台非常有意义。
关键词: 微信小程序；计算机基础；答疑；

Application Analysis of Visual Design Elements of WeChat Mini Program
Abstract
Mini Programs are a new open source, and developers may quickly develop a new Mini Program. Mini Programs may be easily accessed and disseminated in WeChat. WeChat Mini Program, referred to as Mini Program, English name Mini Program, is a kind of application does not need to download and install can be used, it realizes the application " At your fingertips; " dream, user scan or search can open the application. After the application is fully open, developers of enterprises, governments, media, other organizations or individuals can apply for the registration of Mini Programs. Applets, subscription Numbers, service Numbers, enterprise Numbers are parallel systems. Applet is a brand-new way to connect users and services. It can be easily acquired and disseminated in WeChat and has excellent user experience. Many things that people work and live can be accomplished by Mini Programs. Common Mini Programs, such as those developed by the catering giant KFC, can completely replace the APP.

Key words：WeChat; Mini Program;

目 录
中文摘要 I
英文摘要 II
1 绪论 1
1.1 前言 1
1.2 课题的来源和背景 1
1.3课题研究的意义及内容 1
2 开发方案和相关技术介绍 3
2.1 系统开发方案 3
2.2 开发工具的选用及介绍 3
2.3 框架选型-----MPVUE+KOA2 4
2.3.1 前端采用mpvue框架 4
2.3.2 后端采用koa2框架 4
2.3.3 前后端联系过程 5
2.4 开发语言-----css+JavaScript 5
2.5 数据库解决方案-----MySQL 6
2.5.1 MySQL简介 6
2.5.2 SQL语言分类 6
2.6 开发环境 6
2.7 系统开发小结 7
3 需求分析 8
3.1 需求的提出 8
3.2 需求分析 8
3.3 用例图 10
3.4 运行环境 11
4 数据库分析与设计 12
4.1数据库概念模型设计 12
4.2 数据库E-R图 12
4.3创建数据库 16
5 系统总体设计与实现 20
5.1系统配置 20
5.2 部分系统流程图 21
5.2.1 登录流程图 21
图5.1 登录流程图 21
5.2.2 添加问题流程图 22
5.2.3 答疑流程图 22
5.3 功能模块实现 22
5.3.1 登录页面的设计与实现 23
5.3.2首页的设计与实现 24
5.3.3消息模块的设计与实现 25
5.3.4 班级模块的设计与实现 27
5.3.5个人信息模块的设计与实现 29
5.3.6 管理员模块的设计与实现 33
6 系统测试 34
6.1测试目标 34
6.2测试方法 34
6.3测试环境 34
6.4测试方案 34
6.5 测试结果 38
7 结论 39
参考文献 40
致 谢 41

1 绪论
1.1 前言
当前已经进入移动智能社会，移动设备能够快速地连入互联网，移动智能端的各种APP方便了大家的学习和生活。据统计，移动智能端中微信的使用占比高达 98%。而小程序是微信开发推出的新型应用程序，用户无须下载安装就可以在微信中进行程序的使用。所以小程序在各个领域都发挥着不同的作用，极大的提高了人们的生活品质和工作效率。对于教育行业来说，学校作为教育、科技的先行者，在互联网发展如此迅速的今天，也需要对教学模式发生转变[13-15]，不再局限于传统的课堂教学。采取线上线下相结合的辅导方式，使学生和老师的交流不受时间和地点的限制，学生的问题可以快速的得到老师的反馈。
1.2 课题的来源和背景
微信是现今社会最受欢迎、应用率最高的社交通信软件，小程序是微信开发推出的新型应用程序，使用方便、覆盖范围广。相比传统的APP，小程序能调用微信基础框架、API接口等，提升了程序的开发效率，此外，小程序能够在微信中快速传播，拥有非常庞大的用户量［1-3］。小程序可以不用下载，不占用手机内存，在推出不久，用户使用迅速达到了4亿，且在多个领域中都得到了迅速的推广应用，如餐饮、服务等行业。在教育领域，移动学习逐步成为未来发展的趋势，传统教学模式的局限性，包括教师少，学生多，上课时间有限，只能面对面提问等，学生问题得不到解答，越听越听不懂的现象逐渐暴露出来。传统的教学模式在答疑方面占用大量的时间资源，并且存在解答不及时、课件时间有限等诸多问题，已经不能满足学生在答疑方面的要求。而因为快节奏的生活，越来越多的人利用碎片时间在任何地点进行学习，这也逐步拓展到高校教育体系中（如慕课、微课）。目前有较多的学习类 APP，其开发周期较长、费用支出较高，而微信小程序内嵌在微信中，用户只要安装了微信就可以直接打开，开发成本较低，显著降低了维护成本［4-6］。
1.3课题研究的意义及内容
教育领域，小程序也在不断地融入其中，许多大众都在用的学习类app也已经开发了小程序，但是并没有专门针对校园里一个专业、或者一类学科使用的小程序。微学习平台能够提供给用户便携的移动学习平台，满足人们随时随地的学习需求，利用了空闲时间，提升个人的知识技能。本系统研究基于微信小程序设计开发用于移动学习和碎片化学习的答题系统，主要是利用校园内微信的社交流量的优势，使用者可以通过微信群以及好友关系进行学习交流。基于微信小程序的信息技术学习系统的推广和传播速度快，受众广泛。用户可以随时随地使用智能手机学习，随时可以中断学习。课堂上课业知识的学习可以结合线上的教学答题辅导是长久存在的需求。鉴于学习者对碎片化知识学习和移动化学习的渴望，以及满足其及时学习和系统化相结合的现实需求，随时随地的复习课堂内容和检测学习效果成为现实需要，因此基于这种需求开发一款针对垂直领域知识学习的轻应用对于学习该领域知识很有实践性意义。

2 开发方案和相关技术介绍
2.1 系统开发方案
在计算机基础答疑系统的开发期间，通过仔细考虑本系统的需求和目标，选择适合的生命周期模型。本计算机基础答疑系统将选用常用的瀑布型生命周期。
瀑布模型（Waterfall Model）是在1970年最早提出的模型，它的核心就是将复杂的问题工序化，将系统功能的设计与实现分步骤完成。它的开发过程与软件生命周期相对应，每个阶段有需要完成的目标，像瀑布水流一样自上而下，使用广泛，且以文档为驱动。每个阶段的完成需要两个必要条件：一个是此阶段的文档编写完成；二是此阶段的质量已得到相关检测人员的认可。除此之外，每个阶段都必须完成验证和测试。最后一部分的执行从交付开始。

计算机基础答疑系统采用此模型进行开发的最大好处，在于系统开发的过程有一个规范的开发流程。本课题的主要目标是老师和学生可以更加深入的讨论问题，让课后习题的讨论变得更加方便，利用碎片化的时间，达到提高自己专业知识的目的。在需求分析过程可以具体了解答疑过程的详细内容，以及需要解决的问题。而此模型的适用范围需要系统需求明确的场合。因为前期已经完成需求分析，所以可以很好的为后期代码的实现服务，最终的测试环节也可以更好的验证需求分析的内容，达到完善整个系统功能的作用。
2.2 开发工具的选用及介绍
本系统采用微信开发者工具+sublime Text代码编辑器作为开发工具。微信开发者工具有很多已经封装好的接口和功能函数，有很多的功能可以直接使用，比如上传、调试等多个功能，对于开发者来说很方便。因为微信的开发团队在官网发布了小程序设计指南，所以在开发期间，所以开发者可以在小程序的官网上查看开发文档和设计指南，简单和高效地开发微信小程序。
Sublime Tex是一个先进的代码（文本）编辑器。具有漂亮的用户界面，比如支持代码高亮显示，让界面看起来更加整洁，每个代码段更加清楚。兼容性也很高，支持主流的操作系统，还包含多种插件，方便快捷。
2.3 框架选型-----MPVUE+KOA2
2.3.1 前端采用mpvue框架
mpvue是一套专门用于小程序前端开发的框架，开发者对于开发有初步的了解即可上手，在开发效率方面来说优势明显，使得开发体验很好。开发者编写Vue.js代码，mpvue将其解析为小程序可以运行的代码并执行。此外，通过执行一条命令即可获得可运行的项目，很方便。对比原生框架，有快速实现、代码复用、低成本和高效率等优点。


2.3.2 后端采用koa2框架
express是koa2的前身，两者的开发团队也是一样的。只是两者采用的语法不同，前者采用ES5的语法，异步操作通过回调函数处理。koa2采用ES7中的async/await+Promise来处理异步操作，不仅代码可读性强，而且支持原生的async/await。它的特点是轻量、健壮、富有表现力，并且async语法对于错误处理有增强。
前后端分离时代的到来，使得前后端可以并行开发，开发效率，项目性能大大提升。不同的路由组件根据不同的url和方法做出不同的响应，而因为一个项目中会存在很多的路由，若将路由处理和响应都放置在一个中间件函数中，会严重影响到代码的可读性和可维护性。koa路由，统一在server/routes/index.js文件中管理。接收不同的api请求，找到相应处理的文件，查到或者修改数据，返回处理的信息。
2.3.3 前后端联系过程：
a.当前端点击按钮时，就调用了这个按钮所对应的方法，比如登录功能（login（））：http://localhost:5757/weapp/+login，由此找到后端对应的login文件。
b. 后端收到请求后，通过server/routes/index.js中的语句，找到有具体执行语句的login文件
c. 先接收前端传递的数据，然后对数据库进行操作，将需要的信息返回到前端，这就是整个前后端联系的过程
本系统采用上述开发框架，使得前后端联系不用过于紧密。这也如果前端页面需要调整，后端基本不用变动，使得系统的可复用性提高。
2.4 开发语言-----css+JavaScript
层叠样式表是一种计算机语言，是用来表现文件样式比如XML或HTML。css几乎包含了所有的字体字号样式，可以实现对网页元素排版的精确控制。不仅在对静态页面的修饰中不可缺少，当然需要与其他脚本语言配合使用。
JavaScript是一种高级编程语言，具有函数优先的轻量级，解释型或即时编译型的特点。不仅适用于开发web界面，同时也在非浏览器的环境中得到了广泛的应用。
本系统开发选择css+javascript，是因为css有如下优点：
a.代码复用:编写一次，在多个页面中引入使用。减少了代码量，更加简洁。
b . 提高了页面加载速度：只需要编写一个规则，不需要每次都编写HTML标记属性，因此代码量减少，从而也就意味着页面加载更加快，时间短。
c. 维护方便：因为一处的代码在另一处可以引用，所以在修改时只需要修改一处，便能达到所有元素更新的目的。
d. 兼容性：可以适用于多种不同类型的设备，并且进行内容优化。
javascript有如下优点：

a.使用时不需要先编译，在程序运行的过程中服务器逐步执行。
b.提供了许多功能特性，方便学习和使用。因为很多都是已经写好的，所以发展的更好。
c.包含了很多编程的语言库，在开发的过程中在更加方便、快速。
d.可以快速定义开发对象。开发过程多样化，同时快速灵活。
2.5 数据库解决方案-----MySQL
2.5.1 MySQL简介
MySQL是一种流行的、分布式的开源的数据库管理系统，现在属于Oracle公司。
近几年，包含的功能不断地完善，且性能也在不断地提高，又有免费开源的优势，所以使用者越来越多。主要是将收集的数据进行结构化的管理可以帮助添加、访问和处理数据并将数据存储于数据库中的不同的数据表中。数据库为带有对象，如数据库、表、视图等提供了方便灵活的编程条件。其中用于访问数据库的通用标准化语言就是结构化查询语言，这是最重要的。
2.5.2 SQL语言分类
SQL语言按照功能可以分为4大类：
a. DQL：主要进行数据的查询，是查询语句。
b. DDL：数据定义，用于建立数据对象，或者进行修改或删除。
c. DML：数据操纵语言，主要对操作数据的命令进行管理，包括更新、删除等；
d. DCL：控制语言，包含对访问数据库的控制，或服务的关闭、启动等。
2.6 开发环境
基于当下流行的微信小程序开发组合考虑，选择了Windows xp（win10）+node.js+mysql的开发环境。
Node.js是javaScript的运行环境。与其他后端开发语言所能实现的基本功能相同，通过它来进行后端程序的开发，可以与一些常用的后端语言一样，如PHP、Java、Python等。JavaScript之前只能在浏览器中运行，是Node打破了这种局面。这样实现了前后端编程环境的统一，使得开发成本降低，更加方便快捷。不仅如此，在高并发情况下，它的处理能力也很强，而且开发迅速，成本低、学习快。所以选用node.js运行环境。
MySQL的版本为8.0.16，是一种关系型数据库，可以将数据存储在对应的表中，根据对应的关系放置，构成整个系统的数据库。因为数据并不是存储在一起，所以对于数据的整理更加方便，提高了数据使用的灵活性。因为它的使用是免费的，开放了源码，所以在使用成本这一项上我们选择它，当然优点并不仅此，还有体积小，速度快等优点。
2.7 系统开发小结
通过研究系统开发方案、开发工具的选择与使用、系统开发架构的选型、数据库解决方案的学习研究和开发环境的熟悉了解等方面得出结论：
基于微信小程序的计算机基础答疑系统采用微信开发者工具进行设计与编码实现，通过 MySQL进行数据库表结构的设计以及管理操作。基本实现四大模块：学生功能模块、教师功能模块、管理员功能模块和通用功能模块。
3 需求分析
软件需求分析的目的就是对目标系统——计算机基础答疑系统提出完整、准确、清晰、具体的要求，把系统开发计划期间建立的软件可行性分析求精和细化，分析各种可能的解法，将一个大而模糊的系统划分成多个小且功能清晰的模块。需求分析用于确定系统必须完成哪些工作，是软件定义阶段中的最重要的一步。
软件需求分析的任务是：深入分析、描述系统的功能和性能，确定软件设计的约束和软件同其他系统元素的接口细节，定义软件功能的其他有效性需求，解决目标系统“做什么”的问题。
3.1 需求的提出
需求提出主要集中于分析系统目的。需求提出和分析集中在用户对系统的观点上。是在系统开发前期，用户和开发人员之间沟通最深入的一次讨论，便于开发人员了解用户的准确需求。这样的定义称作系统规格说明，并且在用户和开发人员之间充当桥梁。
计算机基础答疑系统开发，需求分析主要包括两大部分：一个是系统功能的需求分析，另一个是图形用户界面的需求分析。系统功能分析主要包括计算基础答疑系统内容模块的需求分析、小程序操作功能的需求分析，根据这两个需求分析的结果要求，在小程序开发的详细设计部分将给出系统设计的数据库设计、实现技术的设计。在图形用户界面需求分析方面，要做的是针对小程序中不同的页面设计出科学、美观、合理、让用户满意的页面效果，如页面的布局效果、表格控件的选择、图片处理效果，以及动画效果。
3.2 需求分析
通过进一步对计算机基础答疑系统主要功能［12］的分析，已充分了解到了本系统的系统角色及其所拥有的功能，充分考虑系统的可扩充性、可移植性、可重用性等软件设计质量特性，使设计尽量满足用户的使用要求。按照系统中应有的数据流和数据结构来勾画出系统概貌的原则，从而得出系统需求模型。
计算机基础答疑系统主要涉及的信息数据包括用户信息、问题信息、评论信息、课堂信息、公告信息、文件信息、私信信息和反馈信息数据，涉及的操作主要包括用户信息的管理，问题信息的管理，提出问题操作等等。经过上述的考察与设计，计算机基础答疑系统主要由学生功能模块、教师功能模块组成、通用功能模块和管理员功能模块四大模块组成，应该有以下功能：
a.学生功能模块的功能如下：
（1）提出问题：登录进去的主页面，学院可以进行问题的提交。提出的问题可以分为两部分：问题标题和问题内容。问题的内容可以是最基本的文字信息，也可以是图片。
（2）查看我提的问题：列出当前用户提出的所有问题。
（3）加入课堂：此模块十分重要，包括提问讨论区、学习区。在此模块中，学生跟着老师进行计算机基础相关知识的学习，并可以在提问讨论区对已学习的知识进行提问或和其他班级成员进行讨论。
b.教师功能模块的功能如下：
（1）创建课堂：教师可以创建自己的课堂，进入后可管理班级成员（查看成员信息、删除成员）。在班级内可以进行学习资料的发布，也可对于学生在学习过程中提出的问题进行答疑。
（2）回答问题：在查看所有问题时，对学生所提出的问题进行解答。也可对有价值的提问进行收藏。
（3）查看我的回答：可查看所回答过的所有问题。
c.通用功能模块：
（1）个人信息管理：用户通过微信登录，登录后可编辑个人资料（昵称、头像、身份等）。
（2）消息通知：包括查看在首页发布的问题的评论，其他用户的私信和已加入的课堂的消息通知。
（3）查看所有问题：在查看所有问题时，可以从别人的提问和老师的回答中学习到很多知识，对于感兴趣的问答可进行收藏。
（4）查看我的收藏： 对于已收藏的问题进行查看。
d.管理员功能模块：
（1）问题管理：可以对所有的问题进行管理，删除掉无关的一些提问或者毫无价值的回答。
（2）用户管理：对所有的用户进行管理。

根据答疑系统功能的需求分析，按照功能模块分别设计的原则，构建出了系统的功能结构图，如图3.1所示：

论文下载：请点击下载》》》