前后端分离项目知识汇总（整合课程发布）

整合课程发布

实现思路

1、图解

2、获取步骤条

3、代码思路

写三个vue组件，每个组件根据需要自定义内容

课程基本信息

实现效果

后端编码

提前生成课程相关表

通过代码生成器生成一键生成

1、创建vo封装每个步骤提交的数据

课程描述类id和课程类id是一样的，所以我们提前设置好

2、service

定义添加课程方法

3、controller

调用添加课程方法

前端编码

1、添加路由，做页面跳转

隐藏路由的目的是用来跳转步骤条

2、定义API

3、编写Vue页面

引入步骤条和表单

==显示所有讲师列表==

：label表示的是下拉列表的名字的名字

：value是此表单提交时名字对应的teacherid也会被提交

==二级联动==

这是重点！！！

bug提示：

==其中this.courseInfo.subjectId要在每次一级分类的时候进行清空==

==整合文本编辑器==

==封面上传==

数据回显

课程大纲

实现效果

后端编码

写后端接口处理数据

分别是章节相关的，小节相关的

==查询所有章节和小节方法==

再次理解

前端编码

添加，修改之前我们使用的是跳到一个具体的页面

这次我们使用弹框，在弹框内进行操作

这里我们使用element-ui中的Dialog

前端定义API

==增加章节==

编码思路：

1. 点击添加，出现弹框
2. 填写内容，提交表单
3. 刷新页面，展示数据

==修改章节==

1. 点击修改，出现弹框
2. 回显数据，修改提交
3. 刷新页面，展示数据

==章节删除==

获取id，按id删除

==小节增加删除修改==

同上，不在一一截取

课程最终发布

实现效果

后端编码

后端主要是做数据回显了，如下：

1. 根据id查询课程发布信息
2. 根据id发布课程

1、根据id查询课程发布信息

方式一：业务层组装多个表多次的查询结果

方式二：数据访问层进行关联查询

我们使用第二种方式实现

定义VO

dao

业务层

2、根据id发布课程

@PostMapping("publishCourse/{id}")
public R publishCourse(@PathVariable String id) {
    EduCourse eduCourse = new EduCourse();
    eduCourse.setId(id);
    eduCourse.setStatus("Normal");//设置课程发布状态
    courseService.updateById(eduCourse);
    return R.ok();
}

前端编码

1、定义API

2、写页面

3、显示课程发布的信息

和前面显示讲师类似，不详细说明

Ending.......