基于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.

【通联编辑：谢媛媛】