基于Vue+Node的高職院校學(xué)生成績管理系統(tǒng)設(shè)計與實(shí)現(xiàn)

摘? 要：為了解決高職院校擴(kuò)招學(xué)生人數(shù)增多導(dǎo)致學(xué)生成績管理難的問題，對學(xué)生成績管理系統(tǒng)進(jìn)行了研究。一套規(guī)范科學(xué)化的成績管理系統(tǒng)可在高職院校的教學(xué)管理和人才培養(yǎng)中發(fā)揮重要的作用，因此分析了設(shè)計開發(fā)學(xué)生成績管理系統(tǒng)的意義。所設(shè)計的系統(tǒng)采用前后端分離的開發(fā)技術(shù)，前端使用Vue作框架，后端服務(wù)器使用Node.js技術(shù)進(jìn)行開發(fā)，實(shí)現(xiàn)了學(xué)生信息管理、成績管理等功能。系統(tǒng)設(shè)計以實(shí)際的學(xué)生成績管理工作為基礎(chǔ)，切實(shí)提高了高校師生的工作效率。

關(guān)鍵詞：前后端分離；Vue；后端服務(wù)器

中圖分類號：TP311? 文獻(xiàn)標(biāo)識碼：A? 文章編號：2096-4706（2023）09-0115-03

Abstract： In order to solve the problem of difficult student performance management caused by the increase in the number of students enrolled in higher vocational colleges， a student performance management system is studied. A set of standardized and scientific performance management system can play an important role in teaching management and talent cultivation in higher vocational colleges. Therefore， the significance of designing and developing a student performance management system is analyzed. The designed system adopts a front-end and back-end separation development technology， with Vue as the front-end framework and Node.js technology is used for back-end server's development， achieving functions such as student information management and score management. The system design is based on actual student performance management work， effectively improving the work efficiency of university teachers and students.

Keywords： front-end and rear-end separation; Vue; back-end server

0? 引? 言

近幾年隨著高等職業(yè)教育快速發(fā)展，以及高職院校的擴(kuò)招，高職在校學(xué)生人數(shù)不斷增多，各專業(yè)班級的學(xué)生數(shù)量也急劇增加，學(xué)生的成績管理工作成為高職院校教學(xué)管理工作的重要組成部分。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，學(xué)生成績管理系統(tǒng)能更加方便地讓教師對學(xué)生的成績進(jìn)行錄入和高效的分析，從而掌握學(xué)生學(xué)習(xí)的情況，及時發(fā)現(xiàn)教學(xué)中存在的問題。學(xué)生也能通過成績管理系統(tǒng)隨時隨地查看自己每學(xué)期的各科課程成績。本文采用Vue框架并結(jié)合Node.js框架來設(shè)計并實(shí)現(xiàn)高職院校學(xué)生成績管理系統(tǒng)，從而提高教職工的工作效率，實(shí)時了解教學(xué)情況。

1? 系統(tǒng)需求分析

1.1? 功能性需求分析

通過分析學(xué)生成績管理系統(tǒng)的用戶及功能需求，對系統(tǒng)的使用者根據(jù)身份進(jìn)行區(qū)分，系統(tǒng)具有3個不同的使用角色：教師、學(xué)生和系統(tǒng)管理員。不同用戶的身份提供不同的功能，擁有不同的管理權(quán)限。系統(tǒng)管理員具有最高的管理權(quán)限，可以對系統(tǒng)所有的數(shù)據(jù)進(jìn)行增加、修改、刪除、查找。教師的權(quán)限是可以查看任教課程的學(xué)生信息，錄入、修改所教課程學(xué)生的成績。學(xué)生可以查看自己的成績和通知信息。

1.2? 非功能性需求

在非功能需求方面，用戶的使用體驗(yàn)是系統(tǒng)的重要指標(biāo)。頁面的美觀和設(shè)計方面如果效果不好，用戶的體驗(yàn)感也會下降。為了使用戶有良好的體驗(yàn)，設(shè)計系統(tǒng)時需要考慮以下非功能性需求：

1）網(wǎng)頁頁面設(shè)計簡潔，主題明確，功能完善，易于用戶操作使用；2）頁面布局風(fēng)格設(shè)計統(tǒng)一，頁面美觀大方；3）在系統(tǒng)功能上做到不煩瑣，能更快提高其響應(yīng)速度，更加人性化；4）數(shù)據(jù)庫結(jié)構(gòu)設(shè)計要簡單，合理的數(shù)據(jù)庫設(shè)計能提高數(shù)據(jù)存儲和檢索的速度，可以保證數(shù)據(jù)的完整性和一致性。

2? 系統(tǒng)總體設(shè)計

2.1? 系統(tǒng)框架設(shè)計

本系統(tǒng)采用前后端分離的Vue+ElementUI+NodeJS+Express+MySQL技術(shù)實(shí)現(xiàn)，基于Web的B/S架構(gòu)設(shè)計完成系統(tǒng)。前端主要使用了目前比較流行的漸進(jìn)式JavaScript框架Vue.js作為前端框架，使用Vue-Router和Vuex實(shí)現(xiàn)動態(tài)路由和全局狀態(tài)管理，用Ajax實(shí)現(xiàn)前后端通信，采用ElementUI組件庫框架來實(shí)現(xiàn)數(shù)據(jù)綁定和頁面渲染以使頁面快速成型，頁面之間的導(dǎo)航使用Vue-Router來實(shí)現(xiàn)前端路由的定義及參數(shù)的傳遞等功能，后端服務(wù)器使用Node.js和MySQL等技術(shù)進(jìn)行開發(fā)。系統(tǒng)總體組織架構(gòu)圖如圖1所示。

教師、學(xué)生和管理員需要使用分配好的賬號和初始密碼登錄系統(tǒng)。教師進(jìn)入系統(tǒng)后可以查看學(xué)校的公告、學(xué)生的信息，以及使用成績管理、作業(yè)批閱、作業(yè)管理等功能模板。

2.2? 系統(tǒng)關(guān)鍵技術(shù)的實(shí)現(xiàn)

2.2.1? Vue的安裝與使用

本項(xiàng)目中使用的Vue CLI的版本是Vue CLI 3.x，安裝Vue全局腳手架的命令是：npm install –g @vue/cli@3.x，安裝完成后執(zhí)行如下命令：vue –V，如果在窗口中顯示出了@vue/cli的版本號信息，則表示全局腳手架安裝成功。

創(chuàng)建項(xiàng)目：在命令行中輸入vue create student，選擇自定義預(yù)設(shè)，進(jìn)行相關(guān)配置創(chuàng)建項(xiàng)目。項(xiàng)目創(chuàng)建完成后，輸入cd student命令進(jìn)入項(xiàng)目目錄和npm run serve命令啟動項(xiàng)目。項(xiàng)目啟動成功后，會默認(rèn)啟動一個本地服務(wù)，在瀏覽器中訪問http：//localhost：8080，并顯示出“歡迎使用Vue.js”的界面效果，表示Vue工程項(xiàng)目啟動成功。創(chuàng)建完成的項(xiàng)目目錄結(jié)構(gòu)如圖2所示。

項(xiàng)目結(jié)構(gòu)中主要文件說明如下：

1）dist：項(xiàng)目打包后的靜態(tài)文件存放目錄；2）node_modules：項(xiàng)目依賴工具包存儲管理目錄；3）public：項(xiàng)目的靜態(tài)文件存儲目錄，也是本地服務(wù)器的根目錄，存放在該文件夾的東西不會被打包影響，而是會原封不動的輸出到dist文件夾中；4）src：項(xiàng)目的源文件存放目錄，保存編寫的項(xiàng)目源碼；5）src＼assets：資源文件目錄，用于存放css文件和圖片文件等；6）src＼components：公共組件存儲目錄；7）src＼App.vue：項(xiàng)目的Vue根組件；8）src＼main.js：項(xiàng)目的入口js文件。

2.2.2? ElementUI的安裝與引用

安裝ElementUI，使用npm的方式安裝，它能更好地和打包工具配合使用。具體為：1）打開Vue腳手架項(xiàng)目student的文件夾，進(jìn)入終端，在命令行中輸入npm i element-ui -s[1]；2）在src文件夾的main.js中引入element-ui，輸入以下命令：import ElementUI from 'element-ui'和import'element-ui/lib/theme-chalk/index.css'，讓Vue引用Element ui：Vue.use（ElementUI）。

2.2.3? 配置路由Vue-router

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成[2]，讓構(gòu)建單頁面應(yīng)用變得簡單，它主要用于管理URL。在項(xiàng)目中使用npm命令給項(xiàng)目安裝Vue-Router路由，在src目錄下建立Router文件夾，將路由文件index.js存放在該目錄下。Vue-Router的安裝命令如下：npm install vue-router –-save[3]。路由安裝完成后，在Router文件夾下創(chuàng)建index.js路由文件，并輸入代碼如下：import Vue from “vue”；import VueRouter from “vue-router”；Vue.use（VueRouter）；const router=new VueRouter（{ }） //創(chuàng)建路由實(shí)例對象router；export default router；//暴露路由對象屬性。

路由文件創(chuàng)建好后，需要在入口文件main.js中引入路由文件，并輸入代碼如下：import router from '../router'；new Vue（{router，render： h => h（App）}）.$mount（'#app'）。

2.2.4? 配置Vuex

Vuex是專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式[4]，使用npm命令為項(xiàng)目安裝Vuex，輸入的命令代碼如下：npm install vuex –save。Vuex安裝成功后，在src目錄下建立store文件夾，將數(shù)據(jù)狀態(tài)存儲文件index.js存放在該目錄下。并在index.js文件中輸入代碼如下：import Vue from 'vue'；import Vuex from 'vuex'；Vue.use（Vuex） export default new Vuex.Store（{ }}）。然后在入口文件main.js中引入數(shù)據(jù)狀態(tài)存儲文件index.js，并輸入代碼如下：import store from '../store'；new Vue（{store，router，render： h => h（App）}）.$mount（'#app'）。

2.2.5? Express框架

Express是Node.js平臺下面的一個框架，主要用于創(chuàng)建Web服務(wù)器項(xiàng)目，它是一個第三方的模塊，是一個保持最小規(guī)模的靈活的Node.js Web應(yīng)用程序開發(fā)框架[5]，為Web和移動應(yīng)用程序提供一組強(qiáng)大的功能。使用npm install express下載Express框架。

2.3? 數(shù)據(jù)庫設(shè)計

2.3.1? 數(shù)據(jù)庫的實(shí)現(xiàn)

要實(shí)現(xiàn)對學(xué)生成績的數(shù)據(jù)存儲和管理，選擇合適的數(shù)據(jù)庫管理系統(tǒng)在整個系統(tǒng)開發(fā)設(shè)計中是比較重要的環(huán)節(jié)。常用的關(guān)系型數(shù)據(jù)庫有Oracle、SqlServer和MySQL等，在Web開發(fā)方面，MySQL是最好的關(guān)系型數(shù)據(jù)庫管理系統(tǒng)應(yīng)用軟件，它主要用來存儲項(xiàng)目中數(shù)據(jù)庫和數(shù)據(jù)表，供后端路由調(diào)用API進(jìn)行數(shù)據(jù)庫操作。因此本系統(tǒng)數(shù)據(jù)庫的設(shè)計采用MySQL數(shù)據(jù)庫進(jìn)行數(shù)據(jù)表設(shè)計與管理，主要涉及的數(shù)據(jù)表包含用戶信息表、課程信息表、學(xué)生信息表、學(xué)生成績表等。學(xué)生成績表和課程信息表設(shè)計如表1和表2所示。

2.3.2? 數(shù)據(jù)庫服務(wù)器連接實(shí)現(xiàn)

本系統(tǒng)采用Node和MySQL來實(shí)現(xiàn)相應(yīng)的數(shù)據(jù)進(jìn)行驅(qū)動連接和操作MySQL數(shù)據(jù)庫，具體定義MySQL連接配置的核心代碼如下：

module.exports={? //Mysq數(shù)據(jù)庫連接配置

host：'localhost'， //指定主機(jī)地址

user：'root'，? ? ? //數(shù)據(jù)庫登錄賬號

password：'root'，? //數(shù)據(jù)庫登錄密碼

port：'3306'，? ? ? ?//設(shè)置端口號

database：'students' //設(shè)置數(shù)據(jù)庫名稱

}

2.4? 關(guān)鍵功能模塊的實(shí)現(xiàn)

2.4.1? 學(xué)生信息管理的實(shí)現(xiàn)

用戶登錄學(xué)生成績管理系統(tǒng)后，可以查看班級學(xué)生的信息，根據(jù)學(xué)生的姓名查詢指定學(xué)生的相關(guān)信息。該功能模塊主要包含了學(xué)生基本信息的展示、姓名的查詢、學(xué)生的刪除等。學(xué)生信息管理界面效果如圖3所示。

2.4.2? 成績管理的實(shí)現(xiàn)

教師或?qū)W生登錄系統(tǒng)后，首先進(jìn)入的是成績管理頁面，它的界面設(shè)計直接影響用戶的體驗(yàn)。頁面實(shí)現(xiàn)主要采用Vue技術(shù)和ElementUI框架來完成各模塊的界面和功能設(shè)計。本功能模塊主要包含學(xué)生成績的展示、成績錄入等。教師可以不受時間和空間的影響，利用互聯(lián)網(wǎng)登錄系統(tǒng)后就可以錄入學(xué)生的成績和管理學(xué)生的信息，極大地提高了教師的工作效率。成績管理界面效果如圖4如示。

3? 結(jié)? 論

本系統(tǒng)利用了前后端分離的開發(fā)技術(shù)，前端使用了Vue.js框架，后端服務(wù)器使用了Node.js技術(shù)。系統(tǒng)實(shí)現(xiàn)了教師和學(xué)生可以更加方便快捷地完成學(xué)生成績的增加、修改和查詢成績等工作，提升了教師管理學(xué)生成績的工作效率和管理水平。

參考文獻(xiàn)：

[1] 王志文.Vue+Elementui+Echarts在項(xiàng)目管理平臺中的應(yīng)用 [J].山西科技，2020，35（6）：45-47.

[2] 王璐，崔保磊，潘紅霞，等.基于Vue.js的在線設(shè)計開放平臺研究與實(shí)現(xiàn) [J].信息技術(shù)與信息化，2019（11）：168-170.

[3] 鄭玉娟，張亞東.基于Vue.js的微商城前端設(shè)計與實(shí)現(xiàn) [J].信息技術(shù)與信息化，2021（11）：101-103.

[4] 呂英華.Vue.js酒店管理系統(tǒng)的設(shè)計與應(yīng)用 [J].電子技術(shù)，2020，49（9）：102-103.

[5] 王伶俐，張傳國.基于NodeJS+Express框架的輕應(yīng)用定制平臺的設(shè)計與實(shí)現(xiàn) [J].計算機(jī)科學(xué)，2017，44（S2）：596-599.

作者簡介：李娟（1985—），女，漢族，四川成都人，講師，本科；研究方向：軟件技術(shù)、計算機(jī)應(yīng)用技術(shù)。