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

1. 资源

浏览全文可获取

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 数据库设计

5. 部分代码

5.1 后端登录验证逻辑

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

/**
* 登录
*/
@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方法，向后端提交报名请求。

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 中的报名接口，包含防重复报名的校验。

/**
* 前端保存
*/
@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方法。

// 收藏商品
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. 部分截图

7. 项目总结

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

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

资源获取：https://fifteen.xiaobias.com/source/188