一.需求分析

用户操作流程：
1、进入课程计划页面，点击“添加课程计划”
2、打开添加课程计划页面，输入课程计划信息
在这里插入图片描述

一级	二级	三级
跟节点	大章节	小章节

上级结点不填写的情况下：

不选择上级结点，表示当前添加的课程计划的父节点为课程的根结点，此时使用当前课程的courseid去查询根节点具体信息（当然包括根节点的id）。
若此时找不到根节点，则要自动添加课程的根结点。
点击提交。

二.API接口

文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@ApiOperation("添加课程计划")
public ResponseResult addTeachplan(Teachplan teachplan);

三.后端

1.Dao

文件位置：EduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\dao\TeachplanRepository.java

public interface TeachplanRepository extends JpaRepository<Teachplan, String> {
//定义方法根据课程id和父结点id查询出结点列表，可以使用此方法实现查询根结点
public List<Teachplan> findByCourseidAndParentid(String courseId,String parentId);
}

2.Service

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\service\CourseService.java

@Transactional
public ResponseResult addTeachplan(Teachplan teachplan) {if(teachplan == null ||StringUtils.isEmpty(teachplan.getPname()) ||StringUtils.isEmpty(teachplan.getCourseid())){ExceptionCast.cast(CommonCode.INVALID_PARAM);}//课程idString courseid = teachplan.getCourseid();//父结点的idString parentid = teachplan.getParentid();if(StringUtils.isEmpty(parentid)){//获取课程的根结点parentid = getTeachplanRoot(courseid);}//查询根结点信息Optional<Teachplan> optional = teachplanRepository.findById(parentid);Teachplan teachplan1 = optional.get();//父结点的级别String parent_grade = teachplan1.getGrade();//创建一个新结点准备添加Teachplan teachplanNew = new Teachplan();//将teachplan的属性拷贝到teachplanNew中BeanUtils.copyProperties(teachplan,teachplanNew);//要设置必要的属性teachplanNew.setParentid(parentid);if(parent_grade.equals("1")){teachplanNew.setGrade("2");}else{teachplanNew.setGrade("3");}teachplanNew.setStatus("0");//未发布teachplanRepository.save(teachplanNew);return new ResponseResult(CommonCode.SUCCESS);
}//获取课程的根结点
public String getTeachplanRoot(String courseId){Optional<CourseBase> optional = courseBaseRepository.findById(courseId);if(!optional.isPresent()){return null;}CourseBase courseBase = optional.get();//调用dao查询teachplan表得到该课程的根结点（一级结点）List<Teachplan> teachplanList = teachplanRepository.findByCourseidAndParentid(courseId, "0");if(teachplanList == null || teachplanList.size()<=0){//新添加一个课程的根结点Teachplan teachplan = new Teachplan();teachplan.setCourseid(courseId);teachplan.setParentid("0");teachplan.setGrade("1");//一级结点teachplan.setStatus("0");teachplan.setPname(courseBase.getName());teachplanRepository.save(teachplan);return teachplan.getId();}//返回根结点的idreturn teachplanList.get(0).getId();}

3.Controller

文件位置：xcEduService01\xc-service-manage-course\src\main\java\com\xuecheng\manage_course\controller\CourseController.java

@Override
@PostMapping("/teachplan/add")
public ResponseResult addTeachplan(@RequestBody  Teachplan teachplan) {return courseService.addTeachplan(teachplan);
}

4.测试

复杂一些的业务逻辑建议写完服务端代码就进行单元测试。

使用swagger-ui或postman测试上边的课程计划添加接口。

四.前端

1.页面原型说明

文件位置：xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\page\course_manage\course_plan.vue

1）添加按钮

<el-button type="primary" @click="teachplayFormVisible = true">添加课程计划</el-button>

2）视图部分

添加课程计划采用弹出窗口组件Dialog，在course_plan.vue页面添加添加课程计划的弹出窗口代码

    <el-dialog title="添加课程计划" :visible.sync="teachplayFormVisible" ><el-form ref="teachplanForm"  :model="teachplanActive" label-width="140px" style="width:600px;" :rules="teachplanRules" ><el-form-item label="上级结点" ><el-select v-model="teachplanActive.parentid" placeholder="不填表示根结点"><el-optionv-for="item in teachplanList":key="item.id":label="item.pname":value="item.id"></el-option></el-select></el-form-item><el-form-item label="章节/课时名称" prop="pname"><el-input v-model="teachplanActive.pname" auto-complete="off"></el-input></el-form-item><el-form-item label="课程类型" ><el-radio-group v-model="teachplanActive.ptype"><el-radio class="radio" label='1'>视频</el-radio><el-radio class="radio" label='2'>文档</el-radio></el-radio-group></el-form-item><el-form-item label="学习时长（分钟）  请输入数字" ><el-input type="number" v-model="teachplanActive.timelength" auto-complete="off" ></el-input></el-form-item><el-form-item label="排序字段" ><el-input v-model="teachplanActive.orderby" auto-complete="off" ></el-input></el-form-item><el-form-item label="章节/课时介绍" prop="description"><el-input type="textarea" v-model="teachplanActive.description" ></el-input></el-form-item><el-form-item label="状态" prop="status"><el-radio-group v-model="teachplanActive.status" ><el-radio class="radio" label="0" >未发布</el-radio><el-radio class="radio" label='1'>已发布</el-radio></el-radio-group></el-form-item><el-form-item  ><el-button type="primary" v-on:click="addTeachplan">提交</el-button><el-button type="primary" v-on:click="resetForm">重置</el-button></el-form-item></el-form></el-dialog>

3）在数据模型中添加如下变量

data() {return {mediaFormVisible:false,teachplayFormVisible:false,//控制添加窗口是否显示teachplanList : [{id: 1,pname: '一级 1',children: [{id: 4,pname: '二级 1-1',children: [{id: 9,pname: '三级 1-1-1'}, {id: 10,pname: '三级 1-1-2'}]}]}],defaultProps:{children: 'children',label: 'pname'},teachplanRules: {pname: [{required: true, message: '请输入课程计划名称', trigger: 'blur'}],status: [{required: true, message: '请选择状态', trigger: 'blur'}]},teachplanActive:{},teachplanId:''}
},

4）定义表单提交方法和重置方法

methods: {
//提交课程计划addTeachplan(){//校验表单this.$refs.teachplanForm.validate((valid) => {if (valid) {//调用api方法//将课程id设置到teachplanActivethis.teachplanActive.courseid = this.courseidcourseApi.addTeachplan(this.teachplanActive).then(res=>{if(res.success){this.$message.success("添加成功")//刷新树this.findTeachplan()}else{this.$message.error(res.message)}})}})},//重置表单resetForm(){this.teachplanActive = {}},//查询课程计划courseApi.findTeachplanList(this.courseid).then(res=>{if(res && res.children){this.teachplanList = res.children;}})}},

2.Api调用

1）定义 api方法

文件位置：xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\api\course.js

/*添加课程计划*/
export const addTeachplan = teachplah => {return http.requestPost(apiUrl+'/course/teachplan/add',teachplah)
}

2）调用 api

文件位置：xc-ui-pc-teach\xc-ui-pc-teach\src\module\course\page\course_manage\course_plan.vue

      addTeachplan(){//校验表单this.$refs.teachplanForm.validate((valid) => {if (valid) {//调用api方法//将课程id设置到teachplanActivethis.teachplanActive.courseid = this.courseidcourseApi.addTeachplan(this.teachplanActive).then(res=>{if(res.success){this.$message.success("添加成功")//刷新树this.findTeachplan()}else{this.$message.error(res.message)}})}})},