摘" 要：信息化教學(xué)已是當(dāng)代高校教學(xué)中的主要形式，各科的大多數(shù)作業(yè)也已電子化，作業(yè)管理是教學(xué)中的重要內(nèi)容。針對(duì)信息化作業(yè)管理的功能和特點(diǎn)，文章研究設(shè)計(jì)和實(shí)現(xiàn)了作業(yè)管理系統(tǒng)。系統(tǒng)基于Vue.js和Node.js設(shè)計(jì)，充分利用了前后端分離開發(fā)設(shè)計(jì)的優(yōu)勢，提升了頁面性能和用戶體驗(yàn)，減少了前后端耦合度，既利于前后端開發(fā)，也提高了系統(tǒng)性能。作業(yè)管理系統(tǒng)的實(shí)現(xiàn)，切實(shí)提高了教學(xué)工作的效率。

關(guān)鍵詞：信息化；Vue；前后端分離開發(fā)

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2024）22-0102-05

Design and Implementation of Homework Management System Based on Vue and Node.js

Abstract： Information teaching has become a main teaching form in colleges and universities， and most of homework in various subjects is also in electronic form. The homework management is an important part of teaching. Aiming at the function and characteristics of information homework management， this paper researches， designs and implements the homework management system. Based on the design of Vue.js frame and Node.js technology， it takes full advantage of the front-end and back-end separation development and design， improves the webpage performance and user experience， and reduces the coupling degree of front-end and back-end. It not only facilitates the development， but also improves the system performance. The implementation of homework management system improves the efficiency of teaching work practically.

Keywords： information; Vue; front-end and back-end separation development

0" 引" 言

計(jì)算機(jī)應(yīng)用技術(shù)迅猛發(fā)展，深入了我們身邊的每個(gè)角落。在現(xiàn)代化職業(yè)院校的教學(xué)中，信息化更是得到了深入應(yīng)用。同時(shí)，隨著信息化的教學(xué)與無紙化辦公的推進(jìn)，目前，除了一些傳統(tǒng)的、特別科目外，大部分課程都采用了電子作業(yè)的形式。因此，我們較多的是在校園內(nèi)部架設(shè)FTP服務(wù)器，供教學(xué)資源共享和作業(yè)存放，在校園內(nèi)部網(wǎng)絡(luò)應(yīng)用實(shí)現(xiàn)了極高的性價(jià)比。但該種部署方式也有缺點(diǎn)，無論教師或?qū)W生，在校外對(duì)該作業(yè)FTP的應(yīng)用明顯受限，其次，教師批改作業(yè)也有成績反饋延遲的問題。結(jié)合這些現(xiàn)狀，本文采取Vue.js框架、Node.js框架和MySQL數(shù)據(jù)庫技術(shù)，設(shè)計(jì)實(shí)現(xiàn)了職校學(xué)生作業(yè)管理系統(tǒng)，為教學(xué)帶來便利。

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

作業(yè)管理系統(tǒng)，主要實(shí)現(xiàn)作業(yè)的發(fā)布、批改和成績查看功能。系統(tǒng)需要依據(jù)用戶角色進(jìn)行分別處理，開放不同的資源。該系統(tǒng)主要用戶角色分為管理員、教師、學(xué)生三大角色，各自具有不同的權(quán)限和需求：

1）管理員用戶模塊，需要具備錄入課程管理和對(duì)課程設(shè)置相應(yīng)教師的管理功能，具有該系統(tǒng)所有最高級(jí)的權(quán)限。

2）教師用戶模塊，每個(gè)教師可能擔(dān)任多門課程，因此在系統(tǒng)進(jìn)行管理作業(yè)之前，需要對(duì)課程進(jìn)行選擇，具有作業(yè)管理功能和成績批改功能。

3）學(xué)生用戶模塊，學(xué)生也需要對(duì)課程選擇后，方可提交作業(yè)和查看作業(yè)批改成績。

基于以上需求，系統(tǒng)功能圖大致如圖1所示。

2" 系統(tǒng)框架設(shè)計(jì)

2.1" 系統(tǒng)總體框架設(shè)計(jì)

傳統(tǒng)的設(shè)計(jì)開發(fā)，是集合主要將數(shù)據(jù)處理交由后臺(tái)來處理的，主要是重后臺(tái)。近年來，前端分離設(shè)計(jì)的提出，為后臺(tái)處理減少了很多不必要的負(fù)擔(dān)。漸漸成為主流設(shè)計(jì)思路。

本系統(tǒng)的總體框架，也采取了前后端分離的設(shè)計(jì)思想，將用戶的瀏覽和頁面跳轉(zhuǎn)、搜索等一些無須后臺(tái)管理程序參與的功能交由前端設(shè)計(jì)，后臺(tái)則側(cè)重對(duì)數(shù)據(jù)的處理。這樣，前端后端分離，既有利于團(tuán)隊(duì)各自分工，也對(duì)后續(xù)的系統(tǒng)優(yōu)化或修改，盡可能的減少耦合。

本設(shè)計(jì)的具體系統(tǒng)框架設(shè)計(jì)如圖2所示。

2.2" 前端框架設(shè)計(jì)

當(dāng)前主流的前端框架主要有：Angular、React和Vue。其中，Vue是一個(gè)漸進(jìn)式的、輕量級(jí)的MVVM框架[1]，且Vue的默認(rèn)API是以使用簡易為目標(biāo)的，使用方便。

結(jié)合前端框架的這些特點(diǎn)，以及我們系統(tǒng)的設(shè)計(jì)需求不需要對(duì)接大型復(fù)雜的數(shù)據(jù)應(yīng)用，它的應(yīng)用環(huán)境主要是面對(duì)我們校園內(nèi)部人員使用，我們選定Vue.js作為我們系統(tǒng)的設(shè)計(jì)實(shí)現(xiàn)框架。響應(yīng)式數(shù)據(jù)是Vue中MVVM模式的實(shí)現(xiàn)，也就是ViewModel，它可以對(duì)應(yīng)多個(gè)視圖，具有可重用性[2]，提高了數(shù)據(jù)的綁定使用效率；同時(shí)，在本系統(tǒng)設(shè)計(jì)中，它的虛擬DOM渲染設(shè)計(jì)，減少了對(duì)真實(shí)DOM的頻繁操作，提升了頁面渲染效率。

2.3" 后端框架設(shè)計(jì)

Node.js平臺(tái)是在后端運(yùn)行JavaScript代碼。因此，在確定了前端框架之后，我們選擇了一樣基于JavaScript技術(shù)的Node.js框架來設(shè)計(jì)我們的后端。Node.js的主要作用是向前端提供接口，創(chuàng)建路由表，根據(jù)不同業(yè)務(wù)功能實(shí)現(xiàn)路由分發(fā)和操作數(shù)據(jù)庫[3]。而Express是基于Node.js平臺(tái)，快速、開放、極簡的常見Web框架，提供了一系列強(qiáng)大特性幫助創(chuàng)建各種Web應(yīng)用，和豐富的HTTP工具。使用Express可以快速地搭建一個(gè)完整功能的網(wǎng)站。同時(shí)，它是一個(gè)第三方模塊，它是一個(gè)保持最小規(guī)模的靈活的應(yīng)用程序開發(fā)框架[4]。對(duì)于設(shè)計(jì)人員的前后臺(tái)，可以起到更好的連接，其次是Express框架也可以應(yīng)用在我們的服務(wù)器環(huán)境之下并提供我們系統(tǒng)所需的數(shù)據(jù)庫連接、前后端連接等方面的功能。

在數(shù)據(jù)庫選擇上，市面上的數(shù)據(jù)庫主流有SQL、MySQL。MySQL是開放源代碼的數(shù)據(jù)庫管理系統(tǒng)，是完全網(wǎng)絡(luò)化、跨平臺(tái)的關(guān)系型數(shù)據(jù)庫系統(tǒng)，是一種完全免費(fèi)的產(chǎn)品[5]?；趦蓚€(gè)數(shù)據(jù)庫的優(yōu)缺點(diǎn)，我們選定了MySQL作為服務(wù)器支撐數(shù)據(jù)庫，它具有靈活、輕便的功能，和Node.js連接技術(shù)也已經(jīng)成熟。

3" 設(shè)計(jì)與實(shí)現(xiàn)

3.1" 前端框架Vue的設(shè)計(jì)與實(shí)現(xiàn)

前端設(shè)計(jì)是本設(shè)計(jì)的主要側(cè)重點(diǎn)。為了優(yōu)化前端設(shè)計(jì)，在前端框架設(shè)計(jì)中，我們主要實(shí)現(xiàn)了以下技術(shù)處理。

3.1.1" 采用單頁SPA技術(shù)

傳統(tǒng)的前端頁面，一旦頁面有數(shù)據(jù)刷新或者點(diǎn)開頁面某一個(gè)選項(xiàng)卡展示新內(nèi)容，都需要重新加載整個(gè)頁面，而頁面上很多元素其實(shí)并沒有更新也需要一起被重新加載，這就造成了資源浪費(fèi)，同時(shí)，頁面加載也帶來了時(shí)間消耗。Vue.js框架采取了單頁面SPA技術(shù)大大改善了上述問題。本系統(tǒng)中，我們采用了組件技術(shù)來實(shí)現(xiàn)SPA。組件是Vue.js最強(qiáng)大的功能之一，它將復(fù)雜業(yè)務(wù)進(jìn)行拆分，分成一個(gè)個(gè)組件[6]。同時(shí)，加上Vue采用了虛擬DOM技術(shù)渲染頁面，不會(huì)頻繁操作真實(shí)DOM，提高了開發(fā)效率[7]。本系統(tǒng)就是將頁面上一些不需要被頻繁更新的元素，比如個(gè)人信息元素、頁面選項(xiàng)卡等元素，以組件形式設(shè)計(jì)，以CSS格式為其固定好頁面位置，當(dāng)頁面產(chǎn)生部分內(nèi)容跳轉(zhuǎn)和刷新，這些組件不需要被更新替換，既節(jié)約了內(nèi)存空間，也減少了頁面加載量，大大提高了頁面的刷新效率，節(jié)省了用戶等待時(shí)間。

在本設(shè)計(jì)中，依據(jù)上述功能圖，主要設(shè)計(jì)了以下的主頁組件，它們將成為實(shí)現(xiàn)SPA和前端路由的基石：

組件Header.vue，該組件主要用于對(duì)登錄用戶的處理，同時(shí)將用戶角色存入本地存儲(chǔ)中，本地存儲(chǔ)有兩個(gè)格式：localstorage和sessionStorage，本設(shè)計(jì)簡單采取了sessionStorage來保存。

角色功能組件是UserPanel.vue，該組件依據(jù)用戶角色，決定加載對(duì)應(yīng)組件，比如教師組件。組件Teacher.vue，主要包含課程選項(xiàng)、作業(yè)布置下載、成績管理等功能；組件Student.vue，主要包含課程選項(xiàng)、作業(yè)下載提交、成績查看等功能。

組件Course.vue包含該用戶角色下的具體的課程；組件Homework.vue實(shí)現(xiàn)了在某門課程之下，包含的作業(yè)列表。主要組件列表如圖3所示。

3.1.2" 前端路由優(yōu)化

Vue通過前端路由設(shè)置來實(shí)現(xiàn)組件定向。需要對(duì)視圖模塊進(jìn)行規(guī)劃，實(shí)現(xiàn)對(duì)SPA頁面加載支持。本系統(tǒng)的主要頁面設(shè)計(jì)如圖4所示。

為了實(shí)現(xiàn)在路由跳轉(zhuǎn)時(shí)，對(duì)用戶信息模塊和功能選項(xiàng)模塊的組件保持不更新，我們確定了用戶信息模塊和功能選項(xiàng)模塊，采用組件形式在頂層視圖展示，而各功能顯示圖模塊隨著URL改變，也即是各選項(xiàng)卡選項(xiàng)變動(dòng)，來動(dòng)態(tài)更新視圖。因此，需要使用了嵌套路由來實(shí)現(xiàn)該效果。頂級(jí)的視圖lt;router-view gt;放置于app.vue中，對(duì)功能顯示圖，主要是對(duì)應(yīng)在功能選項(xiàng)模塊中各操作的相應(yīng)模塊，因此在home.vue中嵌入了二層視圖。嵌套路由實(shí)現(xiàn)如下：

{" path：'/'，

component：Home，

children：[ {

path：'hw'，

component：Homework

} ]

}

在頁面進(jìn)行路由跳轉(zhuǎn)的時(shí)候，由于涉及了用戶權(quán)限問題，系統(tǒng)使用了鉤子函數(shù)中每次路由跳轉(zhuǎn)前的鉤子函數(shù)，對(duì)頁面跳轉(zhuǎn)前進(jìn)行判斷，檢測該路由是否需要登錄權(quán)限，優(yōu)化的多次往返數(shù)據(jù)庫的開銷。主要實(shí)現(xiàn)語句如下：

router.beforeEach（（to，from，next） =gt; {

//to，from，next對(duì)象分別存入著URL路徑的參數(shù)

if （to.path === '/login'） return next（）

const tokenStr = window.sessionStorage.getItem（'token'）

if （！tokenStr） return next（'/login'）

next（）

}）

此外，針對(duì)組件在加載過程中，需要對(duì)資源導(dǎo)入等方面存在的消耗問題，系統(tǒng)中執(zhí)行了路由護(hù)航和動(dòng)態(tài)導(dǎo)入，從而優(yōu)化了加載。比如以下實(shí)現(xiàn)的課程頁面動(dòng)態(tài)加載，主要實(shí)現(xiàn)過程如下：當(dāng)前端路由路徑轉(zhuǎn)換到該元素時(shí)，不是在加載該頁面時(shí)，直接就對(duì)元素執(zhí)行導(dǎo)入操作，而是依據(jù)需求情況，在需要時(shí)才導(dǎo)入課程頁面執(zhí)行語句：（） =gt; import （ '../components/UserLogin.vue ' ）。執(zhí)行效果是在首頁進(jìn)入的時(shí)候，由于頁面無須緩存用戶登錄頁面UserLogin.vue，故此，不提前加載，減少頁面必需的緩存量，可以大大提高頁面的渲染時(shí)間，這也是前端開發(fā)的優(yōu)勢。類似的加載還有比如作業(yè)頁面Homework.vue等。

數(shù)據(jù)批量導(dǎo)入和提交采用了JSON格式。JSON是隨Ajax誕生的一種輕量級(jí)的數(shù)據(jù)格式是JavaScript的一個(gè)子集[8]，能被我們的環(huán)境無縫接入和解析，適合存儲(chǔ)本系統(tǒng)每次導(dǎo)入的數(shù)據(jù)。

3.2" 后端Express框架的實(shí)現(xiàn)

前后端分離之后，后端開發(fā)主要以提供接口為主[9]。在全局安裝好Express框架之后，在服務(wù)器目錄下選擇需要建立連接的項(xiàng)目文件夾，使用簡單命令“npx express-generator”即可構(gòu)建Web框架，例如，在本地開發(fā)測試時(shí)，構(gòu)建完畢后，其默認(rèn)后端開放訪問端口為3000，我們可以通過瀏覽器訪問到，示例如圖5所示。

后端服務(wù)器構(gòu)建之后，我們還需在系統(tǒng)中采用Axios完成連接。Axios作為一個(gè)封裝了的Ajax，其優(yōu)點(diǎn)時(shí)能夠?qū)惒秸?qǐng)求同步化，從而化簡了請(qǐng)求機(jī)制，且數(shù)據(jù)持久化，用戶體驗(yàn)良好[10]。需要在Vue中，先裝載axios，在引入Vue中，并對(duì)其跨域問題進(jìn)行處理。

在Vue項(xiàng)目中的main.js設(shè)置實(shí)現(xiàn)如下：

import axios from 'axios'

axios.defaults.baseURL = 'http：//localhost：3000/'

//這里的URL在構(gòu)建的時(shí)候是放在本地服務(wù)器上

Vue.prototype.$axios = axios

此后，便可以在Vue前端中，使用對(duì)象this.$axios和后端進(jìn)行通信，對(duì)于通信對(duì)象，發(fā)出的請(qǐng)求將打包在request對(duì)象，而后端返回的數(shù)據(jù)打包在response對(duì)象返回。

瀏覽器有一個(gè)安全機(jī)制，就是一個(gè)頁面，它一般不允許請(qǐng)求跟它不在同一個(gè)域的接口，同一個(gè)域就是協(xié)議，主機(jī)，端口號(hào)都相同，否則就是跨域接口。對(duì)此，我們需要對(duì)跨域進(jìn)行處理。在本地進(jìn)行開發(fā)，需要對(duì)前端項(xiàng)目文件下其vue.config.js文件設(shè)置如下：

devServer：{

proxy：{

'/api'：{" // /api是后臺(tái)數(shù)據(jù)接口的上下文路徑

target：'http：//localhost：3000/'， //這里的地址是后端數(shù)據(jù)接口的地址

changOrigin：true，" //允許跨域

}" } " }

對(duì)后端的入口文件app.js文件設(shè)置跨域如下：

app.all（'*'，（req，res，next）=gt;{ //設(shè)置允許跨域的域名，*代表允許任意域名跨域

res.header（\"Access-Control-Allow-Origin\"，\"*\"）;

res.header（\"Access_Control-Allow_Headers\"，\"X-Requested-With\"）; //允許的header類型

res.header（\"Access-Control-Allow-Methods\"，\"PUT，POST，GET，DELETE，OPTIONS\"）; //跨域允許的請(qǐng)求方式

res.header（\"X-Powered-By\"，'3.2.1'）;

res.header（\"Content-Type\"，\"application/json;charset=utf-8\"）;

next（）;}）;

3.3" MySQL數(shù)據(jù)庫的實(shí)現(xiàn)

數(shù)據(jù)庫主要是實(shí)現(xiàn)成績的存儲(chǔ)管理，主要涉及的表如下：

teacher（tid，tname，tdep）

student（sid，sname，sdep，grand）

dept（did，dname）

course（cid，cname，cteaher）

homeword（hid，hname，haddr，cname，score）

本系統(tǒng)的作業(yè)，采取FTP形式提供文件上傳下載，對(duì)成績，則形成數(shù)據(jù)存放在數(shù)據(jù)庫中保存。為了便于后續(xù)管理或下載等處理，將考慮設(shè)計(jì)可以將各門成績形成Excel表格形式存放。

圖6是運(yùn)行某作業(yè)頁面，圖7是后端運(yùn)行提供用戶接口測試和數(shù)據(jù)返回接口部分效果。

4" 結(jié)" 論

本系統(tǒng)采用了前后端分離設(shè)計(jì)實(shí)現(xiàn)的方式，優(yōu)化了前端用戶體驗(yàn)，便捷了后臺(tái)管理，為線上線下混合

式課堂教學(xué)提供了一個(gè)實(shí)現(xiàn)方式，有效提高了教學(xué)的靈活度和教學(xué)問題的實(shí)時(shí)反饋，實(shí)用性強(qiáng)。基于對(duì)用戶體驗(yàn)的優(yōu)化方面，我們將在后續(xù)的工作中，繼續(xù)針對(duì)優(yōu)化界面引入ELMENT-UI設(shè)計(jì)、增加Excel或圖形可視化效果等多樣式成績呈現(xiàn)方面、

數(shù)據(jù)庫性能進(jìn)一步優(yōu)化設(shè)計(jì)方面進(jìn)行改進(jìn)。

參考文獻(xiàn)：

[1] 孫鑫.Vue.js從入門到實(shí)戰(zhàn) [M].北京：中國水利水電出版社，2020：5-7.

[2] 施璇.基于Vue.js的可編程視頻平臺(tái)的設(shè)計(jì)和實(shí)現(xiàn) [D].武漢：華中科技大學(xué)，2020.

[3] 劉競澤.媒體數(shù)據(jù)審驗(yàn)平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn) [D].濟(jì)南：山東大學(xué)，2022.

[4] 李娟.基于Vue+Node的高職院校學(xué)生成績管理系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn) [J].現(xiàn)代信息科技，2023，7（9）：115-117.

[5] 黑馬程序員.MYSQL數(shù)據(jù)庫入門：第2版 [M].北京：清華大學(xué)出版社，2022：10-13.

[6] 王伊，王韶紅，劉晉澤，等.Vue.js與Django組合框架的網(wǎng)絡(luò)社交系統(tǒng)單頁面架構(gòu)方案設(shè)計(jì) [J].信息技術(shù)與信息化，2020，（1）：121-123.

[7] 林晨，鄧錄，董璐.基于SVG和Vue的數(shù)據(jù)過程可視化設(shè)計(jì) [J].計(jì)算機(jī)系統(tǒng)應(yīng)用，2022，31（4）：130-136.

[8] 未來科技.JavaScript從入門到精通（標(biāo)準(zhǔn)版） [M].北京：中國水電水利出版社，2017：531.

[9] 田鑫雨.基于Vue框架的計(jì)算機(jī)教學(xué)預(yù)約系統(tǒng) [D].西安：西安電子科技大學(xué)，2022.

[10] 肖文娟，王加勝.基于Vue和Spring Boot的校園記錄管理Web App的設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)應(yīng)用與軟件，2020，37（4）：25-30+88.