摘 要
随着网络核心技术的不断革新,信息化实现了各行各业大规模的普及。信息化似乎把控着行业的命脉,掌握网络核心技术的企业终将迎上时代发展的潮流。而医院也恰恰是本次革新的一大关键点,通过网络技术可整合新冠疫苗信息,使得每一个人都可快速得到疫苗的最新信息。所以,开发出一个能够整合新冠疫苗信息资源的系统迫在眉睫。
新冠疫苗接种预约系统,主要分为三大模块,分别为用户、医院和管理员模块。在用户模块中可选择预约接种疫苗,查看疫苗信息等功能。在医院模块中可选择发布疫苗,管理疫苗信息等功能。在管理员模块中,可对用户、医院以及系统的信息进行管理操作。
本系统采用了JQuery和VUE(VUE Vlog)框架构建一个简洁明了的前端,使用SSM(SSM框架集)框架搭建了后端,其中数据存储使用了MySQL(关系型数据库管理系统)数据库构成了整体框架,给用户更好的使用体验。
关键词:新冠疫苗接种预约;SSM框架;数据库
1.3 研究目的及意义
随着信息化的普及,现代人的生活方式变得越来越趋近于信息化,现代人对于实时信息的要求越来越高,造成早期的新冠疫苗预约效果不佳,更满足不了人们对新型新冠疫苗信息的了解。所以,一个能够及时更新疫苗信息消息的新冠疫苗预约接种系统得到了迫切的需求。此系统可带来新一轮的信息革命,让新冠疫苗预约接种变得更加简单方便,能够有效的解决获取信息便捷化、全面化的问题,提高效率。
1.4 本章小结
本章从研究背景、国内外研究现状、研究目的及意义三个方面进行详述。通过当前的研究背景,引出新冠疫苗接种预约系统,其次,通过国内外研究现状,找出现今新冠疫苗接种预约系统的不足并找出解决方案。最后,阐述了本课题的研究目的和实际存在意义。
2.4 VUE框架
Vue(Vue.js)是一套用于构建用户界面的渐进式框架。与别的大型框架不同的是,Vue(Vue.js)被设计为可以自底向上逐层应用[10]。本系统在搭建Vue(Vue.js)框架时首先要安装node.js,目前新版的node.js集成了npm,在安装node.js时,直接npm -v命令,就会直接显示npm版本信息[11]。Npm的作用就是对node.js依赖的包进行管理。其次要在全局安装vue-cli,vue-cli是一个官方发布vue.js项目脚手架,使用vue-cli可以快速创建Vue(Vue.js)项目,最后搭建Vue(Vue.js)项目,新建文件夹存放新冠疫苗接种预约系统的前端项目,并cmd输入安装指令进行安装即可[12]。Vue(Vue.js)框架具有体积小,运行项目的效率高,生态丰富、学习成本低等特点[13]。综上所述,本系统采用Vue(Vue.js)框架。
2.5 JQuery库
JQuery是一个JavaScript函数库,对JavaScript进行封装,使JavaScript更加简洁。JQuery库可以通过一行简单的标记被添加到网页中[14]。使用JQuery库不用担心浏览器的兼容问题。本系统使用的是IDEA开发工具,在本系统引入JQuery库采用的是最简单的方法直接在jsp文件中写入JQuery的URL链接,然后按Alt+enter,选择载入该模块,最后点击IDEA左上角文件选项中的设置按钮,验证该模块是否载入成功[15]。由于新冠疫苗接种预约系统的直接受众对象是广大群众,引用JQuery库能够为页面添加动态效果,提高用户的体验感错误!未找到引用源。。
4.1 系统功能设计
本系统主要分为管理员、用户以及医院功能模块。系统功能模块图如图4-2所示:
图4-2 系统功能模块图
5.2.1 用户模块
1.首页
图5-2 首页界面部分效果图
3.疫苗接种预约
图5-4 疫苗接种预约界面效果图
6.1.2 疫苗预约接种功能测试
测试用户成功登录系统后,可以对疫苗进行预约接种。疫苗预约接种功能测试如表6-2所示:
表6-2 疫苗预约接种功能测试
用例名称 | 疫苗预约接种功能测试 | |||
用例描述 | 模拟用户成功登录进入系统后,可以对疫苗进行预约接种 | |||
初始条件 | 无 | |||
测试过程 | ||||
序号 | 操作 | 输入与说明 | 期望结果 | 实际结果 |
1 | 浏览当前疫苗信息 | 查询当前疫苗信息 | 显示疫苗信息 | 期望结果 |
2 | 预约接种疫苗 | 填写预约信息,提交操作 | 用户预约接种成功 | 期望结果 |
6.3.2 删除接种预约信息测试
图6-4 接种预约信息批量删除效果图
6.5 在线客服功能测试
图6-8 在线客服交流效果图
目 录