基于Vue的鸿通教学管理系统移动端设计与实现

湖南商务职业技术学院毕业设计

目录

1引言..............................................................1

1.1项目开发背景...............................................1

1.2开发技术简介...............................................1

1.2.1Vue简介................................................1

1.2.2Vue的运行原理..........................................1

1.2.3Vue页面的组成...........................................2

1.3开发工具简介...............................................2

1.4项目开发技术路线...........................................2

2需求分析..........................................................2

2.1功能需求描述...............................................2

2.2非功能需求描述.............................................3

2.3需求用例建模...............................................3

2.3.1登录模块的用例...........................................4

2.3.2课程模块的用例...........................................5

2.3.3作业模块的用例..........................................6

2.3.4问答功能模块的用例.......................................8

3系统概要设计......................................................9

3.1系统设计原则...............................................9

3.2系统功能设计...............................................9

3.3.1登录功能模块功能设计....................................10

3.3.2课程功能模块功能设计....................................11

3.3.3作业功能模块功能设计....................................12

3.3.4问答功能模块功能设计....................................14

3.3数据库设计................................................15

3.4.1设计原则................................................16

3.4.2概念设计...............................................16

II

湖南商务职业技术学院毕业设计

3.4.3逻辑设计...............................................17

3.4.4数据字典...............................................17

4系统详细设计.....................................................19

4.1登录子功能模块设计........................................19

4.1.1登录子功能模块说明.....................................19

4.1.2登录子功能模块详细设计.................................19

4.2课程子功能模块设计........................................20

4.2.1课程子功能模块说明....................................20

4.2.2课程子功能模块详细设计.................................20

4.3作业子功能模块设计........................................22

4.3.1作业子功能模块说明....................................22

4.3.2作业子功能模块详细设计.................................22

4.4问答子功能模块设计..........................................24

4.4.1问答子功能模块说明....................................24

4.4.2问答子功能模块详细设计................................24

5系统实现.........................................................26

5.1登录子模块实现............................................26

5.1.1登录模块界面设计......................................26

5.1.2登录模块核心代码实现：................................26

5.2课程子模块实现............................................28

5.2.1课程模块界面设计......................................28

5.2.2课程模块核心代码实现..................................28

5.3作业子模块实现............................................30

5.3.1作业模块界面设计......................................30

5.3.2作业模块核心代码实现..................................30

5.4问答子模块设计..............................................32

5.4.1问答子模块界面设计....................................32

5.4.2问答模块核心代码实现..................................32

III

湖南商务职业技术学院毕业设计

6系统测试.........................................................33

6.1用户登录功能测试..........................................33

6.2课程模块功能测试..........................................34

6.3作业功能测试..............................................35

6.4问答功能测试.............................................36

7设计小结.........................................................36

参考资料............................................................38

IV

湖南商务职业技术学院毕业设计

基于Vue的鸿通教学管理系统移动端设计与实现

1引言

随着互联网科技的不断进步，中国人民的生活发展也在越来越好.互联科技

的不断普及让人们的生活变得越来越方便，互联网科技在日常生活中许多地方

都要用到，我们已经和互联网不可分割了。在学校中，学校为了更加便捷的管

理学校，就需要用到教务系统，学校的教务系统老旧，更新换代需要的成本极

高。所以我想要制作出更加高级的教务系统。因为有了科技，也使得我们的教

学管理更方便。随着当前世界形势的不断复杂变化和以及我国国民经济的高速

健康发展,现代社会对电力供应的安全可靠性性能的要求越来越高,电力安全作

为工业的主导地位比以往任何一个时候都更加重要。

1.1项目开发背景

随着时代的发展，信息技术、Intranet技术、数据库技术的不断发展完善，

网络进程的加快,教学管理系统就是在这样一个背景下产生发展起来的。伴随着

技术的不断成熟，实现教学管理系统变得比之前更加简单了。我的毕业设计也

就正是一个教学管理系统的开发。

1.2开发技术简介

基于Vue的鸿通教学管理系统使用的开发技术,后端使用了SpringBoot框

架，前端使用的是Vue框架,数据库使用的是mysql。

1.2.1Vue简介

Vue(读音/vjuː/，类似于view)是一套用于构建用户界面的渐进式

JavaScript框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层

应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项

目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也

完全能够为复杂的单页应用（SPA）提供驱动。

1.2.2Vue的运行原理

在服务器第一次获得来自于客户端浏览器的请求时，服务器通过可执行程

序入口执行程序，将.vue文件转化为浏览器可识别的css、html、js文件,在将

转换好的文件响应到客户端浏览器上，由客户端浏览器识别。

1

湖南商务职业技术学院毕业设计

1.2.3Vue页面的组成

一个vue页面主要包括3个部分：

1.<template>界面展示代码</template>

2.<script>业务实现代码</script>

3.<style>界面布局代码</style>

1.3开发工具简介

工具的使用：采用IDEA+tomcat+mysql

IDEA集成的插件足够多,基本可以实现JavaWeb方面的所有开发功能

tomcat作为小型服务期有着很多的优点，安装和部署都方便,第三是

TOMCAT适合做一些中小型的项目

mysql其优点有：综合统一，高度非过程化，面向集合的操作方式，以一种

语法结构提供多种使用方式，语言简洁，易学易用

1.4项目开发技术路线

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM

就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

当然这些事ViewModel已经帮我们做了，它可以取出Model的数据同时帮忙处

理View中由于需要展示内容而涉及的业务逻辑。

2需求分析

2.1功能需求描述

通过开展学校师生的用户进行沟通，了解教学管理系统的问题，希望通过

系统设计实现以下功能。

（1）功能1：用户和管理员登录功能

（2）功能2：课程管理功能

（3）功能3：作业管理功能

（4）功能4：问答管理功能

2

湖南商务职业技术学院毕业设计

2.2非功能需求描述

为了更好完善本系统，本系统的非功能性需求有以下几个方面：

（1）高效性：学校的教学管理信息量通常比较多而繁杂

（2）安全性：学校的教学系统管理必须要有良好的保密安全，用户注册，

登录。

（3）可升级性：学校的教学管理必须可以迭代更新，这样就可以不断改善

让学生拥有最良好的受教育体验。

2.3需求用例建模

通过对功能需求的分析，创建以下总体用例模型，如图2-1所示。

图2-1基于Vue的鸿通教学管理系统系统的总体用例模型

在使用了学校的教学管理系统后，发现了诸多问题，了解到了这些系统问

题，写完通过系统设计实现，解决掉这些问题，让学生能够拥有更加良好的受

教育体验。

3

湖南商务职业技术学院毕业设计

2.3.1登录模块的用例

面向对象的需求分析阶段通过用例图和活动图进行了梳理分析。问答模块

具体的用例描述如图2-2所示，分别具有管理班级、查看班级详情等操作功能。

学生用户教师

用户登录

<<扩展>>

注册

图2-2登录模块用例图

通过对图2-2用例图进一步的细化分析，得到每个用例的描述表。作业模

块用例描述如表2-1所示，可以进行查看班级详情、管理班级等操作。

表2-1查看班级详情块用例描述

项目描述

用例名称查看班级详情

用例标识号01

参与者用户

简要说明参与者可以通过账号登录

前置条件参与者已经进入登录页面

1.参与者输入账号

2.参与者输入密码

基本事件流

3.点击登录

4.用例终止

其他事件流无

4

湖南商务职业技术学院毕业设计

异常事件流提示错误信息，参与人确认

后置条件提示创建成功

2.3.2课程模块的用例

面向对象的需求分析阶段通过用例图和活动图进行了梳理分析。问答模块

具体的用例描述如图2-3所示，分别具有创建课程、发布课件等操作功能。

图2-3课程模块用例图

通过对图2-3用例图进一步的细化分析，得到每个用例的描述表。作业模

块用例描述如表2-2所示，可以进行创建课程、发布课件等操作。

表2-2创建课程块用例描述

项目描述

用例名称创建课程

用例标识号02

参与者教师

简要说明参与者可以使用教师账号创建课程

前置条件参与者已经登录学生账号

1.参与者点击课程管理

基本事件流2.点击添加课程

3.在课程名输入框中填写课程名

5

湖南商务职业技术学院毕业设计

4.选择班级

5.上传课件

6.用例终止

其他事件流无

异常事件流提示错误信息，参与人确认

后置条件提示创建成功

2.3.3作业模块的用例

面向对象的需求分析阶段通过用例图和活动图进行了梳理分析。功能模块

1具体的用例描述如图2-4所示，分别具有批改作业、上传作业、查看作业成绩

批改情况等操作功能。

图2-4作业模块用例图

通过对图2-4用例图进一步的细化分析，得到每个用例的描述表。作业模

块用例描述如表2-3所示，可以进行批改作业、上传作业、查看作业成绩批改

情况等操作。

表2-3作业模块用例描述

项目描述

用例名称发布批改作业

6

湖南商务职业技术学院毕业设计

用例标识号03

参与者教师

简要说明参与者可以使用教师账号发布作业，批改作业

前置条件参与者已经登录了教师账号

1.参与者点击课程管理

2.选择班级

3.发布作业

4.点击班级

基本事件流

5.查看作业提交情况

6.点击查看作业详情

7.批改作业

6.用例终止

其他事件流无

异常事件流提示错误信息，参与人确认

后置条件

上传作业模块用例描述如表2-4所示，可以进行上传作业等操作。

表2-4上传作业模块用例描述

项目描述

用例名称上传作业

用例标识号02

参与者学生

简要说明参与者可以使用学生账号上传作业

前置条件参与者已经登录了学生账号

1.参与者点击课程管理

2.点击课程

3.点击作业

基本事件流

4.选择需要上传的作业

5.点击提交

6.用例终止

其他事件流无

异常事件流提示错误信息，参与人确认

后置条件

7

湖南商务职业技术学院毕业设计

2.3.4问答功能模块的用例

面向对象的需求分析阶段通过用例图和活动图进行了梳理分析。问答模块

具体的用例描述如图2-2所示，分别具有学生提问、教师回答等操作功能。

图2-5问答模块用例图

通过对图2-3用例图进一步的细化分析，得到每个用例的描述表。作业模

块用例描述如表2-3所示，可以进行学生提问、教师回答等操作。

表2-5学生提问块用例描述

项目描述

用例名称学生提问

用例标识号05

参与者学生

简要说明参与者可以使用学生账号询问教师问题

前置条件参与者已经登录学生账号

1.参与者点击课程管理

2.选择课程

3.提问

基本事件流

4.点击消息

5.查看老师的回答

6.用例终止

其他事件流无

异常事件流提示错误信息，参与人确认

8

湖南商务职业技术学院毕业设计

后置条件学生账号收到提问

教师回答模块用例描述如表2-5所示，可以进行上传作业等操作。

表2-6教师回答模块用例描述

项目描述

用例名称教师回答

用例标识号06

参与者老师

简要说明参与者可以使用教师账号回答学生问题

前置条件参与者已经登录了教师账号

1.参与者点击课程管理

2.点击课程

3.点击消息

基本事件流

4.回答学生问题

5.点击提交

6.用例终止

其他事件流无

异常事件流提示错误信息，参与人确认

后置条件

3系统概要设计

3.1系统设计原则

具体的行沟通，了解基于Vue的鸿通教学管理系统的系统的问题，希望通

过系统设作流的处理，讲友善的沟通，了解基于Vue的鸿通教学管理系统的系

统的问题，希望通过系统设作流的处理，用这样的架构，让用以不知道数据库

的结构。

3.2系统功能设计

系统模块化结构设计工作是在系统分析阶段对子系统划分的基础上，在进

一步地划分，将它逐层的分解成多个大小相同、功能单一、具有一定独立性的

模块，以便程序设计工作的同时，有加强了数据库之间的联系，使系统更加的

9

湖南商务职业技术学院毕业设计

完美。根据鸿通教学管理系统的需求分析和用例建模分析，本文确定了鸿通教

学管理系统的主要功能模块，包括作业管理、问答管理、课程管理和登录管理

等。鸿通教学管理系统的功能结构图如图3-2所示，本系统共有登录管理模块、

问答管理模块、课程管理模块和课程管理四大主要功能模块。

图3-2鸿通教学管理系统功能结构图

3.3.1登录功能模块功能设计

针对系统功能结构图进行进一步细化分析，得到登录功能模块相关功能描

述，如下表3-1。

表3-1登录功能模块相关功能描述

功能名称注册账号功能模块

功能概述教师和学生都可以注册账号

输入内容注册账号的所有内容

系统处理对答案类别增、删、改查功能

输出内容操作成功或者失败的提示

10

湖南商务职业技术学院毕业设计

登录功能描述使用功能流程图描述，如下图3-3。

图3-3登录功能模块流程图

3.3.2课程功能模块功能设计

针对系统功能结构图进行进一步细化分析，得到课程功能模块相关功能描

述，如下表3-2。

表3-2添加课程功能模块相关功能描述

功能名称添加课程

功能概述教师和学生都可以注册账号

输入内容注册账号的所有内容

系统处理对答案类别增、删、改查功能

输出内容操作成功或者失败的提示

课程功能描述使用功能流程图描述，如下图3-3。

图3-4课程功能模块流程图

11

湖南商务职业技术学院毕业设计

3.3.3作业功能模块功能设计

针对系统功能结构图进行进一步细化分析，得到作业功能模块相关功能描

述，如下表3-3。

表3-3作业功能模块相关功能描述

功能名称学生完成作业功能模块

功能概述学生可以登录账号完成课程作业

输入内容作业答案

系统处理对答案类别增、删、改查功能

输出内容操作成功或者失败的提示

作业功能描述使用功能流程图描述，如下图3-5。

图3-5作业功能模块流程图

12

湖南商务职业技术学院毕业设计

批改作业功能模块相关功能描述，如下表3-4。

表3-4批改作业功能模块相关功能描述

功能名称批改作业功能模块

功能概述教师能够登录账号批改学生的作业

输入内容批改作业

系统处理对答案类别增、删、改查功能

输出内容操作成功或者失败的提示

批改功能描述使用功能流程图描述，如下图3-6。

图3-6批改作业功能模块流程图

13

湖南商务职业技术学院毕业设计

3.3.4问答功能模块功能设计

针对系统功能结构图进行进一步细化分析，得到问答功能模块相关功能描

述，如下表3-5、表3-6。

表3-5提问功能模块相关功能描述

功能名称提问功能模块

功能概述学生可以登录账号向老师提问课程中不懂的知识点

输入内容提问的问题

系统处理对问答类别增、删、改查功能

输出内容操作成功或者失败的提示

提问功能描述使用功能流程图描述，如下图3-7。

图3-7提问功能模块流程图

表3-6回答功能模块相关功能描述

14

湖南商务职业技术学院毕业设计

功能名称回答功能模块

功能概述教师能够登录账号回答学生提出的问题

输入内容回答学生的问题

系统处理对问答类别增、删、改查功能

输出内容操作成功或者失败的提示

回答功能描述使用功能流程图描述，如下图3-8。

图3-8回答功能模块流程图

3.3数据库设计

数据库设计往往是系统设计中最为核心的一个步骤。其设计的优良程度直

接影响系统的性能以及执行效率。

15

湖南商务职业技术学院毕业设计

3.4.1设计原则

1．标准化原则

数据库设计务必要遵照统一的设计标准与命名规范。具备统一设计分类与

编码规范的数据库不仅设计清晰直观,更有利于后期数据库及程序的维护，为以

后项目可扩展性提供条件。

2．冗余原则

以往数据库的设计要求不允许有冗余，要尽可能的满足3NF。然而，在系统

运行过程中，满足3NF的数据库设计并不能高效运行。复杂的表间关系，会降

低访问数据库执行的效率；过低的范式标准，又会导致数据库数据。所以，在

数据库设计中，适当的冗余设计（允许派生性冗余设计，杜绝重复性冗余设

计），找到冗余与数据处理速度的平衡点，常常可以既提高速度，又能。

3.4.2概念设计

在数据库概念设计的过程中，采用E-R图来描述概念设计的结果。E-R图是

概念数据模型的高层描述所使用的数据模型或模式图，它为表述实体联系模式

图形式的数据模型提供了图形符号。根据XXX系统数据进行分析，其E-R图如

下图3-4所示。

图3-5鸿通教学系统E-R图

16

湖南商务职业技术学院毕业设计

3.4.3逻辑设计

针对ER模型，通过数据实体属性、实体间关系的全面分析，结合XXXX系

统的实际需求，根据E-R图转化为关系模式的转换方法，建立起了本系统的关

系模式，具体转化后的关系模式如下：

答案表（答案id、答案内容、作业id、学生id、分数）

课程表(课程id、课程名、教师名、课程介绍）

问答表（问答id、问题、答案、课程id、学生id）

作业表（作业id、作业内容、课程id）

用户表（用户id、密码、用户类型、用户名）

3.4.4数据字典

答案表的表结构如表3-3所示，该表主要用于记录答案信息，主要字段为

答案id、答案内容、作业id、学生id、分数。

表3-3答案表表结构

字段名称数据类型字段内容主键设置非空

Not

idint(11)答案id主键

null

valuevarchar(255)答案内容Null

ta_idint(11)作业id外键Null

user_idint(11)学生id外键Null

fractionvarchar(255)分数Null

课程表的表结构如表3-4所示，该表主要用于记录课程信息，主要字段为

课程id、课程名、教师名、课程介绍。

表3-4课程表表结构

字段名称数据类型字段内容主键设置非空

idint(11)课程id

namevarchar(25)课程名

usernameint(11)教师名

valuevarchar(255)课程介绍

问答表的表结构如表3-5所示，该表主要用于记录问答信息，主要字段

为问答id、问题、答案、课程id、学生id。

17

湖南商务职业技术学院毕业设计

表3-5问答表表结构

字段名称数据类型字段内容主键设置非空

Not

idint(11)问答id主键

null

problemvarchar(255)问题Null

answervarchar(255)答案Null

cur_idint(11)课程id外键Null

user_idint(11)学生id外键Null

作业表的表结构如表3-6所示，该表主要用于记录作业信息，主要字段为

作业id、作业内容、课程id。

表3-6作业表表结构

字段名称数据类型字段内容主键设置非空

idint(11)作业id

valuevarchar(255)作业内容

cur_idint(11)课程id

用户表的表结构如表3-7所示，该表主要用于记录用户信息，主要字段为

用户id、密码、用户类型、用户名。

表3-7用户表表结构

字段名称数据类型字段内容主键设置非空

Not

idint(11)用户id主键

null

typevarchar(255)用户类型Null

usernamevarchar(255)用户名Null

passwordvarchar(255)密码Null

数据库设计总结：根据鸿通教学管理系统的需求分析和用例建模分析，确

定了教学管理系统的主要功能模块，包括用户管理、课程管理、作业管理等。

根据功能结构，确定了教学管理系统的主要数据库表有答案表、课程表、问答

表、作业表和用户表。

18

湖南商务职业技术学院毕业设计

4系统详细设计

4.1登录子功能模块设计

4.1.1登录子功能模块说明

此模块是整个系统的入口模块，只有登录成功才能进行后续的操作。

4.1.2登录子功能模块详细设计

通过需求分析和概要设计，得到登录子功能模块的时序图如图4-1所示，

得到登录子功能模块的类图如图4-2所示。

图4-1登录模块时序图

图4-2登录模块的类图

针对类图进行进一步细化分析，得到登录功能模块相关类及方法描述表，

如下表4-1所示。

19

湖南商务职业技术学院毕业设计

表4-1用户功能模块相关类及方法描述表

类名TeUser

描述用户模块

属性Id,role,username,psaaword,picture

addUser(),delUser(),findById(),findByUserId(),updU

方法

ser()

类名TeCur

描述作业实体类

属性id,name,username,value

addCar(),findAll(),findAllByUserName(),findAllByNa

方法

me(),upd()

4.2课程子功能模块设计

4.2.1课程子功能模块说明

此模块可以让老师添加删除自己的课程，操作起来十分方便

4.2.2课程子功能模块详细设计

通过需求分析和概要设计，得到课程子功能模块的时序图如图4-3所示，

得到课程子功能模块的静态类图如图4-4所示。

图4-3课程模块时序图

20

湖南商务职业技术学院毕业设计

图4-4课程模块静态类图

针对类图进行进一步细化分析，得到课程功能模块相关类及方法描述表，

如下表4-2所示。

表4-2课程功能模块相关类及方法描述表

类名TeCur

描述课程实体类

属性id,username,name，value

addCar(),delUser(),findAll(),findAllByName(),findA

方法

llByUserName(),upd()

类名TeTask

描述作业实体类

属性id,value,curId,teCur

addUser(),delUser()liikTask(),loogTaskByName(),upd

方法

()

类名TeUser

描述用户模块

21

湖南商务职业技术学院毕业设计

属性Id,role,username,psaaword,picture

addUser(),delUser(),findById(),findByUserId(),updU

方法

ser()

类名TeXk

描述作业实体类

属性id,user_id,class_id

方法add(),del(),lookAllxk(),lookAllByXkd(),upd()

4.3作业子功能模块设计

4.3.1作业子功能模块说明

这个模块可以让老师布置科目的作业，学生可以看到老师布置的作业

4.3.2作业子功能模块详细设计

通过需求分析和概要设计，得到作业子功能模块的时序图如图4-5所示，

得到作业子功能模块的静态类图如图4-6所示。

图4-5作业模块时序图

22

湖南商务职业技术学院毕业设计

图4-6作业模块静态类图

针对类图进行进一步细化分析，得到作业功能模块相关类及方法描述表，

如下表4-3所示。

表4-3作业功能模块相关类及方法描述表

类名TeTask

描述作业实体类

属性id,value,curId,teCur

addUser(),delUser()liikTask(),loogTaskByName(),upd

方法

()

类名TeCur

描述作业实体类

属性id,name,username,value

addCar(),findAll(),findAllByUserName(),findAllByNa

方法

me(),upd()

23

湖南商务职业技术学院毕业设计

4.4问答子功能模块设计

4.4.1问答子功能模块说明

此模块可以让老师上课提问，学生做出回答，十分方便

4.4.2问答子功能模块详细设计

通过需求分析和概要设计，得到问答子功能模块的时序图如图4-7所

示，得到问答子功能模块的静态类图如图4-8所示。

图4-7问答模块时序图

图4-8问答模块时序图

24

湖南商务职业技术学院毕业设计

针对类图进行进一步细化分析，得到问答功能模块相关类及方法描述表，

如下表4-4所示。

表4-4问答功能模块相关类及方法描述表

类名TeQa

描述问答实体类

属性id,problem,answer,curId,userId,teUser,teCur

方法addQuHd(),delUser(),findAll(),findAllByUserName()

类名TeCur

描述作业实体类

属性id,name,username,value

addCar(),findAll(),findAllByUserName(),findAllByNa

方法

me(),upd()

类名TeTask

描述作业实体类

属性id,value,curId,teCur

addUser(),delUser()liikTask(),loogTaskByName(),upd

方法

()

25

湖南商务职业技术学院毕业设计

5系统实现

5.1登录子模块实现

5.1.1登录模块界面设计

5.1.2登录模块核心代码实现：

步骤1：验证用户

26

湖南商务职业技术学院毕业设计

步骤2：用户注册

步骤3：用户删除

步骤4：修改用户密码

27

湖南商务职业技术学院毕业设计

5.2课程子模块实现

5.2.1课程模块界面设计

5.2.2课程模块核心代码实现

步骤1：添加课程

28