在线课堂|基于Springboot+Vue实现在线学习平台

简介: 本项目基于Springboot和Vue开发实现了一个大学生在线课程学习平台。平台用户有三类:学生、教师、管理员。学生注册登录后可以查看相关课堂,在线播放课程视频进行学习,并可以购买课程,完成课程交易,对课程进行评价,添加学习记录进行记录,在线咨询留言等。教师账户由管理员分配,登录后可以添加课程,添加课程对应的学习视频,查询课程评价并进行回复,查看学生的学习记录,回复学生咨询信息等。管理员主要对平台的所有信息进行相应的管理,包含学生管理、教师管理、课程管理、分类管理、视频管理、咨询管理、学习记录管理、轮播图管理、友情链接管理等,并包含了课程销售的图形报表统计,采用Echart来进行实现。具体见下

 作者主页:编程指南针

作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师

主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助

收藏点赞不迷路  关注作者有好处

文末获取源码

项目编号:BS-GX-068

一,环境介绍

语言环境:Java:  jdk1.8

数据库:Mysql: mysql5.7

应用服务器:Tomcat:  tomcat8.5.31

开发工具:IDEA或eclipse

开发技术:Springboot+Vue

二,项目简介

本项目基于Springboot+Vue开发实现了一个大学生在线课程学习平台。平台用户有三类:学生、教师、管理员。学生注册登录后可以查看相关课堂,在线播放课程视频进行学习,并可以购买课程,完成课程交易,对课程进行评价,添加学习记录进行记录,在线咨询留言等。教师账户由管理员分配,登录后可以添加课程,添加课程对应的学习视频,查询课程评价并进行回复,查看学生的学习记录,回复学生咨询信息等。管理员主要对平台的所有信息进行相应的管理,包含学生管理、教师管理、课程管理、分类管理、视频管理、咨询管理、学习记录管理、轮播图管理、友情链接管理等,并包含了课程销售的图形报表统计,采用Echart来进行实现。具体见下面功能实现展示。

三,系统展示

系统首页

image.gif编辑

学生注册

image.gif编辑

用户登录

image.gif编辑

课程购买与收藏

image.gif编辑

课程评价

image.gif编辑

在线学习

image.gif编辑

在线咨询

image.gif编辑

个人中心

image.gif编辑

image.gif编辑

image.gif编辑

教师登录系统

课程信息管理

image.gif编辑

image.gif编辑

添加课程视频

image.gif编辑

课程购买记录

image.gif编辑

课程学习查询

image.gif编辑

个人资料修改

image.gif编辑

管理员登录

image.gif编辑

课程信息管理

image.gif编辑

课程购买统计

image.gif编辑

系统管理

image.gif编辑

四,核心代码展示

package com.spring.controller;
import com.jntoo.db.*;
import com.jntoo.db.utils.*;
import com.spring.dao.*;
import com.spring.entity.*;
import com.spring.service.*;
import com.spring.util.*;
import com.spring.util.Info;
import java.util.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import tk.mybatis.mapper.entity.Example;
/**
 * 教师 */
@Controller
public class JiaoshiController extends BaseController {
    @Autowired
    private JiaoshiMapper dao;
    @Autowired
    private JiaoshiService service;
    /**
     *  后台列表页
     *
     */
    @RequestMapping("/jiaoshi_list")
    public String list() {
        // 检测是否有登录,没登录则跳转到登录页面
        if (!checkLogin()) {
            return showError("尚未登录", "./login.do");
        }
        String order = Request.get("order", "id"); // 获取前台提交的URL参数 order  如果没有则设置为id
        String sort = Request.get("sort", "desc"); // 获取前台提交的URL参数 sort  如果没有则设置为desc
        int pagesize = Request.getInt("pagesize", 12); // 获取前台一页多少行数据
        Example example = new Example(Jiaoshi.class); //  创建一个扩展搜索类
        Example.Criteria criteria = example.createCriteria(); // 创建一个扩展搜索条件类
        String where = " 1=1 "; // 创建初始条件为:1=1
        where += getWhere(); // 从方法中获取url 上的参数,并写成 sql条件语句
        criteria.andCondition(where); // 将条件写进上面的扩展条件类中
        if (sort.equals("desc")) { // 判断前台提交的sort 参数是否等于  desc倒序  是则使用倒序,否则使用正序
            example.orderBy(order).desc(); // 把sql 语句设置成倒序
        } else {
            example.orderBy(order).asc(); // 把 sql 设置成正序
        }
        int page = request.getParameter("page") == null ? 1 : Integer.valueOf(request.getParameter("page")); // 获取前台提交的URL参数 page  如果没有则设置为1
        page = Math.max(1, page); // 取两个数的最大值,防止page 小于1
        List<Jiaoshi> list = service.selectPageExample(example, page, pagesize); // 获取当前页的行数
        // 将列表写给界面使用
        assign("totalCount", request.getAttribute("totalCount"));
        assign("list", list);
        assign("orderby", order); // 把当前排序结果写进前台
        assign("sort", sort); // 把当前排序结果写进前台
        return json(); // 将数据写给前端
    }
    public String getWhere() {
        _var = new LinkedHashMap(); // 重置数据
        String where = " ";
        // 以下也是一样的操作,判断是否符合条件,符合则写入sql 语句
        if (!Request.get("gonghao").equals("")) {
            where += " AND gonghao LIKE '%" + Request.get("gonghao") + "%' ";
        }
        return where;
    }
    @RequestMapping("/jiaoshi_add")
    public String add() {
        _var = new LinkedHashMap(); // 重置数据
        return json(); // 将数据写给前端
    }
    @RequestMapping("/jiaoshi_updt")
    public String updt() {
        _var = new LinkedHashMap(); // 重置数据
        int id = Request.getInt("id");
        // 获取行数据,并赋值给前台jsp页面
        Jiaoshi mmm = service.find(id);
        assign("mmm", mmm);
        assign("updtself", 0);
        return json(); // 将数据写给前端
    }
    @RequestMapping("/jiaoshi_updtself")
    public String updtself() {
        _var = new LinkedHashMap(); // 重置数据
        // 更新个人资料
        int id = (int) request.getSession().getAttribute("id");
        Jiaoshi mmm = service.find(id);
        assign("mmm", mmm);
        assign("updtself", 1);
        return json(); // 将数据写给前端
    }
    /**
     * 添加内容
     * @return
     */
    @RequestMapping("/jiaoshiinsert")
    public String insert() {
        _var = new LinkedHashMap(); // 重置数据
        String tmp = "";
        Jiaoshi post = new Jiaoshi(); // 创建实体类
        // 设置前台提交上来的数据到实体类中
        post.setGonghao(Request.get("gonghao"));
        post.setMima(Request.get("mima"));
        post.setXingming(Request.get("xingming"));
        post.setXingbie(Request.get("xingbie"));
        post.setLianxidianhua(Request.get("lianxidianhua"));
        post.setYouxiang(Request.get("youxiang"));
        post.setTouxiang(Request.get("touxiang"));
        service.insert(post); // 插入数据
        int charuid = post.getId().intValue();
        if (isAjax()) {
            return jsonResult(post);
        }
        return showSuccess("保存成功", Request.get("referer").equals("") ? request.getHeader("referer") : Request.get("referer"));
    }
    /**
     * 更新内容
     * @return
     */
    @RequestMapping("/jiaoshiupdate")
    public String update() {
        _var = new LinkedHashMap(); // 重置数据
        // 创建实体类
        Jiaoshi post = new Jiaoshi();
        // 将前台表单数据填充到实体类
        if (!Request.get("gonghao").equals("")) post.setGonghao(Request.get("gonghao"));
        if (!Request.get("mima").equals("")) post.setMima(Request.get("mima"));
        if (!Request.get("xingming").equals("")) post.setXingming(Request.get("xingming"));
        if (!Request.get("xingbie").equals("")) post.setXingbie(Request.get("xingbie"));
        if (!Request.get("lianxidianhua").equals("")) post.setLianxidianhua(Request.get("lianxidianhua"));
        if (!Request.get("youxiang").equals("")) post.setYouxiang(Request.get("youxiang"));
        if (!Request.get("touxiang").equals("")) post.setTouxiang(Request.get("touxiang"));
        post.setId(Request.getInt("id"));
        service.update(post); // 更新数据
        int charuid = post.getId().intValue();
        if (isAjax()) {
            return jsonResult(post);
        }
        if (Request.getInt("updtself") == 1) {
            return showSuccess("保存成功", "jiaoshi_updtself.do");
        }
        return showSuccess("保存成功", Request.get("referer")); // 弹出保存成功,并跳转到前台提交的 referer 页面
    }
    /**
     *  后台详情
     */
    @RequestMapping("/jiaoshi_detail")
    public String detail() {
        _var = new LinkedHashMap(); // 重置数据
        int id = Request.getInt("id");
        Jiaoshi map = service.find(id); // 根据前台url 参数中的id获取行数据
        assign("map", map); // 把数据写到前台
        return json(); // 将数据写给前端
    }
    /**
     *  删除
     */
    @RequestMapping("/jiaoshi_delete")
    public String delete() {
        _var = new LinkedHashMap(); // 重置数据
        if (!checkLogin()) {
            return showError("尚未登录");
        }
        int id = Request.getInt("id"); // 根据id 删除某行数据
        Map map = Query.make("jiaoshi").find(id);
        service.delete(id); // 根据id 删除某行数据
        return showSuccess("删除成功", request.getHeader("referer")); //弹出删除成功,并跳回上一页
    }
}

image.gif

package com.spring.controller;
import com.jntoo.db.*;
import com.jntoo.db.utils.*;
import com.spring.dao.*;
import com.spring.entity.*;
import com.spring.service.*;
import com.spring.util.*;
import com.spring.util.Info;
import java.util.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import tk.mybatis.mapper.entity.Example;
/**
 * 留言板 */
@Controller
public class LiuyanbanController extends BaseController {
    @Autowired
    private LiuyanbanMapper dao;
    @Autowired
    private LiuyanbanService service;
    /**
     *  后台列表页
     *
     */
    @RequestMapping("/liuyanban_list")
    public String list() {
        // 检测是否有登录,没登录则跳转到登录页面
        if (!checkLogin()) {
            return showError("尚未登录", "./login.do");
        }
        String order = Request.get("order", "id"); // 获取前台提交的URL参数 order  如果没有则设置为id
        String sort = Request.get("sort", "desc"); // 获取前台提交的URL参数 sort  如果没有则设置为desc
        int pagesize = Request.getInt("pagesize", 12); // 获取前台一页多少行数据
        Example example = new Example(Liuyanban.class); //  创建一个扩展搜索类
        Example.Criteria criteria = example.createCriteria(); // 创建一个扩展搜索条件类
        String where = " 1=1 "; // 创建初始条件为:1=1
        where += getWhere(); // 从方法中获取url 上的参数,并写成 sql条件语句
        criteria.andCondition(where); // 将条件写进上面的扩展条件类中
        if (sort.equals("desc")) { // 判断前台提交的sort 参数是否等于  desc倒序  是则使用倒序,否则使用正序
            example.orderBy(order).desc(); // 把sql 语句设置成倒序
        } else {
            example.orderBy(order).asc(); // 把 sql 设置成正序
        }
        int page = request.getParameter("page") == null ? 1 : Integer.valueOf(request.getParameter("page")); // 获取前台提交的URL参数 page  如果没有则设置为1
        page = Math.max(1, page); // 取两个数的最大值,防止page 小于1
        List<Liuyanban> list = service.selectPageExample(example, page, pagesize); // 获取当前页的行数
        // 将列表写给界面使用
        assign("totalCount", request.getAttribute("totalCount"));
        assign("list", list);
        assign("orderby", order); // 把当前排序结果写进前台
        assign("sort", sort); // 把当前排序结果写进前台
        return json(); // 将数据写给前端
    }
    public String getWhere() {
        _var = new LinkedHashMap(); // 重置数据
        String where = " ";
        // 以下也是一样的操作,判断是否符合条件,符合则写入sql 语句
        return where;
    }
    /**
     * 留言人列表
     */
    @RequestMapping("/liuyanban_list_liuyanren")
    public String listliuyanren() {
        // 检测是否有登录,没登录则跳转到登录页面
        if (!checkLogin()) {
            return showError("尚未登录", "./login.do");
        }
        String order = Request.get("order", "id"); // 获取前台提交的URL参数 order  如果没有则设置为id
        String sort = Request.get("sort", "desc"); // 获取前台提交的URL参数 sort  如果没有则设置为desc
        int pagesize = Request.getInt("pagesize", 12); // 获取前台一页多少行数据
        Example example = new Example(Liuyanban.class); //  创建一个扩展搜索类
        Example.Criteria criteria = example.createCriteria(); // 创建一个扩展搜索条件类
        // 初始化一个条件,条件为:留言人=当前登录用户
        String where = " liuyanren='" + request.getSession().getAttribute("username") + "' ";
        where += getWhere();
        criteria.andCondition(where); // 将条件写入
        if (sort.equals("desc")) { // 注释同list
            example.orderBy(order).desc(); // 注释同list
        } else {
            example.orderBy(order).asc(); // 注释同list
        }
        int page = request.getParameter("page") == null ? 1 : Integer.valueOf(request.getParameter("page")); // 注释同list
        page = Math.max(1, page); // 注释同list
        List<Liuyanban> list = service.selectPageExample(example, page, pagesize);
        assign("totalCount", request.getAttribute("totalCount"));
        assign("list", list);
        assign("orderby", order);
        assign("sort", sort);
        return json(); // 将数据写给前端
    }
    @RequestMapping("/liuyanban_add")
    public String add() {
        _var = new LinkedHashMap(); // 重置数据
        return json(); // 将数据写给前端
    }
    @RequestMapping("/liuyanban_updt")
    public String updt() {
        _var = new LinkedHashMap(); // 重置数据
        int id = Request.getInt("id");
        // 获取行数据,并赋值给前台jsp页面
        Liuyanban mmm = service.find(id);
        assign("mmm", mmm);
        assign("updtself", 0);
        return json(); // 将数据写给前端
    }
    /**
     * 添加内容
     * @return
     */
    @RequestMapping("/liuyanbaninsert")
    public String insert() {
        _var = new LinkedHashMap(); // 重置数据
        String tmp = "";
        Liuyanban post = new Liuyanban(); // 创建实体类
        // 设置前台提交上来的数据到实体类中
        post.setXingming(Request.get("xingming"));
        post.setLianxidianhua(Request.get("lianxidianhua"));
        post.setLiuyanneirong(Request.get("liuyanneirong"));
        post.setLiuyanren(Request.get("liuyanren"));
        post.setZhuangtai(Request.get("zhuangtai"));
        post.setHuifuneirong(Request.get("huifuneirong"));
        service.insert(post); // 插入数据
        int charuid = post.getId().intValue();
        if (isAjax()) {
            return jsonResult(post);
        }
        return showSuccess("保存成功", Request.get("referer").equals("") ? request.getHeader("referer") : Request.get("referer"));
    }
    /**
     * 更新内容
     * @return
     */
    @RequestMapping("/liuyanbanupdate")
    public String update() {
        _var = new LinkedHashMap(); // 重置数据
        // 创建实体类
        Liuyanban post = new Liuyanban();
        // 将前台表单数据填充到实体类
        if (!Request.get("xingming").equals("")) post.setXingming(Request.get("xingming"));
        if (!Request.get("lianxidianhua").equals("")) post.setLianxidianhua(Request.get("lianxidianhua"));
        if (!Request.get("liuyanneirong").equals("")) post.setLiuyanneirong(Request.get("liuyanneirong"));
        if (!Request.get("liuyanren").equals("")) post.setLiuyanren(Request.get("liuyanren"));
        if (!Request.get("zhuangtai").equals("")) post.setZhuangtai(Request.get("zhuangtai"));
        if (!Request.get("huifuneirong").equals("")) post.setHuifuneirong(Request.get("huifuneirong"));
        post.setId(Request.getInt("id"));
        service.update(post); // 更新数据
        int charuid = post.getId().intValue();
        Query.execute("update liuyanban set zhuangtai='已回复' where id='" + charuid + "'");
        if (isAjax()) {
            return jsonResult(post);
        }
        return showSuccess("保存成功", Request.get("referer")); // 弹出保存成功,并跳转到前台提交的 referer 页面
    }
    /**
     *  删除
     */
    @RequestMapping("/liuyanban_delete")
    public String delete() {
        _var = new LinkedHashMap(); // 重置数据
        if (!checkLogin()) {
            return showError("尚未登录");
        }
        int id = Request.getInt("id"); // 根据id 删除某行数据
        Map map = Query.make("liuyanban").find(id);
        service.delete(id); // 根据id 删除某行数据
        return showSuccess("删除成功", request.getHeader("referer")); //弹出删除成功,并跳回上一页
    }
}

image.gif

五,相关作品展示

基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的实战项目

基于Nodejs、Vue等前端技术开发的前端实战项目

基于微信小程序和安卓APP应用开发的相关作品

基于51单片机等嵌入式物联网开发应用

基于各类算法实现的AI智能应用

基于大数据实现的各类数据管理和推荐系统

image.gif编辑

image.gif编辑image.gif编辑

image.gif编辑

image.gif编辑image.gif编辑

image.gif编辑

image.gif编辑


相关文章
|
3天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统,基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化,提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合,但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI,既能利用Vue的快速开发优势,
32 13
|
10天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码,采用SpringBoot、Vue、MySQL技术开发
基于B/S架构,采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统,适用于三甲医院,支持二次开发。该系统能自动监测全院患者药物不良反应,通过移动端和PC端实时反馈,提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块,确保精准、高效地处理ADR事件。
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个前后端分离的应用框架,实现动态路由和菜单功能。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,帮助开发者提高开发效率和应用的可维护性。
69 2
|
1月前
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
40 0
|
2月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能,快速搭建前后端分离的应用框架。首先,确保开发环境已安装必要的工具,然后创建并配置 Spring Boot 项目,包括添加依赖和配置 Spring Security。接着,创建后端 API 和前端项目,配置动态路由和菜单。最后,运行项目并分享实践心得,包括版本兼容性、安全性、性能调优等方面。
172 1
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的服装商城管理系统
基于Java+Springboot+Vue开发的服装商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的服装商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
176 2
基于Java+Springboot+Vue开发的服装商城管理系统
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
277 1
|
1月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 构建一个具有动态路由和菜单功能的前后端分离应用。首先,创建并配置 Spring Boot 项目,实现后端 API;然后,使用 Ant Design Pro Vue 创建前端项目,配置动态路由和菜单。通过具体案例,展示了如何快速搭建高效、易维护的项目框架。
111 62
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
232 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统