1. 引言
高等数学教学中，线上系统的需求日益强烈，现阶段大部分作业依靠纸质材料上交 [1]，随着科学技术的进步与发展，线上高等数学作业系统应运而生，在该系统上可以满足老师对于收发作业以及批改作业的需求，也能满足学生及时了解作业、回顾作业的需要，提高了师生交互效率。
线上平台所使用的技术数量繁多。实现动态页面的技术包括JSP、ASP、PHP等，其中PHP诞生时间最早，它是HTML内嵌式的语言，语法混合了C、Java、Perl等语言的特点，它支持较多数据库并与HTML有很好的兼容，它具有较强的跨平台能力、较大程度降低内存使用提高运行速度、较高安全性等特点，但是较好的兼容性带来的缺点是接口的不规范导致开发者的负担加重，开发者需要考虑对每种不同的数据库使用不同的开发语言 [2]；ASP技术是基于.NET平台的一种动态网页技术，它有非常强大的后台处理能力，除此之外它还具有处理效率高的优点，并且它的安装配置更加简单，但是Windows系统本身的缺陷会导致基于ASP的网站存在安全性问题，并且ASP在集群和负载均衡方面的弱势导致大型的网站不能基于它去实现 [3]；JSP在基于java的平台上广泛地使用，是进行Java web开发的一种核心组件，JSP页面由HTML代码和嵌入在其中的Java脚本组成，JSP具有更加强大的跨平台性，它能在几乎任何平台上运行，但同时会导致它的内存使用率较低等问题 [4]。
前端框架技术包括angular、react、VUE等，其中angular作为框架的始祖，angular全面支持typescript语法，并且angular将html、js、css分开存储大大提高了代码可读性，降低维护成本，并且angular自带几乎所有页面功能，无须寻找第三方库进行拓展，但是angular存在致命问题，控制台报错信息模糊，导致它的调试成本过高，并且由于自带的模块过多导致占用空间过高，除此之外angular概念过多并且API文档内容并不够简洁，导致学习成本较大 [5]。React框架具有庞大的生态环境，与angular相比体积极小且可组装性更高，且react是单项数据流机制所以它的各种变化都是可预计的，最重要的是react所有的数据都储存在state中，只可以使用setState方法去改变，极大降低开发和维护成本，但是react的灵活性导致在选择开源包时会耗费更多时间，并且由于react的jsx语法使得代码可读性较差，开发者仍需学习saga语法，提高了学习成本 [6]。VUE框架则具有易学、灵活、高效的特点，但是VUE的响应系统无法检测属性的添加和删除是与其他框架不同的，开发者需要额外注意 [7] [8]。
由于数学教学领域的线上作业平台较少，VUE和PHP作为较为成熟的技术较少被共同应用于平台开发，因此本系统希望融合VUE和PHP各自的优点构建基于VUE和PHP的线上作业平台，构建MVVM框架，实现前后端分离，极大降低后期维护成本，并且开发更便捷的线上作业功能，实现学生及时获取作业情况，以及实现老师线上批改作业、自动发布成绩与评语的功能，相较于已有线上教育平台，在作业功能上进一步提高老师效率，降低学生和老师的沟通成本。
本平台的优势有以下几点：
1) 相较于传统的师生作业交互模式，线上平台极大提高了交互效率，老师能够及时、高效收集和批改作业，学生能及时获取、提交、回顾作业。
2) 线上作业平台使用的katex嵌入模块使得老师出题更加规范，格式更加工整，便于学生阅读和收藏。
3) 线上作业平台使用的PDF嵌入模块以及使用选择评分点形式的批改方式，极大地提高了老师批改作业的速度，降低老师负担。
本文第二节介绍需求说明，第三节介绍系统总体设计，第四节进行系统展示，在最后一节阐述结束语。
2. 需求说明
本系统仅考虑学生用户和教师用户。
2.1. 学生用户需求
系统中面向学生的主要功能有：
1) 查看作业。学生可以通过日期选择来查看某一日的所有作业情况，在查询界面可以看到该次题目、题目所属作业。
2) 提交作业。该功能可以点击上交作业按钮选择本地PDF文件进行上交作业操作。
3) 查看题目得分与老师批改内容。学生可以通过日期选择来查看某一日的所有作业情况，在查询界面可以看到该次题目得分与老师批改内容简述，点击作业可以跳转到详情页，查看老师具体批改内容。
4) 查看上交情况。学生可以通过日期选择来查看某一日的所有作业情况，在查询界面可以看到每个题目的上交情况，便于学生找到未写的题目。
2.2. 教师用户需求
系统中面向教师的主要功能有：
1) 上传、发布作业。老师可以在题目编辑页面通过上传作业按钮将编辑的题目上传到题库，以便于之后需要时可以在题库内选择题目进行发布。老师可以通过发布作业按钮给指定班级学生发布指定作业。上传作业和发布作业所需的题目编辑完成度不同。题目编辑页面可以设定题目面向的班级、题目所在章、题目所在节、题目所属作业、题目启用日期和截止日期、题目内容、题目答案。
2) 批改作业。老师可以在主界面进入批改作业页面，首先选择题目再选择班级及班级内同学进行批改该同学的作业。批改学生作业界面有批改悬浮窗，悬浮窗中是可选的批改内容，老师可以通过选择不同的条目并上传来完成批改任务，条目包括分数和评语，条目可以增删。不同的题目不共享批改悬浮窗内的条目，但批改同一题目不同学生时共享该题目条目。在重新批改作业时，上一次所选条目会被重新选择在批改悬浮窗内，以供老师取消和重选。
3) 查看已发布作业。老师可以在主界面选择查看已发布作业进入已发布作业查看页面，该页面会显示已发布的所有题目及所属作业，可通过选择作业项、时间、班级进行筛选。
修改作业内容。老师可以在查看已发布作业页面和题库页面通过点击题目进入题目编辑页面，再上传、发布时会覆盖原有数据。
3. 系统总体设计
3.1. 框架设计
本系统采用前后端分离的B/S架构，整体系统分为基于VUE的前端服务、基于PHP的后端服务和mysql数据库。系统在接受用户请求后，携带用户Token，VUE通过Axios函数调用跨域功能实现和本地后端连接、验证获取数据等功能。后端服务基于thinkPHP框架，数据库采用mysql。系统总体模块框图见图1：
3.2. 数据库设计
本系统的数据库主体概要E-R图分析见图2：
Figure 2. Database design E-R diagram
图2. 数据库设计E-R图
3.3. 关键技术设计
本系统开发过充中使用了较多实用技术，本文挑选若干阐述如下：
1) 登录验证与免登录：在用户登录时，如果是首次登陆，服务器端会对用户进行验证，如果验证成功则将用户数据加密成Token回传给客户端，浏览器则将接收的Token值存储在Local Storage中。此后的登录时浏览器会向服务器端传输Token，服务器端会对Token进行解密然后查询是否存在该用户信息，如果存在该用户信息，则通过认证并且保持了在线状态，这就完成了免密登录。本文未选择单一的session实现免密登录的原因是，session方法中浏览器在本地内存中记录session值一方面容易被攻击，另一方面当多服务器共同使用时，同一个用户在不同服务器上的使用无法实现免密登录，而token方法中的服务器也只是做了token的解密和用户数据的查询，解决了单一使用session方法造成的拓展性方面的弊端。
部分前端伪代码见表1。
部分后端伪代码见表2。
2) 作业发布模块：在发布作业模块中，由于当前线上高等教育线上作业平台数量较少，本文创新得将katex与作业发布相结合，使老师可以通过编辑katex发布作业题目，也便于学生记录。本模块实现基于VUE中内嵌Katex模块：v-md-editor，所输入的题目和答案都用katex编辑，在存入数据库的过程中避免katex编辑中“\”的使用对存入数据库中的对应字符串的影响，因此在存入前先循环待存入字符串，在循环到“\”时在其后额外添加一个“\”。反过来，从数据库读取数据显示在katex模块中不影响。
Table 2. Backend authentication login
表2. 后端验证登录
部分前端伪代码见表3：
Table 3. Front end release job part code
表3. 前端发布作业部分代码
部分后端伪代码见表4：
Table 4. Module of the backend check job
表4. 后端检查作业模块
3) 作业批改模块：在批作业模块中，同样由于当前线上高等数学线上作业平台数量较少，本文创新地将PDF显示与作业批改相结合，在页面中实现对指定PDF文件的查看、放大、缩小等功能，本模块实现基于VUE中内嵌PDF框架：iframe，通过对指定文件使用encodeURIComponent函数进行编码再放在VUE3.0的pdf组件iframe中显示。除了内嵌PDF阅读器外，本系统为解决大学老师批改作业量大的问题，将批改作业从每份作业单独输入改为使用选择形式选择得分点来为每份作业赋分，老师通过在批改悬浮窗中选择条目来给学生作业打分，条目包含分数及批改内容，条目可以增加和删除。并且为了老师方便批改，同一题目共享批改条目，不同题目不共享。在老师重新打开已批改的作业时，批改悬浮窗会显示最后一次上传时所选的批改条目。
除此之外，悬浮窗可以进行拖动，拖动功能主要通过在拖动悬浮窗时获取此时悬浮窗位置，并在拖动过程中实时地用屏幕宽度和高度减去自身控件宽度和高度，以达到实时更新悬浮窗空间的位置，并阻止页面的滑动默认事件，最终达到可以任意拖动悬浮窗的功能。
部分前端伪代码见表5：
部分后端伪代码见表6：
Table 6. Back end update evaluation module
表6. 后端更新评价评语模块
4. 系统展示
该系统在PC端运行，其中题目编辑页面、学生查看题目页面、题目批改页面、题库页面如下。
4.1. 题目编辑页面
点击发布作业可以进入编辑题目页面，其中包括题目面向的班级、题目所在章、题目所在节、题目所属作业、题目启用日期和截止日期、题目内容、题目答案。题目内容和题目答案通过内嵌katex模块进行编写，详情见图3。
4.2. 学生查看题目页面
学生登录之后会直接选择日期查看对应时间的作业，每个条目包括题目内容、所属作业、是否上交、老师批改内容，点击条目后可以查看题目详情并进行上传作业操作，详情见图4。
4.3. 题目批改页面
老师可以在老师主界面点击批改作业按钮进入带批改的作业界面，然后点击题目后可以通过选择班级，再选择班级中的人进行对此人的作业批改。下图中的悬浮窗可以拖动，其中的条目可以选择，选择的条目即为对此题目的批改内容，条目中左上角表示该条目对应分值，条目中央内容表示批改内容。点击管理按钮可以对条目进行管理，点击悬浮窗中间加号，则会进行条目的增加操作。最后点击批改页面中右下角的确定即可完成对该题目的批改，详情见图5、图6。
Figure 4. Students view the topic page
图4. 学生查看题目页面
4.4. 题库页面
老师可以在题目编辑页面点击从题库中上传按钮进入自己的题库。点击题目可以回到编辑页面，也可以点击删除按钮将题目从题库中删除，详情见图7。
5. 结束语
本文论述了基于VUE和PHP等技术实现的线上高等数学作业系统的设计和实现。首先分析学生和老师的需求；其次阐述系统总体设计，其中包括框架设计、数据库设计以及关键技术设计；最后展示了系统的部分界面。
本系统已经在校内局域网投入使用，为校内高等数学课程提供作业方面的帮助，为高等数学线上作业的规范化、便捷化提供参考。随着科技的科技发展，传统教学系统不管是硬件上还是软件上正面临着进一步的更新升级，而线上作业系统对老师和学生所具有的不可替代的便利性使得线上作业这一形式在未来有很大的发展前景。
NOTES
*通讯作者。