一.效果展示

二.服务端

1.Api接口

创建新增课程接口：
文件位置：xcEduService01\xc-service-api\src\main\java\com\xuecheng\api\course\CourseControllerApi.java

@Api(value = "课程管理",description = "课程管理",tags = {"课程管理"})
public interface CourseControllerApi {@ApiOperation("添加课程基础信息")public AddCourseResult addCourseBase(CourseBase courseBase);
}

2.Dao

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

public interface CourseBaseRepository extends JpaRepository<CourseBase, String> {
}

3.Service

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

//添加课程提交
@Transactional
public AddCourseResult addCourseBase(CourseBase courseBase) {//课程状态默认为未发布courseBase.setStatus("202001");courseBaseRepository.save(courseBase);return new AddCourseResult(CommonCode.SUCCESS,courseBase.getId());
}

4.Controller

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

@Override
@PostMapping("/coursebase/add")
public AddCourseResult addCourseBase(@RequestBody CourseBase courseBase) {return courseService.addCourseBase(courseBase);
}

三.前端

1.页面完善

1）创建course_add.vue页面

在teach前端工程的course模块下创建course_add.vue页面
文件位置：xc-ui-pc-teach\src\module\course\page\course_add.vue

<template><div><el‐form :model="courseForm" label‐width="80px" :rules="courseRules" ref="courseForm"><el‐form‐item label="课程名称" prop="name"><el‐input v‐model="courseForm.name" auto‐complete="off" ></el‐input></el‐form‐item><el‐form‐item label="适用人群" prop="users"><el‐input type="textarea" v‐model="courseForm.users" auto‐complete="off" ></el‐input></el‐form‐item><el‐form‐item label="课程分类" prop="categoryActive"><el‐cascaderexpand‐trigger="hover":options="categoryList"v‐model="categoryActive":props="props"></el‐cascader></el‐form‐item><el‐form‐item label="课程等级" prop="grade"><b v‐for="grade in gradeList"><el‐radio v‐model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el‐radio></b></el‐form‐item><el‐form‐item label="学习模式" prop="studymodel"><b v‐for="studymodel_v in studymodelList"><el‐radio v‐model="courseForm.studymodel" :label="studymodel_v.sdId" >{{studymodel_v.sdName}}</el‐radio></b></el‐form‐item><el‐form‐item label="课程介绍" prop="description"><el‐input type="textarea" v‐model="courseForm.description" ></el‐input></el‐form‐item></el‐form><div slot="footer" class="dialog‐footer"><el‐button type="primary" @click.native="save" >提交</el‐button></div></div>
</template><script>import * as courseApi from '../api/course';import utilApi from '../../../common/utils';import * as systemApi from '../../../base/api/system';export default {data() {return {studymodelList:[],gradeList:[],props: {value: 'id',label:'label',children:'children'},categoryList: [],categoryActive:[],courseForm: {id:'',name: '',users: '',grade:'',studymodel:'',mt:'',st:'',description: ''},courseRules: {name: [{required: true, message: '请输入课程名称', trigger: 'blur'}],category: [{required: true, message: '请选择课程分类', trigger: 'blur'}],grade: [{required: true, message: '请选择课程等级', trigger: 'blur'}],studymodel: [{required: true, message: '请选择学习模式', trigger: 'blur'}]}}},methods: {save () {},created(){},mounted(){}}}
</script><style scoped></style>

2）course_add.vue页面路由

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

import course_add from '@/module/course/page/course_add.vue';
{ path: '/course/add/base', name: '添加课程',component: course_add,hidden: true },

3）course_list.vue中添加链接

在我的课程页面course_list.vue中添加“新增课程”链接
文件位置：xc-ui-pc-teach\src\module\course\page\course_list.vue

<router‐link class="mui‐tab‐item" :to="{path:'/course/add/base'}"><el‐button type="text" class="button" >新增课程</el‐button>
</router‐link>

2.查询数据字典

课程添加页面中课程等级、学习模式需要从数据字典中查询信息。

1）视图中代码

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

 <el-form-item label="课程等级" prop="grade"><b v-for="grade in gradeList"><el-radio v-model="courseForm.grade" :label="grade.sdId" >{{grade.sdName}}</el-radio>&nbsp;&nbsp;</b></el-form-item><el-form-item label="学习模式" prop="studymodel"><b v-for="studymodel_v in studymodelList"><el-radio v-model="courseForm.studymodel" :label="studymodel_v.sdId" >{{studymodel_v.sdName}}</el-radio></b></el-form-item>

2）定义Api方法

数据字典查询为公用方法，所以定义在/base/api/system.js中
文件位置：xc-ui-pc-teach\src\base\api\system.js

let sysConfig = require('@/../config/sysConfig')
let apiUrl = sysConfig.xcApiUrlPre;/*数据字典 */export const sys_getDictionary= dType => {return http.requestQuickGet(apiUrl+'/sys/dictionary/get/'+dType)
}

3）在视图中获取数据字典

在mounted钩子中定义方法如下：
文件位置：xc-ui-pc-teach\src\module\course\page\course_add.vue

//查询数据字典字典
systemApi.sys_getDictionary('201').then((res) => {this.studymodelList = res.dvalue;
});
systemApi.sys_getDictionary('200').then((res) => {this.gradeList = res.dvalue;
});

4）效果

3.查询课程分类

课程添加页面中课程分类采用Cascader组件完成。

1）视图中代码

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

<el‐form‐item label="课程分类" prop="categoryActive"><el‐cascaderexpand‐trigger="hover":options="categoryList"v‐model="categoryActive":props="props"></el‐cascader>
</el‐form‐item>

2）定义Api方法

在本模块的course.js中定义
文件位置：xc-ui-pc-teach\src\module\course\api\course.js

/*查询课程分类 */
export const category_findlist= () => {
return http.requestQuickGet(apiUrl+'/category/list')
}

3）在视图中获取课程分类

在mounted钩子中定义
文件位置：xc-ui-pc-teach\src\module\course\page\course_add.vue

//取课程分类
courseApi.category_findlist({}).then((res) => {
this.categoryList = res.children;
});

4）如何获取选择的分类

用户在选择课程分类后，所选分类ID绑定到categoryActive（数组）中，选择了一级、二级分类，分别存储在categoryActive数组的第一个、第二个元素中。

5）效果

4.新增课程保存提交

1）定义Api方法

在前端定义请求服务端添加课程的api的方法，在course模块中定义方法如下：
文件位置：xc-ui-pc-teach\src\module\course\api\course.js

/*添加课程基础信息*/
export const addCourseBase = params => {return http.requestPost(apiUrl+'/course/coursebase/add',params)
}

2）在course_add.vue 调用api提交课程信息

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

    methods: {//新增课程提交save () {//处理课程分类// 选择课程分类存储到categoryActivethis.courseForm.mt=  this.categoryActive[0]//大分类this.courseForm.st=  this.categoryActive[1]//小分类courseApi.addCourseBase(this.courseForm).then(res=>{if(res.success){this.$message.success("提交成功")//跳转到我的课程this.$router.push({ path: '/course/list'})}else{this.$message.error(res.message)}})}},

3）测试

注意：将course_base表中的company_id改为非必填，待认证功能开发完成再修改为必填
测试流程：
1、进入我的课程，点击“新增课程”打开新增课程页面
2、输入课程信息，点击提交