一種基于vue技術(shù)開發(fā)的移動(dòng)選題平臺(tái)

陸婷婷

摘要：為解決傳統(tǒng)的畢業(yè)選題工作存在效率不高、工作煩瑣等問題，開發(fā)完成了一套移動(dòng)選題平臺(tái)。移動(dòng)選題平臺(tái)包含后端管理子系統(tǒng)、后端數(shù)據(jù)接口、前端H5應(yīng)用三部分，采用當(dāng)前流行的軟件開發(fā)技術(shù)實(shí)現(xiàn)，使用vue漸進(jìn)式框架和前后端分離等技術(shù)進(jìn)行開發(fā)，同實(shí)際的高校畢業(yè)論文選題工作成功對(duì)接，功能較為完備，性能較穩(wěn)定。移動(dòng)選題平臺(tái)已經(jīng)正式投入使用，能夠在較短的時(shí)間內(nèi)完成畢業(yè)選題任務(wù)，使畢業(yè)選題工作周期大大縮短，效率明顯提升。

關(guān)鍵詞：vue;路由;移動(dòng)開發(fā);選題平臺(tái);接口設(shè)計(jì)

中圖分類號(hào)：TP315? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2021）26-0069-03

開放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

傳統(tǒng)的畢業(yè)選題工作主要圍繞在線下進(jìn)行，一般至少需要1個(gè)星期才能完成這項(xiàng)工作，效果不是很理想。隨著移動(dòng)互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，迫切地需要一種移動(dòng)選題平臺(tái)來輔助完成畢業(yè)選題工作。當(dāng)前已經(jīng)涌現(xiàn)了很多的畢業(yè)論文選題平臺(tái)，通過閱讀大量的文獻(xiàn)資料發(fā)現(xiàn)，有些平臺(tái)基于PC電腦端開發(fā)，有些平臺(tái)使用的是一些老舊技術(shù)，在性能、功能、用戶體驗(yàn)等方面都有所欠缺[1-4]。本文使用vue漸進(jìn)式框架和前后端分離等技術(shù)[5]，實(shí)現(xiàn)的移動(dòng)選題平臺(tái)經(jīng)嚴(yán)格測(cè)試，在各方面使用效果較為理想。

1 系統(tǒng)架構(gòu)設(shè)計(jì)與模塊分析

1.1 系統(tǒng)架構(gòu)設(shè)計(jì)

整個(gè)系統(tǒng)使用前端和后端分離的技術(shù)，前端和后端各自負(fù)責(zé)自己的業(yè)務(wù)。前端使用axios.js作為異步調(diào)用工具，訪問API接口獲得數(shù)據(jù)。前端從后端獲取的數(shù)據(jù)需要進(jìn)行加工處理，所以在系統(tǒng)架構(gòu)設(shè)計(jì)中增加了node.js作為橋梁，所有從API接口獲取的數(shù)據(jù)都需要通過node.js進(jìn)行加工，加工后的數(shù)據(jù)可直接在前端使用，這樣可以做到層次分明，提高開發(fā)效率。如圖1所示。

其中，前端部分由顯示層、互動(dòng)層和異步數(shù)據(jù)處理層組成。互動(dòng)層使用基于vue和vue擴(kuò)展的相關(guān)開發(fā)技術(shù)實(shí)現(xiàn)，顯示層使用sui作為前端UI框架，配合html5、css3和JQuery共同實(shí)現(xiàn)，異步處理層使用axios.js異步獲取數(shù)據(jù)。

后端由兩大部分組成，一部分是管理員用戶使用的后臺(tái)管理系統(tǒng)，另一部分是給前端用戶使用的API接口，API接口的風(fēng)格遵循RestFul API的風(fēng)格實(shí)現(xiàn)。

1.2 業(yè)務(wù)模塊分析

移動(dòng)選題平臺(tái)涉及學(xué)生、指導(dǎo)教師和管理員等角色，結(jié)合工作單位多年來的學(xué)生選題工作管理流程經(jīng)驗(yàn)，歸納出移動(dòng)選題平臺(tái)所需要的功能模塊。

主要模塊的功能如下：

1）系統(tǒng)初始化模塊

管理員負(fù)責(zé)對(duì)平臺(tái)數(shù)據(jù)進(jìn)行初始化，平臺(tái)運(yùn)行之前必須對(duì)數(shù)據(jù)進(jìn)行初始化，以方便下一批學(xué)生進(jìn)行選題。

2）數(shù)據(jù)導(dǎo)入導(dǎo)出模塊

導(dǎo)入的數(shù)據(jù)主要包含指導(dǎo)論題題目信息、 學(xué)生基本信息數(shù)據(jù)（學(xué)號(hào)、姓名、班級(jí)、所屬系部等）、教師的基本數(shù)據(jù)（姓名、工號(hào)、所屬系部等）、班級(jí)和系部基本數(shù)據(jù)等。選題平臺(tái)結(jié)束運(yùn)行后，需要對(duì)選題平臺(tái)中的選題進(jìn)行導(dǎo)出操作，導(dǎo)出的信息可以按照學(xué)生的專業(yè)、所在的班級(jí)以及系部等分類進(jìn)行輸出，輸出的形式使用xls等格式。

3）基本數(shù)據(jù)維護(hù)管理模塊

數(shù)據(jù)導(dǎo)入后，可以對(duì)上述2）所描述的基本數(shù)據(jù)進(jìn)行維護(hù)管理，此模塊主要實(shí)現(xiàn)對(duì)基本數(shù)據(jù)的增加、修改、刪除以及列表等操作。

4）選題管理模塊

指導(dǎo)教師負(fù)責(zé)對(duì)畢業(yè)論文題目進(jìn)行提交，可以根據(jù)自己所設(shè)題目的需要，修改、刪除或者新增畢業(yè)題目，查看本組論文的選題情況等。

5）日志管理模塊

日志管理模塊負(fù)責(zé)系統(tǒng)日志，平臺(tái)中的各個(gè)用戶行為都會(huì)記錄在日志數(shù)據(jù)庫中。通過對(duì)平臺(tái)的日志情況進(jìn)行詳細(xì)分析，可以得出學(xué)生對(duì)哪些選題興趣，可以分析出學(xué)生感興趣的指導(dǎo)老師，并且可以增加安全性等。

6）權(quán)限管理

權(quán)限管理模塊是平臺(tái)中必要的組成部分。平臺(tái)的使用者主要包含學(xué)生、指導(dǎo)教師、管理員等角色，不同角色的功能需要通過權(quán)限管理模塊進(jìn)行區(qū)分。

2 數(shù)據(jù)庫設(shè)計(jì)

移動(dòng)選題平臺(tái)包含學(xué)生信息表、指導(dǎo)教師表、論文題目表、選題信息表、系部信息表、日志信息表、角色表、權(quán)限表、指導(dǎo)數(shù)量表等數(shù)據(jù)表。平臺(tái)處理的基本信息主要存儲(chǔ)在學(xué)生信息表、指導(dǎo)教師表、系部信息表等數(shù)據(jù)表中;選題相關(guān)的數(shù)據(jù)表包含選題信息表、論文題目表、指導(dǎo)數(shù)量表等;角色表和權(quán)限表存儲(chǔ)權(quán)限管理相關(guān)信息。

下面簡要介紹選題信息表和指導(dǎo)數(shù)量表的表結(jié)構(gòu)。選題信息表結(jié)構(gòu)如表1所示。

從表中看出，id為選題編號(hào)，設(shè)置為自動(dòng)增長。Xh字段為學(xué)號(hào)字段，通過該字段可以在學(xué)生信息表中查詢學(xué)生的信息;tid字段為指導(dǎo)教師的編號(hào)，通過該字段能查詢指導(dǎo)教師的相關(guān)信息;tmid為學(xué)生選擇題的題目id，通過該字段能查詢論文題目的相關(guān)信息。

指導(dǎo)數(shù)量表的表結(jié)構(gòu)如表2所示。

每個(gè)指導(dǎo)教師指導(dǎo)的學(xué)生數(shù)量有限，使用count字段記錄上限，icount是已經(jīng)選擇的數(shù)量，如果count大于icount，說明該教師已經(jīng)被學(xué)生選完了，后面的學(xué)生無法再選擇該教師。

3 模塊設(shè)計(jì)實(shí)現(xiàn)

3.1 前端項(xiàng)目結(jié)構(gòu)設(shè)計(jì)

前端項(xiàng)目的開發(fā)使用VUE-CLI腳手架工具進(jìn)行開發(fā)，使用前端相關(guān)技術(shù)實(shí)現(xiàn)。

在powershell控制臺(tái)下，輸入vue create bysj命令創(chuàng)建本項(xiàng)目（bysj為項(xiàng)目名），技術(shù)模塊選擇安裝babel、router、vuex、linter/formater等，項(xiàng)目需要的其他第三方工具，比如axios.js、mockjs、elementui等，需要在項(xiàng)目中使用npm install命令進(jìn)行安裝。

項(xiàng)目創(chuàng)建好后，需要對(duì)項(xiàng)目的目錄結(jié)構(gòu)進(jìn)行重構(gòu)，以利于項(xiàng)目的快速開發(fā)。在一級(jí)目錄中增加api目錄、directive目錄、mock目錄以及l(fā)ib目錄。異步訪問數(shù)據(jù)的js源文件都統(tǒng)一放在api目錄中，directive目錄用于存放一些使用vue創(chuàng)建的指令，使用mockjs所創(chuàng)建的mock數(shù)據(jù)存放在mock目錄，前端開發(fā)所需要的其他第三方源文件工具存放在lib目錄。