一种基于vue技术开发的移动选题平台
2021-10-18陆婷婷
陆婷婷
摘要:为解决传统的毕业选题工作存在效率不高、工作烦琐等问题,开发完成了一套移动选题平台。移动选题平台包含后端管理子系统、后端数据接口、前端H5应用三部分,采用当前流行的软件开发技术实现,使用vue渐进式框架和前后端分离等技术进行开发,同实际的高校毕业论文选题工作成功对接,功能较为完备,性能较稳定。移动选题平台已经正式投入使用,能够在较短的时间内完成毕业选题任务,使毕业选题工作周期大大缩短,效率明显提升。
关键词:vue;路由;移动开发;选题平台;接口设计
中图分类号:TP315 文献标识码:A
文章编号:1009-3044(2021)26-0069-03
开放科学(资源服务)标识码(OSID):
传统的毕业选题工作主要围绕在线下进行,一般至少需要1个星期才能完成这项工作,效果不是很理想。随着移动互联网技术的不断发展,迫切地需要一种移动选题平台来辅助完成毕业选题工作。当前已经涌现了很多的毕业论文选题平台,通过阅读大量的文献资料发现,有些平台基于PC电脑端开发,有些平台使用的是一些老旧技术,在性能、功能、用户体验等方面都有所欠缺[1-4]。本文使用vue渐进式框架和前后端分离等技术[5],实现的移动选题平台经严格测试,在各方面使用效果较为理想。
1 系统架构设计与模块分析
1.1 系统架构设计
整个系统使用前端和后端分离的技术,前端和后端各自负责自己的业务。前端使用axios.js作为异步调用工具,访问API接口获得数据。前端从后端获取的数据需要进行加工处理,所以在系统架构设计中增加了node.js作为桥梁,所有从API接口获取的数据都需要通过node.js进行加工,加工后的数据可直接在前端使用,这样可以做到层次分明,提高开发效率。如图1所示。
其中,前端部分由显示层、互动层和异步数据处理层组成。互动层使用基于vue和vue扩展的相关开发技术实现,显示层使用sui作为前端UI框架,配合html5、css3和JQuery共同实现,异步处理层使用axios.js异步获取数据。
后端由两大部分组成,一部分是管理员用户使用的后台管理系统,另一部分是给前端用户使用的API接口,API接口的风格遵循RestFul API的风格实现。
1.2 业务模块分析
移动选题平台涉及学生、指导教师和管理员等角色,结合工作单位多年来的学生选题工作管理流程经验,归纳出移动选题平台所需要的功能模块。
主要模块的功能如下:
1)系统初始化模块
管理员负责对平台数据进行初始化,平台运行之前必须对数据进行初始化,以方便下一批学生进行选题。
2)数据导入导出模块
导入的数据主要包含指导论题题目信息、 学生基本信息数据(学号、姓名、班级、所属系部等)、教师的基本数据(姓名、工号、所属系部等)、班级和系部基本数据等。选题平台结束运行后,需要对选题平台中的选题进行导出操作,导出的信息可以按照学生的专业、所在的班级以及系部等分类进行输出,输出的形式使用xls等格式。
3)基本数据维护管理模块
数据导入后,可以对上述2)所描述的基本数据进行维护管理,此模块主要实现对基本数据的增加、修改、删除以及列表等操作。
4)选题管理模块
指导教师负责对毕业论文题目进行提交,可以根据自己所设题目的需要,修改、删除或者新增毕业题目,查看本组论文的选题情况等。
5)日志管理模块
日志管理模块负责系统日志,平台中的各个用户行为都会记录在日志数据库中。通过对平台的日志情况进行详细分析,可以得出学生对哪些选题兴趣,可以分析出学生感兴趣的指导老师,并且可以增加安全性等。
6)权限管理
权限管理模块是平台中必要的组成部分。平台的使用者主要包含学生、指导教师、管理员等角色,不同角色的功能需要通过权限管理模块进行区分。
2 数据库设计
移动选题平台包含学生信息表、指导教师表、论文题目表、选题信息表、系部信息表、日志信息表、角色表、权限表、指导数量表等数据表。平台处理的基本信息主要存储在学生信息表、指导教师表、系部信息表等数据表中;选题相关的数据表包含选题信息表、论文题目表、指导数量表等;角色表和权限表存储权限管理相关信息。
下面简要介绍选题信息表和指导数量表的表结构。选题信息表结构如表1所示。
从表中看出,id为选题编号,设置为自动增长。Xh字段为学号字段,通过该字段可以在学生信息表中查询学生的信息;tid字段为指导教师的编号,通过该字段能查询指导教师的相关信息;tmid为学生选择题的题目id,通过该字段能查询论文题目的相关信息。
指导数量表的表结构如表2所示。
每个指导教师指导的学生数量有限,使用count字段记录上限,icount是已经选择的数量,如果count大于icount,说明该教师已经被学生选完了,后面的学生无法再选择该教师。
3 模块设计实现
3.1 前端项目结构设计
前端项目的开发使用VUE-CLI脚手架工具进行开发,使用前端相关技术实现。
在powershell控制台下,输入vue create bysj命令创建本项目(bysj为项目名),技术模块选择安装babel、router、vuex、linter/formater等,项目需要的其他第三方工具,比如axios.js、mockjs、elementui等,需要在项目中使用npm install命令进行安装。
项目创建好后,需要对项目的目录结构进行重构,以利于项目的快速开发。在一级目录中增加api目錄、directive目录、mock目录以及lib目录。异步访问数据的js源文件都统一放在api目录中,directive目录用于存放一些使用vue创建的指令,使用mockjs所创建的mock数据存放在mock目录,前端开发所需要的其他第三方源文件工具存放在lib目录。