基于SpringBoot+Vue剧本杀服务平台的设计与实现

一、前言介绍 

随着互联网趋势的到来，在不少95后00后的眼里，“剧本杀”已经成为“Z世代”们交友聚会的新潮流。当前，年轻人休闲娱乐较为依赖线上的形式，而剧本杀也打开了线上社交市场，加上用户付费意愿较高，市场发展前景可期。因此在现实运用中，应用软件的工作规则和开发步骤，采用Java技术建设剧本杀服务平台。

本设计主要实现集人性化、高效率、便捷等优点于一身的剧本杀服务平台，完成公告消息管理、剧本资讯、、系统用户、优质店铺、剧本信息、购买信息、剧本拼团、玩家拼团、剧本拼团信息、玩家拼团信息等功能模块。系统通过浏览器与服务器进行通信，实现数据的交互与变更。只需通过一台电脑，动动手指就可以操作系统，实现数据通信管理。整个系统的设计过程都充分考虑了数据的安全、稳定及可靠等问题，而且操作过程简单。本系统通过科学的管理方式、便捷的服务提高了工作效率，减少了数据存储上的错误和遗漏。

剧本杀服务平台使用Java语言，采用基于B/S架构的SpringBoot技术进行开发，使用 MyEclipse编译器编写，数据方面主要采用的是MySQL关系型数据库来作为数据存储媒介，配合MyBatis、Redis等技术完成系统的开发。

二、相关技术介绍

springboot框架

Spring框架是Java平台上的一种开源应用框架，提供具有控制反转特性的容器。尽管Spring框架自身对编程模型没有限制，但其在Java应用中的频繁使用让它备受青睐，以至于后来让它作为EJB（EnterpriseJavaBeans）模型的补充，甚至是替补。Spring框架为开发提供了一系列的解决方案，比如利用控制反转的核心特性，并通过依赖注入实现控制反转来实现管理对象生命周期容器化，利用面向切面编程进行声明式的事务管理，整合多种持久化技术管理数据访问，提供大量优秀的Web框架方便开发等等。Spring框架具有控制反转（IOC）特性，IOC旨在方便项目维护和测试，它提供了一种通过Java的反射机制对Java对象进行统一的配置和管理的方法。Spring框架利用容器管理对象的生命周期，容器可以通过扫描XML文件或类上特定Java注解来配置对象，开发者可以通过依赖查找或依赖注入来获得对象。Spring框架具有面向切面编程（AOP）框架，SpringAOP框架基于代理模式，同时运行时可配置；AOP框架主要针对模块之间的交叉关注点进行模块化。Spring框架的AOP框架仅提供基本的AOP特性，虽无法与AspectJ框架相比，但通过与AspectJ的集成，也可以满足基本需求

三、系统分析

功能需求分析

在系统开发设计前，应该对功能做初步设想，清楚这个管理系统有什么板块，每个板块有什么功能，整体的设计是否满足使用者的需求，接着对所开发的系统功能进行的详细分析总结，从而设计出完整的系统并将其实现。用户和开发人员的交流分析，使其达到最佳理解程度，使系统功能达到最佳。

用户前台用例图如下所示。

用户后台用例图如下所示。

管理员用例图如下所示。

剧本杀服务平台在对需求做解析后，整个系统主要分为两个部分：管理员和用户，每个模块下的分支功能不一样。对功能做出如下说明：

用户模块功能如下：

注册账号：用户填写个人信息，并验证手机号码。

登录：根据账号密码进行登录操作。

维护个人信息：用户因个人信息的变更可以随时修改自己注册信息。

浏览系统公告信息。

查看剧本资讯内容，可以发布评论、点击收藏。

查看发布的优质店铺列表。

浏览评论信息：选中某剧本资讯或剧本拼团可查看其用户的评论。

查看剧本信息，购买店铺发布的剧本拼团活动。

管理购买系统发布的剧本信息生成购买信息。

发布玩家拼团活动信息，并管理玩家拼团信息。

管理剧本拼团信息。

管理员功能模块：

修改密码：管理员可以随时修改自己进入系统的登录密码，以保证系统的安全性。

维护普通用户，审核普通用户的账号，可以冻结普通用户的登录权限，或者删除普通用户账号。

维护、更新轮播图信息。

发布系统公告信息，维护公告信息数据。

发布剧本资讯，维护剧本资讯分类数据。

发布优质店铺信息。

新增剧本信息，并管理店铺对剧本的购买信息。

发布剧本拼团活动，维护管理剧本拼团信息。

维护、管理玩家拼团信息。 

三、系统功能结构

剧本杀服务平台总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。

综上所述，系统功能结构图如下图所示。

功能模块设计 

用户管理模块

该模块是为所有用户登录设计的，如用户这种普通用户登录后只能进行自己的普通功能操作(如个人信息修改），管理员和超级管理员登录后有不同的权限，管理员不能超越权限。超级管理员能对整个系统的数据进行管理，主要是用户的登录权限以及用户登录后在系统里的操作权限。

登录模块：登录模块是进入系统的入口，所有用户必须登录后才能访问系统。登录需要输入用户名和密码，如果多次尝试登录需要输入验证码。登录时需要选择用户的角色，是一般用户还是管理员登录等。登录成功后，会通过数据库获取用户的权限，并跳转至用户的主页面。

评论模块：评论模块促进用户对剧本信息进行点评，查看某个剧本信息已存在的评论，发表评论可以达到真实描述剧本信息的效果。

公告数据模块：可分为公告数据浏览、公告数据检索、公告数据维护三个模块，管理员对公告数据有维护的权限，发布新的公告数据、更新已有的公告数据等。

剧本资讯模块：可分为剧本资讯浏览、剧本资讯检索、剧本资讯维护三个模块，管理员对剧本资讯有维护的权限，发布新的剧本资讯、更新已有的剧本资讯等。

剧本信息管理模块：剧本信息管理分为剧本信息添加、修改和剧本信息发布。剧本信息由管理员进行修改、添加、删除操作；剧本拼团由管理员来发布。

优质店铺管理模块：优质店铺管理分为优质店铺添加、修改和优质店铺发布。优质店铺信息由管理员进行修改、添加、删除操作。

玩家拼团模块：注册的用户可以浏览剧本信息并进行评论、点赞收藏操作。通过剧本信息查看玩家拼团活动，可以进行拼团购买；玩家拼团由用户来发布。

数据库设计

数据需求分析

从前面可以分析到数据库中最重要的是用户信息、评论信息、剧本资讯信息、公告信息、优质店铺信息、剧本信息、剧本拼团信息、玩家拼团信息。分析可以得到如下数据描述：

平台用户：用于记录用户的各种信息，包括用户名、密码、姓名、性别、地址、邮箱、联系方式等数据项。

管理员：记录管理员的登录信息。包括用户名，密码，权限等数据项。

评论：存储用户的评论。包括评论内容，评论的信息，评论人，时间等数据项。

公告数据：存储平台内的公告数据内容。包括标题，公告数据内容，时间等数据项。

剧本资讯：存储平台内的剧本资讯内容。包括标题，资讯内容，图片、封面等数据项。

优质店铺：存储平台内的优质店铺信息。包括店铺名称、店铺地址、人均价格、店铺描述、店铺简介等数据项。

剧本信息：存储平台内的剧本信息内容。包括剧本名称、剧本类型、剧本价格、剧本评分、剧本排行、剧本描述等数据项。

剧本拼团：存储平台内的剧本拼团信息。包括剧本名称、剧本类型、剧本价格、拼团人数、剩余人数、拼团须知等数据项。

玩家拼团：存储平台内的玩家拼团信息。包括剧本名称、剧本类型、剧本价格、店铺地址、发布用户、拼团人数、剩余人数、剧本简介等数据项。

部分数据表

据库逻辑结构就是将E-R图在数据库中用具体的字段进行描述。用字段和数据类型描述来使对象特征实体化，最后形成具有一定逻辑关系的数据库表结构。剧本杀服务平台所需要的部分数据结构表如下表所示。

表player_league_information (玩家拼团信息)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	player_league_information_id	int	10	0	N	Y		玩家拼团信息ID
2	script_name	varchar	64	0	Y	N		剧本名称
3	script_type	varchar	64	0	Y	N		剧本类型
4	store_address	varchar	64	0	Y	N		店铺地址
5	publishing_users	int	10	0	Y	N	0	发布用户
6	group_user	int	10	0	Y	N	0	拼团用户
7	number_of_groups	varchar	64	0	Y	N		拼团数量
8	group_time	datetime	19	0	Y	N		拼团时间
9	recommend	int	10	0	N	N	0	智能推荐
10	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
11	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

表player_team (玩家拼团)

编号	名称	数据类型	长度	小数位	允许空值	主键	默认值	说明
1	player_team_id	int	10	0	N	Y		玩家拼团ID
2	script_name	varchar	64	0	N	N		剧本名称
3	script_type	varchar	64	0	Y	N		剧本类型
4	store_address	varchar	64	0	Y	N		店铺地址
5	publishing_users	int	10	0	Y	N	0	发布用户
6	number_of_participants	int	10	0	Y	N	0	拼团人数
7	number_of_people_remaining	int	10	0	Y	N	0	剩余人数
8	cover_photo	varchar	255	0	Y	N		封面图片
9	script_introduction	longtext	2147483647	0	Y	N		剧本简介
10	recommend	int	10	0	N	N	0	智能推荐
11	create_time	datetime	19	0	N	N	CURRENT_TIMESTAMP	创建时间
12	update_time	timestamp	19	0	N	N	CURRENT_TIMESTAMP	更新时间

四、系统实现

登录模块的实现

系统的登录窗口是用户的入口，用户只有在登录成功后才可以进入访问。通过在登录提交表单，后台处理判断是否为合法用户，进行页面跳转，进入系统中去。

登录合法性判断过程：用户输入账号和密码后，系统首先确定输入输入数据合法性，然后在login.vue页面发送登录请求，调用登录验证方法来验证。

用户登录模块的IPO如下所示：

输入：用户名和密码。

处理：

1）检测用户输入的账号、密码是否正确及在数据库已对应存在。

2）从数据库中提取记录，并储存在本地的session中（timeout默认=30min）。

3）根据用户名，将其显示在系统首页上。

输出：是否成功的信息。

登录流程图如下所示。

登录流程图如下所示。

注册模块的实现

用户在填写数据的时候必须与注册页面上的验证相匹配否则会注册失败，注册页面的表单验证是通过JavaScript进行验证的，用户名的长度必须在6到18之间，邮箱必须带有@符号，密码和密码确认必须相同，你输入的密码，系统会根据你输入密码的强度给出指定的值，电话号码和身份证号码必须要求输入格式与生活相符合，当你前台验证通过的时候你点击注册，表单会将你输入的值通过name值传递给后台并保存到数据库中。

用户注册流程图如下图所示。

用户注册界面如下图所示。

用户注册界面如下图所示。

用户子系统模块的实现

个人资料模块 

用户点击登录填写账号信息登录后，会切换内容为“某某用户欢迎您”和历史订单，并给出注销链接。当用户登录成功后会将个人信息保存在session作用域中，点击自己的用户名时，会跳转到个人详细信息页面，由后台通过Freemarker取出session作用域中的用户信息进行动态渲染，例如，邮箱、电话号码、用户名等等。同时页面上会显示修改个人信息和修改密码的按钮，这时客户可以修改自己的登录密码以保障账号的安全性，防止被人窃取账号，通过updatePassword()实现，同时也可以根据自己的个人信息是否变动做出相应的修改，通过updateUserInfo()实现。

密码修改流程图如下所示。

密码修改界面如下所示。 

用户首页模块 

系统呈现出一种简洁大方的首页：界面简约、鳞次栉比，用户能轻车熟路的使用。出于对系统使用群体广泛的顾虑，应有良好性能的后台。

如下图所示为系统的首页界面。

评论模块

用户可以对剧本资讯、优质店铺做出评论。点击按钮之后会跳转至评论填写页面，填写评论提交之后，后台通过PinglunController的publish方法将相关信息保存到数据库系统。

评论添加流程图如下图所示。

评论添加界面如下图所示。

剧本资讯模块

用户查看剧本资讯，可以进行查询相应的剧本资讯信息操作。查找剧本资讯时，输入需要查找的剧本资讯名，调用getData方法获取所有数据并且进行分页，把获取到的所有数据显示到视图上，这时候只需要用脚本方法便能快速查找，不涉及对数据库操作。

剧本资讯展示界面如图所示。

购买信息模块

用户添加剧本购买信息，在Goumai_list查看购买信息，点击新增，跳转至Goumai_add.Java，添加购买信息记录则将添加的购买信息记录数据封装在HashMap中，然后调用CommDAO的insert方法将购买信息记录内容插入购买信息记录表中。

剧本信息详情界面如图所示。

购买信息提交界面如图所示。

玩家拼团管理模块

添加玩家拼团时，输入必填字段后，表现层的WanjiapintuanController接受传过来的玩家拼团参数，再调用WanjiapintuanController类的addWanjiapintuan方法，经过WanjiapintuanService业务层到WanjiapintuanMapper持久层的处理，完成对整个添加玩家拼团的操作。addWanjiapintuan方法也和用户管理中的addUser方法类似，同时做添加和修改工作。

修改玩家拼团时，选择需要修改的玩家拼团进行修改，调用WanjiapintuanController控制器的editWanjiapintuan方法，拿到该产品原本的信息并显示到页面，管理员再对需要修改的玩家拼团字段进行修改，完成后调用addWanjiapintuan方法，调用业务层的updateByKey方法，更新数据库的玩家拼团表的数据。

玩家拼团管理流程图如下所示。

玩家拼团添加界面如下图所示。

管理员子系统模块的实现

用户管理模块

管理员在yhzhgl查看用户信息，先使用sql语句查询出所有用户表的数据，然后调用mysql_query($sql)，返回一个数组对象，在for循环里，将数据放入页面模板中，添加用户则将添加的用户数据封装在sql语句，中然后调用mysql_query($sql)方法将用户内容插入用户表中。

用户管理界面如下图所示。

公告信息模块

公告信息添加过程中，首先使用getmap(id,"xinxi")，通过公告信息ID得到公告信息数据，将公告信息数据赋值给公告信息管理，调用CommDAO的insert方法将公告数据插入公告信息表中，最后查看个人历史公告信息记录，可以销毁历史公告信息数据。

公告信息添加流程图如下所示。

公告信息添加界面如图所示。

公告信息管理界面如图所示。

剧本资讯模块 

剧本资讯信息添加过程中。首先使用getmap(id,"xinxi")，通过剧本资讯ID得到剧本资讯信息数据，将剧本资讯数据赋值给剧本资讯管理，调用CommDAO的insert方法将剧本资讯数据插入剧本资讯信息表中，最后查看个人历史剧本资讯信息记录，可以销毁历史剧本资讯信息数据。

剧本资讯添加流程图如下图所示。

剧本资讯添加界面如下图所示。

剧本资讯管理界面如图所示。

优质店铺模块

管理员点击左侧菜单“优质店铺”，页面跳转到优质店铺外观，调用后台查询所有优质店铺信息，显示优质店铺列表。并将信息密封到数据集合List，绑定到请求对象，然后页面跳转到相应的vue，显示出优质店铺信息，单击删除按钮完成优质店铺的删除。

优质店铺添加界面如下图所示。

剧本信息管理模块

如果剧本数据的信息需要修改，管理员可以通过查询剧本数据的基本信息来查询剧本数据，查询剧本数据是通过ajax技术来进行查询的，需要传递剧本数据的标题、编号等参数然后在返回到该页面中,可以选中要修改或删除的那条信息，如果选中了超过一条数据，页面会挑一个窗口提醒只能选择一条数，如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候，后台会根据传过来的id到数据库查询，并将结果返回到修改页面中，可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中，就是说如果提交的数据数据库中存在就修改，否则就保存。

剧本信息添加流程图如下所示。

 剧本信息添加界面如下图所示。

剧本信息管理界面如下图所示。 

剧本拼团管理模块

添加剧本拼团时，输入必填字段后，表现层的JubenpintuanController接受传过来的剧本拼团参数，再调用JubenpintuanController类的addJubenpintuan方法，经过JubenpintuanService业务层到JubenpintuanMapper持久层的处理，完成对整个添加剧本拼团的操作。addJubenpintuan方法也和用户管理中的addUser方法类似，同时做添加和修改工作。

修改剧本拼团时，选择需要修改的剧本拼团进行修改，调用JubenpintuanController控制器的editJubenpintuan方法，拿到该产品原本的信息并显示到页面，管理员再对需要修改的剧本拼团字段进行修改，完成后调用addJubenpintuan方法，调用业务层的updateByKey方法，更新数据库的剧本拼团表的数据。

剧本拼团添加界面如下图所示。

五、总结与展望 

通过剧本杀服务平台的开发，本人巩固了之前学过的知识，如今将平时所学到的知识融合在设计中，在设计过程中，做了很多的准备，首先，在数据库系统的设计过程中，尤其是在数据库的工作原理、工作特点，对其深刻的讨论，与此同时，对于小型站点来说，最好服务器的选择，其次，利用所学的知识点分析所做的系统，并在此基础上设计。

目前本系统已经上线，正在试运行阶段，用户反馈良好，基本完成用户所需，试运行过程中没有出现阻断性问题，有一些不足和小问题也及时予以修正，系统上线后，为了保证数据的安全性，对系统进行了备份操作，系统备份是每两个月备份一次，数据库备份为每周备份一次，系统部署在租赁的云平台服务器中。

本次系统上线成功后，得到了用户的高度认可，但是在功能上和性能上还需做进一步的研究处理，使其有更高的性能和更好的用户体验。

系统在以后的升级过程中，需要解决一系列用户所提出的问题，例如打印过程中如何避免浏览器的兼容性问题，大量用户访问时，如何保持较高的响应速度，在系统今后的升级过程中将着重解决这些安全性问题。

 gitCode源码入口https://gitcode.com/yuanmadd/ymgg/blob/main/README.md?init=initTree​​​​​​​