在线教育-谷粒学院学习笔记（五）

最新推荐文章于 2024-09-14 08:15:03 发布

qmys

最新推荐文章于 2024-09-14 08:15:03 发布

阅读量974

点赞数 1

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/mys_mys/article/details/128728166

版权

在线教育专栏收录该内容

13 篇文章 2 订阅

订阅专栏

文章详细介绍了课程管理系统的前端和后端实现，包括课程分类的前端展示（树形结构），课程列表的显示，以及添加课程信息的功能。前端实现了文件上传，后端实现了数据保存。同时，文章提到了课程管理的各个表及其关联，以及讲师和分类的下拉列表显示，最后讨论了前端的完善，如封面上传和文本编辑器的集成。

摘要由CSDN通过智能技术生成

文章目录

1 内容介绍

添加课程分类前端实现
课程分类列表显示功能（树形结构）
课程管理模块需求
添加课程基本信息功能

2 课程分类前端实现

1 添加课程分类的路由

router/index.js

{
  path: '/subject',
  component: Layout,
  redirect: '/subject/list',
  name: '课程分类管理',
  meta: { title: '课程分类管理', icon: 'example' },
  children: [
    {
      path: 'list',
      name: '课程分类列表',
      component: () => import('@/views/edu/subject/list'),
      meta: { title: '课程列表', icon: 'table' }
    },
    {
      path: 'save',
      name: '添加课程分类',
      component: () => import('@/views/edu/subject/save'),
      meta: { title: '添加课程分类', icon: 'tree' }
    },
  ]
},

2 创建课程分类页面，修改路由对应页面路径

views/edu/subject/list.vue save.vue

**3 在添加课程分类页面，实现效果 **

添加上传组件实现

<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="信息描述">
        <el-tag type="info">excel模版说明</el-tag>
        <el-tag>
          <i class="el-icon-download"/>
          <a :href="'/static/write.xlsx'">点击下载模版</a>
        </el-tag>

      </el-form-item>

      <el-form-item label="选择Excel">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-success="fileUploadSuccess"
          :on-error="fileUploadError"
          :disabled="importBtnDisabled"
          :limit="1"
          :action="BASE_API+'/eduservice/subject/addSubject'"
          name="file"
          accept="application/vnd.ms-excel">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            :loading="loading"
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      BASE_API: process.env.BASE_API, // 接口API地址
      importBtnDisabled: false, // 按钮是否禁用
      loading: false
    }
  },
  methods: {
    // 点击按钮上传文件到接口
    submitUpload() {
      this.importBtnDisabled = true
      this.loading = true
      this.$refs.upload.submit()
    },
    // 上传成功
    fileUploadSuccess() {
      // 提示信息
      this.loading = false
      this.$message({
        type: 'success',
        message: '添加课程分类成功'
      })
      // 跳转课程分类列表
    },
    // 上传失败
    fileUploadError() {
      // 提示信息
      this.loading = false
      this.$message({
        type: 'error',
        message: '添加课程分类失败'
      })
    }
  }
}
</script>

3 课程列表功能实现

用树形结构显示课程列表

1 参考tree模块，整合前端

需要创建接口，按照分类要求的格式返回数据

返回数据格式

[
    {
      id: 1,
      label: '一级分类名称',
      children: 
      [
          {
            id: 4,
            label: '二级分类名称',
          }
      ]
    }, 
	{
		......
	}
],

针对返回数据，创建对应的实体类

两个实体类：一级和二级 entity/subject/OneSubject TwoSubject

@Data
public class OneSubject {
    private String id;
    private String title;
}

@Data
public class TwoSubject {
    private String id;
    private String title;
}

在两个实体类之间表示关系（一个一级分类有多个二级分类）
- OneSubject.java
```
private List<TwoSubject> children = new ArrayList<>();
```

具体封装代码编写

封装

List<EduSubject> oneSubjectList   ===>  List<OneSubject> finalSubject

// 课程分类列表
    @Override
    public List<OneSubject> getAllOneTwoSubject() {
        // 1 查询所有一级分类 parent_id = 0
        QueryWrapper<EduSubject> wrapperOne = new QueryWrapper<>();
        wrapperOne.eq("parent_id", 0);
        List<EduSubject> oneSubjectList = baseMapper.selectList(wrapperOne);
//        List<EduSubject> oneSubjectList = this.list(wrapperOne);

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

        // 创建list集合，用于存储最终封装数据
        List<OneSubject> finalSubjectList = new ArrayList<>();

        // 3 封装一级分类
        // oneSubjectList -> finalSubjectList
        for (EduSubject eduSubject : oneSubjectList) {
            // eduSubject -> oneSubject -> finalSubjectList
            OneSubject oneSubject = new OneSubject();
            // 基本写法
//            oneSubject.setId(eduSubject.getId());
//            oneSubject.setTitle(eduSubject.getTitle());
            // 简写
            BeanUtils.copyProperties(eduSubject, oneSubject); // eduSubject -> oneSubject
            finalSubjectList.add(oneSubject);


            // 4 封装二级分类
            List<TwoSubject> twoFinalSubjectList = new ArrayList<>();

            // twoSubjectList -> twoFinalSubjectList
            for (EduSubject eduSubject2 : twoSubjectList) {
                // eduSubject2 -> twoSubject -> twoFinalSubjectList
                // 二级分类的parent_id == 一级分类的id
                if (eduSubject2.getParentId().equals(eduSubject.getId())) {
                    TwoSubject twoSubject = new TwoSubject();
                    BeanUtils.copyProperties(eduSubject2, twoSubject);
                    twoFinalSubjectList.add(twoSubject);
                }
            }
            // 把一级下面的所有二级放到一级分类里
            // twoFinalSubjectList -> oneSubject
            oneSubject.setChildren(twoFinalSubjectList);
        }
        return finalSubjectList;
    }

完善

save.vue

fileUploadSuccess() {
  // 提示信息
  this.loading = false
  this.$message({
    type: 'success',
    message: '添加课程分类成功'
  })
  // 跳转课程分类列表
  this.$router.push({ path: '/subject/list' })
},

list.vue

created() {
  this.getAllSubjectList()
},
methods: {
  getAllSubjectList() {
    subject.getSubjectList()
      .then(response => {
        this.data2 = response.data.list
      })
  },
  filterNode(value, data) {
    if (!value) return true
    return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
  }
}

4 课程管理概括

课程添加流程

在这里插入图片描述

表
- edu_course：课程表，存储课程基本信息
- edu_course_descrpition：课程简介表，存储课程简介信息
- edu_chapter：课程章节表
- edu_video：课程小节表，存储章节里边的小节信息
- edu_teacher：讲师表
- edu_subject：分类表
表关系

5 添加课程信息后端实现

1 使用代码生成器生成课程相关代码

细节问题
- 创建vo实体类，用于表单数据封装
  - 把表单提交过来的数据添加到数据库
    - 向两张表添加数据：课程表、课程描述表
- 把讲师和分类使用下拉列表显示
  - 课程表做成二级联动效果

2 创建vo类，封装表单提交的数据

@Data
public class CourseInfoVo {
    @ApiModelProperty(value = "课程ID")
    private String id;

    @ApiModelProperty(value = "课程讲师ID")
    private String teacherId;

    @ApiModelProperty(value = "课程专业ID")
    private String subjectId;

    @ApiModelProperty(value = "课程标题")
    private String title;

    @ApiModelProperty(value = "课程销售价格，设置为0则可免费观看")
    private BigDecimal price; // BigDecimal:精度更准确

    @ApiModelProperty(value = "总课时")
    private Integer lessonNum;

    @ApiModelProperty(value = "课程封面图片路径")
    private String cover;

    @ApiModelProperty(value = "课程简介")
    private String description;
}

3 编写controller和service

注意：课程和课程简介是一对一关系，需要对应联系起来

controller

@RestController
@RequestMapping("/eduservice/edu-course")
@CrossOrigin
public class EduCourseController {
    @Autowired
    private EduCourseService courseService;

    // 添加课程基本信息方法
    @PostMapping("addCourseInfo")
    public R addCourseInfo(@RequestBody CourseInfoVo courseInfoVo) {
        courseService.saveCourseInfo(courseInfoVo);
        return R.ok();
    }
}

service

@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
    @Autowired
    private EduCourseDescriptionService courseDescriptionService;
    // 添加课程基本信息方法
    @Override
    public void saveCourseInfo(CourseInfoVo courseInfoVo) {
        // 1 向课程表添加课程信息
        // courseInfoVo -> eduCourse
        EduCourse eduCourse = new EduCourse();
        BeanUtils.copyProperties(courseInfoVo, eduCourse);
        int insert = baseMapper.insert(eduCourse);
        if (insert <= 0) {
            // 添加失败
            throw new GuliException(20001, "添加课程信息失败");
        }
        // 获取添加之后课程id
        String cid = eduCourse.getId();
        // 2 向课程简介表添加课程简介信息
        EduCourseDescription courseDescription = new EduCourseDescription();
        courseDescription.setDescription(courseInfoVo.getDescription());
        // 设置课程简介id就是课程id
        courseDescription.setId(cid);
        courseDescriptionService.save(courseDescription);
    }
}

其他需要修改的地方：

1、实体类的时间上加注解

@ApiModelProperty(value = "创建时间")
@TableField(fill = FieldFill.INSERT)
private Date gmtCreate;

@ApiModelProperty(value = "更新时间")
@TableField(fill = FieldFill.INSERT_UPDATE)
private Date gmtModified;

2、EduCourseDescription中的id注解修改

@ApiModelProperty(value = "课程ID")
@TableId(value = "id", type = IdType.INPUT)
private String id;

6 添加课程信息前端实现

1 添加课程管理的路由，并添加隐藏路由，做步骤条的页面跳转

router/index.js

{
  path: '/course',
  component: Layout,
  redirect: '/course/list',
  name: '课程管理',
  meta: { title: '课程管理', icon: 'example' },
  children: [
    {
      path: 'list',
      name: '课程列表',
      component: () => import('@/views/edu/course/list'),
      meta: { title: '课程列表', icon: 'table' }
    },
    {
      path: 'info',
      name: '添加课程',
      component: () => import('@/views/edu/course/info'),
      meta: { title: '编辑课程基本信息', icon: 'tree' },
    },
    {
      path: 'info/:id',
      name: '添加课程',
      component: () => import('@/views/edu/course/info'),
      meta: { title: '编辑课程基本信息', icon: 'tree' },
      hidden: true
    },
    {
      path: 'chapter/:id',
      name: '添加课程',
      component: () => import('@/views/edu/course/chapter'),
      meta: { title: '编辑课程大纲', icon: 'tree' },
      hidden: true
    },
    {
      path: 'publish/:id',
      name: '添加课程',
      component: () => import('@/views/edu/course/publish'),
      meta: { title: '发布课程', icon: 'tree' },
      hidden: true
    }
  ]
},

2 实现课程添加的步骤条

info.vue -> chapter.vue -> publish.vue

3 调用接口

api/edu/course.js

4 添加之后，返回课程id

EduCourseController修改：

@PostMapping("addCourseInfo")
public R addCourseInfo(@RequestBody CourseInfoVo courseInfoVo) {
    String id = courseService.saveCourseInfo(courseInfoVo);
    return R.ok().data("courseId", id);
}

对应修改service的代码，返回课程id

info.vue修改：

// 跳转到下一步
// 获取课程id：response.data.courseId
this.$router.push({ path: '/course/chapter/' + response.data.courseId })

7 前端完善

1 讲师下拉列表显示

<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>

created() {
  // 初始化所有讲师
  this.getListTeacher()
},
methods: {
  // 查询所有讲师
  getListTeacher() {
    course.getListTeacher()
      .then(response => {
        this.teacherList = response.data.items()
      })
  },

**2 显示分类：二级联动 **

<el-form-item label="课程分类">
  <el-select
    v-model="courseInfo.teacherId"
    placeholder="一级分类"
    @change="subjectLeaveOneChanged">
    <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>

// 查询课程列表：一级分类
getOneSubject() {
  subject.getSubjectList()
    .then(response => {
      this.subjectOneList = response.data.list
    })
},
// 点击某个一级分类，触发change,显示对应二级分类
// value是一级分类的id值
subjectLeaveOneChanged(value) {
  // 遍历所有分类，包含一级、二级
  for (let i = 0; i < this.subjectOneList.length; i++) {
    const onsSubject = this.subjectOneList[i]
    if (onsSubject.id === value) {
      this.subjectTwoList = onsSubject.children
      // 清空二级分类的id值
      this.courseInfo.subjectId = ''
    }
  }
},

3 封面上传

<el-form-item label="课程封面">
  <el-upload
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
    :action="BASE_API+'/eduoss/fileoss'"
    class="avatar-uploader">
    <img :src="courseInfo.cover">
  </el-upload>
</el-form-item>

// 上传封面之前
beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg'
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
},
// 上传封面成功
handleAvatarSuccess(res, file) {
  this.courseInfo.cover = res.data.url
},

4 整合文本编辑器

复制文本编辑器相关组件
- components/Tinymce
- static/tinymce4.7.5

添加配置build/webpack.dev.conf.js

new HtmlWebpackPlugin({
......,
templateParameters: {
BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
 }
})

index.html中引入js脚本

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script>
<script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>

页面使用文本编辑器
- 引入组件 import Tinymce from '@/components/Tinymce'
- 声明组件 components: { Tinymce },
- 页面中使用标签实现文本编辑器组件
```
<el-form-item label="课程简介">
  <tinymce :height="300" v-model="courseInfo.description" />
</el-form-item>
```

样式

<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>

qmys

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录