基于vue的在线考试系统的设计与实现

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

目录

1引言1

1.1项目开发背景1

1.2开发技术简介1

1.2.1Vue简介1

1.2.2Vue的运行原理1

1.2.3前后端页面的组成2

1.3开发工具简介2

1.4项目开发技术路线2

2需求分析3

2.1功能需求描述3

2.2非功能需求描述3

2.3需求用例建模3

2.3.1科目管理模板的用例4

2.3.2试题管理模块的用例7

2.3.3部门管理模块的用例9

2.3.4角色管理模块的用例11

3系统概要设计13

3.1系统设计原则13

3.2系统框架设计13

3.3系统功能设计15

3.3.1科目管理功能设计16

3.3.2试题管理功能设计17

3.3.3部门管理功能设计18

3.3.4角色管理功能设计19

3.4数据库设计19

3.4.1设计原则20

II

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

3.4.2概念设计20

3.4.3逻辑设计21

3.4.4数据字典21

4系统详细设计23

4.1科目管理功能模块设计23

4.1.1科目管理功能模块说明23

4.1.2科目管理功能模块详细设计23

4.2试题管理子功能模块设计24

4.2.1试题管理子功能模块说明24

4.2.2试题管理功能模块详细设计24

4.3部门管理子功能模块设计25

4.3.1部门管理子功能模块说明25

4.3.2部门管理功能模块详细设计25

4.4角色管理子功能模块设计26

4.4.1角色管理子功能模块说明26

4.4.2角色管理功能模块详细设计26

5系统实现27

5.1科目管理子模块实现27

5.1.1科目管理模块界面设计27

5.1.2科目管理模块核心代码实现：28

5.2试题管理子模块实现29

5.2.1试题管理模块界面设计29

5.2.2试题管理模块核心代码实现：30

5.3部门管理子模板实现32

5.3.1部门管理模块界面设计32

5.3.2部门管理模块核心代码实现：32

5.4角色管理子模块实现34

5.4.1角色管理模块界面设计34

III

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

5.4.2角色管理模块核心代码实现：34

6系统测试36

6.1科目管理功能测试36

6.2试题管理功能测试37

6.3部门管理功能测试38

6.4角色管理功能测试39

7设计小结40

参考资料41

IV

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

基于Vue的在线考试系统的设计与实现

1引言

由于疫情原因大多数公司无法进行线下考试，除去有环境因素的影响外，

较高的成本也是原因之一，但企业要想选出优秀的人才，进行内部的考核是很

有必要的。所以大部分公司采用线上考试选取员工。而我们青云在线考试系统

则分为四大模板（登录管理、权限管理、考试管理、我的考试）这四大模板基

本实现线下考试的目的。

1.1项目开发背景

当今社会已进入网络时代，计算机网络也成为社会发展的最强动力，网络

给我们带来了无穷的信息和方便。各企业为了高效而又方便的选取优秀的员工。

对企业而言，以前单一而有传统的考核方式不便于现在的社会情形，为了便于

测试和选取更优秀的员工在线考试系统的必要的。

1.2开发技术简介

Vue是一套用于构建用户界面的渐进式框架，使用Vue,可以完全在浏览器

渲染页面，服务端只提供数据，可以非常方便的构建单页面应用。Vue不存在依

赖，轻便，适用范围广（大中型项目，PC，移动端，混合开发），语法简单，

双向数据绑定。

1.2.1Vue简介

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue

被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，

还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种

支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

1.2.2Vue的运行原理

MVC模式将软件分为下面三个部分：1.视图（View）：用户界面，2.控制器

（Controller）：业务逻辑，3.模型（Model）：数据保存。他们之间的工作原

理是，视图反馈得到修改指令传达给了控制台，控制台得到指令进行修改完成

之后，发送给model、，model得到最新的反馈进行渲染传递给视图

1

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

1.2.3前后端页面的组成

前端运用vue，后端运用JavaScript。

1.3开发工具简介

工具的使用：采用IDEA+MySQL+VisualStudioCode

IDEA全称IntelliJIDEA，是java编程语言开发的集成环境。IntelliJ在

业界被公认为最好的java开发工具，尤其在智能代码助手、代码自动提示、重

构、J2EE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、

创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，

这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序

员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等

MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软

件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥

有成本低，尤其是开放源码这一特点，一般中小型和大型网站的开发都选择

MySQL作为网站数据库。

VisualStudioCode(简称VSCode1VSC)是微软公司推出的一款免费开源的

现代化轻量级代码编辑器，支持几乎所有主流的开发语言的语法高亮、智能代

码补全、GIT等特性，支持插件扩展等等。而且比sublime开源，比webstorm

更轻，智能提示很强大，自带emmet，插件安装非常方便，自带强大的调试功能，

软件跨平台支持Win、Mac以及Linux。

1.4项目开发技术路线

要实现一个完整的vue项目，我们需要先准备开发环境，当然有专业的IDE

可以帮我们快速搭建vue开发环境，也可以自己手动搭建，安装node.js、NPM、

Vue-cli和Wedpack等前端技术栈，完成开发环境的搭建。

然后利用HTML+CSS+JavaScript来实现页面的布局、样式和动态效果，接

着可以开始编写Vue代码实现交互部分的功能。最终项目开发完成后，对项目

进行充分的测试。

2

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

2需求分析

2.1功能需求描述

通过与部分企业的联系，录了在线考试系统的所需要的功能：

（1）科目管理：登录成功后企业员工可点击考试管理进入科目管理，对面

试题的科目进行查看、编辑和修改，从而给予用户合适的科目进行考试。

（2）试题管理：登录成功后，企业员工可点击考试管理页面对试题进行管

理。

（3）部门管理：登录成功后，超级管理员可以点击权限管理页面对来企业

的部门进行管理。

（4）角色管理：登录成功后，超级管理可以点击权限管理页面对角色进行

管理。

2.2非功能需求描述

本系统的非功能性需求有以下几个方面：

（1）高效性：登录便可以进行考试

（2）安全性：这些信息是具有隐私性。

（3）可扩展性：不同企业员工可以出属于自己企业的考题

2.3需求用例建模

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

3

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

图2-1在线考试系统的总体用例模型

超级管理员可以进行权限管理，考试管理，我的考试。企业员工可以运用

考试管理。用户可用我的考试进行考试。

2.3.1科目管理模板的用例

科目管理，分别具有添加科目，查看科目，删除科目，编辑科目。

4

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

图2-2科目管理模块用例图

通过对用例的细化，使用活动图针对系统动态行为进行建模。科目管理模

块活动图如图2-3所示。

5

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

图2-3科目管理模块活动图

通过对图2-2用例图及图2-3活动图进一步的细化分析，得到每个用例的

描述表。科目管理模块用例描述如表2-1所示，可进行在线考试等操作。

表2-1科目管理模块用例描述

项目描述

用例名称科目管理

用例标识号01

参与者企业员工

参与者输入用户名、密码，系统进行验证后合法者登录

简要说明

系统，否则提供拒绝登录系统。

前置条件参与者已经打开系统的登录页面

6

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

1.参与者在用户名输入框里输入用户名

2.在密码框里输入密码

3.点击登录

基本事件流

4.登录成功后，点击进入考试管理

5.可对科目进行添加、查看、编辑和删除

6.用例终止

其他事件流在按“登录”按钮之前，必须要有此账号。

异常事件流简答题答案有拓展性

后置条件进入的主界面，装载相应的数据

2.3.2试题管理模块的用例

试题管理，分别具有添加试题，查看试题，删除试题。

图2-4试题管理模块用例图

通过对用例的细化，使用活动图针对系统动态行为进行建模。试题管理模

块活动图如图2-5所示。

7

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

图2-5试题管理模块活动图

通过对图2-4用例图及图2-5活动图进一步的细化分析，得到每个用例的

描述表。权限管理模块用例描述如表2-2所示，可进行在线考试等操作。

表2-2权限管理模块用例描述

项目描述

用例名称试题管理

用例标识号02

参与者企业员工

参与者输入用户名、密码，系统进行验证后合法者登录

简要说明

系统，否则提供拒绝登录系统。

前置条件参与者已经打开系统的登录页面

8

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

1.参与者在用户名输入框里输入用户名

2.在密码框里输入密码

3.点击登录

基本事件流

4.登录成功后，点击考试管理

5.企业员工对试题进行添加、编辑和删除

6.用例终止

其他事件流在按“登录”按钮之前，必须有此账号。

异常事件流不同用户权限不同

后置条件进入的主界面，装载相应的数据

2.3.3部门管理模块的用例

部门管理，分别具有添加、查看、编辑和删除部门。

图2-6部门管理模块用例图

通过对用例的细化，使用活动图针对系统动态行为进行建模。部门管理模

块活动图如图2-7所示。

9

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

图2-7部门管理模块活动图

通过对图2-6用例图及图2-7活动图进一步的细化分析，得到每个用例的

描述表。部门管理模块用例描述如表2-3所示，可进行在线考试等操作。

表2-3部门管理模块用例描述

项目描述

用例名称部门管理

用例标识号03

参与者用户

参与者输入用户名、密码，系统进行验证后合法者登录

简要说明

系统，否则提供拒绝登录系统。

前置条件参与者已经打开系统的登录页面

10

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

1.参与者在用户名输入框里输入用户名

2.在密码框里输入密码

3.点击登录

基本事件流

4.登录成功后，点击权限管理

5.超级管理员对部门进行查看、添加、编辑和删除

6.用例终止

其他事件流在按“登录”按钮之前，必须有此账号。

异常事件流面试不同职业试题不一样

后置条件进入的主界面，装载相应的数据

2.3.4角色管理模块的用例

角色管理，分别具有添加、查看、编辑和删除角色。

图2-8角色管理模块用例图

通过对用例的细化，使用活动图针对系统动态行为进行建模。角色管理模

块活动图如图2-9所示。

11

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

图2-9角色管理模块活动图

通过对图2-8用例图及图2-9活动图进一步的细化分析，得到每个用例的

描述表。角色管理模块用例描述如表2-4所示，可进行在线考试等操作。

表2-4角色管理模块用例描述

项目描述

用例名称角色管理

用例标识号04

参与者用户

参与者输入用户名、密码，系统进行验证后合法者登录

简要说明

系统，否则提供拒绝登录系统。

前置条件参与者已经打开系统的登录页面

12

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

1.参与者在用户名输入框里输入用户名

2.在密码框里输入密码

3.点击登录

基本事件流

4.点击权限管理，进入角色管理页面

5.对角色进行添加、查看、编辑和删除

6.用例终止

其他事件流在登录失误时，系统提示信息有误并进行修改

异常事件流提示错误信息，管理台确定

后置条件进入的主界面，装载相应的数据

3系统概要设计

3.1系统设计原则

在线考试系统操作简易，功能齐全，对用户而言更方便、更简易，给予用

户更好的体验。在线考试系统开发的全场景考试功能，能够合理满足企业、教

育机构的在线考试需求。

3.2系统框架设计

根据系统的需求分析、用例建模分析结合开发平台的特点设计在线考试

系统的系统架构模型，如图3-1所示。

13

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

图3-1在线考试系统整体架构图

14

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

3.3系统功能设计

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

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

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

完美。根据在线考试系统的需求分析和用例建模分析，本文确定了在线考试系

统的主要功能模块，包括登录管理、权限管理、考试管理和我的考试等。在线

考试系统的功能结构图如图3-2所示，本系统共有四大主要功能模块。

图3-2在线考试系统功能结构图

15

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

3.3.1科目管理功能设计

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

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

图3-3科目管理功能流程图

16

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

3.3.2试题管理功能设计

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

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

图3-4试题管理功能流程图

17

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

3.3.3部门管理功能设计

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

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

图3-5部门管理功能流程图

18

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

3.3.4角色管理功能设计

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

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

图3-6角色管理功能流程图

3.4数据库设计

数据库设计是指对于一个给定的应用环境，构造最优的数据库模式，建立

数据库及其应用系统，使之能够有效地存储数据，满足各种用户的应用需求（信

息要求和处理要求）。在数据库领域内，常常把使用数据库的各类系统统称为

数据库应用系统。

19

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

3.4.1设计原则

为取得较好的设计效果，进行数据库设计需要遵从以下原则：

1、致性原则:对数据来源进行统一、系统的分析与设计，协调好各种数据源，

保证数据的一致性和有效性。

2、完整性原则:数据库的完整性是指数据的正确性和相容性。要防止合法用

户使用数据库时向数据库加入不合语义的数据。对输入到数据库中的数据要有

审核和约束机制。

3、安全性原则:数据库的安全性是指保护数据，防止非法用户使用数据库或

合法用户非法使用数据库造成数据泄露、更改或破坏。要有认证和授权机制。

4、可伸缩性与可扩展性原则:数据库结构的设计应充分考虑发展的需要、移

植的需要，具有良好的扩展性、伸缩性和适度冗余。

3.4.2概念设计

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

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

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

图如下图3-7所示。

图3-7在线考试系统E-R图

20

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

3.4.3逻辑设计

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

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

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

部门表（部门编号，部门名称，排序，上级部门，创立时间）

用户表（用户编号，用户名字，账号，密码，上次登录时间，最后一次登

录时间，所属部门）

试题表（试题编号，题干，题型，所属科目，选项，图片，解析，答案，

创立时间）

科目表（科目编号，科目名称，创立时间）

3.4.4数据字典

部门表的表结构如表3-1所示，该表主要用于记录企业部门信息，主要

字段为部门编号，部门名称，排序，上级部门，创立时间。

表3-1部门表表结构

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

idvarchar部门编号主键非空

namevarchar部门名称非空

sortint排序非空

masteridvarchar上级部门非空

createtimedatetime创立时间非空

用户表的表结构如表3-2所示，该表主要用于记录考试科目信息，主要字

段为用户编号，用户名字，账号，密码，上次登录时间，最后一次登录时间，

所属部门。

表3-2用户表表结构

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

idvarchar用户编号主键非空

namevarchar用户名字非空

usernamevarchar账号非空

passwordvarchar密码非空

createtimedatetime上次登录时间非空

lastlogintim最后一次登录时

datetime非空

e间

21

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

departmentidvarchar所属部门非空

试题表的表结构如表3-3所示，该表主要用于记录考试试题信息，主要字

段为试题编号，题干，题型，所属科目，选项，图片，解析，答案，创立时间。

表3-3试题表表结构

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

idvarchar试题编号主键非空

contentvarchar题干非空

typevarchar题型非空

subjectvarchar所属科目非空

avarchar选项a非空

bvarchar选项b非空

cvarchar选项c非空

dvarchar选项d非空

imgurlvarchar图片非空

analysisvarchar解析非空

answervarchar答案非空

createtimedatetime创立时间非空

科目表的表结构如表3-4所示，该表主要用于记录考试科目信息，主要字

段为科目编号，科目名称，创立时间。

表3-4科目表表结构

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

idvarchar科目编号主键非空

namevarchar科目名称非空

createtimedatetime创立时间非空

数据库设计总结：根据在线考试的需求分析和用例建模分析，本文确定了

在线考试系统的主要功能模块，包括权限管理、考试管理和我的考试。在线考

试系统的功能结构图根据在线考试的需求分析和用例建模分析，本文确定了在

线考试系统的主要功能模块。

22

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

4系统详细设计

进入系统，了解在线考试的系统的问题，希望通过系统设计实现方便用户体

验，了解在线考试的系统的问题，希望通过系统设作流的处理现给用户。

4.1科目管理功能模块设计

4.1.1科目管理功能模块说明

与用户进行沟通，了解在线考的系统的问题，希望通过系统设计实现并开展

在线考试系统的用处，希望通过系统设作流的处理现给用户。

4.1.2科目管理功能模块详细设计

通过需求分析和概要设计对各子功能进行分析与设计，得到与科目管理子

功能模块静态结构类图，如图4-1所示。

图4-1科目管理系统的类图

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

如下表4-1所示。

表4-1科目管理子功能模块相关类及方法描述表

类名科目管理

描述企业员工和超级管理员对科目的管理

属性id,name,createtime

方法

类名超级管理员

描述超级管理员类

23

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

属性id，name，description，createtime

方法添加科目（），修改科目（），删除科目（）...

类名企业员工

描述企业员工类

属性id，name，description，createtime

方法添加科目（），修改科目（），删除科目（）...

4.2试题管理子功能模块设计

4.2.1试题管理子功能模块说明

与用户进行沟通，了解在线考的系统的问题，希望通过系统设计实现并开展

在线考试系统的用处，希望通过系统设作流的处理现给用户。

4.2.2试题管理功能模块详细设计

通过需求分析和概要设计对各子功能进行分析与设计，得到与试题管理子

功能模块静态结构类图，如图4-2所示。

图4-2考试管理系统的类图

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

如下表4-2所示。

表4-2考试管理子功能模块相关类及方法描述表

类名考试管理

描述企业员工和超级管理员对考试的管理

id,content,type,subject,a,b,c,d,imgurl,analysis,an

属性

swer,createtime

方法

24

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

类名超级管理员

描述超级管理员类

属性id，name，description，createtime

方法添加科目（），修改科目（），删除科目（）...

类名企业员工

描述企业员工类

属性id，name，description，createtime

方法添加科目（），修改科目（），删除科目（）...

4.3部门管理子功能模块设计

4.3.1部门管理子功能模块说明

与用户进行沟通，了解在线考的系统的问题，希望通过系统设计实现并开展

在线考试系统的用处，希望通过系统设作流的处理现给用户。

4.3.2部门管理功能模块详细设计

通过需求分析和概要设计对各子功能进行分析与设计，得到与部门管理子

功能模块静态结构类图，如图4-3所示。

图4-3部门管理系统的类图

25

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

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

如下表4-3所示。

表4-3部门管理子功能模块相关类及方法描述表

类名超级管理员

描述超级管理员类

属性id，name，description，createtime

方法添加部门（），修改部门（），删除部门（）...

类名部门管理

描述超级管理员对部门进行管理

属性id,name,sort,masterid,createtime

方法

4.4角色管理子功能模块设计

4.4.1角色管理子功能模块说明

与用户进行沟通，了解在线考的系统的问题，希望通过系统设计实现并开展

在线考试系统的用处，希望通过系统设作流的处理现给用户。

4.4.2角色管理功能模块详细设计

通过需求分析和概要设计对各子功能进行分析与设计，得到与角色管理子

功能模块静态结构类图，如图4-4所示。

26

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

图4-4角色管理系统的类图

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

如下表4-4所示。

表4-4角色管理子功能模块相关类及方法描述表

类名超级管理员

描述超级管理员类

属性id，name，description，createtime

方法添加角色（），修改角色（），删除角色（）...

类名角色管理

描述超级管理员对角色的管理

属性id,name,description,createtime

方法

5系统实现

5.1科目管理子模块实现

5.1.1科目管理模块界面设计

试题界面，如图5-1所示：该界面主要是企业员工对试题的编辑。

添加：企业员工可以在添加中加入新的试题给用户进行考试。

所有试题：企业员工已添加的所有试题。

27

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

图5-1科目管理界面

5.1.2科目管理模块核心代码实现：

步骤1：页面

<el-table:data="tableData"borderstyle="width:100%;margin-top:20px;":header-cell-style="{

background:'rgb(242,243,244)',color:'#515a6e'}">

<el-table-columnfixedprop="id"label="ID"v-if="false">

</el-table-column>

<el-table-columnprop="name"label="科目名称">

</el-table-column>

<el-table-column:formatter="dateFormat"prop="createtime"label="创建时间">

</el-table-column>

<el-table-columnfixed="right"label="操作">

<templateslot-scope="scope">

<el-buttonsize="mini"@click="look(scope.row)">查看</el-button>

<el-buttonsize="mini"@click="update(scope.row)">编辑</el-button>

<el-buttontype="danger"size="mini"@click="del(scope.row)">删除</el-button>

</template>

</el-table-column>

</el-table>

步骤2：科目名称

<el-form-itemlabel="科目名称："label-width="100px"prop="name">

<el-input:disabled="dialogInputButtonVisible"v-model=""

clearable></el-input>

</el-form-item>

步骤3：修改科目

if(this.title=="修改科目"){

this.$http

28

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

.post('/examinationManage/updateSubject',that.subject)

.then(function(response){

if(response.data.code==200){

that.$message({

showClose:true,

type:'success',

message:'操作成功'

});

that.getDataPage(that.currentPage,that.pageSize);

that.dialogFormVisible=false;

}

})

}

步骤4：添加科目

if(that.title=="添加科目"){

that.$http

.post('/examinationManage/addSubject',that.subject)

.then(function(response){

if(response.data.code==200){

that.$message({

showClose:true,

type:'success',

message:'操作成功'

});

that.getDataPage(that.currentPage,that.pageSize);

that.dialogFormVisible=false;

}

})

}

5.2试题管理子模块实现

5.2.1试题管理模块界面设计

试题界面，如图5-2所示：该界面主要是企业员工对试题的编辑。

添加：企业员工可以在添加中加入新的试题给用户进行考试。

所有试题：企业员工已添加的所有试题。

29

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

图5-2试题管理界面

5.2.2试题管理模块核心代码实现：

步骤1：页面

<el-table:data="tableData"borderstyle="width:100%;margin-top:20px;"

:header-cell-style="{background:'rgb(242,243,244)',color:'#515a6e'}">

<el-table-columnfixedprop="id"label="ID"v-if="false">

</el-table-column>

<el-table-columnprop="content"label="题干">

</el-table-column>

<el-table-columnprop="type"label="题型">

</el-table-column>

<el-table-columnprop="subjectName"label="所属科目">

</el-table-column>

<el-table-column:formatter="dateFormat"prop="createtime"label="创建时间">

</el-table-column>

<el-table-columnfixed="right"label="操作">

<templateslot-scope="scope">

<el-buttonsize="mini"@click="update(scope.row)">编辑</el-button>

<el-buttontype="danger"size="mini"@click="del(scope.row)">删除</el-button>

</template>

</el-table-column>

</el-table>

步骤2：题型

<el-form-itemlabel="题型："label-width="100px"prop="type">

<el-selectv-model="question.type"placeholder="请选择题目类型"

@change="changeType">

<el-optionv-for="iteminquesTypeList":value="item.code":label=""

:key="item.code">

30

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

</el-option>

</el-select>

</el-form-item>

步骤3：修改试题

if(this.title=="修改试题"){

this.$http

.post('/examinationManage/updateQuestion',that.question)

.then(function(response){

if(response.data.code==200){

that.$message({

showClose:true,

type:'success',

message:'操作成功'