基于Go和Vue.js的體育選課系統的設計與實現

徐健

摘要：為了幫助學校解決學生體育選課的問題，為教務管理者設計了一個體育選課系統。該系統采用B/S架構、Golang技術及Node.js+Vue.js+ElementUI及MySQL設計體育選課相應功能。經過調試，系統功能均能實現，并有效地提高了教務管理效率。

關鍵詞：Go;Vue.js;體育選課系統

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

文章編號：1009-3044（2022）08-0049-03

1 引言

本文通過Go和Vue框架開發的體育選課系統，實現了中職學校對學生體育課程選擇的精準管理。

2 相關技術

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

2.1 語言

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

2.2 框架

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

Vue.js是一個用于構建用戶界面的漸進式框架，與其他大型框架不同，Vue被設計為自下而上逐層應用。VUE核心庫只關注可視化層，使用方便，而且很容易與第三方庫或現有項目集成。

Vue作為目前主流的前端框架常以Node.js為中間層，對數據進行處理和模板控制。架構模式選擇前后端分離，前端負責界面的展示以及邏輯的交互，而Node.js則位于中間層，主要負責數據的處理，對應的后端則負責業務邏輯[3]。

Element UI是一個基于Vue2.0的桌面端組件庫，面向多用戶。它強大的一致性、反饋、效率、可控性能夠使開發人員能夠快速啟動并用簡單的過程完成復雜的UI設計。

2.3 數據庫

MySQL[4]是最流行的關系數據庫管理系統。在Web應用方面，MySQL是最好的關系型數據庫管理系統（Relational Database Management System，RDBMS）應用軟件之一。

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

3 系統設計

3.1 系統功能闡述

本文中體育選課系統的設計目標是實現適合揚州高等職業技術學校相關需求可以通過在系統上方便快捷地進行體育課的選擇，從而可以省去一些煩瑣的步驟，將選課流程在系統上展現出來，提高學生選課的效率，同時也能夠減少教務處原始排課操作所帶來一系列的復雜且煩瑣的事項。

3.2 模塊設計

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

結合學校的相關需求，經分析后將本體育選課系統分為兩個主要模塊。學生選課模塊和系統管理模塊兩部分，系統具體的功能如圖1所示。

1）學生選課模塊

該模塊是本體育選課系統中最核心的模塊，它承擔著系統中最為核心的功能——體育課程的選擇功能的實現。該模塊的主要功能有查看個人信息、體育課程的選擇、體育課程的介紹、已選體育課程的查看等。學生選課模塊的功能如圖2所示。

個人信息查看：在數據庫中有的學生可以通過姓名、學號進行登錄，在登錄后學生可以進行個人信息的查看，并對個人信息進行完善及修改。

體育課程介紹：在本系統中，對學校所開設的體育課程項目進行展示，學生通過對課程的介紹可以初步了解課程的內容以及考核方式，便于學生在選擇的時候可以準確判斷自己想選的課程。

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

成績查看：學生可以在學期中或學期末查看自己的分數及評價。

2）系統管理模塊

在該模塊中，教師與管理員可通過工號和密碼登錄，以管理員身份登錄后，可對本體育選課系統進行管理。主要的功能有班級管理、成績管理、課程設置管理、課程信息圖表化導出等功能。本模塊的具體功能如圖3所示。

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

成績管理：教師或管理員可以按照學生的日常表現隨時增加學生的平時成績，如若發現成績添加有誤還可以隨時修改。

課程設置管理：教師或管理員可以設置課程的課程安排，如課程節次安排、調課等操作。

課程信息圖表化導出：可將學生的期末成績以及日常考核等得分情況以圖表的形式導出，便于教師對于課程學習情況的分析。

3.3 系統數據流向

揚州高等職業技術學校體育選課系統的設計，是經過對大量學生體育選課需求的詳細調研以及對本校學生信息與體育項目的具體分析的基礎上進行設計的，其數據流向主要有學生的個人信息和學生選課的信息，其數據流向如圖4所示。

4 系統的功能實現

4.1 數據庫設計

從教務需求入手，體育選課系統應該由教師類、學生類、課程類及用戶管理類多個實體類組成，各個類之間存在著相互聯系，通過數據表主鍵產生相應的數據流動。結合上述系統的功能的需求分析，以及各個模塊的功能為輔，在體育選課系統中，設置了學生信息表、教師表、課程信息表等數據表。

以學生信息表為例，學生選課信息的存儲與查看通過Navicat管理數據庫完成，根據各個功能模塊的需求，本系統主要使用一張學生信息表即user表對學生選課數據匯總，如表1所示。這樣通過表的設計，將學生的個人數據明確地排列在表中，再根據需求的不同，分別進行分配，然后進行調用，比如學號中的數字構成包括了學生所在年級、系部、專業等信息。

4.2 后臺設計

1）學生登錄的實現

本系統主要針對揚州高等職業技術學校的學生進行體育課的選課，所以對于用戶登錄有限制，只有在學生庫的學生方可以進行系統登錄并使用，不支持校外人員進行登錄。

學生輸入對應網址進入登錄頁面，輸入姓名和學號進行登錄，系統在后臺數據庫進行檢索，看是否該生在學生庫中，如果在，就登錄成功;反之，則登錄失敗。

學生的選課過程實際就是與頁面的交互過程，這里的頁面是對前端和后端的統稱，用戶登錄系統時，先給用戶一個前端頁面 A，用戶操作后由通過Api請求發送給服務器，服務器接受后將請求發送給后端程序B接收，B將處理的結束反饋給前端，前端接受結果后，以前端頁面C 的形式呈現給用戶，整個過程就是前端A→后端 B→前端C的形式。

各個功能模塊，前端后端關系如圖5所示，為程序員開發提供了參照，更方便程序員完成設計，實現各個模塊的代碼。

2）數據庫連接技術

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

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（"連接數據庫失敗，請檢查參數："， err）}

db.AutoMigrate（&User{}）

// SetMaxIdleCons函數是設置連接池中的最大閑置連接數。

db.DB（）.SetMaxIdleConns（10）

// SetMaxOpenCons函數是設置數據庫的最多連接數。

db.DB（）.SetMaxOpenConns（100）

// SetConnMaxLifetiment函數是設置連接數據庫超時時間。

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

3）管理員相關功能實現

當有新的體育老師需要加入教師團隊時候，先進入管理員管理界面，點擊添加教師按鈕，將新教師進行系統的錄入。此外，在日常的教學過程中，調課的需要時常出現，在教師管理界面選擇調課，對所教班級空閑時間進行篩選，并選擇調課的時間，選擇完畢后給學生發布調課通知。

每個學期的體育項目開設并不完全相同，所以常常需要管理員進行課程信息的修改，對于不是當前學期所開設的課程，將其從候選列表中刪除，并添加符合開設要求的課程。

4.3 前臺設計與前后臺系統的交互

系統前后臺通過HTTP通信進行數據交互。在輸入對應網址后進入揚州高職校選課系統登錄界面后，學生輸入姓名與學號，前端會通過HTTP-POST協議往后臺發送登錄信息，后端將從前端獲取到的數據與數據庫中的數據比對，若匹配成功則跳轉到選課界面，若失敗則返回登錄頁面，登錄界面如圖6所示。

登錄成功后會跳轉至選課頁面，系統通過HTTP-GET協議獲取到學生的姓名，學號，專業，系部，班級和選課的情況，若已選課將會顯示已選擇的課程，若未選課則會向后端請求可選的課程并顯示出來。學生只需從選單中選出要學習的課程，系統便會提示確認選擇，并且選擇科目后無法更改，確認后系統會通過POST發包到后臺，后臺比對完成后把選擇的課程寫入數據庫，完成選課操作，選課界面如圖7所示。

5 系統測試

5.1 測試環境

體育選課系統測試環境如表2所示。

5.2 功能測試

完成系統設計調試及編碼后，進行實際數據錄入和系統測試。搭載至學校的內網服務器中進行模擬使用，學生通過手機連接學校無線網絡進行選課測試，系統出現的問題主要在于學生無法提交選課數據。根據程序拋出的錯誤信息，修改Form表單提交方式后，系統正常運行。

6 結束語

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

參考文獻：

[1] 劉艷平.Go語言實現數據庫驅動的方法[J].計算機與現代化，2018（1）：113-115，122.

[2] 裴之蕈，高艷霞.基于Vue和Node.js的手語教學Web平臺的設計與實現[J].電腦與信息技術，2021，29（6）：33-36，86.

[3] 朱曉陽，劉苑如，范仲言.基于Node.js的學習平臺后端系統設計與實現[J].電腦知識與技術，2019，15（13）：116-118.

[4] 王開柱，寧洪偉，李銳.B/S模式的網上選課系統的設計與開發[J].電腦知識與技術，2021，17（23）：75-77.

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

[6] 白云鵬.基于B/S模式在線選課系統的設計與實現[D].長春：吉林大學，2015.

【通聯編輯：謝媛媛】