基于微信小程序的绘画学习平台的设计与开发

目 录

1 绪 论 1
1.1课题研究背景 1
1.2设计原则 1
1.3研究内容 2
2系统关键技术 3
2.1 微信小程序 3
2.2微信Web开发者工具 3
2.3微信小程序API接口 3
2.4 WXML 、WXS、JS小程序编写语言 3
2.5 MYSQL数据库 4
3系统分析 5
3.1可行性分析 5
3.1.1 技术可行性 5
3.1.2经济可行性 5
3.1.3操作可行性 5
3.1.4法律可行性 5
3.2系统性能分析 6
3.3 系统功能分析 6
3.3.1学生功能分析 6
3.3.2管理员功能分析 7
3.3.3讲师功能分析 7
3.4用户体验需求分析 8
3.5系统流程分析 8
3.5.1注册流程 8
3.5.2登录流程 9
3.5.3添加信息流程 9
4系统设计 11
4.1系统设计要求 11
4.2系统开发流程设计 11
4.3系统结构设计 11
4.4数据库设计 12
4.4.1数据库E-R图设计 12
4.4.2数据库表设计 14
5 系统的实现 17
5.1 服务端功能模块的实现 17
5.1.1服务端登录界面 17
5.1.2学生管理界面 17
5.1.3讲师管理界面 18
5.1.4课程类型管理界面 18
5.1.5课程信息管理界面 19
5.1.6课程购买管理界面 19
5.1.7作业信息管理界面 20
5.1.8文章信息管理界面 20
5.2 微信端功能模块的实现 21
5.2.1 微信端注册界面 21
5.2.2 微信端登录界面 21
5.2.3 首页界面 22
5.2.4 课程信息界面 23
5.2.5 文章信息界面 24
5.2.6 论坛界面 25
6系统测试 27
6.1测试定义 27
6.2测试方法 27
6.3测试方案 27
6.4测试结论 28
7结论 29
参考文献 30
谢 辞 31

摘 要

随着科技的进步，微信小程序慢慢进入了生活当中，由于轻便快捷，方便使用，基于微信这个大平台，使得小程序飞速发展，趋于成熟，因此，针对绘画学习的方面，特开发了本基于微信小程序的绘画学习平台。
本基于微信小程序的绘画学习平台采用WXML 、WXS、JS小程序编写语言、微信开发者工具进行微信端开发，使用MYSQL数据库进行系统数据的储存，以微信为入口的，具有快捷、轻便的特点，不占内存，不用下载、安装，而且访问速度很快。系统界面良好，操作简单方便，通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分，详细的说明了系统的开发过程，最后并对整个开发过程进行了总结，实现了绘画学习的重要功能。
“操作简单，功能实用”这是本软件设计的核心理念，本系统力求创造最好的用户体验。

关键词：绘画学习；微信开发者工具；微信小程序；MYSQL数据库

ABSTRACT

With the advancement of science and technology, WeChat Mini Programs have slowly entered life. Because they are light, fast and easy to use, based on WeChat’s large platform, the Mini Programs have developed rapidly and become more mature. Therefore, for the aspect of drawing learning, a special book has been developed. Drawing learning platform based on WeChat applet.
This WeChat applet-based painting learning platform uses WXML, WXS, JS applet programming language, WeChat developer tools for WeChat terminal development, uses MYSQL database for system data storage, and uses WeChat as the entry point, which is fast and portable. , Does not occupy memory, does not need to download, install, and the access speed is very fast. The system interface is good, and the operation is simple and convenient. Through the system overview, system analysis, system design, database design, and system testing, the development process of the system is explained in detail. Finally, the whole development process is summarized and the painting is realized. An important function of learning.
“Easy operation, practical function” is the core concept of this software design, this system strives to create the best user experience.

Keywords: Drawing learning; WeChat developer tool; WeChat applet; MYSQL database

1 系统设计

4.1系统设计要求
（1）可用性。目标系统功能齐全，能够完全满足用户需求。
（2）可靠性。能连续准确的处理业务，有较强的容错能力。
（3）保密性。保证系统的物理安全、数据存储和存取的安全与保密、数据传输的安全与保密，做好使用人员的授权管理。
（4）可理解性。用户容易理解和使用该系统。
（5）可维护性和适应性。系统应易于修改、易于扩充、易于维护，能够适应业务不断发展变化的需要。
4.2系统开发流程设计
在开发本基于微信小程序的绘画学习平台时，首先进行需求分析，进而对系统进行总体的设计规划，设计系统功能模块，数据库的选择等，本系统的开发流程如图4-1所示

图4-1 系统开发流程图
4.3系统结构设计
系统的设计和划分是系统的核心研究问题，以确定整体结构和功能模块。该系统的结构化设计的思想，是自顶向下的方式将系统分成若干个子系统，以及反过来的子系统分成模块，其被划分成子模块，层划分各计算机可执行模块可迄今用作一个单独的程序。
本基于微信小程序的绘画学习平台结构图如图4-2所示。

图4-2 系统功能模块图
4.4数据库设计
一个好的数据库可以关系到程序开发的优劣，数据库设计离不开表结构的设计，还有表与表之间的联系，以及系统开发需要设计的数据表内容等信息。在进行数据库设计期间，还是需要多花时间进行考虑，最终设计出配套程序的数据库出来。
4.4.1数据库E-R图设计
本基于微信小程序的绘画学习平台采用的是MYSQL数据库，数据存储快，因为绘画学习平台，主要的就是对信息的管理，信息内容比较多，这就需要好好的设计一个好的数据库，分类要清楚，不能添加信息的时候，造成信息太过混乱，设计好的数据库首先就需要先把各个实体之间的关系表达明确，下面我们用E-R图来具体表示。
E-R图是一种描述显示数据类型间的关系的数据描述方法，E-R图可以完整地映射出现实模型的关系。E-R图中的三个最为重要的元素就是实体、属性、关系。E-R图即由这三点组成。本基于微信小程序的绘画学习平台的E-R图如下所示：
1、管理员信息实体E-R图如图4-3所示：

图4-3 管理员信息实体的E-R图
2、讲师信息实体E-R图如图4-4所示：

图4-4 讲师信息实体E-R图
3、课程信息实体图如图4-5所示。

图4-5 课程信息实体E-R图
4、学生信息实体图如图4-6所示。

图4-6 学生信息实体E-R图
5、作业信息实体图如图4-7所示。

图4-7 作业信息实体E-R图
4.4.2数据库表设计
本基于微信小程序的绘画学习平台采用MYSQL数据库，数据库的功能主要是存储网站中所有数据，以便进行操作。关于数据库中的数据表如下：
表 4-1 users管理员信息表
列名 数据类型 长度 允许空 说明
id bigint 20 否 编号
username varchar 100 是 用户名
password varchar 100 是 密码
role varchar 100 是 角色
addtime timestamp 是 新增时间

表 4-2 jiangshi讲师信息表
列名 数据类型 长度 允许空 说明
id bigint 20 否 编号
addtime timestamp 是 创建时间
gonghao varchar 200 是 工号
mima varchar 200 是 密码 jiaoshixingming varchar 200 是 讲师姓名 xingbie varchar 200 是 性别
touxiang varchar 200 是 头像
banji varchar 200 是 班级
dianhua varchar 200 是 电话

表 4-3 kechengxinxi课程信息表
列名 数据类型 长度 允许空 说明
id bigint 20 否 编号
addtime timestamp 是 创建时间
kechengmingcheng varchar 200 是 课程名称
kechengleixing varchar 200 是 课程类型
fengmian varchar 200 是 封面
shizhang varchar 200 是 时长
jiage int 11 是 价格
faburiqi date 是 发布日期
kechengxiangqing longtext 是 课程详情
gonghao varchar 200 是 工号
jiaoshixingming varchar 200 是 讲师姓名

表 4-4 xuesheng学生信息表
列名 数据类型 长度 允许空 说明
id bigint 20 否 编号
addtime timestamp 是 创建时间
xuehao varchar 200 是 学号
mima varchar 200 是 密码
xueshengxingming varchar 200 是 学生姓名
xingbie varchar 200 是 性别
touxiang varchar 200 是 头像
banji varchar 200 是 班级
shouji varchar 200 是 手机

表 4-5 zuoyexinxi作业信息表
列名 数据类型 长度 允许空 说明
id bigint 20 否 编号
addtime timestamp 是 创建时间
zuoyebianhao varchar 200 是 作业编号
zuoyetimu varchar 200 是 作业题目
zuoyeleixing varchar 200 是 作业类型
tupian varchar 200 是 图片
banji varchar 200 是 班级
zuoyeneirong longtext 是 作业内容
shijian date 是 时间
xuehao varchar 200 是 学号
xueshengxingming varchar 200 是 学生姓名
thumbsupnum int 11 是 赞数
crazilynum int 11 是 踩数

5 系统的实现
5.1 服务端功能模块的实现
5.1.1服务端登录界面
管理员和讲师要想进入对于就是后台进行管理操作，必须进行登录，服务端登录界面的运行效果如图5-1所示.

图5-1 服务端登录界面
5.1.2学生管理界面
管理员可增删改查学生信息，学生管理界面的运行效果如图5-2所示.

图5-2 学生管理界面
5.1.3讲师管理界面
管理员在讲师管理界面可查看已有讲师信息，对已有讲师信息可进行修改和删除操作，同时也可添加讲师信息，讲师管理界面如图5-3所示。

图5-3 讲师管理界面
5.1.4课程类型管理界面
管理员可增删改查课程类型信息，课程类型管理界面展示如图5-4所示。

图5-4 课程类型管理界面
5.1.5课程信息管理界面
管理员和讲师均能够增删改查课程信息，课程信息管理界面如图5-5所示。

图5-5 课程信息管理界面
5.1.6课程购买管理界面
管理员和讲师均可查看课程购买信息，课程购买管理界面如图5-6所示。

图5-6 课程购买管理界面
5.1.7作业信息管理界面
管理员和讲师均可管理作业信息，作业信息管理界面展示如图5-7所示。

图5-7 作业信息管理界面
5.1.8文章信息管理界面
管理员和讲师均可增删改查文章信息，文章信息管理界面展示如图5-8所示。

图5-8 文章信息管理界面
5.2 微信端功能模块的实现
5.2.1 微信端注册界面
没有账号的学生可进入注册界面进行注册操作，微信端注册界面展示如图5-9所示。

图5-9 微信端注册界面
5.2.2 微信端登录界面
学生在登录界面可输入用户名和密码，进行登录系统，微信端登录界面展示如图5-10所示。

图5-10 微信端登录界面
5.2.3 首页界面
学生登录后进入首页界面，可根据需求查看信息，首页界面展示如图5-11所示。

图5-11 首页界面
5.2.4 课程信息界面
学生在课程信息界面可通过关键词进行课程信息的快速查询，并可选择课程进行查看详情，进行课程购买，课程信息界面展示如图5-12所示。

图5-12 课程信息界面
5.2.5 文章信息界面
学生可查看文章信息，并可选择文章查看详情，文章信息界面展示如图5-13所示。

图5-13 文章信息界面
5.2.6 论坛界面
学生在论坛界面可查看所有帖子，并可查看详情，论坛界面展示如图5-14所示。

图5-14 论坛界面