湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

目錄

1引言1

1.1項(xiàng)目開發(fā)背景1

1.2開發(fā)技術(shù)簡介1

1.2.1Vue簡介1

1.2.2Vue的運(yùn)行原理1

1.2.3前后端頁面的組成2

1.3開發(fā)工具簡介2

1.4項(xiàng)目開發(fā)技術(shù)路線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系統(tǒng)概要設(shè)計13

3.1系統(tǒng)設(shè)計原則13

3.2系統(tǒng)框架設(shè)計13

3.3系統(tǒng)功能設(shè)計15

3.3.1科目管理功能設(shè)計16

3.3.2試題管理功能設(shè)計17

3.3.3部門管理功能設(shè)計18

3.3.4角色管理功能設(shè)計19

3.4數(shù)據(jù)庫設(shè)計19

3.4.1設(shè)計原則20

II

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.4.2概念設(shè)計20

3.4.3邏輯設(shè)計21

3.4.4數(shù)據(jù)字典21

4系統(tǒng)詳細(xì)設(shè)計23

4.1科目管理功能模塊設(shè)計23

4.1.1科目管理功能模塊說明23

4.1.2科目管理功能模塊詳細(xì)設(shè)計23

4.2試題管理子功能模塊設(shè)計24

4.2.1試題管理子功能模塊說明24

4.2.2試題管理功能模塊詳細(xì)設(shè)計24

4.3部門管理子功能模塊設(shè)計25

4.3.1部門管理子功能模塊說明25

4.3.2部門管理功能模塊詳細(xì)設(shè)計25

4.4角色管理子功能模塊設(shè)計26

4.4.1角色管理子功能模塊說明26

4.4.2角色管理功能模塊詳細(xì)設(shè)計26

5系統(tǒng)實(shí)現(xiàn)27

5.1科目管理子模塊實(shí)現(xiàn)27

5.1.1科目管理模塊界面設(shè)計27

5.1.2科目管理模塊核心代碼實(shí)現(xiàn)：28

5.2試題管理子模塊實(shí)現(xiàn)29

5.2.1試題管理模塊界面設(shè)計29

5.2.2試題管理模塊核心代碼實(shí)現(xiàn)：30

5.3部門管理子模板實(shí)現(xiàn)32

5.3.1部門管理模塊界面設(shè)計32

5.3.2部門管理模塊核心代碼實(shí)現(xiàn)：32

5.4角色管理子模塊實(shí)現(xiàn)34

5.4.1角色管理模塊界面設(shè)計34

III

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

5.4.2角色管理模塊核心代碼實(shí)現(xiàn)：34

6系統(tǒng)測試36

6.1科目管理功能測試36

6.2試題管理功能測試37

6.3部門管理功能測試38

6.4角色管理功能測試39

7設(shè)計小結(jié)40

參考資料41

IV

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

基于Vue的在線考試系統(tǒng)的設(shè)計與實(shí)現(xiàn)

1引言

由于疫情原因大多數(shù)公司無法進(jìn)行線下考試，除去有環(huán)境因素的影響外，

較高的成本也是原因之一，但企業(yè)要想選出優(yōu)秀的人才，進(jìn)行內(nèi)部的考核是很

有必要的。所以大部分公司采用線上考試選取員工。而我們青云在線考試系統(tǒng)

則分為四大模板（登錄管理、權(quán)限管理、考試管理、我的考試）這四大模板基

本實(shí)現(xiàn)線下考試的目的。

1.1項(xiàng)目開發(fā)背景

當(dāng)今社會已進(jìn)入網(wǎng)絡(luò)時代，計算機(jī)網(wǎng)絡(luò)也成為社會發(fā)展的最強(qiáng)動力，網(wǎng)絡(luò)

給我們帶來了無窮的信息和方便。各企業(yè)為了高效而又方便的選取優(yōu)秀的員工。

對企業(yè)而言，以前單一而有傳統(tǒng)的考核方式不便于現(xiàn)在的社會情形，為了便于

測試和選取更優(yōu)秀的員工在線考試系統(tǒng)的必要的。

1.2開發(fā)技術(shù)簡介

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，使用Vue,可以完全在瀏覽器

渲染頁面，服務(wù)端只提供數(shù)據(jù)，可以非常方便的構(gòu)建單頁面應(yīng)用。Vue不存在依

賴，輕便，適用范圍廣（大中型項(xiàng)目，PC，移動端，混合開發(fā)），語法簡單，

雙向數(shù)據(jù)綁定。

1.2.1Vue簡介

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue

被設(shè)計為可以自底向上逐層應(yīng)用。Vue的核心庫只關(guān)注視圖層，不僅易于上手，

還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與現(xiàn)代化的工具鏈以及各種

支持類庫結(jié)合使用時，Vue也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動。

1.2.2Vue的運(yùn)行原理

MVC模式將軟件分為下面三個部分：1.視圖（View）：用戶界面，2.控制器

（Controller）：業(yè)務(wù)邏輯，3.模型（Model）：數(shù)據(jù)保存。他們之間的工作原

理是，視圖反饋得到修改指令傳達(dá)給了控制臺，控制臺得到指令進(jìn)行修改完成

之后，發(fā)送給model、，model得到最新的反饋進(jìn)行渲染傳遞給視圖

1

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

1.2.3前后端頁面的組成

前端運(yùn)用vue，后端運(yùn)用JavaScript。

1.3開發(fā)工具簡介

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

IDEA全稱IntelliJIDEA，是java編程語言開發(fā)的集成環(huán)境。IntelliJ在

業(yè)界被公認(rèn)為最好的java開發(fā)工具，尤其在智能代碼助手、代碼自動提示、重

構(gòu)、J2EE支持、各類版本工具(git、svn等)、JUnit、CVS整合、代碼分析、

創(chuàng)新的GUI設(shè)計等方面的功能可以說是超常的。IDEA是JetBrains公司的產(chǎn)品，

這家公司總部位于捷克共和國的首都布拉格，開發(fā)人員以嚴(yán)謹(jǐn)著稱的東歐程序

員為主。它的旗艦版本還支持HTML，CSS，PHP，MySQL，Python等

MySQL所使用的SQL語言是用于訪問數(shù)據(jù)庫的最常用標(biāo)準(zhǔn)化語言。MySQL軟

件采用了雙授權(quán)政策，分為社區(qū)版和商業(yè)版，由于其體積小、速度快、總體擁

有成本低，尤其是開放源碼這一特點(diǎn)，一般中小型和大型網(wǎng)站的開發(fā)都選擇

MySQL作為網(wǎng)站數(shù)據(jù)庫。

VisualStudioCode(簡稱VSCode1VSC)是微軟公司推出的一款免費(fèi)開源的

現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代

碼補(bǔ)全、GIT等特性，支持插件擴(kuò)展等等。而且比sublime開源，比webstorm

更輕，智能提示很強(qiáng)大，自帶emmet，插件安裝非常方便，自帶強(qiáng)大的調(diào)試功能，

軟件跨平臺支持Win、Mac以及Linux。

1.4項(xiàng)目開發(fā)技術(shù)路線

要實(shí)現(xiàn)一個完整的vue項(xiàng)目，我們需要先準(zhǔn)備開發(fā)環(huán)境，當(dāng)然有專業(yè)的IDE

可以幫我們快速搭建vue開發(fā)環(huán)境，也可以自己手動搭建，安裝node.js、NPM、

Vue-cli和Wedpack等前端技術(shù)棧，完成開發(fā)環(huán)境的搭建。

然后利用HTML+CSS+JavaScript來實(shí)現(xiàn)頁面的布局、樣式和動態(tài)效果，接

著可以開始編寫Vue代碼實(shí)現(xiàn)交互部分的功能。最終項(xiàng)目開發(fā)完成后，對項(xiàng)目

進(jìn)行充分的測試。

2

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

2需求分析

2.1功能需求描述

通過與部分企業(yè)的聯(lián)系，錄了在線考試系統(tǒng)的所需要的功能：

（1）科目管理：登錄成功后企業(yè)員工可點(diǎn)擊考試管理進(jìn)入科目管理，對面

試題的科目進(jìn)行查看、編輯和修改，從而給予用戶合適的科目進(jìn)行考試。

（2）試題管理：登錄成功后，企業(yè)員工可點(diǎn)擊考試管理頁面對試題進(jìn)行管

理。

（3）部門管理：登錄成功后，超級管理員可以點(diǎn)擊權(quán)限管理頁面對來企業(yè)

的部門進(jìn)行管理。

（4）角色管理：登錄成功后，超級管理可以點(diǎn)擊權(quán)限管理頁面對角色進(jìn)行

管理。

2.2非功能需求描述

本系統(tǒng)的非功能性需求有以下幾個方面：

（1）高效性：登錄便可以進(jìn)行考試

（2）安全性：這些信息是具有隱私性。

（3）可擴(kuò)展性：不同企業(yè)員工可以出屬于自己企業(yè)的考題

2.3需求用例建模

通過對功能需求的分析，創(chuàng)建以下總體用例模型，如圖2-1所示。

3

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-1在線考試系統(tǒng)的總體用例模型

超級管理員可以進(jìn)行權(quán)限管理，考試管理，我的考試。企業(yè)員工可以運(yùn)用

考試管理。用戶可用我的考試進(jìn)行考試。

2.3.1科目管理模板的用例

科目管理，分別具有添加科目，查看科目，刪除科目，編輯科目。

4

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-2科目管理模塊用例圖

通過對用例的細(xì)化，使用活動圖針對系統(tǒng)動態(tài)行為進(jìn)行建模。科目管理模

塊活動圖如圖2-3所示。

5

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-3科目管理模塊活動圖

通過對圖2-2用例圖及圖2-3活動圖進(jìn)一步的細(xì)化分析，得到每個用例的

描述表。科目管理模塊用例描述如表2-1所示，可進(jìn)行在線考試等操作。

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

項(xiàng)目描述

用例名稱科目管理

用例標(biāo)識號01

參與者企業(yè)員工

參與者輸入用戶名、密碼，系統(tǒng)進(jìn)行驗(yàn)證后合法者登錄

簡要說明

系統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面

6

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

1.參與者在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

3.點(diǎn)擊登錄

基本事件流

4.登錄成功后，點(diǎn)擊進(jìn)入考試管理

5.可對科目進(jìn)行添加、查看、編輯和刪除

6.用例終止

其他事件流在按“登錄”按鈕之前，必須要有此賬號。

異常事件流簡答題答案有拓展性

后置條件進(jìn)入的主界面，裝載相應(yīng)的數(shù)據(jù)

2.3.2試題管理模塊的用例

試題管理，分別具有添加試題，查看試題，刪除試題。

圖2-4試題管理模塊用例圖

通過對用例的細(xì)化，使用活動圖針對系統(tǒng)動態(tài)行為進(jìn)行建模。試題管理模

塊活動圖如圖2-5所示。

7

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-5試題管理模塊活動圖

通過對圖2-4用例圖及圖2-5活動圖進(jìn)一步的細(xì)化分析，得到每個用例的

描述表。權(quán)限管理模塊用例描述如表2-2所示，可進(jìn)行在線考試等操作。

表2-2權(quán)限管理模塊用例描述

項(xiàng)目描述

用例名稱試題管理

用例標(biāo)識號02

參與者企業(yè)員工

參與者輸入用戶名、密碼，系統(tǒng)進(jìn)行驗(yàn)證后合法者登錄

簡要說明

系統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面

8

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

1.參與者在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

3.點(diǎn)擊登錄

基本事件流

4.登錄成功后，點(diǎn)擊考試管理

5.企業(yè)員工對試題進(jìn)行添加、編輯和刪除

6.用例終止

其他事件流在按“登錄”按鈕之前，必須有此賬號。

異常事件流不同用戶權(quán)限不同

后置條件進(jìn)入的主界面，裝載相應(yīng)的數(shù)據(jù)

2.3.3部門管理模塊的用例

部門管理，分別具有添加、查看、編輯和刪除部門。

圖2-6部門管理模塊用例圖

通過對用例的細(xì)化，使用活動圖針對系統(tǒng)動態(tài)行為進(jìn)行建模。部門管理模

塊活動圖如圖2-7所示。

9

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-7部門管理模塊活動圖

通過對圖2-6用例圖及圖2-7活動圖進(jìn)一步的細(xì)化分析，得到每個用例的

描述表。部門管理模塊用例描述如表2-3所示，可進(jìn)行在線考試等操作。

表2-3部門管理模塊用例描述

項(xiàng)目描述

用例名稱部門管理

用例標(biāo)識號03

參與者用戶

參與者輸入用戶名、密碼，系統(tǒng)進(jìn)行驗(yàn)證后合法者登錄

簡要說明

系統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面

10

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

1.參與者在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

3.點(diǎn)擊登錄

基本事件流

4.登錄成功后，點(diǎn)擊權(quán)限管理

5.超級管理員對部門進(jìn)行查看、添加、編輯和刪除

6.用例終止

其他事件流在按“登錄”按鈕之前，必須有此賬號。

異常事件流面試不同職業(yè)試題不一樣

后置條件進(jìn)入的主界面，裝載相應(yīng)的數(shù)據(jù)

2.3.4角色管理模塊的用例

角色管理，分別具有添加、查看、編輯和刪除角色。

圖2-8角色管理模塊用例圖

通過對用例的細(xì)化，使用活動圖針對系統(tǒng)動態(tài)行為進(jìn)行建模。角色管理模

塊活動圖如圖2-9所示。

11

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖2-9角色管理模塊活動圖

通過對圖2-8用例圖及圖2-9活動圖進(jìn)一步的細(xì)化分析，得到每個用例的

描述表。角色管理模塊用例描述如表2-4所示，可進(jìn)行在線考試等操作。

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

項(xiàng)目描述

用例名稱角色管理

用例標(biāo)識號04

參與者用戶

參與者輸入用戶名、密碼，系統(tǒng)進(jìn)行驗(yàn)證后合法者登錄

簡要說明

系統(tǒng)，否則提供拒絕登錄系統(tǒng)。

前置條件參與者已經(jīng)打開系統(tǒng)的登錄頁面

12

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

1.參與者在用戶名輸入框里輸入用戶名

2.在密碼框里輸入密碼

3.點(diǎn)擊登錄

基本事件流

4.點(diǎn)擊權(quán)限管理，進(jìn)入角色管理頁面

5.對角色進(jìn)行添加、查看、編輯和刪除

6.用例終止

其他事件流在登錄失誤時，系統(tǒng)提示信息有誤并進(jìn)行修改

異常事件流提示錯誤信息，管理臺確定

后置條件進(jìn)入的主界面，裝載相應(yīng)的數(shù)據(jù)

3系統(tǒng)概要設(shè)計

3.1系統(tǒng)設(shè)計原則

在線考試系統(tǒng)操作簡易，功能齊全，對用戶而言更方便、更簡易，給予用

戶更好的體驗(yàn)。在線考試系統(tǒng)開發(fā)的全場景考試功能，能夠合理滿足企業(yè)、教

育機(jī)構(gòu)的在線考試需求。

3.2系統(tǒng)框架設(shè)計

根據(jù)系統(tǒng)的需求分析、用例建模分析結(jié)合開發(fā)平臺的特點(diǎn)設(shè)計在線考試

系統(tǒng)的系統(tǒng)架構(gòu)模型，如圖3-1所示。

13

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖3-1在線考試系統(tǒng)整體架構(gòu)圖

14

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.3系統(tǒng)功能設(shè)計

系統(tǒng)模塊化結(jié)構(gòu)設(shè)計工作是在系統(tǒng)分析階段對子系統(tǒng)劃分的基礎(chǔ)上，在進(jìn)

一步地劃分，將它逐層的分解成多個大小相同、功能單一、具有一定獨(dú)立性的

模塊，以便程序設(shè)計工作的同時，有加強(qiáng)了數(shù)據(jù)庫之間的聯(lián)系，使系統(tǒng)更加的

完美。根據(jù)在線考試系統(tǒng)的需求分析和用例建模分析，本文確定了在線考試系

統(tǒng)的主要功能模塊，包括登錄管理、權(quán)限管理、考試管理和我的考試等。在線

考試系統(tǒng)的功能結(jié)構(gòu)圖如圖3-2所示，本系統(tǒng)共有四大主要功能模塊。

圖3-2在線考試系統(tǒng)功能結(jié)構(gòu)圖

15

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.3.1科目管理功能設(shè)計

針對系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

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

16

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.3.2試題管理功能設(shè)計

針對系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

圖3-4試題管理功能流程圖

17

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.3.3部門管理功能設(shè)計

針對系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

圖3-5部門管理功能流程圖

18

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.3.4角色管理功能設(shè)計

針對系統(tǒng)功能結(jié)構(gòu)圖進(jìn)行進(jìn)一步細(xì)化分析，得到各子模塊相關(guān)功能描述，

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

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

3.4數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫設(shè)計是指對于一個給定的應(yīng)用環(huán)境，構(gòu)造最優(yōu)的數(shù)據(jù)庫模式，建立

數(shù)據(jù)庫及其應(yīng)用系統(tǒng)，使之能夠有效地存儲數(shù)據(jù)，滿足各種用戶的應(yīng)用需求（信

息要求和處理要求）。在數(shù)據(jù)庫領(lǐng)域內(nèi)，常常把使用數(shù)據(jù)庫的各類系統(tǒng)統(tǒng)稱為

數(shù)據(jù)庫應(yīng)用系統(tǒng)。

19

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.4.1設(shè)計原則

為取得較好的設(shè)計效果，進(jìn)行數(shù)據(jù)庫設(shè)計需要遵從以下原則：

1、致性原則:對數(shù)據(jù)來源進(jìn)行統(tǒng)一、系統(tǒng)的分析與設(shè)計，協(xié)調(diào)好各種數(shù)據(jù)源，

保證數(shù)據(jù)的一致性和有效性。

2、完整性原則:數(shù)據(jù)庫的完整性是指數(shù)據(jù)的正確性和相容性。要防止合法用

戶使用數(shù)據(jù)庫時向數(shù)據(jù)庫加入不合語義的數(shù)據(jù)。對輸入到數(shù)據(jù)庫中的數(shù)據(jù)要有

審核和約束機(jī)制。

3、安全性原則:數(shù)據(jù)庫的安全性是指保護(hù)數(shù)據(jù)，防止非法用戶使用數(shù)據(jù)庫或

合法用戶非法使用數(shù)據(jù)庫造成數(shù)據(jù)泄露、更改或破壞。要有認(rèn)證和授權(quán)機(jī)制。

4、可伸縮性與可擴(kuò)展性原則:數(shù)據(jù)庫結(jié)構(gòu)的設(shè)計應(yīng)充分考慮發(fā)展的需要、移

植的需要，具有良好的擴(kuò)展性、伸縮性和適度冗余。

3.4.2概念設(shè)計

在數(shù)據(jù)庫概念設(shè)計的過程中，采用E-R圖來描述概念設(shè)計的結(jié)果。E-R圖是

概念數(shù)據(jù)模型的高層描述所使用的數(shù)據(jù)模型或模式圖，它為表述實(shí)體聯(lián)系模式

圖形式的數(shù)據(jù)模型提供了圖形符號。根據(jù)在線考試系統(tǒng)數(shù)據(jù)進(jìn)行分析，其E-R

圖如下圖3-7所示。

圖3-7在線考試系統(tǒng)E-R圖

20

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

3.4.3邏輯設(shè)計

針對ER模型，通過數(shù)據(jù)實(shí)體屬性、實(shí)體間關(guān)系的全面分析，結(jié)合在線考試

系統(tǒng)的實(shí)際需求，根據(jù)E-R圖轉(zhuǎn)化為關(guān)系模式的轉(zhuǎn)換方法，建立起了本系統(tǒng)的

關(guān)系模式，具體轉(zhuǎn)化后的關(guān)系模式如下：

部門表（部門編號，部門名稱，排序，上級部門，創(chuàng)立時間）

用戶表（用戶編號，用戶名字，賬號，密碼，上次登錄時間，最后一次登

錄時間，所屬部門）

試題表（試題編號，題干，題型，所屬科目，選項(xiàng)，圖片，解析，答案，

創(chuàng)立時間）

科目表（科目編號，科目名稱，創(chuàng)立時間）

3.4.4數(shù)據(jù)字典

部門表的表結(jié)構(gòu)如表3-1所示，該表主要用于記錄企業(yè)部門信息，主要

字段為部門編號，部門名稱，排序，上級部門，創(chuàng)立時間。

表3-1部門表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

idvarchar部門編號主鍵非空

namevarchar部門名稱非空

sortint排序非空

masteridvarchar上級部門非空

createtimedatetime創(chuàng)立時間非空

用戶表的表結(jié)構(gòu)如表3-2所示，該表主要用于記錄考試科目信息，主要字

段為用戶編號，用戶名字，賬號，密碼，上次登錄時間，最后一次登錄時間，

所屬部門。

表3-2用戶表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

idvarchar用戶編號主鍵非空

namevarchar用戶名字非空

usernamevarchar賬號非空

passwordvarchar密碼非空

createtimedatetime上次登錄時間非空

lastlogintim最后一次登錄時

datetime非空

e間

21

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

departmentidvarchar所屬部門非空

試題表的表結(jié)構(gòu)如表3-3所示，該表主要用于記錄考試試題信息，主要字

段為試題編號，題干，題型，所屬科目，選項(xiàng)，圖片，解析，答案，創(chuàng)立時間。

表3-3試題表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

idvarchar試題編號主鍵非空

contentvarchar題干非空

typevarchar題型非空

subjectvarchar所屬科目非空

avarchar選項(xiàng)a非空

bvarchar選項(xiàng)b非空

cvarchar選項(xiàng)c非空

dvarchar選項(xiàng)d非空

imgurlvarchar圖片非空

analysisvarchar解析非空

answervarchar答案非空

createtimedatetime創(chuàng)立時間非空

科目表的表結(jié)構(gòu)如表3-4所示，該表主要用于記錄考試科目信息，主要字

段為科目編號，科目名稱，創(chuàng)立時間。

表3-4科目表表結(jié)構(gòu)

字段名稱數(shù)據(jù)類型字段內(nèi)容主鍵設(shè)置非空

idvarchar科目編號主鍵非空

namevarchar科目名稱非空

createtimedatetime創(chuàng)立時間非空

數(shù)據(jù)庫設(shè)計總結(jié)：根據(jù)在線考試的需求分析和用例建模分析，本文確定了

在線考試系統(tǒng)的主要功能模塊，包括權(quán)限管理、考試管理和我的考試。在線考

試系統(tǒng)的功能結(jié)構(gòu)圖根據(jù)在線考試的需求分析和用例建模分析，本文確定了在

線考試系統(tǒng)的主要功能模塊。

22

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

4系統(tǒng)詳細(xì)設(shè)計

進(jìn)入系統(tǒng)，了解在線考試的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)計實(shí)現(xiàn)方便用戶體

驗(yàn)，了解在線考試的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.1科目管理功能模塊設(shè)計

4.1.1科目管理功能模塊說明

與用戶進(jìn)行溝通，了解在線考的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)計實(shí)現(xiàn)并開展

在線考試系統(tǒng)的用處，希望通過系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.1.2科目管理功能模塊詳細(xì)設(shè)計

通過需求分析和概要設(shè)計對各子功能進(jìn)行分析與設(shè)計，得到與科目管理子

功能模塊靜態(tài)結(jié)構(gòu)類圖，如圖4-1所示。

圖4-1科目管理系統(tǒng)的類圖

針對類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-1所示。

表4-1科目管理子功能模塊相關(guān)類及方法描述表

類名科目管理

描述企業(yè)員工和超級管理員對科目的管理

屬性id,name,createtime

方法

類名超級管理員

描述超級管理員類

23

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

屬性id，name，description，createtime

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

類名企業(yè)員工

描述企業(yè)員工類

屬性id，name，description，createtime

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

4.2試題管理子功能模塊設(shè)計

4.2.1試題管理子功能模塊說明

與用戶進(jìn)行溝通，了解在線考的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)計實(shí)現(xiàn)并開展

在線考試系統(tǒng)的用處，希望通過系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.2.2試題管理功能模塊詳細(xì)設(shè)計

通過需求分析和概要設(shè)計對各子功能進(jìn)行分析與設(shè)計，得到與試題管理子

功能模塊靜態(tài)結(jié)構(gòu)類圖，如圖4-2所示。

圖4-2考試管理系統(tǒng)的類圖

針對類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-2所示。

表4-2考試管理子功能模塊相關(guān)類及方法描述表

類名考試管理

描述企業(yè)員工和超級管理員對考試的管理

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

屬性

swer,createtime

方法

24

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

類名超級管理員

描述超級管理員類

屬性id，name，description，createtime

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

類名企業(yè)員工

描述企業(yè)員工類

屬性id，name，description，createtime

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

4.3部門管理子功能模塊設(shè)計

4.3.1部門管理子功能模塊說明

與用戶進(jìn)行溝通，了解在線考的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)計實(shí)現(xiàn)并開展

在線考試系統(tǒng)的用處，希望通過系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.3.2部門管理功能模塊詳細(xì)設(shè)計

通過需求分析和概要設(shè)計對各子功能進(jìn)行分析與設(shè)計，得到與部門管理子

功能模塊靜態(tài)結(jié)構(gòu)類圖，如圖4-3所示。

圖4-3部門管理系統(tǒng)的類圖

25

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

針對類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-3所示。

表4-3部門管理子功能模塊相關(guān)類及方法描述表

類名超級管理員

描述超級管理員類

屬性id，name，description，createtime

方法添加部門（），修改部門（），刪除部門（）...

類名部門管理

描述超級管理員對部門進(jìn)行管理

屬性id,name,sort,masterid,createtime

方法

4.4角色管理子功能模塊設(shè)計

4.4.1角色管理子功能模塊說明

與用戶進(jìn)行溝通，了解在線考的系統(tǒng)的問題，希望通過系統(tǒng)設(shè)計實(shí)現(xiàn)并開展

在線考試系統(tǒng)的用處，希望通過系統(tǒng)設(shè)作流的處理現(xiàn)給用戶。

4.4.2角色管理功能模塊詳細(xì)設(shè)計

通過需求分析和概要設(shè)計對各子功能進(jìn)行分析與設(shè)計，得到與角色管理子

功能模塊靜態(tài)結(jié)構(gòu)類圖，如圖4-4所示。

26

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖4-4角色管理系統(tǒng)的類圖

針對類圖進(jìn)行進(jìn)一步細(xì)化分析，得到該子功能模塊相關(guān)類及方法描述表，

如下表4-4所示。

表4-4角色管理子功能模塊相關(guān)類及方法描述表

類名超級管理員

描述超級管理員類

屬性id，name，description，createtime

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

類名角色管理

描述超級管理員對角色的管理

屬性id,name,description,createtime

方法

5系統(tǒng)實(shí)現(xiàn)

5.1科目管理子模塊實(shí)現(xiàn)

5.1.1科目管理模塊界面設(shè)計

試題界面，如圖5-1所示：該界面主要是企業(yè)員工對試題的編輯。

添加：企業(yè)員工可以在添加中加入新的試題給用戶進(jìn)行考試。

所有試題：企業(yè)員工已添加的所有試題。

27

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖5-1科目管理界面

5.1.2科目管理模塊核心代碼實(shí)現(xiàn)：

步驟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="創(chuàng)建時間">

</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

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

.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試題管理子模塊實(shí)現(xiàn)

5.2.1試題管理模塊界面設(shè)計

試題界面，如圖5-2所示：該界面主要是企業(yè)員工對試題的編輯。

添加：企業(yè)員工可以在添加中加入新的試題給用戶進(jìn)行考試。

所有試題：企業(yè)員工已添加的所有試題。

29

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

圖5-2試題管理界面

5.2.2試題管理模塊核心代碼實(shí)現(xiàn)：

步驟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="創(chuàng)建時間">

</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

湖南商務(wù)職業(yè)技術(shù)學(xué)院畢業(yè)設(shè)計

</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:'操作成功'