• 谷粒学苑 —— 6、课程管理：课程发布页面1 —— 添加课程信息

    目录

    1、使用代码生成器生成代码

    2、添加课程信息

    2.1、后端代码

    2.1.1、创建 VO 类用于封装表单信息

    2.1.2、修改课程简介实体类的主键生成策略

    2.1.3、Service 方法

    2.1.4、Controller 方法

    2.2、前端

    2.2.1、添加路由

    2.2.2、整合步骤条组件

    2.2.3、讲师下拉列表

    2.2.3.1、组件

    2.2.3.2、定义 API

    2.2.3.3、组件脚本

    2.2.4、课程多级分类联动下拉列表

    2.2.4.1、组件

    2.2.4.2、组件脚本

    2.2.5、课程简介整合 Tinymce

    2.2.5.1、获取相关组件

    2.2.5.2、配置 HTML 变量

    2.2.5.3、在页面引入 JS 脚本

    2.2.5.4、在需要使用的页面引入组件

    2.2.5.5、添加组件样式

    2.2.5.6、页面组件

    4、课程信息修改

    4.1、后端

    4.1.1、根据课程 ID 查询课程信息

    4.1.2、根据课程 ID 修改课程信息

    4.2、前端

    4.2.1、定义 API

    4.2.2、课程信息回显及监听路由变化

    4.2.3、实现修改

    5、课程信息完整页面(含表单校验)

    1、使用代码生成器生成代码

    在 CodeGenerator 中修改代码生成对应的表名

    strategy.setInclude("edu_course", "edu_course_description", "edu_chapter", "edu_video"); // 对应的表名

    修改完后执行即可，生成后可以将 EduCourseDescriptionController 课程简介的 Controller 删去，将课程简介相关代码放在 EduCourseController 中。

    并在 EduCourseController 的上面添加 @CrossOrigin 注解解决跨域问题，在每个 mapper 上添加 @Mapper 注解

    2、添加课程信息

    2.1、后端代码

    2.1.1、创建 VO 类用于封装表单信息

    1. @ApiModel(value = "课程基本信息", description = "编辑课程基本信息的表单对象")
    2. @Data
    3. public class CourseInfoVO implements Serializable {
    4.  
    5.     private static final long serialVersionUID = 1L;
    6.  
    7.     @ApiModelProperty(value = "课程ID")
    8.     private String id;
    9.  
    10.     @ApiModelProperty(value = "课程讲师ID")
    11.     private String teacherId;
    12.  
    13.     @ApiModelProperty(value = "一级分类ID")
    14.     private String subjectParentId;
    15.  
    16.     @ApiModelProperty(value = "二级分类ID")
    17.     private String subjectId;
    18.  
    19.     @ApiModelProperty(value = "课程标题")
    20.     private String title;
    21.  
    22.     @ApiModelProperty(value = "课程销售价格，设置为0则可免费观看")
    23.     private BigDecimal price;
    24.  
    25.     @ApiModelProperty(value = "总课时")
    26.     private Integer lessonNum;
    27.  
    28.     @ApiModelProperty(value = "课程封面图片路径")
    29.     private String cover;
    30.  
    31.     @ApiModelProperty(value = "课程简介")
    32.     private String description;
    33.  
    34. }

    2.1.2、修改课程简介实体类的主键生成策略

    修改为手动设置 

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

    2.1.3、Service 方法

    在 EduCourseService 中添加方法

    1.     /**
    2.      * 添加课程基本信息
    3.      * @param courseInfoVO 课程基本信息的表单对象
    4.      * @return 返回添加后的课程信息id
    5.      */
    6.     String saveCourseInfo(CourseInfoVO courseInfoVO);

    在 EduCourseServiceImpl 中添加方法

    1.     @Autowired
    2.     private EduCourseDescriptionService courseDescriptionService;
    3.  
    4.     /**
    5.      * 添加课程基本信息
    6.      * @param courseInfoVO 课程基本信息的表单对象
    7.      */
    8.     @Override
    9.     public String saveCourseInfo(CourseInfoVO courseInfoVO) {
    10.         // 向课程表添加课程基本信息
    11.         EduCourse eduCourse = new EduCourse();
    12.         BeanUtils.copyProperties(courseInfoVO, eduCourse);
    13.         boolean isSave = this.save(eduCourse);
    14.         if(!isSave) {
    15.             // 添加失败
    16.             throw new GuliException(20001, "添加课程信息失败");
    17.         }
    18.  
    19.         String id = eduCourse.getId();
    20.  
    21.         // 向课程简介表添加课程简介
    22.         EduCourseDescription courseDescription = new EduCourseDescription();
    23.         courseDescription.setId(id);
    24.         courseDescription.setDescription(courseInfoVO.getDescription());
    25.         courseDescriptionService.save(courseDescription);
    26.  
    27.         return id;
    28.     }

    2.1.4、Controller 方法

    在 EduCourseController 中添加方法

    1.     @Autowired
    2.     private EduCourseService courseService;
    3.  
    4.     /**
    5.      * 添加课程基本信息
    6.      * @param courseInfoVO 课程基本信息的表单对象
    7.      * @return 返回添加后的课程信息id
    8.      */
    9.     @PostMapping("/addCourseInfo")
    10.     public R addCourseInfo(
    11.             @ApiParam(name = "CourseInfoVO", value = "课程基本信息的表单对象", required = true) @RequestBody CourseInfoVO courseInfoVO
    12.     ){
    13.         String id = courseService.saveCourseInfo(courseInfoVO);
    14.         return R.ok();
    15.     }

    2.2、前端

    2.2.1、添加路由

    在 src\router\index.js 中添加路由

    1.   {
    2.     path: '/course',
    3.     component: Layout,
    4.     redirect: '/course/lsit',
    5.     name: '课程管理',
    6.     meta: { title: '课程管理', icon: 'example' },
    7.     children: [  // 子标签
    8.       {
    9.         path: 'table',
    10.         name: '课程列表',
    11.         component: () => import('@/views/edu/course/list'),
    12.         meta: { title: '课程列表', icon: 'table' }
    13.       },
    14.       {
    15.         path: 'save',
    16.         name: '添加课程',
    17.         component: () => import('@/views/edu/course/info'), 
    18.         meta: { title: '添加课程', icon: 'tree' }
    19.       },
    20.       {
    21.         path: 'info/:id',
    22.         name: 'EduCourseInfoEdit',
    23.         component: () => import('@/views/edu/course/info'),
    24.         meta: { title: '编辑课程基本信息', noCache: true },
    25.         hidden: true  // 隐藏路由
    26.       },
    27.       {
    28.         path: 'chapter/:id',
    29.         name: 'EduCourseChapterEdit',
    30.         component: () => import('@/views/edu/course/chapter'),
    31.         meta: { title: '编辑课程大纲', noCache: true },
    32.         hidden: true
    33.       },
    34.       {
    35.         path: 'publish/:id',
    36.         name: 'EduCoursePublishEdit',
    37.         component: () => import('@/views/edu/course/publish'),
    38.         meta: { title: '发布课程', noCache: true },
    39.         hidden: true
    40.       }
    41.     ]
    42.   },

    2.2.2、整合步骤条组件

    src\views\edu\course\info.vue

    1. <template>
    2.  
    3.   <div class="app-container">
    4.  
    5.     <h2 style="text-align: center;">发布新课程h2>
    6.  
    7.     <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
    8.       <el-step title="填写课程基本信息"/>
    9.       <el-step title="创建课程大纲"/>
    10.       <el-step title="提交审核"/>
    11.     el-steps>
    12.  
    13.     <el-form label-width="120px">
    14.  
    15.       <el-form-item>
    16.         <el-button :disabled="saveBtnDisabled" type="primary" @click="next">保存并下一步el-button>
    17.       el-form-item>
    18.     el-form>
    19.   div>
    20. template>
    21. <script>
    22. export default {
    23.   data() {
    24.     return {
    25.       saveBtnDisabled: false // 保存按钮是否禁用
    26.     }
    27.   },
    28.  
    29.   created() {
    30.     console.log('info created')
    31.   },
    32.  
    33.   methods: {
    34.  
    35.     next() {
    36.       console.log('next')
    37.       this.$router.push({ path: '/edu/course/chapter/1' })
    38.     }
    39.   }
    40. }
    41. script>

    src\views\edu\course\chapter.vue

    1. <template>
    2.  
    3.   <div class="app-container">
    4.  
    5.     <h2 style="text-align: center;">发布新课程h2>
    6.  
    7.     <el-steps :active="2" process-status="wait" align-center style="margin-bottom: 40px;">
    8.       <el-step title="填写课程基本信息"/>
    9.       <el-step title="创建课程大纲"/>
    10.       <el-step title="提交审核"/>
    11.     el-steps>
    12.  
    13.     <el-form label-width="120px">
    14.  
    15.       <el-form-item>
    16.         <el-button @click="previous">上一步el-button>
    17.         <el-button :disabled="saveBtnDisabled" type="primary" @click="next">下一步el-button>
    18.       el-form-item>
    19.     el-form>
    20.   div>
    21. template>
    22.  
    23. <script>
    24.  
    25. export default {
    26.   data() {
    27.     return {
    28.       saveBtnDisabled: false // 保存按钮是否禁用
    29.     }
    30.   },
    31.  
    32.   created() {
    33.     console.log('chapter created')
    34.   },
    35.  
    36.   methods: {
    37.     previous() {
    38.       console.log('previous')
    39.       this.$router.push({ path: '/edu/course/info/1' })
    40.     },
    41.  
    42.     next() {
    43.       console.log('next')
    44.       this.$router.push({ path: '/edu/course/publish/1' })
    45.     }
    46.   }
    47. }
    48. script>

    src\views\edu\course\publish.vue

    1. <template>
    2.  
    3.   <div class="app-container">
    4.  
    5.     <h2 style="text-align: center;">发布新课程h2>
    6.  
    7.     <el-steps :active="3" process-status="wait" align-center style="margin-bottom: 40px;">
    8.       <el-step title="填写课程基本信息"/>
    9.       <el-step title="创建课程大纲"/>
    10.       <el-step title="提交审核"/>
    11.     el-steps>
    12.  
    13.     <el-form label-width="120px">
    14.  
    15.       <el-form-item>
    16.         <el-button @click="previous">返回修改el-button>
    17.         <el-button :disabled="saveBtnDisabled" type="primary" @click="publish">发布课程el-button>
    18.       el-form-item>
    19.     el-form>
    20.   div>
    21. template>
    22.  
    23. <script>
    24.  
    25. export default {
    26.   data() {
    27.     return {
    28.       saveBtnDisabled: false // 保存按钮是否禁用
    29.     }
    30.   },
    31.  
    32.   created() {
    33.     console.log('publish created')
    34.   },
    35.  
    36.   methods: {
    37.     previous() {
    38.       console.log('previous')
    39.       this.$router.push({ path: '/edu/course/chapter/1' })
    40.     },
    41.  
    42.     publish() {
    43.       console.log('publish')
    44.       this.$router.push({ path: '/edu/course/list' })
    45.     }
    46.   }
    47. }
    48. script>

    2.2.3、讲师下拉列表

    2.2.3.1、组件

    1.             
    2.             <el-form-item label="课程讲师">
    3.                 <el-select v-model="courseInfo.teacherId" placeholder="请选择">
    4.                     <el-option 
    5.                         v-for="teacher in teacherList" 
    6.                         :key="teacher.id" 
    7.                         :label="teacher.name"
    8.                         :value="teacher.id" 
    9.                     />
    10.                 el-select>
    11.             el-form-item>

    2.2.3.2、定义 API

    src\api\edu\course.js

    1.     /**
    2.      * 获取所有讲师信息
    3.      * @returns 
    4.      */
    5.     getTeacherList() {
    6.         return request({
    7.             url: '/eduservice/teacher/findAll',
    8.             method: 'GET'
    9.         })
    10.     }

    2.2.3.3、组件脚本

    在 data 中定义

    teacherList: [],    // 所有讲师信息

    页面渲染前获取讲师信息

    1.     created() {
    2.         this.getListTeacher();
    3.     },
    4.     methods: {
    5.         /**
    6.          * 获取所有讲师信息
    7.          */
    8.         getListTeacher() {
    9.             course.getTeacherList().then(response => {
    10.                 this.teacherList = response.data.items;
    11.             })
    12.         }
    13.     }

    2.2.4、课程多级分类联动下拉列表

    2.2.4.1、组件

    1.             
    2.             <el-form-item label="课程类别">
    3.                 
    4.                 <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
    5.                     <el-option 
    6.                         v-for="subject in subjectOneList" 
    7.                         :key="subject.id" 
    8.                         :label="subject.title"
    9.                         :value="subject.id" 
    10.                     />
    11.                 el-select>
    12.                 
    13.                 <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
    14.                     <el-option 
    15.                         v-for="subject in subjectTwoList" 
    16.                         :key="subject.id" 
    17.                         :label="subject.title" 
    18.                         :value="subject.id" 
    19.                     />
    20.                 el-select>
    21.             el-form-item>

    2.2.4.2、组件脚本

    在 data 中定义

    1.             subjectOneList: [], // 所有一级分类
    2.             subjectTwoList: [], // 所有二级分类

    使用

    1.     created() {
    2.         this.getListTeacher();
    3.         this.getOneSubject();
    4.     },
    5.     methods: {
    6.         /**
    7.          * 查询所有一级分类(一级分类下含有其包含的二级分类)
    8.          */
    9.         getOneSubject() {
    10.             subject.getSubjectList().then(response => {
    11.                 this.subjectOneList = response.data.list;
    12.             })
    13.         },
    14.  
    15.         /**
    16.          * 更换选择的一级分类调用的方法，更新二级分类数据
    17.          * @param {*} value 一级分类ID
    18.          */
    19.         subjectLevelOneChanged(value) {
    20.             // 初始化
    21.             this.subjectTwoList = [];
    22.             this.courseInfo.subjectId = '';
    23.  
    24.             // 遍历所有一级分类，若其ID和value的值相等，将其孩子(二级分类)赋值给subjectTwoList
    25.             for(var i = 0; i < this.subjectOneList.length; i++) {
    26.                 if(value === this.subjectOneList[i].id) {
    27.                     this.subjectTwoList = this.subjectOneList[i].children;
    28.                 }
    29.             }
    30.         }
    31.     }

    2.2.5、课程简介整合 Tinymce

    2.2.5.1、获取相关组件

    在项目源码的 day07 的 富文本编辑器组件 中，复制到项目对应的目录下

    2.2.5.2、配置 HTML 变量

    在 build\webpack.dev.conf.js 添加配置，使在 htm l页面中可以使用这里定义的BASE_URL变量

    1. new HtmlWebpackPlugin({
    2.     ......,
    3.     templateParameters: {
    4.         BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
    5.     }
    6. })

    2.2.5.3、在页面引入 JS 脚本

    在 index.html 中引入

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

    引入后若报错，需要重启项目

    2.2.5.4、在需要使用的页面引入组件

    在 src\views\edu\course\info.vue 中引入

    1. import Tinymce from '@/components/Tinymce'
    2.  
    3. export default {
    4.     // 声明组件
    5.     components: {Tinymce},
    6.     ……,
    7. }

    2.2.5.5、添加组件样式

    在 src\views\edu\course\info.vue 的末尾添加组件样式

    1. <style scoped>
    2. .tinymce-container {
    3.     line-height: 29px;
    4. }
    5. style>

    2.2.5.6、页面组件

    1.             
    2.             <el-form-item label="课程简介">
    3.                 <tinymce :height="300" v-model="courseInfo.description" />
    4.             el-form-item>

    4、课程信息修改

    在课程大纲页面点击上一步后，可以回显课程信息，并且可以保存修改

    4.1、后端

    4.1.1、根据课程 ID 查询课程信息

    EduCourseService

    1.     /**
    2.      * 根据课程ID查询课程信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     CourseInfoVO getCourseInfo(String courseId);

    EduCourseServiceImpl

    1.     /**
    2.      * 根据课程ID查询课程信息
    3.      * @param courseId 课程ID
    4.      * @return
    5.      */
    6.     @Override
    7.     public CourseInfoVO getCourseInfo(String courseId) {
    8.         CourseInfoVO courseInfoVO = new CourseInfoVO();
    9.  
    10.         // 查询课程基本信息
    11.         EduCourse course = this.getById(courseId);
    12.         BeanUtils.copyProperties(course, courseInfoVO);
    13.  
    14.         // 查询课程简介
    15.         EduCourseDescription description = courseDescriptionService.getById(courseId);
    16.         BeanUtils.copyProperties(description, courseInfoVO);
    17.  
    18.         return courseInfoVO;
    19.     }

    EduCourseController

    1.     /**
    2.      * 根据课程ID查询课程信息
    3.      * @return
    4.      */
    5.     @ApiOperation(value = "根据课程ID查询课程信息")
    6.     @GetMapping("/getCourseInfo/{courseId}")
    7.     public R getCourseInfo(
    8.             @ApiParam(name = "courseId", value = "课程ID", required = true) @PathVariable String courseId
    9.     ) {
    10.         CourseInfoVO course = courseService.getCourseInfo(courseId);
    11.         return R.ok().data("courseInfo", course);
    12.     }

    4.1.2、根据课程 ID 修改课程信息

    EduCourseService

    1.     /**
    2.      * 更新指定课程ID的课程
    3.      * @param courseInfoVO 修改内容
    4.      */
    5.     void updateCourseInfo(CourseInfoVO courseInfoVO);

    EduCourseServiceImpl

    1.     /**
    2.      * 更新指定课程ID的课程
    3.      * @param courseInfoVO 修改内容
    4.      */
    5.     @Override
    6.     public void updateCourseInfo(CourseInfoVO courseInfoVO) {
    7.         // 修改课程表
    8.         EduCourse eduCourse = new EduCourse();
    9.         BeanUtils.copyProperties(courseInfoVO, eduCourse);
    10.         boolean a = this.updateById(eduCourse);
    11.         if(!a){
    12.             throw new GuliException(20001, "修改课程基本信息失败");
    13.         }
    14.  
    15.         // 修改简介表
    16.         EduCourseDescription courseDescription = new EduCourseDescription();
    17.         courseDescription.setId(courseInfoVO.getId());
    18.         courseDescription.setDescription(courseInfoVO.getDescription());
    19.         boolean b = courseDescriptionService.updateById(courseDescription);
    20.         if(!b) {
    21.             throw new GuliException(20001, "修改课程简介失败");
    22.         }
    23.     }

    EduCourseController

    1.     /**
    2.      * 更新指定课程ID的课程
    3.      * @param courseInfoVO 修改内容
    4.      * @return
    5.      */
    6.     @ApiOperation("更新指定课程ID的课程")
    7.     @PostMapping("/updateCourseInfo")
    8.     public R updateCourseInfo(
    9.             @ApiParam(name = "courseInfoVO", value = "课程基本信息", required = true) @RequestBody CourseInfoVO courseInfoVO
    10.     ) {
    11.         courseService.updateCourseInfo(courseInfoVO);
    12.         return R.ok();
    13.     }

    4.2、前端

    4.2.1、定义 API

    在 src\api\edu\course.js 中定义方法

    1.     /**
    2.      * 根据课程ID获取课程信息
    3.      * @param {*} courseId 
    4.      * @returns 
    5.      */
    6.     getCourseInfoById(courseId) {
    7.         return request({
    8.             url: `/eduservice/course/getCourseInfo/${courseId}`,
    9.             method: 'GET'
    10.         })
    11.     },
    12.  
    13.     /**
    14.      * 修改指定课程ID的信息
    15.      * @param {*} courseInfo 
    16.      * @returns 
    17.      */
    18.     updateConrseInfo(courseInfo) {
    19.         return request({
    20.             url: `/eduservice/course//updateCourseInfo`,
    21.             method: 'POST',
    22.             data: courseInfo
    23.         })
    24.     }

    4.2.2、课程信息回显及监听路由变化

    在 methods 中定义方法

    1.         /**
    2.          * 根据课程ID获取课程信息，同时给课程分类的级联下拉列表赋值
    3.          */
    4.         getCourseInfoById() {
    5.             course.getCourseInfoById(this.courseId).then(response => {
    6.                 this.courseInfo = response.data.courseInfo;     // 获取课程信息
    7.  
    8.                 subject.getSubjectList().then(response => {
    9.                     this.subjectOneList = response.data.list;   // 一级分类赋值
    10.                     this.subjectTwoList = [];   // 初始化二级分类
    11.  
    12.                     // 遍历所有一级分类
    13.                     for (var i = 0; i < this.subjectOneList.length; i++) {
    14.                         if (this.courseInfo.subjectParentId === this.subjectOneList[i].id) {
    15.                             // 二级分类赋值
    16.                             this.subjectTwoList = this.subjectOneList[i].children;
    17.                         }
    18.                     }
    19.                 });
    20.             })
    21.         },
    22.  
    23.         /**
    24.          * 初始化数据
    25.          */
    26.         init() {
    27.             this.getListTeacher();  // 获取所有教师信息
    28.  
    29.             // 获取路由ID值
    30.             if (this.$route.params && this.$route.params.id) {
    31.                 this.courseId = this.$route.params.id;
    32.                 this.getCourseInfoById();   // 获取课程信息
    33.             } else {
    34.                 this.courseInfo = {
    35.                     title: '',
    36.                     subjectId: '',  // 二级分类ID
    37.                     subjectParentId: '', // 一级分类ID
    38.                     teacherId: '',
    39.                     lessonNum: undefined,
    40.                     description: null,
    41.                     cover: '/static/course_cover.jpg',
    42.                     price: ''
    43.                 };
    44.                 this.courseInfo.description = null; // 解决Tinymce富文本清空不了问题
    45.                 this.getOneSubject();   // 获取所有一级分类
    46.             }
    47.         },

    在 created 和 watch 中调用

    1.     watch: {
    2.         // 路由发生变化就会执行
    3.         $route(to, from) {
    4.             this.init();
    5.         }
    6.     },
    7.     created() {
    8.         this.init();
    9.     },

    4.2.3、实现修改

    修改 methods 中的 saveOrUpdate 方法，并添加方法

    1.         /**
    2.          * 点击下一步跳转到src\views\edu\course\chapter.vue页面
    3.          * 同时保存或修改课程信息
    4.          */
    5.         saveOrUpdate() {
    6.             if(!this.courseId) {
    7.                 this.addCourseInfo();
    8.             } else {
    9.                 this.updateCourseInfo();
    10.             }
    11.         },
    12.  
    13.         /**
    14.          * 添加课程信息
    15.          */
    16.         addCourseInfo() {
    17.             this.$refs['loginForm'].validate((valid) => {
    18.                 if (valid) {
    19.                     course.addCourseInfo(this.courseInfo).then(response => {
    20.                         // 提示
    21.                         this.$message({
    22.                             type: 'success',
    23.                             message: '课程信息保存成功'
    24.                         });
    25.  
    26.                         // 跳转到下一页面，附带课程信息id
    27.                         this.$router.push({ path: '/course/chapter/' + response.data.courseId });
    28.                     })
    29.                 } else {
    30.                     return false;
    31.                 }
    32.             });
    33.         },
    34.  
    35.         /**
    36.          * 修改课程信息
    37.          */
    38.         updateCourseInfo() {
    39.             this.$refs['loginForm'].validate((valid) => {
    40.                 if (valid) {
    41.                     course.updateConrseInfo(this.courseInfo).then(response => {
    42.                         // 提示
    43.                         this.$message({
    44.                             type: 'success',
    45.                             message: '课程信息修改成功'
    46.                         });
    47.  
    48.                         // 跳转到下一页面，附带课程信息id
    49.                         this.$router.push({ path: '/course/chapter/' + this.courseId });
    50.                     })
    51.                 } else {
    52.                     return false;
    53.                 }
    54.             });
    55.         }

    5、课程信息完整页面(含表单校验)

    1. <template>
    2.     <div class="app-container">
    3.         <h2 style="text-align: center;">发布新课程h2>
    4.  
    5.         <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
    6.             <el-step title="填写课程基本信息" />
    7.             <el-step title="创建课程大纲" />
    8.             <el-step title="最终发布" />
    9.         el-steps>
    10.  
    11.         <el-form label-width="120px" :rules="rules" ref="loginForm" :model="courseInfo">
    12.             <el-form-item label="课程标题" prop="title">
    13.                 <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写" />
    14.             el-form-item>
    15.  
    16.             
    17.             <el-form-item label="课程类别">
    18.                 <el-col :span="5">
    19.                     <el-form-item prop="subjectParentId">
    20.                         
    21.                         <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectLevelOneChanged">
    22.                             <el-option 
    23.                                 v-for="subject in subjectOneList" 
    24.                                 :key="subject.id" 
    25.                                 :label="subject.title"
    26.                                 :value="subject.id" 
    27.                             />
    28.                         el-select>
    29.                     el-form-item>
    30.                 el-col>
    31.                 <el-col :span="5">
    32.                     <el-form-item prop="subjectId">
    33.                         
    34.                         <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
    35.                             <el-option 
    36.                                 v-for="subject in subjectTwoList" 
    37.                                 :key="subject.id" 
    38.                                 :label="subject.title" 
    39.                                 :value="subject.id" 
    40.                             />
    41.                         el-select>
    42.                     el-form-item>
    43.                 el-col>
    44.             el-form-item>
    45.             
    46.  
    47.             
    48.             <el-form-item label="课程讲师" prop="teacherId">
    49.                 <el-select v-model="courseInfo.teacherId" placeholder="请选择">
    50.                     <el-option 
    51.                         v-for="teacher in teacherList" 
    52.                         :key="teacher.id" 
    53.                         :label="teacher.name"
    54.                         :value="teacher.id" 
    55.                     />
    56.                 el-select>
    57.             el-form-item>
    58.  
    59.             <el-form-item label="总课时" prop="lessonNum">
    60.                 <el-input-number :min="1" v-model="courseInfo.lessonNum" placeholder="请填写课程的总课时数" />
    61.             el-form-item>
    62.  
    63.             
    64.             <el-form-item label="课程简介" prop="description">
    65.                 <tinymce ref="description" :height="300" v-model="courseInfo.description" />
    66.             el-form-item>
    67.  
    68.             
    69.             <el-form-item label="课程封面">
    70.                 <el-upload :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
    71.                     :action="BASE_API +'/eduoss/fileoss/upload'" class="avatar-uploader">
    72.                     <img :src="courseInfo.cover">
    73.                 el-upload>
    74.             el-form-item>
    75.  
    76.             <el-form-item label="课程价格">
    77.                 <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"
    78.                     placeholder="免费课程请设置为0元" /> 元
    79.             el-form-item>
    80.  
    81.             <el-form-item>
    82.                 <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步el-button>
    83.             el-form-item>
    84.         el-form>
    85.     div>
    86. template>
    87. <script>
    88. import course from '@/api/edu/course'
    89. import subject from '@/api/edu/subject'
    90. import Tinymce from '@/components/Tinymce'
    91.  
    92. export default {
    93.     // 声明组件
    94.     components: {Tinymce},
    95.  
    96.     data() {
    97.         return {
    98.             saveBtnDisabled: false,
    99.             courseInfo: {
    100.                 title: '',
    101.                 subjectId: '',  // 二级分类ID
    102.                 subjectParentId:'', // 一级分类ID
    103.                 teacherId: '',
    104.                 lessonNum: undefined,
    105.                 description: '',
    106.                 cover: '/static/course_cover.jpg',
    107.                 price: ''
    108.             },
    109.             teacherList: [],    // 所有讲师信息
    110.             subjectOneList: [], // 所有一级分类
    111.             subjectTwoList: [], // 所有二级分类
    112.             BASE_API: process.env.BASE_API, // 接口API地址
    113.             rules: {
    114.                 title: [
    115.                     { required: true, message: '请输入课程名称', trigger: 'blur' },
    116.                     { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
    117.                 ],
    118.                 subjectId: [
    119.                     { required: true, message: '请选择活动区域', trigger: 'blur' }
    120.                 ],
    121.                 subjectParentId: [
    122.                     { required: true, message: '请选择活动区域', trigger: 'blur' }
    123.                 ],
    124.                 teacherId: [
    125.                     { required: true, message: '请选择活动区域', trigger: 'blur' }
    126.                 ],
    127.                 lessonNum: [
    128.                     { required: true, message: '请输入课时数', type:'number', trigger: 'blur' }
    129.                 ],
    130.                 description: [
    131.                     { required: true, message: '请选择讲师头衔', trigger: 'blur' }
    132.                 ]
    133.             }
    134.         }
    135.     },
    136.     watch: {
    137.         // 路由发生变化就会执行
    138.         $route(to, from) {
    139.             this.init();
    140.         }
    141.     },
    142.     created() {
    143.         this.init();
    144.     },
    145.     methods: {
    146.         /**
    147.          * 获取所有讲师信息
    148.          */
    149.         getListTeacher() {
    150.             course.getTeacherList().then(response => {
    151.                 this.teacherList = response.data.items;
    152.             })
    153.         },
    154.  
    155.         /**
    156.          * 查询所有一级分类(一级分类下含有其包含的二级分类)
    157.          */
    158.         getOneSubject() {
    159.             subject.getSubjectList().then(response => {
    160.                 this.subjectOneList = response.data.list;
    161.             })
    162.         },
    163.  
    164.         /**
    165.          * 更换选择的一级分类调用的方法，更新二级分类数据
    166.          * @param {*} value 一级分类ID
    167.          */
    168.         subjectLevelOneChanged(value) {
    169.             // 初始化
    170.             this.subjectTwoList = [];
    171.             this.courseInfo.subjectId = '';
    172.  
    173.             // 遍历所有一级分类，若其ID和value的值相等，将其孩子(二级分类)赋值给subjectTwoList
    174.             for(var i = 0; i < this.subjectOneList.length; i++) {
    175.                 if(value === this.subjectOneList[i].id) {
    176.                     // 二级分类赋值
    177.                     this.subjectTwoList = this.subjectOneList[i].children;
    178.                 }
    179.             }
    180.         },
    181.  
    182.         /**
    183.          * 课程封面上传之前调用的方法：设置文件格式及大小
    184.          * @param {*} file 上传的文件
    185.          */
    186.         beforeAvatarUpload(file) {
    187.             const isJPG = file.type === 'image/jpeg';
    188.             const isLt2M = file.size / 1024 / 1024 < 2;
    189.  
    190.             if (!isJPG) {
    191.                 this.$message.error('上传头像图片只能是 JPG 格式!');
    192.             }
    193.             if (!isLt2M) {
    194.                 this.$message.error('上传头像图片大小不能超过 2MB!');
    195.             }
    196.             return isJPG && isLt2M;
    197.         },
    198.  
    199.         /**
    200.          * 课程封面上传成功调用的方法
    201.          * @param {*} res 就是response
    202.          * @param {*} file 
    203.          */
    204.         handleAvatarSuccess(res, file) {
    205.             this.courseInfo.cover = res.data.url;
    206.         },
    207.  
    208.         /**
    209.          * 根据课程ID获取课程信息，同时给课程分类的级联下拉列表赋值
    210.          */
    211.         getCourseInfoById() {
    212.             course.getCourseInfoById(this.courseId).then(response => {
    213.                 this.courseInfo = response.data.courseInfo;     // 获取课程信息
    214.  
    215.                 subject.getSubjectList().then(response => {
    216.                     this.subjectOneList = response.data.list;   // 一级分类赋值
    217.                     this.subjectTwoList = [];   // 初始化二级分类
    218.  
    219.                     // 遍历所有一级分类
    220.                     for (var i = 0; i < this.subjectOneList.length; i++) {
    221.                         if (this.courseInfo.subjectParentId === this.subjectOneList[i].id) {
    222.                             // 二级分类赋值
    223.                             this.subjectTwoList = this.subjectOneList[i].children;
    224.                         }
    225.                     }
    226.                 });
    227.             })
    228.         },
    229.  
    230.         /**
    231.          * 初始化数据
    232.          */
    233.         init() {
    234.             this.getListTeacher();  // 获取所有教师信息
    235.  
    236.             // 获取路由ID值
    237.             if (this.$route.params && this.$route.params.id) {
    238.                 this.courseId = this.$route.params.id;
    239.                 this.getCourseInfoById();   // 获取课程信息
    240.             } else {
    241.                 this.courseInfo = {
    242.                     title: '',
    243.                     subjectId: '',  // 二级分类ID
    244.                     subjectParentId: '', // 一级分类ID
    245.                     teacherId: '',
    246.                     lessonNum: undefined,
    247.                     description: null,
    248.                     cover: '/static/course_cover.jpg',
    249.                     price: ''
    250.                 };
    251.                 this.courseInfo.description = null; // 解决Tinymce富文本清空不了问题
    252.                 this.getOneSubject();   // 获取所有一级分类
    253.             }
    254.         },
    255.  
    256.  
    257.         /**
    258.          * 点击下一步跳转到src\views\edu\course\chapter.vue页面
    259.          * 同时保存或修改课程信息
    260.          */
    261.         saveOrUpdate() {
    262.             if(!this.courseId) {
    263.                 this.addCourseInfo();
    264.             } else {
    265.                 this.updateCourseInfo();
    266.             }
    267.         },
    268.  
    269.         /**
    270.          * 添加课程信息
    271.          */
    272.         addCourseInfo() {
    273.             this.$refs['loginForm'].validate((valid) => {
    274.                 if (valid) {
    275.                     course.addCourseInfo(this.courseInfo).then(response => {
    276.                         // 提示
    277.                         this.$message({
    278.                             type: 'success',
    279.                             message: '课程信息保存成功'
    280.                         });
    281.  
    282.                         // 跳转到下一页面，附带课程信息id
    283.                         this.$router.push({ path: '/course/chapter/' + response.data.courseId });
    284.                     })
    285.                 } else {
    286.                     return false;
    287.                 }
    288.             });
    289.         },
    290.  
    291.         /**
    292.          * 修改课程信息
    293.          */
    294.         updateCourseInfo() {
    295.             this.$refs['loginForm'].validate((valid) => {
    296.                 if (valid) {
    297.                     course.updateConrseInfo(this.courseInfo).then(response => {
    298.                         // 提示
    299.                         this.$message({
    300.                             type: 'success',
    301.                             message: '课程信息修改成功'
    302.                         });
    303.  
    304.                         // 跳转到下一页面，附带课程信息id
    305.                         this.$router.push({ path: '/course/chapter/' + this.courseId });
    306.                     })
    307.                 } else {
    308.                     return false;
    309.                 }
    310.             });
    311.         }
    312.  
    313.         
    314.     }
    315. }
    316. script>
    317. <style scoped>
    318. .tinymce-container {
    319.     line-height: 29px;
    320. }
    321. style>

  • 相关阅读:
    深度学习——使用块的网络VGG（笔记）
    java自定义异常
    阿里云Elasticsearch实验
    在线升级 redis 到7.2.2
    14种UML图（统一建模语言）
    UNIX/LINUX fork函数的问题 并不适合共享
    JQuery系列之事件
    pandas使用dropna函数删除dataframe数据中多个数据列的内容至少包含一个缺失值的数据行（使用subset参数指定多个数据列）
    遥感云大数据在灾害、水体与湿地领域经典案例及GPT模型应用教程
    典型跨时钟域（CDC）信号处理
  • 原文地址：https://blog.csdn.net/Mr_zhangyj/article/details/127475132