基于微信小程序的移动学习平台的设计与实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于微信小程序的移动学习平台的设计与实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

摘要

由于APP软件在开发以及运营上面所需成本较高，而用户手机需要安装各种APP软件，因此占用用户过多的手机存储空间，导致用户手机运行缓慢，体验度比较差，进而导致用户会卸载非必要的APP，倒逼管理者必须改变运营策略。随着微信小程序的出现，解决了用户非独立APP不可访问内容的痛点，所以很多APP软件都转向微信小程序。本次课题就运用了微信小程序技术开发一个基于微信小程序的移动学习平台。
基于微信小程序的移动学习平台借助微信开发者工具开发用户前端，使用SSM框架和Java语言开发管理员后台，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理员对教师，课程分类，班级，课程，学生信息进行管理，审核学生作业，管理课程资源。教师查看课程，班级，学生，审核学生作业，管理课程资源。学生新增作业，查看作业审核信息，收藏或评论课程资源，查看班级和课程。
总之，基于微信小程序的移动学习平台使得学生通过小程序就能学习课程，上交作业，教师通过小程序也能审核作业，管理课程资源。
关键词：基于微信小程序的移动学习平台；微信开发者工具；SSM框架

Abstract

Due to the high cost of APP software development and operation, and the user’s mobile phone needs to install various APP software, it takes up too much mobile phone storage space of the user, causing the user’s mobile phone to run slowly, the experience is relatively poor, and the user will uninstall Non-essential APPs force managers to change their operating strategies. With the emergence of WeChat mini-programs, the pain point that users cannot access content from non-independent APPs has been solved, so many APP software have turned to WeChat mini-programs. This project uses WeChat applet technology to develop a mobile learning platform based on WeChat applet.
The mobile learning platform based on WeChat applets uses WeChat developer tools to develop the user front end, uses the SSM framework and Java language to develop the administrator backend, and uses Mysql to create data tables to save the data generated by the system. The system can provide information display and corresponding services. Its administrator manages teachers, course classification, classes, courses, and student information, reviews student work, and manages course resources. Teachers view courses, classes, students, review student work, and manage course resources. Students add new assignments, view assignment review information, bookmark or comment on course resources, and view classes and courses.
In short, the mobile learning platform based on the WeChat applet allows students to learn courses and hand in homework through the applet, and teachers can also review the homework and manage the course resources through the applet.
Key Words：Mobile learning platform based on WeChat applet; WeChat developer tool; SSM framework

第1章绪论 1
1.1 课题背景 1
1.2 课题意义 1
1.3 研究内容 2
第2章开发环境与技术 3
2.1 MYSQL数据库 3
2.2 JSP技术 3
2.3 SSM框架 4
2.4 微信开发者工具 4
第3章系统分析 6
3.1 可行性分析 6
3.1.1 技术可行性 6
3.1.2 经济可行性 6
3.1.3 操作可行性 6
3.2 系统流程 7
3.2.1 操作流程 7
3.2.2 登录流程 7
3.2.3 删除信息流程 8
3.2.4 添加信息流程 9
3.3 性能需求 9
3.4 功能需求 10
第4章系统设计 13
4.1 设计原则 13
4.2 功能结构设计 13
4.3 数据库设计 15
4.3.1 数据库概念设计 15
4.3.2 数据库物理设计 18
第5章系统实现 22
5.1 管理员功能实现 22
5.1.1 教师管理 22
5.1.2 课程分类管理 22
5.1.3 学生管理 23
5.1.4 作业信息管理 23
5.1.5 课程资源管理 24
5.2 教师功能实现 24
5.2.1 课程信息 24
5.2.2 课程资源 25
5.2.3 作业信息 26
5.2.4 学生信息 27
5.3 学生功能实现 28
5.3.1 课程资源 28
5.3.2 课程信息 29
5.3.3 作业信息 30
第6章系统测试 32
6.1 功能测试 32
6.1.1 发布评论功能测试 32
6.1.2 收藏课程资源功能测试 34
6.2 测试结果 36
结论 37
致谢 38
参考文献 39

第1章系统设计

一个成功设计的系统在内容上必定是丰富的，在系统外观或系统功能上必定是对用户友好的。所以为了提升系统的价值，吸引更多的访问者访问系统，以及让来访用户可以花费更多时间停留在系统上，则表明该系统设计得比较专业。
4.1 设计原则
本系统在设计过程中需要依照一定的设计原则进行，目的就是为了让开发的系统具备高质量，齐全完备的功能，方便简单的操作，如此才可以最大限度的满足使用者的要求。系统设计原则除了基本的易操作原则外，还有安全性原则，准确性原则。
第一个设计原则：易操作原则，针对本系统设计的功能要完备齐全，编码时，设计的各个接口要具备友好性，使用者一旦使用本系统时，要能够轻松上手，操作本系统处理数据时，要具备便利性。此外，也需要设计一些必要提示，引导使用者操作系统。
第二个设计原则：安全性原则，本系统在登录模块要对各个访问者进行身份验证，系统会通过访问者输入的信息进行判断，使用提前编写的安全验证代码进行数据比对，引导匹配成功的访问者进入指定的操作界面。这样可以避免无关性访问者窃取系统的数据。
第三个设计原则：准确性原则，为了保证使用者登记的数据是正确的，需要提前设计数据纠错机制，让使用者可以通过系统的报错提示，仔细检查登记的错误信息，并及时纠正错误，填写规范正确的信息。比如设置密码时，要求密码的长度不能低于6个字符，且数据类型要求不能全部是数字等都能进行规范。
4.2 功能结构设计
在前面分析的管理员功能的基础上，进行接下来的设计工作，最终展示设计的管理员结构图（见下图）。管理员对教师，课程分类，班级，课程，学生信息进行管理，审核学生作业，管理课程资源。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.1 管理员功能结构图
在前面分析的教师功能的基础上，进行接下来的设计工作，最终展示设计的教师结构图（见下图）。教师查看课程，班级，学生，审核学生作业，管理课程资源。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.2 教师功能结构图
在前面分析的学生功能的基础上，进行接下来的设计工作，最终展示设计的学生结构图（见下图）。学生新增作业，查看作业审核信息，收藏或评论课程资源，查看班级和课程。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.3 学生功能结构图
4.3 数据库设计
开发一个系统也需要提前设计数据库。这里的数据库是相关数据的集合，存储在一起的这些数据也是按照一定的组织方式进行的。目前，数据库能够服务于多种应用程序，则是源于它存储方式最佳，具备数据冗余率低的优势。虽然数据库为程序提供信息存储服务，但它与程序之间也可以保持较高的独立性。总而言之，数据库经历了很长一段时间的发展，从最初的不为人知，到现在的人尽皆知，其相关技术也越发成熟，同时也拥有着坚实的理论基础。
4.3.1 数据库概念设计
这部分内容需要借助数据库关系图来完成，也需要使用专门绘制数据库关系图的工具，比如Visio工具就可以设计E-R图（数据库关系图）。设计数据库，也需要按照设计的流程进行，首先还是要根据需求完成实体的确定，分析实体具有的特征，还有对实体间的关联关系进行确定。最后才是使用E-R模型的表示方法，绘制本系统的E-R图。不管是使用亿图软件，还是Visio工具，对于E-R模型的表示符号都一样，通常矩形代表实体，实体间存在的关系用菱形符号表示，实体的属性也就是实体的特征用符号椭圆表示。最后使用直线将矩形，菱形和椭圆等符号连接起来。接下来就开始对本系统的E-R图进行绘制。
（1）下图是课程资源实体和其具备的属性。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.4 课程资源实体属性图
（2）下图是教师实体和其具备的属性。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.5 教师实体属性图
（3）下图是作业实体和其具备的属性。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.6 作业实体属性图
（4）下图是学生实体和其具备的属性。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.7 学生实体属性图
（5）下图为上述各实体间相互之间的关系。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图4.8 实体间关系E-R图
4.3.2 数据库物理设计
本数据库是关系型数据库，因此对二维表的结构设计也比较关键。毕竟二维表格模型就是关系型数据库中的关系模型。而一些常用的关系模型中的概念也需要了解，才可以对关系模型进行设计。下面就简单介绍关系，元组，属性，域，关键字等常用概念的含义。
关系：关系就是数据库中的一张数据表，每张数据表都有命名，也就是每个关系也有名字，那就是数据表名；
元组：元组就是数据表中的一行记录；
属性：属性就是数据表中的字段，也就是数据表中的一列；
域：域就是对数据表中属性的取值进行限定；
关键字：关键字就是数据表中的主键；
在了解了表结构设计的常用概念后，接下来就需要使用前面绘制的E-R模型完成表结构的设计工作，并在数据库中创建数据表，并为各个数据表进行命名。以下就对设计的结果通过表格形式进行展示。

表4.1 班级信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
banjimingcheng varchar(200) 是 NULL 班级名称
banjirenshu int(11) 是 NULL 班级人数
banjidaoshi varchar(200) 是 NULL 班级导师
lianxifangshi varchar(200) 是 NULL 联系方式
表4.2 教师信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
gonghao varchar(200) 否工号
mima varchar(200) 否密码
jiaoshi varchar(200) 否教师
zhicheng varchar(200) 是 NULL 职称
xingbie varchar(200) 是 NULL 性别
nianling int(11) 是 NULL 年龄
shouji varchar(200) 是 NULL 手机
youxiang varchar(200) 是 NULL 邮箱
touxiang varchar(200) 是 NULL 头像
表4.3 课程信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
biaoti varchar(200) 是 NULL 标题
banji varchar(200) 是 NULL 班级
xingqi varchar(200) 是 NULL 星期
kejie varchar(200) 是 NULL 课节
kecheng varchar(200) 是 NULL 课程
gonghao varchar(200) 是 NULL 工号
jiaoshi varchar(200) 是 NULL 教师
表4.4 课程资源信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
biaoti varchar(200) 是 NULL 标题
gonghao varchar(200) 是 NULL 工号
jiaoshi varchar(200) 是 NULL 教师
kecheng varchar(200) 是 NULL 课程
peitu varchar(200) 是 NULL 配图
ziyuan longtext 是 NULL 资源
thumbsupnum int(11) 是 0 赞
crazilynum int(11) 是 0 踩
userid bigint(20) 否用户id
表4.4 管理员信息表
字段类型空默认注释
id bigint(20) 否主键
username varchar(100) 否用户名
password varchar(100) 否密码
role varchar(100) 是管理员角色
addtime timestamp 否 CURRENT_TIMESTAMP 新增时间
表4.5 学生信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
xuehao varchar(200) 否学号
mima varchar(200) 否密码
xuesheng varchar(200) 否学生
banji varchar(200) 是 NULL 班级
xingbie varchar(200) 是 NULL 性别
nianling int(11) 是 NULL 年龄
shouji varchar(200) 是 NULL 手机
youxiang varchar(200) 是 NULL 邮箱
touxiang varchar(200) 是 NULL 头像
表4.6 作业信息表
字段类型空默认注释
id bigint(20) 否主键
addtime timestamp 否 CURRENT_TIMESTAMP 创建时间
biaoti varchar(200) 是 NULL 标题
xuehao varchar(200) 是 NULL 学号
xuesheng varchar(200) 是 NULL 学生
touxiang varchar(200) 是 NULL 头像
banji varchar(200) 是 NULL 班级
zuoye longtext 是 NULL 作业
tijiaoshijian datetime 是 NULL 提交时间
sfsh varchar(200) 是否是否审核
shhf longtext 是 NULL 审核回复
userid bigint(20) 否用户id

第2章系统实现

进入到这个环节，也就可以及时检查出前面设计的需求是否可靠了。一个设计良好的方案在运用于系统实现中，是会帮助系统编制人员节省时间，并提升开发效率的。所以在系统的编程阶段，也就是系统实现阶段，对于一些不合理的设计需求，也是可以及时发现。因为设计的方案是完全指导系统的编码过程的。
5.1 管理员功能实现
5.1.1 教师管理
管理员进入指定功能操作区之后可以管理教师。其页面见下图。管理员增删改查教师信息，查看教师详情。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.1 教师管理页面
5.1.2 课程分类管理
管理员进入指定功能操作区之后可以管理课程分类。其页面见下图。管理员增删改查课程分类信息。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.2 课程分类管理页面
5.1.3 学生管理
管理员进入指定功能操作区之后可以管理学生。其页面见下图。管理员增删改查学生信息，查看学生详情信息。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.3 学生管理页面
5.1.4 作业信息管理
管理员进入指定功能操作区之后可以管理学生作业。其页面见下图。管理员增删改查学生作业，查看学生作业详情，审核学生的作业。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.4 作业信息管理页面
5.1.5 课程资源管理
管理员进入指定功能操作区之后可以管理课程资源。其页面见下图。管理员增删改查课程资源信息，查看学生提交的课程资源评论信息。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.5 课程资源管理页面
5.2 教师功能实现
5.2.1 课程信息
教师进入指定功能操作区之后可以查看课程信息。其页面见下图。教师提交班级名称查询对应的课程，教师点击课程信息即可查看课程详细内容。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.6 课程信息页面
5.2.2 课程资源
教师进入指定功能操作区之后可以管理课程资源。其页面见下图。教师新增课程资源，提交课程名称获取对应的课程资源，修改，删除页面内显示的课程资源信息。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.7 课程资源页面
5.2.3 作业信息
教师进入指定功能操作区之后可以审核学生作业。其页面见下图。教师提交学生的名字查询其上交的作业，并对学生作业进行审核。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.8 作业信息页面
5.2.4 学生信息
教师进入指定功能操作区之后可以查看学生。其页面见下图。教师通过学号获取学生信息，点击学生头像查看学生介绍。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序

图5.9 学生信息页面
5.3 学生功能实现
5.3.1 课程资源
学生进入指定功能操作区之后可以查看课程资源信息。其页面见下图。学生在查看课程资源介绍信息时，可以点击红色五角星收藏课程资源，可以点赞或提交评论。
基于微信小程序的移动学习平台的设计与实现,小程序,计算机毕业设计,微信小程序,学习,小程序