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

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所示。

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

List<AppointSetting> AppointSettings = AppointSettingMapper.selectList(Wrappers

.<AppointSetting>lambdaQuery().eq(AppointSetting::getActivityId, input.getActivityId()));

// 判断items在数据库中是否存在开始时间和结束时间之间的交集数据

for (AppointSetting item : AppointSettings) {

if (item.getId() != input.getId()) {

if (!(input.getEndTime().isBefore(item.getBeginTime())

|| input.getBeginTime().isAfter(item.getEndTime()))) {

throw new CustomException("时间段发生冲突");

}

2.4活动统计功能的实现

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