基于Go和Vue.js的體育選課系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

徐健

摘要：為了幫助學(xué)校解決學(xué)生體育選課的問題，為教務(wù)管理者設(shè)計(jì)了一個(gè)體育選課系統(tǒng)。該系統(tǒng)采用B/S架構(gòu)、Golang技術(shù)及Node.js+Vue.js+ElementUI及MySQL設(shè)計(jì)體育選課相應(yīng)功能。經(jīng)過調(diào)試，系統(tǒng)功能均能實(shí)現(xiàn)，并有效地提高了教務(wù)管理效率。

關(guān)鍵詞：Go;Vue.js;體育選課系統(tǒng)

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

文章編號(hào)：1009-3044（2022）08-0049-03

1 引言

本文通過Go和Vue框架開發(fā)的體育選課系統(tǒng)，實(shí)現(xiàn)了中職學(xué)校對(duì)學(xué)生體育課程選擇的精準(zhǔn)管理。

2 相關(guān)技術(shù)

該系統(tǒng)程序設(shè)計(jì)采用了Go（又稱Golang）語言，前端頁面采用Vue.js框架，數(shù)據(jù)庫使用MySQL，數(shù)據(jù)庫的開發(fā)管理使用Navicat Premium，可快速方便地訪問數(shù)據(jù)庫。版本選擇較穩(wěn)定的Go1.15，Vue2.6及MySQL5.7。

2.1 語言

Go語言[1]是一種靜態(tài)編程語言，具有編譯、并行和垃圾回收等功能，通常被稱為Golang，它的語法與C語言相似，但變量聲明不同，使用對(duì)象組合代替類繼承。Go語言適用于服務(wù)器編程、網(wǎng)絡(luò)編程、內(nèi)存數(shù)據(jù)庫及云平臺(tái)應(yīng)用，尤其適用于Web應(yīng)用、API應(yīng)用及下載應(yīng)用。

2.2 框架

Node.js[2]是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的平臺(tái)。Node.js也是Google服務(wù)器端的事件驅(qū)動(dòng)JavaScript環(huán)境，基于Google的V8引擎執(zhí)行JavaScript的速度快、性能好。Node使用一系列“非阻塞”庫來支持事件循環(huán)。本質(zhì)上，它為文件系統(tǒng)、數(shù)據(jù)庫和其他資源提供接口，向文件系統(tǒng)發(fā)送請(qǐng)求時(shí)，無須等待硬盤（尋址和檢索文件），非阻塞接口在硬盤就緒時(shí)通知Node。該模型以可擴(kuò)展的方式簡化了對(duì)慢速資源的訪問，易于理解。特別是對(duì)于熟悉onClick、onMouseover和其他DOM事件的用戶，更有一種熟悉的感覺。

Vue.js是一個(gè)用于構(gòu)建用戶界面的漸進(jìn)式框架，與其他大型框架不同，Vue被設(shè)計(jì)為自下而上逐層應(yīng)用。VUE核心庫只關(guān)注可視化層，使用方便，而且很容易與第三方庫或現(xiàn)有項(xiàng)目集成。

Vue作為目前主流的前端框架常以Node.js為中間層，對(duì)數(shù)據(jù)進(jìn)行處理和模板控制。架構(gòu)模式選擇前后端分離，前端負(fù)責(zé)界面的展示以及邏輯的交互，而Node.js則位于中間層，主要負(fù)責(zé)數(shù)據(jù)的處理，對(duì)應(yīng)的后端則負(fù)責(zé)業(yè)務(wù)邏輯[3]。

Element UI是一個(gè)基于Vue2.0的桌面端組件庫，面向多用戶。它強(qiáng)大的一致性、反饋、效率、可控性能夠使開發(fā)人員能夠快速啟動(dòng)并用簡單的過程完成復(fù)雜的UI設(shè)計(jì)。

2.3 數(shù)據(jù)庫

MySQL[4]是最流行的關(guān)系數(shù)據(jù)庫管理系統(tǒng)。在Web應(yīng)用方面，MySQL是最好的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)（Relational Database Management System，RDBMS）應(yīng)用軟件之一。

Navicat[5]是一套多連接數(shù)據(jù)庫開發(fā)工具，旨在滿足數(shù)據(jù)庫管理員、開發(fā)人員和中小型企業(yè)的需求。Navicat具有直觀的圖形用戶界面，允許您以安全、簡單的方式創(chuàng)建、組織、訪問和共享信息。它還可用于管理和開發(fā)本地或遠(yuǎn)程MySQL、PostgreSQL、Oracle、SQLite和SQL Server數(shù)據(jù)庫。

3 系統(tǒng)設(shè)計(jì)

3.1 系統(tǒng)功能闡述

本文中體育選課系統(tǒng)的設(shè)計(jì)目標(biāo)是實(shí)現(xiàn)適合揚(yáng)州高等職業(yè)技術(shù)學(xué)校相關(guān)需求可以通過在系統(tǒng)上方便快捷地進(jìn)行體育課的選擇，從而可以省去一些煩瑣的步驟，將選課流程在系統(tǒng)上展現(xiàn)出來，提高學(xué)生選課的效率，同時(shí)也能夠減少教務(wù)處原始排課操作所帶來一系列的復(fù)雜且煩瑣的事項(xiàng)。

3.2 模塊設(shè)計(jì)

基于Golang、Node.js、Vue.js、ElementUI設(shè)計(jì)的學(xué)生體育選課系統(tǒng)，主要解決人工信息采集過程中存在的信息采集效率低、信息錯(cuò)誤率高、學(xué)生信息更新速度不及時(shí)等問題[6]。切實(shí)提高大量學(xué)生選課的辦理率。該系統(tǒng)的設(shè)計(jì)主要針對(duì)學(xué)生選課、分班的信息處理。

結(jié)合學(xué)校的相關(guān)需求，經(jīng)分析后將本體育選課系統(tǒng)分為兩個(gè)主要模塊。學(xué)生選課模塊和系統(tǒng)管理模塊兩部分，系統(tǒng)具體的功能如圖1所示。

1）學(xué)生選課模塊

該模塊是本體育選課系統(tǒng)中最核心的模塊，它承擔(dān)著系統(tǒng)中最為核心的功能——體育課程的選擇功能的實(shí)現(xiàn)。該模塊的主要功能有查看個(gè)人信息、體育課程的選擇、體育課程的介紹、已選體育課程的查看等。學(xué)生選課模塊的功能如圖2所示。

個(gè)人信息查看：在數(shù)據(jù)庫中有的學(xué)生可以通過姓名、學(xué)號(hào)進(jìn)行登錄，在登錄后學(xué)生可以進(jìn)行個(gè)人信息的查看，并對(duì)個(gè)人信息進(jìn)行完善及修改。

體育課程介紹：在本系統(tǒng)中，對(duì)學(xué)校所開設(shè)的體育課程項(xiàng)目進(jìn)行展示，學(xué)生通過對(duì)課程的介紹可以初步了解課程的內(nèi)容以及考核方式，便于學(xué)生在選擇的時(shí)候可以準(zhǔn)確判斷自己想選的課程。

已選課程查看：學(xué)生體育課選擇完畢之后，可以查看自己已選的課程，并進(jìn)行確定，如學(xué)生想選擇其他的課程，可在此步驟進(jìn)行重新選擇，一旦確定，就無法更改所選課程。

成績查看：學(xué)生可以在學(xué)期中或?qū)W期末查看自己的分?jǐn)?shù)及評(píng)價(jià)。

2）系統(tǒng)管理模塊

在該模塊中，教師與管理員可通過工號(hào)和密碼登錄，以管理員身份登錄后，可對(duì)本體育選課系統(tǒng)進(jìn)行管理。主要的功能有班級(jí)管理、成績管理、課程設(shè)置管理、課程信息圖表化導(dǎo)出等功能。本模塊的具體功能如圖3所示。

班級(jí)管理：教師或管理員可在該模塊中對(duì)班級(jí)進(jìn)行管理，如學(xué)生的添加與刪除。此外，還可以設(shè)置班級(jí)體育課代表，完善班級(jí)的日常管理等操作。

成績管理：教師或管理員可以按照學(xué)生的日常表現(xiàn)隨時(shí)增加學(xué)生的平時(shí)成績，如若發(fā)現(xiàn)成績添加有誤還可以隨時(shí)修改。

課程設(shè)置管理：教師或管理員可以設(shè)置課程的課程安排，如課程節(jié)次安排、調(diào)課等操作。

課程信息圖表化導(dǎo)出：可將學(xué)生的期末成績以及日?？己说鹊梅智闆r以圖表的形式導(dǎo)出，便于教師對(duì)于課程學(xué)習(xí)情況的分析。

3.3 系統(tǒng)數(shù)據(jù)流向

揚(yáng)州高等職業(yè)技術(shù)學(xué)校體育選課系統(tǒng)的設(shè)計(jì)，是經(jīng)過對(duì)大量學(xué)生體育選課需求的詳細(xì)調(diào)研以及對(duì)本校學(xué)生信息與體育項(xiàng)目的具體分析的基礎(chǔ)上進(jìn)行設(shè)計(jì)的，其數(shù)據(jù)流向主要有學(xué)生的個(gè)人信息和學(xué)生選課的信息，其數(shù)據(jù)流向如圖4所示。

4 系統(tǒng)的功能實(shí)現(xiàn)

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

從教務(wù)需求入手，體育選課系統(tǒng)應(yīng)該由教師類、學(xué)生類、課程類及用戶管理類多個(gè)實(shí)體類組成，各個(gè)類之間存在著相互聯(lián)系，通過數(shù)據(jù)表主鍵產(chǎn)生相應(yīng)的數(shù)據(jù)流動(dòng)。結(jié)合上述系統(tǒng)的功能的需求分析，以及各個(gè)模塊的功能為輔，在體育選課系統(tǒng)中，設(shè)置了學(xué)生信息表、教師表、課程信息表等數(shù)據(jù)表。

以學(xué)生信息表為例，學(xué)生選課信息的存儲(chǔ)與查看通過Navicat管理數(shù)據(jù)庫完成，根據(jù)各個(gè)功能模塊的需求，本系統(tǒng)主要使用一張學(xué)生信息表即user表對(duì)學(xué)生選課數(shù)據(jù)匯總，如表1所示。這樣通過表的設(shè)計(jì)，將學(xué)生的個(gè)人數(shù)據(jù)明確地排列在表中，再根據(jù)需求的不同，分別進(jìn)行分配，然后進(jìn)行調(diào)用，比如學(xué)號(hào)中的數(shù)字構(gòu)成包括了學(xué)生所在年級(jí)、系部、專業(yè)等信息。

4.2 后臺(tái)設(shè)計(jì)

1）學(xué)生登錄的實(shí)現(xiàn)

本系統(tǒng)主要針對(duì)揚(yáng)州高等職業(yè)技術(shù)學(xué)校的學(xué)生進(jìn)行體育課的選課，所以對(duì)于用戶登錄有限制，只有在學(xué)生庫的學(xué)生方可以進(jìn)行系統(tǒng)登錄并使用，不支持校外人員進(jìn)行登錄。

學(xué)生輸入對(duì)應(yīng)網(wǎng)址進(jìn)入登錄頁面，輸入姓名和學(xué)號(hào)進(jìn)行登錄，系統(tǒng)在后臺(tái)數(shù)據(jù)庫進(jìn)行檢索，看是否該生在學(xué)生庫中，如果在，就登錄成功;反之，則登錄失敗。

學(xué)生的選課過程實(shí)際就是與頁面的交互過程，這里的頁面是對(duì)前端和后端的統(tǒng)稱，用戶登錄系統(tǒng)時(shí)，先給用戶一個(gè)前端頁面 A，用戶操作后由通過Api請(qǐng)求發(fā)送給服務(wù)器，服務(wù)器接受后將請(qǐng)求發(fā)送給后端程序B接收，B將處理的結(jié)束反饋給前端，前端接受結(jié)果后，以前端頁面C 的形式呈現(xiàn)給用戶，整個(gè)過程就是前端A→后端 B→前端C的形式。

各個(gè)功能模塊，前端后端關(guān)系如圖5所示，為程序員開發(fā)提供了參照，更方便程序員完成設(shè)計(jì)，實(shí)現(xiàn)各個(gè)模塊的代碼。

2）數(shù)據(jù)庫連接技術(shù)

在Go語言中，gorm庫就是一個(gè)功能完善的ORM框架，其支持多種數(shù)據(jù)庫，可以使用多種連接調(diào)用函數(shù)。在操作數(shù)據(jù)庫之前第一步需要連接MySQL服務(wù)器，第二步建立正確的數(shù)據(jù)庫連接，第三步便可以對(duì)數(shù)據(jù)庫進(jìn)行查詢、修改、刪除等等的操作了，本程序的數(shù)據(jù)庫連接，與配置文件如下。

db，err=gorm.Open（Db，fmt.Sprintf（"root：root@（127.0.0.1：3306）/root？Charset=utf8&parseTime=True&loc=Local"））

if err ！= nil {

fmt.Println（"連接數(shù)據(jù)庫失敗，請(qǐng)檢查參數(shù)："， err）}

db.AutoMigrate（&User{}）

// SetMaxIdleCons函數(shù)是設(shè)置連接池中的最大閑置連接數(shù)。

db.DB（）.SetMaxIdleConns（10）

// SetMaxOpenCons函數(shù)是設(shè)置數(shù)據(jù)庫的最多連接數(shù)。

db.DB（）.SetMaxOpenConns（100）

// SetConnMaxLifetiment函數(shù)是設(shè)置連接數(shù)據(jù)庫超時(shí)時(shí)間。

db.DB（）.SetConnMaxLifetime（10* time.Second）

3）管理員相關(guān)功能實(shí)現(xiàn)

當(dāng)有新的體育老師需要加入教師團(tuán)隊(duì)時(shí)候，先進(jìn)入管理員管理界面，點(diǎn)擊添加教師按鈕，將新教師進(jìn)行系統(tǒng)的錄入。此外，在日常的教學(xué)過程中，調(diào)課的需要時(shí)常出現(xiàn)，在教師管理界面選擇調(diào)課，對(duì)所教班級(jí)空閑時(shí)間進(jìn)行篩選，并選擇調(diào)課的時(shí)間，選擇完畢后給學(xué)生發(fā)布調(diào)課通知。

每個(gè)學(xué)期的體育項(xiàng)目開設(shè)并不完全相同，所以常常需要管理員進(jìn)行課程信息的修改，對(duì)于不是當(dāng)前學(xué)期所開設(shè)的課程，將其從候選列表中刪除，并添加符合開設(shè)要求的課程。

4.3 前臺(tái)設(shè)計(jì)與前后臺(tái)系統(tǒng)的交互

系統(tǒng)前后臺(tái)通過HTTP通信進(jìn)行數(shù)據(jù)交互。在輸入對(duì)應(yīng)網(wǎng)址后進(jìn)入揚(yáng)州高職校選課系統(tǒng)登錄界面后，學(xué)生輸入姓名與學(xué)號(hào)，前端會(huì)通過HTTP-POST協(xié)議往后臺(tái)發(fā)送登錄信息，后端將從前端獲取到的數(shù)據(jù)與數(shù)據(jù)庫中的數(shù)據(jù)比對(duì)，若匹配成功則跳轉(zhuǎn)到選課界面，若失敗則返回登錄頁面，登錄界面如圖6所示。

登錄成功后會(huì)跳轉(zhuǎn)至選課頁面，系統(tǒng)通過HTTP-GET協(xié)議獲取到學(xué)生的姓名，學(xué)號(hào)，專業(yè)，系部，班級(jí)和選課的情況，若已選課將會(huì)顯示已選擇的課程，若未選課則會(huì)向后端請(qǐng)求可選的課程并顯示出來。學(xué)生只需從選單中選出要學(xué)習(xí)的課程，系統(tǒng)便會(huì)提示確認(rèn)選擇，并且選擇科目后無法更改，確認(rèn)后系統(tǒng)會(huì)通過POST發(fā)包到后臺(tái)，后臺(tái)比對(duì)完成后把選擇的課程寫入數(shù)據(jù)庫，完成選課操作，選課界面如圖7所示。

5 系統(tǒng)測試

5.1 測試環(huán)境

體育選課系統(tǒng)測試環(huán)境如表2所示。

5.2 功能測試

完成系統(tǒng)設(shè)計(jì)調(diào)試及編碼后，進(jìn)行實(shí)際數(shù)據(jù)錄入和系統(tǒng)測試。搭載至學(xué)校的內(nèi)網(wǎng)服務(wù)器中進(jìn)行模擬使用，學(xué)生通過手機(jī)連接學(xué)校無線網(wǎng)絡(luò)進(jìn)行選課測試，系統(tǒng)出現(xiàn)的問題主要在于學(xué)生無法提交選課數(shù)據(jù)。根據(jù)程序拋出的錯(cuò)誤信息，修改Form表單提交方式后，系統(tǒng)正常運(yùn)行。

6 結(jié)束語

本文討論了采用Go語言及Vue.js設(shè)計(jì)開發(fā)的體育選課系統(tǒng)，給出了學(xué)生體育選課系統(tǒng)的開發(fā)流程及設(shè)計(jì)思路。體育選課系統(tǒng)核心功能完善，并提供了部分核心代碼供開發(fā)者使用，基本滿足了系統(tǒng)開發(fā)的需要。此外，本系統(tǒng)已經(jīng)實(shí)際應(yīng)用于學(xué)校的體育選修，幫助教務(wù)管理者解決了困難，取得了良好的效果。

參考文獻(xiàn)：

[1] 劉艷平.Go語言實(shí)現(xiàn)數(shù)據(jù)庫驅(qū)動(dòng)的方法[J].計(jì)算機(jī)與現(xiàn)代化，2018（1）：113-115，122.

[2] 裴之蕈，高艷霞.基于Vue和Node.js的手語教學(xué)Web平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)[J].電腦與信息技術(shù)，2021，29（6）：33-36，86.

[3] 朱曉陽，劉苑如，范仲言.基于Node.js的學(xué)習(xí)平臺(tái)后端系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)[J].電腦知識(shí)與技術(shù)，2019，15（13）：116-118.

[4] 王開柱，寧洪偉，李銳.B/S模式的網(wǎng)上選課系統(tǒng)的設(shè)計(jì)與開發(fā)[J].電腦知識(shí)與技術(shù)，2021，17（23）：75-77.

[5] 王宇新，劉峰.基于Navicat+Tableau的高校圖書館數(shù)據(jù)可視化應(yīng)用實(shí)踐[J].電子世界，2020（21）：94-95，99.

[6] 白云鵬.基于B/S模式在線選課系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D].長春：吉林大學(xué)，2015.

【通聯(lián)編輯：謝媛媛】