基于Vue.js+Node问卷调查系统的设计与实现(二)

简介: 基于Vue.js+Node问卷调查系统的设计与实现

4.4系统详细设计

4.4.1 登陆注册模块的功能设计

登陆注册模块需要包括用户登陆功能和用户注册功能,用户在登陆界面只需输入登陆账号、登陆密码,点击登陆按钮即可进入系统首页。若条件允许,登陆页面还要有跳转注册界面的超链接,注册需要额外输入手机号,完成注册后即可重新登陆系统。通过注册确定不同用户的权限,不同权限的用户登录后系统会执行不同的功能。未注册用户就只能进行公开调查问卷的在线答题。注册的用户除了有以上功能以外还可以查看调查问卷的调查结果,如图4-3所示。

4.4.2 调查问卷查询模块的功能设计

调查问卷查询模块用于查询发布者发布的问卷信息。当发布者在系统中发布了自定义问卷之后,数据将自动存档到调查问卷模块,该模块需要实现调查问卷的查询功能。该模块需要满足不同需求的人群对于调查问卷的查询,并能够显示调查问卷的发布时间以及问卷调查的统计结果,其功能结构示意图如图4-4所示。

4.4.3 发布调查问卷模块的功能设计

发布调查问卷模块的作用,就是帮助发布者发布调查问卷。发布人在输入调查问卷的标题、问卷内容后,点击发布按钮即可完成调查问卷的发布。用户可以通过该模块进行调查问卷的创建、编辑、删除、发布以及设置调查问卷的开始时间和结束时间等,其功能结构示意图如图4-5所示。

4.4.4 后台管理员管理模块的功能设计

后台管理员管理模块适用于管理员对调查问卷进行管理,需要对不合理的问卷进行删除,实现对问卷进行新增、编辑、条件查询功能,如图4-6所示。

4.4.5 数据可视化模块的功能设计

数据可视化模块用于展示问卷的统计分析功能,需要有一张图表作为载体,展示问卷的情况,如图4-7所示。

4.5数据库分析与设计

问卷管理系统数据库是问卷信息的数据库,相关信息是高度专业化的。数据库的设计和创建是为了反映整个数据的业务流程,而不仅仅是存储数据。

系统关键数据表的主要逻辑结构设计如下图所示。

4.6本章小结

第四章是问卷调查系统的设计部分。对登陆注册模块、调查问卷查询模块、发布调查问卷模块、后台管理员管理模块、数据可视化模块这五大模块进行了架构设计,和对数据库进行了设计。

5系统功能与界面的实现

5.1 登录注册的设计实现

用户在进入问卷调查系统后,首先进入到登陆界面,如图5-1所示。用户需要输入用户名和登陆密码,点击下方蓝色的立即登陆按钮,完成用户登陆系统的操作。

图5-1 系统登陆界面如果用户没有输入用户名或密码直接点击“立即登陆”按钮,系统会给与红色字体反馈,提示用户需要输入用户名和密码,如图5-2所示。

图5-2 系统登陆验证失败界面

如果用户没有系统账号,可以点击下方白色“前去注册”按钮,即可跳转到登录页。用户进入系统后,可以看到系统的首页,如图5-3所示。

图5-3 系统首页

5.2 调查问卷查询模块的设计实现

进入系统后,用户可以查询到他人发布的问卷,如图5-3所示。点击某个问卷的查看按钮,即可进入问卷,问卷详情界面如图5-4所示。

图5-4 问卷详情界面

5.3 发布调查问卷模块的设计实现

用户可以发布自己的问卷信息,点击右上角的“添加问卷”按钮,输入问卷标题、选择问卷模板,最终跳转到发布界面,如图5-5所示。

图5-5 新增问卷界面

问卷题目支持多种类型,分为单选题、多选题、问答题和打分题,还可以选择是否为必填项,问卷发起人可以根据自己的需要定制问卷内容,如图5-6所示。

图5-6 问卷编辑界面

为了方便用户发布问卷,系统设置了根据模板添加题目的功能,用户只需点击模板内容,模板中的问卷题目会自动加入问卷,非常方便,如图5-7、5-8、5-9所示。

图5-7 问卷模板界面A

图5-8 问卷模板界面B

图5-9 问卷模板界面C

问卷内容编辑完成后,用户即可预览自己制作的问卷内容,如图5-10所示。

图5-10 问卷预览界面

5.4 后台管理员管理模块的设计实现

管理员使用admin账户登陆系统,可以看到系统的所有用户信息,如图5-11所示。

图5-11 用户管理界面

6结论与展望

6.1 结论

从整个问卷系统的构成开始,介绍问卷管理系统的五大功能模块。最后,我开发完成了这套问卷管理系统。

设计开始时,多数国内外文献收集和比较,对问卷管理系统的现状进行了分析,并说明开发问卷系统的意义和重要性,同时根据国内外现状介绍开发问卷调查系统所用的热门技术框架,接着分析问卷管理系统实际需求,确定问卷调查系统的具体功能。

在问卷系统的开发阶段,使用Vue和SpringBoot进行编程,最终将问卷调查系统开发完成。

6.2 展望

本文设计的问卷管理系统能够投入使用,满足调查问卷的基本要求,适用于问卷调查及相关职工需求调查。然而,由于缺乏个人水平等因素,研究中还存在许多问题和差距。例如,本文的调查系统使用MongoDB存储系统生成的数据。但是,如果以后信息量增加,可能会对性能产生一些影响。考虑稍后增加缓存以增加数据存储容量。第二,确保检查员的信息安全也是重中之重,在问卷调查系统中,用于数据采用明文存储,所以如果未来要完善这套系统,首先要将用户的明文数据进行MP5加密传输,保证用户的数据安全。

参考文献

[1] 区县问卷调查管理系统设计与实现[D]. 岳建涛.重庆大学 2021

[2] 财政部. 关于开展城乡问卷调查工作的指导意见[J]. 中国实用乡村医生杂志, 2021, 019(021):1-3.

[3] 邓本霞. 问卷调查, 惠及民生[J]. 法制与经济(中旬), 2021, 000(004):93+95.

[4] 石枫. 城乡问卷调查运行困境及问题[J]. 现代经济信息, 2021(12):51-52.

[5] 黄华波. 问卷调查的制度特性与经办模式分析[J]. 中国社会保障, 2021(8).

[6] 精准施策是决胜问卷调查攻坚的关键[J]. 王运柏. 新湘评论. 2020(07)

[7] 问卷调查委托商保承办的现状及问题分析[J]. 朱铭来,解莹,李海燕. 2020(03)

[8] 新问卷调查系统的设计与实现[D]. 张业恒.郑州大学 2021

[9] 电子问卷调查助推精准扶贫的现状与对策[J]. 向运华,罗家琪. 决策与信息. 2021(12).

[10] Suggestion on Critical Illness Insurance in China[J] . L Zhu,H Xu,X Cui. Value in Health . 2016 (7)

[11] 云南省城镇问卷调查信息系统开发研究[D]. 李锐.云南大学 2021

[12] 李若翰. 问卷调查管理系统设计与实现[D].江西财经大学,2021.

[13] 金霞.广西问卷调查制度存在的问题及建议[J].现代商贸工业,2021,42(11):40-41.

[14] 黄大敏,刘双花,赵云.问卷调查的完全知晓情况及影响因素[J].广西医学,2021,43(01):92-95.

[15] 李阳,田文华,段光锋.上海市问卷调查政策:演进、现状与思考[J].保险理论与实践,2020(01):74-86.

引用说明:

引用以上内容的用户,必须同意以下内容,否则请勿引用!

  1. 出于自愿而使用本文,了解引用本文的风险,且同意自己承担引用本文的风险。
  2. 利用本文内容构建的任何信息内容以及导致的任何版权纠纷和法律争议及后果和作者无关,作者对此不承担任何责任。
  3. 在任何情况下,对于因引用本文而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),作者概不承担任何责任。
  4. 必须了解使用本文内容的风险,作者不对其提供二次维护服务,也不提供任何有关资料。

相关文章
|
5天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
10天前
|
JavaScript 前端开发 开发工具
Node.js——初识Node.js
Node.js——初识Node.js
14 4
|
10天前
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
15 4
|
28天前
|
缓存 JSON JavaScript
Node.js模块系统
10月更文挑战第4天
34 2
|
29天前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
|
17天前
|
运维 JavaScript Linux
容器内的Nodejs应用如何获取宿主机的基础信息-系统、内存、cpu、启动时间,以及一个df -h的坑
本文介绍了如何在Docker容器内的Node.js应用中获取宿主机的基础信息,包括系统信息、内存使用情况、磁盘空间和启动时间等。核心思路是将宿主机的根目录挂载到容器,但需注意权限和安全问题。文章还提到了使用`df -P`替代`df -h`以获得一致性输出,避免解析错误。
|
19天前
|
缓存 监控 JavaScript
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
64 0
|
19天前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
19天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
14 0
|
21天前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信