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所示。
活動統計功能功能模塊具體的核心代碼如下：
<!--?圖表區域?--> ? ? ? ? <el-row :gutter="20" class="chart-row"> ? ? ? ? ? ? <el-col :span="12"> ? ? ? ? ? ? ? ? <el-card> ? ? ? ? ? ? ? ? ? ? <div class="chart-title">活動類型分布</div> ? ? ? ? ? ? ? ? ? ? <div class="chart" id="typeChart"></div> ? ? ? ? ? ? ? ? </el-card> ? ? ? ? ? ? </el-col> ? ? ? ? ? ? <el-col :span="12"> ? ? ? ? ? ? ? ? <el-card> ? ? ? ? ? ? ? ? ? ? <div class="chart-title">活動評分分布</div> ? ? ? ? ? ? ? ? ? ? <div class="chart" id="scoreChart"></div> ? ? ? ? ? ? ? ? </el-card> ? ? ? ? ? ? </el-col> ? ? ? ? </el-row> |
2.5我的預約功能實現
2.6手工課程功能實現
2.7我的收藏功能實現
2.8預約設置管理功能實現
2.9 預約統計功能實現
2.10?視頻課程管理功能實現
2.11?課程統計功能實現
三.系統結構截圖
1.后端
2.前端
3.數據庫
)
)
