摘" 要：信息化教学已是当代高校教学中的主要形式，各科的大多数作业也已电子化，作业管理是教学中的重要内容。针对信息化作业管理的功能和特点，文章研究设计和实现了作业管理系统。系统基于Vue.js和Node.js设计，充分利用了前后端分离开发设计的优势，提升了页面性能和用户体验，减少了前后端耦合度，既利于前后端开发，也提高了系统性能。作业管理系统的实现，切实提高了教学工作的效率。
关键词：信息化；Vue；前后端分离开发
中图分类号：TP311 文献标识码：A 文章编号：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" 引" 言
计算机应用技术迅猛发展，深入了我们身边的每个角落。在现代化职业院校的教学中，信息化更是得到了深入应用。同时，随着信息化的教学与无纸化办公的推进，目前，除了一些传统的、特别科目外，大部分课程都采用了电子作业的形式。因此，我们较多的是在校园内部架设FTP服务器，供教学资源共享和作业存放，在校园内部网络应用实现了极高的性价比。但该种部署方式也有缺点，无论教师或学生，在校外对该作业FTP的应用明显受限，其次，教师批改作业也有成绩反馈延迟的问题。结合这些现状，本文采取Vue.js框架、Node.js框架和MySQL数据库技术，设计实现了职校学生作业管理系统，为教学带来便利。
1" 系统需求分析
作业管理系统，主要实现作业的发布、批改和成绩查看功能。系统需要依据用户角色进行分别处理，开放不同的资源。该系统主要用户角色分为管理员、教师、学生三大角色，各自具有不同的权限和需求：
1）管理员用户模块，需要具备录入课程管理和对课程设置相应教师的管理功能，具有该系统所有最高级的权限。
2）教师用户模块，每个教师可能担任多门课程，因此在系统进行管理作业之前，需要对课程进行选择，具有作业管理功能和成绩批改功能。
3）学生用户模块，学生也需要对课程选择后，方可提交作业和查看作业批改成绩。
基于以上需求，系统功能图大致如图1所示。
2" 系统框架设计
2.1" 系统总体框架设计
传统的设计开发，是集合主要将数据处理交由后台来处理的，主要是重后台。近年来，前端分离设计的提出，为后台处理减少了很多不必要的负担。渐渐成为主流设计思路。
本系统的总体框架，也采取了前后端分离的设计思想，将用户的浏览和页面跳转、搜索等一些无须后台管理程序参与的功能交由前端设计，后台则侧重对数据的处理。这样，前端后端分离，既有利于团队各自分工，也对后续的系统优化或修改，尽可能的减少耦合。
本设计的具体系统框架设计如图2所示。
2.2" 前端框架设计
当前主流的前端框架主要有：Angular、React和Vue。其中，Vue是一个渐进式的、轻量级的MVVM框架[1]，且Vue的默认API是以使用简易为目标的，使用方便。
结合前端框架的这些特点，以及我们系统的设计需求不需要对接大型复杂的数据应用，它的应用环境主要是面对我们校园内部人员使用，我们选定Vue.js作为我们系统的设计实现框架。响应式数据是Vue中MVVM模式的实现，也就是ViewModel，它可以对应多个视图，具有可重用性[2]，提高了数据的绑定使用效率；同时，在本系统设计中，它的虚拟DOM渲染设计，减少了对真实DOM的频繁操作，提升了页面渲染效率。
2.3" 后端框架设计
Node.js平台是在后端运行JavaScript代码。因此，在确定了前端框架之后，我们选择了一样基于JavaScript技术的Node.js框架来设计我们的后端。Node.js的主要作用是向前端提供接口，创建路由表，根据不同业务功能实现路由分发和操作数据库[3]。而Express是基于Node.js平台，快速、开放、极简的常见Web框架，提供了一系列强大特性帮助创建各种Web应用，和丰富的HTTP工具。使用Express可以快速地搭建一个完整功能的网站。同时，它是一个第三方模块，它是一个保持最小规模的灵活的应用程序开发框架[4]。对于设计人员的前后台，可以起到更好的连接，其次是Express框架也可以应用在我们的服务器环境之下并提供我们系统所需的数据库连接、前后端连接等方面的功能。
在数据库选择上，市面上的数据库主流有SQL、MySQL。MySQL是开放源代码的数据库管理系统，是完全网络化、跨平台的关系型数据库系统，是一种完全免费的产品[5]。基于两个数据库的优缺点，我们选定了MySQL作为服务器支撑数据库，它具有灵活、轻便的功能，和Node.js连接技术也已经成熟。
3" 设计与实现
3.1" 前端框架Vue的设计与实现
前端设计是本设计的主要侧重点。为了优化前端设计，在前端框架设计中，我们主要实现了以下技术处理。
3.1.1" 采用单页SPA技术
传统的前端页面，一旦页面有数据刷新或者点开页面某一个选项卡展示新内容，都需要重新加载整个页面，而页面上很多元素其实并没有更新也需要一起被重新加载，这就造成了资源浪费，同时，页面加载也带来了时间消耗。Vue.js框架采取了单页面SPA技术大大改善了上述问题。本系统中，我们采用了组件技术来实现SPA。组件是Vue.js最强大的功能之一，它将复杂业务进行拆分，分成一个个组件[6]。同时，加上Vue采用了虚拟DOM技术渲染页面，不会频繁操作真实DOM，提高了开发效率[7]。本系统就是将页面上一些不需要被频繁更新的元素，比如个人信息元素、页面选项卡等元素，以组件形式设计，以CSS格式为其固定好页面位置，当页面产生部分内容跳转和刷新，这些组件不需要被更新替换，既节约了内存空间，也减少了页面加载量，大大提高了页面的刷新效率，节省了用户等待时间。
在本设计中，依据上述功能图，主要设计了以下的主页组件，它们将成为实现SPA和前端路由的基石：
组件Header.vue，该组件主要用于对登录用户的处理，同时将用户角色存入本地存储中，本地存储有两个格式：localstorage和sessionStorage，本设计简单采取了sessionStorage来保存。
角色功能组件是UserPanel.vue，该组件依据用户角色，决定加载对应组件，比如教师组件。组件Teacher.vue，主要包含课程选项、作业布置下载、成绩管理等功能；组件Student.vue，主要包含课程选项、作业下载提交、成绩查看等功能。
组件Course.vue包含该用户角色下的具体的课程；组件Homework.vue实现了在某门课程之下，包含的作业列表。主要组件列表如图3所示。
3.1.2" 前端路由优化
Vue通过前端路由设置来实现组件定向。需要对视图模块进行规划，实现对SPA页面加载支持。本系统的主要页面设计如图4所示。
为了实现在路由跳转时，对用户信息模块和功能选项模块的组件保持不更新，我们确定了用户信息模块和功能选项模块，采用组件形式在顶层视图展示，而各功能显示图模块随着URL改变，也即是各选项卡选项变动，来动态更新视图。因此，需要使用了嵌套路由来实现该效果。顶级的视图lt;router-view gt;放置于app.vue中，对功能显示图，主要是对应在功能选项模块中各操作的相应模块，因此在home.vue中嵌入了二层视图。嵌套路由实现如下：
{" path：/，
component：Home，
children：[ {
path：hw，
component：Homework
} ]
}
在页面进行路由跳转的时候，由于涉及了用户权限问题，系统使用了钩子函数中每次路由跳转前的钩子函数，对页面跳转前进行判断，检测该路由是否需要登录权限，优化的多次往返数据库的开销。主要实现语句如下：
router.beforeEach（（to，from，next） =gt; {
//to，from，next对象分别存入着URL路径的参数
if （to.path === /login） return next（）
const tokenStr = window.sessionStorage.getItem（token）
if （！tokenStr） return next（/login）
next（）
}）
此外，针对组件在加载过程中，需要对资源导入等方面存在的消耗问题，系统中执行了路由护航和动态导入，从而优化了加载。比如以下实现的课程页面动态加载，主要实现过程如下：当前端路由路径转换到该元素时，不是在加载该页面时，直接就对元素执行导入操作，而是依据需求情况，在需要时才导入课程页面执行语句：（） =gt; import （ ../components/UserLogin.vue ）。执行效果是在首页进入的时候，由于页面无须缓存用户登录页面UserLogin.vue，故此，不提前加载，减少页面必需的缓存量，可以大大提高页面的渲染时间，这也是前端开发的优势。类似的加载还有比如作业页面Homework.vue等。
数据批量导入和提交采用了JSON格式。JSON是随Ajax诞生的一种轻量级的数据格式是JavaScript的一个子集[8]，能被我们的环境无缝接入和解析，适合存储本系统每次导入的数据。
3.2" 后端Express框架的实现
前后端分离之后，后端开发主要以提供接口为主[9]。在全局安装好Express框架之后，在服务器目录下选择需要建立连接的项目文件夹，使用简单命令“npx express-generator”即可构建Web框架，例如，在本地开发测试时，构建完毕后，其默认后端开放访问端口为3000，我们可以通过浏览器访问到，示例如图5所示。
后端服务器构建之后，我们还需在系统中采用Axios完成连接。Axios作为一个封装了的Ajax，其优点时能够将异步请求同步化，从而化简了请求机制，且数据持久化，用户体验良好[10]。需要在Vue中，先装载axios，在引入Vue中，并对其跨域问题进行处理。
在Vue项目中的main.js设置实现如下：
import axios from axios
axios.defaults.baseURL = http：//localhost：3000/
//这里的URL在构建的时候是放在本地服务器上
Vue.prototype.$axios = axios
此后，便可以在Vue前端中，使用对象this.$axios和后端进行通信，对于通信对象，发出的请求将打包在request对象，而后端返回的数据打包在response对象返回。
浏览器有一个安全机制，就是一个页面，它一般不允许请求跟它不在同一个域的接口，同一个域就是协议，主机，端口号都相同，否则就是跨域接口。对此，我们需要对跨域进行处理。在本地进行开发，需要对前端项目文件下其vue.config.js文件设置如下：
devServer：{
proxy：{
/api：{" // /api是后台数据接口的上下文路径
target：http：//localhost：3000/， //这里的地址是后端数据接口的地址
changOrigin：true，" //允许跨域
}" } " }
对后端的入口文件app.js文件设置跨域如下：
app.all（*，（req，res，next）=gt;{ //设置允许跨域的域名，*代表允许任意域名跨域
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\"）; //跨域允许的请求方式
res.header（\"X-Powered-By\"，3.2.1）;
res.header（\"Content-Type\"，\"application/json;charset=utf-8\"）;
next（）;}）;
3.3" MySQL数据库的实现
数据库主要是实现成绩的存储管理，主要涉及的表如下：
teacher（tid，tname，tdep）
student（sid，sname，sdep，grand）
dept（did，dname）
course（cid，cname，cteaher）
homeword（hid，hname，haddr，cname，score）
本系统的作业，采取FTP形式提供文件上传下载，对成绩，则形成数据存放在数据库中保存。为了便于后续管理或下载等处理，将考虑设计可以将各门成绩形成Excel表格形式存放。
图6是运行某作业页面，图7是后端运行提供用户接口测试和数据返回接口部分效果。
4" 结" 论
本系统采用了前后端分离设计实现的方式，优化了前端用户体验，便捷了后台管理，为线上线下混合
式课堂教学提供了一个实现方式，有效提高了教学的灵活度和教学问题的实时反馈，实用性强。基于对用户体验的优化方面，我们将在后续的工作中，继续针对优化界面引入ELMENT-UI设计、增加Excel或图形可视化效果等多样式成绩呈现方面、
数据库性能进一步优化设计方面进行改进。
参考文献：
[1] 孙鑫.Vue.js从入门到实战 [M].北京：中国水利水电出版社，2020：5-7.
[2] 施璇.基于Vue.js的可编程视频平台的设计和实现 [D].武汉：华中科技大学，2020.
[3] 刘竞泽.媒体数据审验平台的设计与实现 [D].济南：山东大学，2022.
[4] 李娟.基于Vue+Node的高职院校学生成绩管理系统设计与实现 [J].现代信息科技，2023，7（9）：115-117.
[5] 黑马程序员.MYSQL数据库入门：第2版 [M].北京：清华大学出版社，2022：10-13.
[6] 王伊，王韶红，刘晋泽，等.Vue.js与Django组合框架的网络社交系统单页面架构方案设计 [J].信息技术与信息化，2020，（1）：121-123.
[7] 林晨，邓录，董璐.基于SVG和Vue的数据过程可视化设计 [J].计算机系统应用，2022，31（4）：130-136.
[8] 未来科技.JavaScript从入门到精通（标准版） [M].北京：中国水电水利出版社，2017：531.
[9] 田鑫雨.基于Vue框架的计算机教学预约系统 [D].西安：西安电子科技大学，2022.
[10] 肖文娟，王加胜.基于Vue和Spring Boot的校园记录管理Web App的设计与实现 [J].计算机应用与软件，2020，37（4）：25-30+88.
