一種基于vue技術開發的移動選題平臺

陸婷婷

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

關鍵詞：vue;路由;移動開發;選題平臺;接口設計

中圖分類號：TP315? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）26-0069-03

開放科學（資源服務）標識碼（OSID）：

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

1 系統架構設計與模塊分析

1.1 系統架構設計

整個系統使用前端和后端分離的技術，前端和后端各自負責自己的業務。前端使用axios.js作為異步調用工具，訪問API接口獲得數據。前端從后端獲取的數據需要進行加工處理，所以在系統架構設計中增加了node.js作為橋梁，所有從API接口獲取的數據都需要通過node.js進行加工，加工后的數據可直接在前端使用，這樣可以做到層次分明，提高開發效率。如圖1所示。

其中，前端部分由顯示層、互動層和異步數據處理層組成。互動層使用基于vue和vue擴展的相關開發技術實現，顯示層使用sui作為前端UI框架，配合html5、css3和JQuery共同實現，異步處理層使用axios.js異步獲取數據。

后端由兩大部分組成，一部分是管理員用戶使用的后臺管理系統，另一部分是給前端用戶使用的API接口，API接口的風格遵循RestFul API的風格實現。

1.2 業務模塊分析

移動選題平臺涉及學生、指導教師和管理員等角色，結合工作單位多年來的學生選題工作管理流程經驗，歸納出移動選題平臺所需要的功能模塊。

主要模塊的功能如下：

1）系統初始化模塊

管理員負責對平臺數據進行初始化，平臺運行之前必須對數據進行初始化，以方便下一批學生進行選題。

2）數據導入導出模塊

導入的數據主要包含指導論題題目信息、 學生基本信息數據（學號、姓名、班級、所屬系部等）、教師的基本數據（姓名、工號、所屬系部等）、班級和系部基本數據等。選題平臺結束運行后，需要對選題平臺中的選題進行導出操作，導出的信息可以按照學生的專業、所在的班級以及系部等分類進行輸出，輸出的形式使用xls等格式。

3）基本數據維護管理模塊

數據導入后，可以對上述2）所描述的基本數據進行維護管理，此模塊主要實現對基本數據的增加、修改、刪除以及列表等操作。

4）選題管理模塊

指導教師負責對畢業論文題目進行提交，可以根據自己所設題目的需要，修改、刪除或者新增畢業題目，查看本組論文的選題情況等。

5）日志管理模塊

日志管理模塊負責系統日志，平臺中的各個用戶行為都會記錄在日志數據庫中。通過對平臺的日志情況進行詳細分析，可以得出學生對哪些選題興趣，可以分析出學生感興趣的指導老師，并且可以增加安全性等。

6）權限管理

權限管理模塊是平臺中必要的組成部分。平臺的使用者主要包含學生、指導教師、管理員等角色，不同角色的功能需要通過權限管理模塊進行區分。

2 數據庫設計

移動選題平臺包含學生信息表、指導教師表、論文題目表、選題信息表、系部信息表、日志信息表、角色表、權限表、指導數量表等數據表。平臺處理的基本信息主要存儲在學生信息表、指導教師表、系部信息表等數據表中;選題相關的數據表包含選題信息表、論文題目表、指導數量表等;角色表和權限表存儲權限管理相關信息。

下面簡要介紹選題信息表和指導數量表的表結構。選題信息表結構如表1所示。

從表中看出，id為選題編號，設置為自動增長。Xh字段為學號字段，通過該字段可以在學生信息表中查詢學生的信息;tid字段為指導教師的編號，通過該字段能查詢指導教師的相關信息;tmid為學生選擇題的題目id，通過該字段能查詢論文題目的相關信息。

指導數量表的表結構如表2所示。

每個指導教師指導的學生數量有限，使用count字段記錄上限，icount是已經選擇的數量，如果count大于icount，說明該教師已經被學生選完了，后面的學生無法再選擇該教師。

3 模塊設計實現

3.1 前端項目結構設計

前端項目的開發使用VUE-CLI腳手架工具進行開發，使用前端相關技術實現。

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

項目創建好后，需要對項目的目錄結構進行重構，以利于項目的快速開發。在一級目錄中增加api目錄、directive目錄、mock目錄以及lib目錄。異步訪問數據的js源文件都統一放在api目錄中，directive目錄用于存放一些使用vue創建的指令，使用mockjs所創建的mock數據存放在mock目錄，前端開發所需要的其他第三方源文件工具存放在lib目錄。