文章目录

一.效果展示
二.服务端
- 1.Api接口
- 2.Dao
- 3.Service
- 4.Controller
三.前端
- 1.页面完善
- - 1）创建course_add.vue页面
  - 2）course_add.vue页面路由
  - 3）course_list.vue中添加链接
- 2.查询数据字典
- - 1）视图中代码
  - 2）定义Api方法
  - 3）在视图中获取数据字典
  - 4）效果
- 3.查询课程分类
- - 1）视图中代码
  - 2）定义Api方法
  - 3）在视图中获取课程分类
  - 4）如何获取选择的分类
  - 5）效果
- 4.新增课程保存提交
- - 1）定义Api方法
  - 2）在course_add.vue 调用api提交课程信息
  - 3）测试

一.效果展示

二.服务端

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、输入课程信息，点击提交

学成在线--20.新增课程（最后完善）相关推荐

学成在线--18.新增课程（课程分类查询）
文章目录一.需求分析二.课程分类查询介绍三.数据结构四.数据格式五.数据模型六.Api接口七.服务器端 1.Dao 1)定义mapper 2)定义mapper映射文件 2.Service ...
学成在线--19.新增课程（数据字典）
文章目录一.介绍二.数据模型三.数据模型类四.字典查询API接口五.服务器端 1.Dao 2.Service 3.Controller 一.介绍在新增课程界面需要选择课程等级.课程状态等, ...
学成在线--16.添加课程计划
文章目录一.需求分析二.API接口三.后端 1.Dao 2.Service 3.Controller 4.测试四.前端 1.页面原型说明 1)添加按钮 2)视图部分 3)在数据模型中添加如下变 ...
学成在线--21.课程信息修改
文章目录一.需求分析二.课程管理导航页面 1.定义course_manage.vue为课程管理页面 2.创建各个信息管理页面 3.创建路由三.服务端 1.Api接口 1)根据课程ID查询课程信息 ...
微服务实战项目-学成在线-课程发布模块
学成在线-课程发布模块 1 模块需求分析 1.1 模块介绍课程信息编辑完毕即可发布课程,发布课程相当于一个确认操作,课程发布后学习者在网站可以搜索到课程,然后查看课程的详细信息,进一步选课.支付.在 ...
学成在线--课程发布模块
完整版请移步至我的个人博客查看:https://cyborg2077.github.io/ 学成在线–项目环境搭建学成在线–内容管理模块学成在线–媒资管理模块学成在线–课程发布模块学成在线–认 ...
学成在线第7天讲义-课程管理实战
1我的课程 1.1需求分析课程添加完成后可通过我的课程进入课程修改页面,此页面显示我的课程列表,如下图所示,可分页查询. 上边的查询要实现分页.会存在多表关联查询,所以建议使用mybatis实现我的 ...
学成在线课程页面
学成在线课程页面先把剩下两个页面中比较复杂的,也许要超链接的页面做掉了. 大部分布局上的功能都实现了,就剩下一些细节上的:例如说没有补上的注释,以及字体大小颜色上的细节方面.div都分了,cla ...
学成在线课程列表页面
学成在线课程列表页面在美好的礼拜天,正好我们不调休,把最后一个页面给完成了. 和其他用浮动座位布局方式比起来,课程类表页面最终还是使用了flexbox去布局,一来主要内容最下面的分页部分用浮 ...

学成在线--20.新增课程（最后完善）

文章目录

一.效果展示

二.服务端

1.Api接口

2.Dao

3.Service

4.Controller

三.前端

1.页面完善

1）创建course_add.vue页面

2）course_add.vue页面路由

3）course_list.vue中添加链接

2.查询数据字典

1）视图中代码

2）定义Api方法

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

4）效果

3.查询课程分类

1）视图中代码

2）定义Api方法

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

4）如何获取选择的分类

5）效果

4.新增课程保存提交

1）定义Api方法

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

3）测试

学成在线--20.新增课程（最后完善）相关推荐

最新文章

热门文章