在线教育day7

最新推荐文章于 2024-07-25 22:33:38 发布
最新推荐文章于 2024-07-25 22:33:38 发布
阅读量209 收藏
点赞数
分类专栏： springboot 文章标签： spring boot
转载请注明出处
本文链接：https://blog.csdn.net/weixin_42096624/article/details/107574771
版权

任务：

  • 添加课程前端实现

  • 课程分类列表显示(树形)

  • 课程管理模块需求

  • 添加课程基本信息功能

1. 课程分类管理实现

  1. 修改路由；
    在这里插入图片描述

  2. 添加路由对应的vue页面；

    save.vue页面进行文件上传：将excel文件上传到数据库中。 用到element-ui上传组件。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  3. 测试
    在这里插入图片描述在这里插入图片描述

2. 课程列表功能(树形显示)

2.2 前端

  1. 添加路由
  2. subject.js调用后端接口
    在这里插入图片描述
  3. list.vue
<template>
  <div class="app-container">
    <el-input v-model="filterText" placeholder="Filter keyword" style="margin-bottom:30px;" />

    <el-tree
      ref="tree2"
      :data="data2"
      :props="defaultProps"
      :filter-node-method="filterNode"
      class="filter-tree"
      default-expand-all
    />

  </div>
</template>

<script>
import subject from '@/api/edu/subject'
export default {

  data() {
    return {
      filterText: '',
      data2: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },

  created(){
    this.getAllSubjectList()
  },

  methods: {
    getAllSubjectList() {
        subject.getSubjectList()
               .then(response => {
                 this.data2 = response.data.list
               })
               .error(error => {

               })
    },

    filterNode(value, data) {
      if (!value) return true
      return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
    }
  }
}
</script>

重要代码：
在这里插入图片描述
在这里插入图片描述

这里复制的时候，把watch方法复制到methods里面去了，导致界面出现问题，排查浪费了不少时间

2.1 后端

要点在于返回特定格式数据。

  1. 建立2个实体类：分别表示一级分类和二级分类
    在这里插入图片描述
    在这里插入图片描述
  2. 建立2个实体类的关系
    在这里插入图片描述
    3. controller
    在这里插入图片描述
    4. ServiceImpl(重点)
@Service
public class EduSubjectServiceImpl extends ServiceImpl<EduSubjectMapper, EduSubject> implements EduSubjectService {

    //添加课程分类
    @Override
    public void saveSubject(MultipartFile file, EduSubjectService eduSubjectService) {
        try{
            //得到文件的输入流
            InputStream in = file.getInputStream();
            //调用方法进行读取
            EasyExcel.read(in, SubjectData.class, new SubjectExcelListener(eduSubjectService)).sheet().doRead();

        }catch (Exception e){
            e.printStackTrace();
        }
    }

    //课程分类列表(树形)
    @Override
    public List<OneSubject> getAllOneTwoSubject() {

        //1. 从edu_subject表中查询出所有的一级分类：parent_id = '0'
        QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>();
        wrapperOne.eq("parent_id", '0');
        List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);
        System.out.println("一级目录："+oneSubjectList.size());

        //2.edu_subject表中查询出所有的二级分类: parent_id != '0'
        QueryWrapper<EduSubject> wrapperTwo = new QueryWrapper<>();
        wrapperTwo.ne("parent_id", '0');
        List<EduSubject> twoSubjectList = baseMapper.selectList(wrapperTwo);

        //3.创建集合，用来返回最终的数据
        List<OneSubject> finalSubjectList = new ArrayList<>();

        /******************************** 4.封装一级分类 ***************************/
        //将 oneSubjectList(即List<EduSubject>)  ----->  转换成List<OneSubject>
        for(int i = 0; i < oneSubjectList.size(); i++){

            //得到每个oneSubjectList对象
            EduSubject eduSubject = oneSubjectList.get(i);
            //将eduSubject的值获取出来，放到OneSubject对象里面
            OneSubject oneSubject = new OneSubject();

            //oneSubject.setId(eduSubject.getId());
            //oneSubject.setTitle(eduSubject.getId());
            /** 用spring中的工具类进行复制**/
            BeanUtils.copyProperties(eduSubject, oneSubject);

            /********************************** 5.封装二级分类 **********************/
            List<TwoSubject> twoFinalSubjectList = new ArrayList<>();
            for (int j = 0; j < twoSubjectList.size(); j++) {
                //获取每个二级分类
                EduSubject subject = twoSubjectList.get(j);
                if(subject.getParentId().equals(oneSubject.getId())){
                    TwoSubject twoSubject = new TwoSubject();
                    BeanUtils.copyProperties(subject, twoSubject);
                    twoFinalSubjectList.add(twoSubject);
                }
            }
            //把所有的二级分类放到一级分类中
            oneSubject.setChildren(twoFinalSubjectList);

            //添加到List<OneSubject>中
            finalSubjectList.add(oneSubject);
        }

        return finalSubjectList;
    }
}

重要步骤：
在这里插入图片描述
注意方法返回值为List< OneSubject >

在这里插入图片描述
在这里插入图片描述
测试：
在这里插入图片描述
测试：
在这里插入图片描述

3. 课程管理模块概述

3.1 课程管理需求

在这里插入图片描述

3.2 课程管理涉及到的表

在这里插入图片描述

3.3 注意事项

在这里插入图片描述

4 课程添加模块

4.1 后端

  1. 自动生成Service，Controller，Entity。
  2. 创建Vo类，用于封装表单提交的数据—因为表单中包含几种对应的实体类。
  3. Controller中添加课程。
    在这里插入图片描述
  4. Service进行实际的课程信息第实际添加：：1. 课程表添加信息；2. 课程描述表添加信息。
    在这里插入图片描述

Bug： 添加信息后，课程表和课程描述表信息相互独立，没有联系。
解决： 将课程描述表的id设置为课程表的id

具体做法：

1. 修改主键生成策略：
在这里插入图片描述
2. 修改Service

在这里插入图片描述

4.2 前端

1. 添加路由
在这里插入图片描述

  1. 添加课程的页面： info.vue，chapter.vue，publish.vue
  2. js调用后台接口
    在这里插入图片描述
  3. publish.vue中调用接口

bug: 添加课程后，紧接着跳转到添加章节页面，根据课程id添加章节，所以要把课程id传过去，所以在添加课程的后台接口中要返回课程id。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

下拉列表显示所有讲师

前端调用后端接口，前端用Element-ui实现，后端查询所有讲师接口前面已经写好。
在这里插入图片描述
二级联动添加二级课程分类

用下拉列表实现。

  • 第一次进入页面，显示所有一级列表，二级列表为空。

  • 当选中某一个一级列表时，显示一级列表对应的二级列表。

实现：后台在做一级分类和二级分类时已经提供了1个接口，可以返回所有的一级分类，而返回的一级分类的实体类中包含一个成员：二级分类，所以我们这里可以不用写接口，直接调用之前写好的接口就可以。

已经写好的接口：
在这里插入图片描述
info.vue

<template>

  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="最终发布"/>
    </el-steps>

<el-form label-width="120px">

  <el-form-item label="课程标题">
    <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
  </el-form-item>

  <!-- 所属分类 TODO -->
   <el-form-item label="课程分类">
  <el-select
    v-model="courseInfo.subjectParentId"
    placeholder="一级分类" @change="subjectLevelOneChanged">
    <el-option
      v-for="subject in subjectOneList"
      :key="subject.id"
      :label="subject.title"
      :value="subject.id"/>
  </el-select>

  <!-- 二级分类 -->
<el-select v-model="courseInfo.subjectId" placeholder="二级分类">
  <el-option
    v-for="subject in subjectTwoList"
    :key="subject.id"
    :label="subject.title"
    :value="subject.id"/>
</el-select>
</el-form-item>

  <!-- 课程讲师 TODO -->
  <!-- 课程讲师 -->
<el-form-item label="课程讲师">
  <el-select
    v-model="courseInfo.teacherId"
    placeholder="请选择">
    <el-option
      v-for="teacher in teacherList"
      :key="teacher.id"
      :label="teacher.name"
      :value="teacher.id"/>
  </el-select>
</el-form-item>

  <el-form-item label="总课时">
    <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
  </el-form-item>

  <!-- 课程简介 TODO -->
  <el-form-item label="课程简介">
    <el-input v-model="courseInfo.description" placeholder=""/>
  </el-form-item>

  <!-- 课程封面 TODO -->

  <el-form-item label="课程价格">
    <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
  </el-form-item>

  <el-form-item>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
  </el-form-item>
</el-form>
  </div>
</template>


<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      saveBtnDisabled: false,  
      courseInfo:{
          title: '',
          subjectId:'',//二级分类id
          subjectParentId:'',//一级分类id
          teacherId: '', 
          lessonNum: 0,
          description: '',
          cover: '',
          price: 0
      },
      //封装所有讲师数据
      teacherList:[],
      //一级分类列表
      subjectOneList:[],
      //二级分类列表
      subjectTwoList:[]
    }
  },

  created() {
    //初始化所有讲师
    this.getListTeacher()
    //初始化一级分类
    this.getOneSubject()
  },

  methods: {
    //点击某个一级分类，会触发change时间，会显示对应的二级分类
    subjectLevelOneChanged(value){
        //value为一级分类的id值，事件发生时，会自动传过来id值，不同自己在上面中写个参数传递id值
        //alert(value)
        //遍历所有的一级分类，如果选中的id=一级id，直接获取到当前一级分类的子分类(二级分类列表)
        for(var i = 0; i < this.subjectOneList.length; i++){
            var oneSubject = this.subjectOneList[i]
            if(oneSubject.id === value){
                //从一级分类中获取所有的二级分类
                this.subjectTwoList = oneSubject.children
            }
        }
    },

    //查询所有的一级分类
    getOneSubject(){
        console.log("dfsfds")
        subject.getSubjectList()
               .then(response => {
                    this.subjectOneList = response.data.list
                })
                 
    },


    saveOrUpdate() {
      course.addCourseInfo(this.courseInfo)
            .then(response =>{
                //提示添加成功
                    this.$message({
                        type: 'success',
                        message: '添加课程信息成功！'
                    })
                //跳转到添加章节页面
                this.$router.push({path:'/course/chapter/' + response.data.courseId})
            })
       
      this.$router.push({ path: '/course/chapter/1' })
    },
    
    //查询所有讲师
    getListTeacher(){
        course.getListTeacher()
              .then(response =>{
                    this.teacherList = response.data.item
              })
               
    }
  }
}
</script>
  • 在info.vue中加入下拉列表：
    在这里插入图片描述
    - 重要代码
    在这里插入图片描述
    测试：
    在这里插入图片描述
    bug：比如选择了前端开发，然后选Vue；再选择后端开发，Vue还在，应该清除。

在这里插入图片描述
原因：Vue双向绑定设置了之后，以后不会清空；

解决方法：每次选择一级列表触发事件方法时，在事件方法里面清空二级事件的id值。
在这里插入图片描述

课程封面上传

上传到阿里云OSS，前面上传图像时接口已经写好，这里直接用。这里主要是修改前端。

(完)

咖啡不加冰和糖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
添加课程信息前端3
qq_44841517的博客
05-22 297
我们在加课程的时候，在课程表edu_course里边，有teacher_id和subject_id,subject_parent_id 我们实现{1.把讲师 和 分类 使用下拉列表显示 2.课程分类做成二级联动的效果 3.做课程封面上传 4.简介换成有样式的（我们加一个富文本编辑器） } 我们去element-ui组件中看看表单下拉框是怎么写的 label值是你下拉框显示的值 value值是最后提交的值 这里我们传的值就是shanghai 我们要做的是： 不是写固定，我们要从数据库中查出来，在页面中遍
课程发布-课程大纲和课程发布
白长生的小窝
04-28 921
01-课程大纲列表显示 一、后端实现 1、定义vo ChapterVo package com.guli.edu.vo; @ApiModel(value = "章节信息") @Data public class ChapterVo implements Serializable { private static final long serialVersionUID = 1L; ...
谷粒学院——第八章、课程管理
ZMMMOO的博客
01-04 430
Tinymce是一个传统 JavaScript 插件，默认不能用于 Vue.js 因此需要做一些特殊的整合步骤。 1、组件初始化 （1）复制脚本库 ● src/components 目录添加：Tinymce ● static 目录添加：tinymce4.7.5
谷粒学院-Day14,讲师分页查询，讲师详情，课程列表
weixin_46511995的博客
05-06 937
谷粒学院 讲师分页 一、后端部分 1、TeacherFrontController @RestController @RequestMapping("/eduservice/teacherfront") @CrossOrigin public class TeacherFrontController { @Autowired private EduTeacherService teacherService; @Autowired private Edu...
java中通用Mapper之SelectByIdListMapper方法的使用
weixin_42960380的博客
08-20 7807
首先通用使用通用mapper需要注意的是 , 只能在一张表行进行操作!!!如果你要操作的是两张表+,则你需要手写sql语句. 使用方法: 定义一个实体类: public class User{ //TODO省略属性 } 然后定义一个mapper接口:: mapper注意不要导错包 包是: import tk.mybatis.ma...
在线教育day01_基础工程
09-25
【在线教育day01_基础工程】是一个针对初学者的教育资源，主要涵盖了在线教育项目初期所需要的基础工程代码。这个资源的目的是帮助学习者快速搭建一个能够支持在线教学功能的平台，涉及的技术栈可能包括后端服务、...
在线教育课程day01_前端项目
09-25
在线教育课程day01_前端项目是针对初学者或有一定基础的前端开发者设计的一个课程，旨在教授如何构建一个在线教育平台的前端项目。这个课程涵盖了前端开发的基本概念、技术栈和实际操作步骤，帮助学员逐步掌握搭建...
学成在线-day1.zip
09-10
学成在线作为一个在线教育平台，可能涉及的技术点包括： 1. **用户认证与授权**：OAuth2、JWT等技术用于用户登录验证和权限控制。 2. **课程管理**：包括课程创建、分类、上下架等功能，可能涉及数据库设计和后台...
day24_教育项目.md
03-02
0000
斯凯瑞Father Cats Busy Day
01-20
360文库是一个综合性的文档分享和学习平台，内容涉及教育考试、商业文档、行业资料、专业论文、工作计划和总结、办公文书、休闲生活等。
Day206.课程分类【导入功能】前端实现、 课程分类列表【显示功能】、课程管理【模块需求、添加课程功能】 -谷粒学院
阿昌爱Java
02-28 6973
谷粒学院 【课程分类】—导入前端实现 一、配置路由 1、添加路由 src/router/index.js //课程分类 { path: 'subject', component: Layout, redirect: '/edu/subject/list', name: 'Subject', meta: { title: '课程分类管理', icon: 'nested' }, children: [ { path: '/lis
Mapper.selectOne异常问题
Wu_Application的博客
05-22 2550
在多次代码中，出现Mapper.selectOne的报错 整个代码异常 多次同样的错误 原因：Mapper.selectOne查询的数据库中有多条相同的数据（错误数据）
Spring Data JPA之Spring Data JPA快速入门（三）
积跬步，至千里。
10-17 441
Spring Data JPA之Spring Data JPA快速入门Spring Data JPA概述Spring Data JPA 、 JPA、hibernate三者的关系Spring Data JPA的快速入门1.添加依赖2.Spring Data JPA与Spring整合使用JPA注解配置映射关系创建Spring Data JPA规范的Dao层接口基本CRUD操作零零 Spring Data JPA概述 Spring Data JPA 是 Spring 基于 ORM 框架、JPA 规范的基础上封装
NET开发在设计SQLServer数据库表结构时的规范及实现多表之间嵌套查询[图]
minemi的博客
12-15 443
一、NET开发-在设计SQLServer数据库表结构时要遵守哪些范式要求？ 1.概述 创建数据库必须遵循一定的规则。在关系数据库(SQLServer)中，这种规则就是范式。范式是符合某一种级别的关系模式的集合。关系数据库中的关系必须满足一定的要求，即满足不同的范式。目前关系数据库有六种范式：第一范式（1NF）、第二范式（2NF）、第三范式（3NF）、第四范式（4NF）、第五范式（5NF）和第六范式（6NF）。满足最低要求的范式是第一范式（1NF）。 在第一范式的基础上进一步满足更多要求的称为第二范式（2NF
Spring boot 配置文件
最新发布
2301_79547900的博客
07-25 361
properties使用key=value的形式配置键类型的配置文件，而yml使用的是树形结构来配置yml层级之间使⽤换⾏缩进的⽅式配置，key和value，之间使⽤": "(英⽂冒号)加空格的⽅式设置，并且空格不可省略。properties是早期默认的配置文件格式，其配置存在一定的冗余，使用yml可以很好解决这些问题。yml和properties可以共存，但建议只使用一种，可以降低故障率。
Spring boot 2.0 升级到 3.3.1 的相关问题 （五）
飞一站的博客
07-24 507
解决Spring boot 2.0 升级到3.3.1 版本的druid 配置和Redis配置不生效的问题。
1.Spring Boot 简介(Spring MVC+Mybatis-plus)
m0_61086522的博客
07-23 642
SpringBoot是Spring的子工程(或是spring的脚手架),快速搭建spring项目,自动配置了Spring 应用程序和第三方库（spring+mybaties+web（servlet）+ reids+ 消息中间件）,而且使用很少xml配文件，提高开发效率。一款基于mvc模式、请求驱动、轻量级web框架（封装了Servlet）给予MVC模式请求驱动轻量级web框架封装了Servlet程序。
Java面试八股之后Spring、spring mvc和spring boot的区别
u012151345的博客
07-23 667
Spring Boot 是建立在Spring框架之上的一个微服务框架，它的目标是简化新Spring应用的初始设置和配置。Spring MVC 是Spring框架的一部分，专注于Web应用程序的开发，它实现了MVC设计模式，将业务逻辑、数据和展示层分开，使得Web应用的开发更加清晰和结构化。Spring MVC 是一个专注于Web应用的框架，是Spring框架的一部分，用于构建MVC架构的Web应用。Spring 是一个核心的、基础的框架，提供了广泛的开发支持。
王清主编：Windows 0day漏洞分析全攻略
《0day安全：软件漏洞分析技术（第2版）》的出版，对于理解和防御这种高级威胁提供了重要的教育资源，强调了及时更新安全策略和技术的重要性。同时，它也提醒读者，持续学习和研究最新的漏洞分析技术，对于保障个人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值