基于Spring Boot+Vue的DIY手工社预约管理系统（Echarts图形化、腾讯地图API）

2.10 视频课程管理功能实现2.11手工互动（视频弹幕）

2.8预约设置管理功能实现🎈系统亮点：Echarts图形化、腾讯地图API；

文档包含功能结构图、** 系统架构图**、用例图、实体属性图、E-R图。

一.系统开发工具与环境搭建

1.系统设计开发工具

后端使用Java编程语言的Spring boot框架

项目架构：B/S架构

运行环境：win10/win11、jdk17

前端：

技术：框架Vue.js；UI库：ElementUI；

开发工具：Visual Studio Code；

后端:

技术：Java语言、mybatis plus、Spring boot框架；

开发工具：IDEA 2023.3.3版本；

数据库：

数据库：mysql5.7/8.0

数据库工具：Navicat12版本；

二.系统实现（部分截图）

2.1登录注册功能的实现

2.1.1注册功能的实现

用户注册账号，输入账号，密码，邮箱，联系方式，姓名，并输入图形验证码，进行注册。注册成功后，角色默认是用户角色。前端会跳转界面到登录界面，进行登录系统，操作系统。注册功能页面图如图5-1所示。

注册功能模块具体的核心代码如下：

|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| //检查用户名是否存在 Long userCount = AppUserMpper.selectCount(Wrappers.<AppUser>lambdaQuery() .eq(Extension.isNotNullOrEmpty(input.getUserName()),AppUser::getUserName, input.getUserName())); if (userCount > 0) { throw new CustomException("该用户名已经存在!"); } //检查邮箱是否存在 Long emailCount = AppUserMpper.selectCount(Wrappers.<AppUser>lambdaQuery() .eq(Extension.isNotNullOrEmpty(input.getUserName()),AppUser::getEmail, input.getEmail())); if (emailCount > 0) { throw new CustomException("该邮箱已经存在!"); } //检查手机号是否存在 Long phoneCount = AppUserMpper.selectCount(Wrappers.<AppUser>lambdaQuery() .eq(Extension.isNotNullOrEmpty(input.getPhoneNumber()), AppUser::getPhoneNumber, input.getPhoneNumber())); if (phoneCount > 0) { throw new CustomException("该手机号已经存在!"); } return CreateOrEdit(input); |

2.1.2登录功能的实现

用户登录系统，输入已注册的账号、密码进行登录，选择自己的角色身份进行登录，并输入图形验证码进行登录。登录成功后，进入系统首页界面。登录功能页面图如图5-2所示。

登录功能模块具体的核心代码如下：

|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| LambdaQueryWrapper<AppUser> queryWrapper = Wrappers.<AppUser>lambdaQuery() .eq(Extension.isNotNullOrEmpty(input.getUserName()),AppUser::getUserName, input.getUserName()).eq(Extension.isNotNullOrEmpty(input.getPassword()),AppUser::getPassword, input.getPassword()).eq(input.getRoleType() != null, AppUser::getRoleType, input.getRoleType()); List<AppUser> items = AppUserMpper.selectList(queryWrapper); if (items.stream().count() == 0) { throw new CustomException("请检查登录的账号或者密码,角色是否都正确!"); } Map<String, String> map = new HashMap<>(); map.put(SysConst.UserIdClaim, items.get(0).getId().toString()); map.put(SysConst.RoleTypeClaim, items.get(0).getRoleType().toString()); String token = JWTUtils.getToken(map); return token; |

2.2活动信息功能的实现

用户进入系统首页，可以通过活动类型筛选活动信息。活动列表采用卡片方式展示，能让用户一目了然地获取每个活动的关键信息。包含展示活动的创建时间，浏览次数，预约次数，评价量以及活动地址等信息。活动列表功能页面图如图5-3所示。

管理员可以进行管理活动列表信息，管理员可根据实际业务需求，添加新的活动信息，包含活动分类，活动标题，活动封面，活动的具体位置，活动内容等信息。若已有的活动信息发生变更，活动时间调整、地点更改或者活动内容更新等，及时进行调整。当活动不再运营时，管理员要删除活动信息。活动管理功能页面图如图5-4所示。

活动信息功能模块具体的核心代码如下：

|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| // 按创建时间从大到小排序最新的显示在最前面 queryWrapper = queryWrapper.orderByDesc(Activity::getCreationTime); // 构建一个分页查询的model Page<Activity> page = new Page<>(input.getPage(), input.getLimit()); // 从数据库进行分页查询获取活动数据 IPage<Activity> pageRecords = ActivityMapper.selectPage(page, queryWrapper); // 获取所有满足条件的数据行数 Long totalCount = ActivityMapper.selectCount(queryWrapper); // 把Activity实体转换成Activity传输模型 List<ActivityDto> items = Extension.copyBeanList(pageRecords.getRecords(), ActivityDto.class); DispatchItem(items); // 返回一个分页结构给前端 return PagedResult.GetInstance(items, totalCount); |

2.3活动预约功能的实现

用户查看活动列表，对于吸引到自己的活动信息，用户只需点击，便能进入该活动的详情界面。查看活动可以预约的时间，用户可根据自己的需求进行预约，填写手机号和姓名进行预约。预约成功后，用户可在"我的预约"界面进行查看。活动预约功能页面图如图5-5所示。

管理员能够依据活动筹备情况进行设置活动基本配置。包含活动的开始时间段，结束时间段以及有效时间。当活动时间有所变动，管理员要及时的进行更新，防止用户跑空。对于不再开展的时间段，管理员要进行删除。活动预约配置功能界面图5-6所示。

活动预约配置功能模块具体的核心代码如下：

2.4活动统计功能的实现

系统通过Echarts进行设计了一个活动相关的数据图形化分析界面，通过环形图展示不同类型活动的占比情况。帮助管理员了解各类活动的数量占比情况。以饼图呈现活动评分的分布状况，可以了解到哪些活动最受人们的喜爱。用折线图展示近7天的活动预约情况。横轴是日期，纵轴是预约量，折线反映预约量随时间的变化趋势。活动统计功能页面图如图5-7所示。