APP下载

一种基于vue技术开发的移动选题平台

2021-10-18陆婷婷

电脑知识与技术 2021年26期
关键词:路由

陆婷婷

摘要:为解决传统的毕业选题工作存在效率不高、工作烦琐等问题,开发完成了一套移动选题平台。移动选题平台包含后端管理子系统、后端数据接口、前端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目录。

猜你喜欢

路由
铁路数据网路由汇聚引发的路由迭代问题研究
探究路由与环路的问题
基于预期延迟值的扩散转发路由算法
PRIME和G3-PLC路由机制对比
WSN中基于等高度路由的源位置隐私保护
eNSP在路由交换课程教学改革中的应用