绘画学习平台小程序+ssm论文源码调试讲解

2系统关键技术

2.1 微信小程序

微信小程序，简称小程序，英文名Mini Program，是一种全新的连接用户与服务的方式，可以快速访问、快速传播，并具有良好的使用体验[1]。

小程序的主要开发语言是JavaScript，它与普通web的开发有很多相似之处。小程序和普通网页开发并不是相同的东西，是有差异的。网页开发的渲染线程和脚本线程是互斥的，而在小程序中，确实分开的，分别在不同的线程之中运行。网页开发的工作者可以运用各种浏览器暴露出来的DOM API，进行DOM选中和操作，但小程序不行，它并没有一个完整的浏览器对象，因此缺失DOM API和BOM API。这样的差别使得前端开发中经常用到的一些库是无法在小程序中运行的。另外，网页开发的工作者在开发网页时所要面对的环境是在各式各样系统上运行的各式各样的浏览器，，而小程序只，只需面对iOS和Android这两道操作系统下的微信就足够了。

小程序和传统的APP相比，有着开发成本更低，获客成本更低，开发周期更短，发展空间更大等的优点。不过，为了体现“用完即走”、“无需安装”等理念，小程序的功能、性能还有大小都受到了制约，可以说是各有利弊。

2.2微信Web开发者工具

为了实现微信小程序编写，腾讯公司推出微信web开发者工具[2]，用来调试编写微信小程序，微信小游戏，微信公众号的编写和调试，该软件是支持微信小程序官方API 和相应的辅助工具和插件，支持微信端的代码编辑，查看，预览，发布。该工具拥有自己的前端代码文件，视图文件是.wxml、样式文件是.wxss、交互则是JS文件[8]，当然还有支持相应的网络框架，通过接口wx.request和后台进行数据传输，通过配置https域名配置跟服务器对接并发布项目，这是一款集开发、预览、发布等功能的微信产品的开发工具，目前还在更新版本。

2.3微信小程序API接口

微信小程序API接口是腾讯公司为了微信小程序和微信公众号提供的接口文档，里面包含了各种需要使用的接口技术[7]，例如本项目用到的获取微信用户信息(wx.getUserInfo)、蓝牙通讯传输功能、网络请求(wx.request)、定位功能等，总的来说，小程序API是满足一个程序开发的大部分接口。

2.4 WXML 、WXS、JS小程序编写语言

WXML全称是 WeiXin Markup Language，是微信标记语言，是微信小程序的标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。类似于HTML语言，但是他自身也拥有一定的特色。

WXSS(WeiXin Style Sheets)是微信样式表，是微信小程序用于修饰标签语言的样式文件，WXSS 用来决定 WXML 的组件应该怎么显示。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS对CSS语言进行修改和扩充，引入全新尺寸单位rpx，但大体语法于CSS语言不分离。

JS是 JavaScript[4]语言的简称，微信小程序里面也可以叫做WXS，是一门脚本语言，通俗易懂，用于页面交互的语言。

2.5 MYSQL数据库

MySQL是典型的关系数据库系统，拥有开源免费、稳定、高效等特点，一直是中小型web项目的最佳数据库选择。MySQL作为当今IT领域使用人数最多的开源关系型数据库软件之一，在2018年的数据库使用率排名中位居第二，仅次于目前为止最成功的商业版数据库Orcle[5]。MySQL最大的优势之一就是无偿使用，这也是它成功的关键。

MySQL支持标准化数据库查询语言SQL。MySQL是一款非常适合个人开发者或小型组织开发团体的数据库管理系统，因为它是开源并且免费的，体积小、速度快、成本低以及其最重要的一点开放源码，深受程序设计人员的喜爱，这也让它成为了许许多多中小型开发网站数据库的首选，同时提供了多种开发的连接API。MySQL将数据的存放按照记录之间的关系存放到了不同的表中，减少了数据的冗余并且提高了开发的工作效率。MySQL支持开发中需要用的大型数据库，并能处理数以万计的记录。因为MySQL是开源的软件，所以在项目的预算中的时候不用花费额外的资金，大大降低了开发的总体成本，这也是MySQL数据库在中小型企业和独立的开发者中广泛流行的原因。

3系统分析

3.1可行性分析

在系统开发之初要进行系统可行分析，这样做的目的就是使用最小成本解决最大问题，一旦程序开发满足用户需要，带来的好处也是很多的。下面我们将从技术上、经济上、操作上、法律上等方面来考虑这个系统到底值不值得开发。

3.1.1 技术可行性

技术可行性是指学习的技术是否能够完成本项目，如果团队本身没有相关的技术储备，而又能够迅速掌握此类技术，那项目应该达不到我们的设计要求。本基于微信小程序的绘画学习平台采用微信开发者工具、Java语言、MYSQL数据库开发设计，作为计算机专业学生，在学校期间就接触到许多关于编程方面的知识，当然也包括各种编程软件，对他们的了解度也比较系统，所以技术开发上面还是有一定把握。

3.1.2经济可行性

项目需要考虑花费问题，我们必须考虑系统开发中所有的花费进行计算，我们要考虑到系统需不需要太大的资金。由于自己本身就是学生，还没有正式参加工作，金钱上面一直都处于缺乏状态。所以在开发程序过程中，我是不会花太多经济成本在上面的。针对开发软件和数据库，还有界面设计的photoshop软件等在百度上面就可以直接下载，然后根据各种安装视频进行安装，这些资源都是免费的，程序编码阶段使用的源代码在百度上面可以轻松获得，在有网络的环境下就能下载下来，不需要支付任何费用，经济成本很低。

3.1.3操作可行性

操作可行性主要是针对系统用户而言，一个系统再完美，技术再先进，用户不去使用，或者用户根本不会使用，该系统存在的价值也是不大的。本人自己就是学生，程序开发经验不足，在界面设计上面不会设计太复杂，要讲究简单好看，操作上要方便，不能让用户觉得不流畅。用户一旦进入操作界面，界面上就会有相应提示，跟着操作提示就可以找到对应的功能操作模块，对于用户来说免培训就能使用，没有任何学习成本，因此，操作上是可行性的。

3.1.4法律可行性

自己本人开发的软件和用到的资料来源都是图书馆、百度文库、百度网页等渠道，并不涉及违法。在个人毕业设计上面，无论源代码还是论文编写内容不存在抄袭行为。

从上面几个部分的可行性分析得出，这次开发的基于微信小程序的绘画学习平台在开发上面没有什么大问题，值得开发。

3.2系统性能分析

（1）可升级性：系统的容纳信息一定是持续增长，到时系统可以升级，接受信息的更新发展。

（2）存储性：因为是绘画学习平台，所以就会在数据库要求上比较严格，信息录入的比较多，而且丰富复杂， 这就需要一个强大的数据库来存放更多的数据和保证数据的时时性。

（3）可靠性：系统不可以有病毒类代码，必须有拦截器，验证方法，对里面信息的保护措施，这样才让人用的放心。

（4）简单性：系统设计的应该简单易学的，设计的各种功能应该简单操作，不需要努力学习培训，缩短用户熟悉系统的进程。

（5）一致性：数据应该录入准确，需要更新时，数据应该可以及时的修改，数据还应该有独立保存，不能删除数据的时候会连带着把还需要的数据都删除掉。

3.3 系统功能分析

本基于微信小程序的绘画学习平台主要包括学生功能模块、讲师功能模块和管理员功能模块三大部分，下面将详细介绍管理员、讲师和学生分别实现的功能。

3.3.1学生功能分析

没有账号的学生用户可进行注册操作，注册登录后主要实现的功能模块包括首页、课程信息、文章信息、论坛以及我的（课程信息、课程购买、作业信息、我的收藏管理、我要发帖和我的发帖），学生用例图如图3-1所示。

图3-1 学生用例图

3.3.2管理员功能分析

管理员登录后主要功能模块包括个人中心、学生管理、讲师管理、课程类型管理、课程信息管理、课程购买管理、作业类型管理、作业信息管理、文章信息管理、论坛管理以及系统管理，管理员用例图如图3-2所示。

图3-2 管理员用例图

3.3.3讲师功能分析

讲师登录后主要实现的功能模块包括个人中心、课程类型管理、课程信息管理、课程购买管理、作业类型管理、作业信息管理、文章信息管理，讲师用例图如图3-3所示。

图3-3 讲师用例图

3.4用户体验需求分析

这个基于微信小程序的绘画学习平台要求在微信平台上可以运行，主要实现了注册登录、课程学习、作业查询、作业提交以及论坛交流等功能。一个好的程序要具备以下两方面用户体验：

（1）界面友好

用户界面要简洁直观、操作方便。

（2）响应快速

对用户的请求能快速响应，对一些耗时的应用程序，以进度条的形式显示，让用户随时了解程序执行情况[11]。

3.5系统流程分析

3.5.1注册流程

未有账号的学生可进行注册操作，学生注册流程图如图3-4所示。

图3-4注册流程图

3.5.2登录流程

登录模块主要完成了管理员、讲师和学生的权限登录，登录流程图如图3-5所示。

图3-5 登录流程图

3.5.3添加信息流程

管理员、讲师以及学生登录后均可进行添加信息操作，添加信息流程图如图3-6所示。

图3-6 添加信息流程图

4系统设计

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所示。

添加图片注释，不超过 140 字（可选）

图5-12 课程信息界面

5.2.5 文章信息界面

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

添加图片注释，不超过 140 字（可选）

图5-13 文章信息界面

5.2.6 论坛界面

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

添加图片注释，不超过 140 字（可选）

图5-14 论坛界面