基于springboot2+vue2的线上辅导班系统

1. Base64 编码

解锁技能，猴子打野出装需 5 大米，才能真正驾驭"猴三棒"的暴力美学

鞋子/小野刀/贪婪之噬/暗影战斧/泣血之刃/名刀·司命

铭文组合为8夺萃、1狩猎、1兽痕、5祸源、5无双、10鹰眼

必备技能：Base64 编码解码

2. 项目简介

线上辅导班系统分为用户前端和管理员后端两大模块。

用户端：学员可以浏览公开课、查看课程详情、报名课程、收藏课程、参与论坛讨论、对课程进行留言等。
管理端：管理员可以对系统的各项基础数据、课程、师资、用户、论坛等进行全面的管理和维护。

系统旨在为用户提供一个便捷的线上学习与交流平台。

3. 技术栈

项目采用前后端分离的架构模式。

后端技术栈 ：
- 核心框架：Spring Boot 2.2.2.RELEASE
- 持久层框架：MyBatis-Plus 2.3
- 数据库：MySQL 5.7
- 权限控制：Apache Shiro 1.3.2（用于身份验证与授权）
- 工具库：Hutool、Fastjson、Commons Lang3等
前端技术栈 ：
- 管理端：Vue 2.x + Element UI
- 用户端：Layui + jQuery + Vue.js
开发环境 ：
- Java版本：JDK 1.8
- 构建工具：Maven

4. 详细介绍

系统功能结构清晰，主要围绕课程、公开课、师资和论坛等核心业务展开。

4.1 功能结构

系统主要分为用户端和管理端两大核心模块。

用户端（学员）：
- 注册与登录：支持用户注册和登录。
- 首页展示：展示轮播图、公开课、师资力量、课程等信息。
- 公开课：查看和播放免费的公开课视频。
- 课程管理：浏览课程列表，按条件筛选，查看课程详情。可以进行课程报名和收藏。
- 师资力量：浏览教师信息。
- 论坛交流：用户可以发布帖子、回复帖子，进行学习交流。
- 个人中心：维护个人信息、查看课程收藏列表。
管理端（管理员）：
- 基础数据管理：管理公开课类型、课程类型等字典数据。
- 论坛管理：管理和审核用户发布的论坛帖子。
- 公开课管理：对公开课信息进行增删改查。
- 课程管理：对课程信息进行增删改查，处理课程报名申请，管理课程留言和收藏。
- 师资力量管理：管理教师信息。
- 用户管理：管理和维护平台注册用户。
- 轮播图管理：维护首页轮播图信息。

4.2 数据库设计

表名	描述	核心字段
`yonghu`	用户表	`username` (账户), `password` (密码), `yonghu_name` (姓名), `yonghu_phone` (手机号)
`kecheng`	课程表	`kecheng_name` (课程名), `kecheng_types` (课程类型), `kecheng_laoshi` (上课老师), `shangxia_types` (上架状态)
`gongkaike`	公开课表	`gongkaike_name` (名称), `gongkaike_video` (视频地址), `gongkaike_types` (公开课类型)
`shizililiang`	师资力量表	`shizililiang_name` (老师姓名), `shanchangkecheng` (擅长课程), `shizililiang_photo` (头像)
`forum`	论坛表	`forum_name` (帖子标题), `forum_content` (内容), `yonghu_id`/`users_id` (发布人)
`kecheng_baoming`	课程报名表	`kecheng_id` (课程ID), `yonghu_id` (用户ID), `kecheng_baoming_yesno_types` (状态)
`kecheng_collection`	课程收藏表	`kecheng_id` (课程ID), `yonghu_id` (用户ID), `kecheng_collection_types` (类型)
`dictionary`	数据字典表	`dic_code` (字典编码), `code_index` (编码值), `index_name` (编码名称)

5. 部分代码

5.1 后端登录验证逻辑

com/controller/YonghuController.java 中的用户登录接口，负责验证用户名和密码并生成Token。

java 复制代码

/**
* 登录
*/
@IgnoreAuth
@RequestMapping(value = "/login")
public R login(String username, String password, String captcha, HttpServletRequest request) {
    YonghuEntity yonghu = yonghuService.selectOne(new EntityWrapper<YonghuEntity>().eq("username", username));
    if(yonghu==null || !yonghu.getPassword().equals(password))
        return R.error("账号或密码不正确");
    String token = tokenService.generateToken(yonghu.getId(),username, "yonghu", "用户");
    R r = R.ok();
    r.put("token", token);
    r.put("role","用户");
    r.put("username",yonghu.getYonghuName());
    r.put("tableName","yonghu");
    r.put("userId",yonghu.getId());
    return r;
}

5.2 前端课程报名功能

front/front/pages/kecheng/detail.html 中用户点击"立即报名课程"的Vue方法，向后端提交报名请求。

javascript 复制代码

lijiluyue() {
    let data ={
        kechengId:this.detail.id,
        yonghuId:localStorage.getItem("userid"),
        kechengBaomingYesnoTypes:1,
        kechengBaomingUuidNumber: new Date().getTime(),
    }
    layui.http.requestJson('kechengBaoming/add', 'post', data, function (res) {
        if(res.code ==0){
            layer.msg('报名成功,等待审核', {
                time: 2000,
                icon: 6
            }, function () {
            });
        }else{
            layer.msg(res.msg, {
                time: 3000,
                icon: 5
            }, function () {
            });
        }
    });
},

5.3 后端课程报名业务逻辑

com/controller/KechengBaomingController.java 中的报名接口，包含防重复报名的校验。

java 复制代码

/**
* 前端保存
*/
@RequestMapping("/add")
public R add(@RequestBody KechengBaomingEntity kechengBaoming, HttpServletRequest request){
    logger.debug("add方法:,,Controller:{},,kechengBaoming:{}",this.getClass().getName(),kechengBaoming.toString());
    Wrapper<KechengBaomingEntity> queryWrapper = new EntityWrapper<KechengBaomingEntity>()
            .eq("kecheng_id", kechengBaoming.getKechengId())
            .eq("yonghu_id", kechengBaoming.getYonghuId())
            ;
    logger.info("sql语句:"+queryWrapper.getSqlSegment());
    KechengBaomingEntity kechengBaomingEntity = kechengBaomingService.selectOne(queryWrapper);
    if(kechengBaomingEntity==null){
        kechengBaoming.setKechengBaomingYesnoTypes(1);
        kechengBaoming.setInsertTime(new Date());
        kechengBaoming.setCreateTime(new Date());
        kechengBaomingService.insert(kechengBaoming);
        return R.ok();
    }else {
        return R.error(511,"您已经报名过此课程了,请等待审核");
    }
}

5.4 前端课程收藏功能

front/front/pages/kecheng/detail.html 中用户点击收藏/取消收藏的Vue方法。

javascript 复制代码

// 收藏商品
addKechengCollection() {
    let _this = this;
    layui.http.request('kechengCollection/list', 'get', {
        page: 1,
        limit: 1,
        kechengId: _this.detail.id,
        kechengCollectionTypes: 1,
        yonghuId: localStorage.getItem('userid'),
    }, (res) => {
        if (res.data.list.length == 1) {
            layui.http.requestJson('kechengCollection/delete', 'post', [res.data.list[0].id], function (res) {
                layui.layer.msg('取消成功', {
                    time: 1000,
                    icon: 5
                }, function () {
                    window.location.reload();
                });
            });
            return false;
        }
        layui.http.requestJson('kechengCollection/add', 'post', {
            yonghuId: localStorage.getItem('userid'),
            kechengId: _this.detail.id,
            kechengCollectionTypes: 1,
        }, function (res) {
            layui.layer.msg('收藏成功', {
                time: 1000,
                icon: 6
            }, function () {
                window.location.reload();
            });
        });
    });
},

6. 部分截图

Copy the following content and use base64 decoding to obtain the source code and files.

5aSN5Yi25omT5byA6I635Y+W5rqQ5Luj56CB77yaaHR0cHM6Ly9maWZ0ZWVuLnhpYW9iaWFzLmNvbS9zb3VyY2UvMTg4

7. 项目总结

该"线上辅导班系统"是一个结构清晰、功能较为完整的Web应用项目。

完整性：项目涵盖了在线学习平台的核心业务流程，从课程浏览、报名、学习到社区交流，形成了一个完整的闭环。前后台分离的设计使得系统职责明确。
规范性：项目代码结构清晰，后端遵循了标准的Controller-Service-Dao三层架构，前端也合理地分离了页面、样式和脚本。使用数据字典管理状态字段，提高了系统的可维护性。
用户友好：系统为不同角色（管理员、普通用户）提供了独立的操作界面和权限，用户端功能丰富，管理端功能强大，符合实际业务场景需求。
扩展性 ：基于Spring Boot和Vue等成熟主流技术栈，数据库设计也预留了扩展空间（如dictionary表），为后续功能的增加和维护奠定了良好的基础。