课程基本信息前后端实现

谁借莪１个温暖的怀抱￠ 2021-07-24 23:13 458阅读 0赞

# 一 后端接口 #

service\_edu微服务

## 1 定义form表单对象 ##

CourseInfoForm.java

@ApiModel("课程基本信息")
    @Data
    public class CourseInfoForm implements Serializable {
    
        private static final long serialVersionUID = 1L;
    
        @ApiModelProperty(value = "课程ID")
        private String id;
    
        @ApiModelProperty(value = "课程讲师ID")
        private String teacherId;
    
        @ApiModelProperty(value = "课程专业ID")
        private String subjectId;
    
        @ApiModelProperty(value = "课程专业父级ID")
        private String subjectParentId;
    
        @ApiModelProperty(value = "课程标题")
        private String title;
    
        @ApiModelProperty(value = "课程销售价格，设置为0则可免费观看")
        private BigDecimal price;
    
        @ApiModelProperty(value = "总课时")
        private Integer lessonNum;
    
        @ApiModelProperty(value = "课程封面图片路径")
        private String cover;
    
        @ApiModelProperty(value = "课程简介")
        private String description;
    }

## 2 CourseDescription主键策略 ##

在CourseDescription中添加主键定义，并定义生成策略为IdType.NONE

@Data
    @EqualsAndHashCode(callSuper = true)
    @Accessors(chain = true)
    @TableName("edu_course_description")
    @ApiModel(value="CourseDescription对象", description="课程简介")
    public class CourseDescription extends BaseEntity {
    
        private static final long serialVersionUID=1L;
    
        // 这里主键策略一定是NONE
        @ApiModelProperty(value = "课程ID")
        @TableId(value = "id", type = IdType.NONE)
        private String id;
    
    
        @ApiModelProperty(value = "课程简介")
        private String description;
    }

## 3 定义常量 ##

实体类Course.Java中定义

public static final String COURSE_DRAFT = "Draft"; // 未发布
    public static final String COURSE_NORMAL = "Normal"; // 已发布

## 4 定义控制层接口 ##

@CrossOrigin //允许跨域
    @Api(description = "课程管理")
    @RestController
    @RequestMapping("/admin/edu/course")
    @Slf4j
    public class CourseController {
    
    
        @Autowired
        private CourseService courseService;
    
    
        /**
         * 功能描述：新增课程
         *
         * @param courseInfoForm 前端传过来的DTO
         * @return R 返回给前端数据
         * @author cakin
         * @date 2020/12/5
         */
        @ApiOperation("新增课程")
        @PostMapping("save-course-info")
        public R saveCourseInfo(@ApiParam(value = "课程基本信息", required = true) @RequestBody CourseInfoForm courseInfoForm) {
            String courseId = courseService.saveCourseInfo(courseInfoForm);
            return R.ok().data("courseId", courseId).message("保存成功");
        }
    }

## 5 定义业务层方法 ##

接口：CourseService.java

/**
    * 功能描述：保存课程和课程详情信息
    *
    * @param courseInfoForm 前端传过来的课程表单
    * @return String 新生成的课程id
    * @author cakin
    * @date 2020/12/5
    */
    String saveCourseInfo(CourseInfoForm courseInfoForm);

实现：CourseServiceImpl.java

注意：这里使用了事务

/**
    * 功能描述：保存课程和课程详情信息
    *
    * @param courseInfoForm 前端传过来的课程表单
    * @return String 新生成的课程id
    * @author cakin
    * @date 2020/12/5
    */
    @Transactional(rollbackFor = Exception.class)
    @Override
    public String saveCourseInfo(CourseInfoForm courseInfoForm) {
        // 保存课程基本信息
        Course course = new Course();
        BeanUtils.copyProperties(courseInfoForm, course);
        course.setStatus(Course.COURSE_DRAFT);
        baseMapper.insert(course);
    
    
        // 保存课程详情信息
        CourseDescription courseDescription = new CourseDescription();
        courseDescription.setDescription(courseInfoForm.getDescription());
        courseDescription.setId(course.getId());
        courseDescriptionMapper.insert(courseDescription);
        return course.getId();
    }

# 二 前端实现 #

## 1 定义api ##

api/course.js

// 保存课程基本信息
      saveCourseInfo(courseInfo) {
        return request({
          url: '/admin/edu/course/save-course-info',
          method: 'post',
          data: courseInfo
        })
      },
      // 根据课程id获得课程信息
      getCourseInfoById(id) {
        return request({
          url: `/admin/edu/course/course-info/${id}`,
          method: 'get'
        })
      },
      // 更新课程信息
      updateCourseInfoById(courseInfo) {
        return request({
          url: '/admin/edu/course/update-course-info',
          method: 'put',
          data: courseInfo
        })
      },

## 2 组件模板 ##

src/views/course/components/Info.vue

<template>
      <div class="app-container">
        
        <el-form label-width="120px">
          
          <el-form-item label="课程标题">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
          </el-form-item>
          
          <el-form-item label="课程讲师">
            <el-select v-model="courseInfo.teacherId" placeholder="请选择">
              <el-option
                v-for="teacher in teacherList"
                :key="teacher.id"
                :value="teacher.id"
                :label="teacher.name" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="课程分类">
            
            <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="请选择"
              @change="subjectChanged">
              <el-option
                v-for="subject in subjectList"
                :key="subject.id"
                :value="subject.id"
                :label="subject.title" />
            </el-select>
            
            <el-select
              v-model="courseInfo.subjectId"
              placeholder="请选择">
              <el-option
                v-for="subject in subjectLevelTwoList"
                :key="subject.id"
                :value="subject.id"
                :label="subject.title" />
            </el-select>
          </el-form-item>
          
          <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
          </el-form-item>
          
          <el-form-item label="课程简介">
            <tinymce :height="300" v-model="courseInfo.description"/>
          </el-form-item>
          
          <el-form-item label="课程封面">
            
            <el-upload
              :show-file-list="false"
              :on-success="handleCoverSuccess"
              :before-upload="beforeCoverUpload"
              :on-error="handleCoverError"
              class="cover-uploader"
              action="http://localhost:8120/admin/oss/file/upload?module=cover">
              <img v-if="courseInfo.cover" :src="courseInfo.cover">
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </el-upload>
          </el-form-item>
          
          <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
          </el-form-item>
        </el-form>
    
    
        <div style="text-align:center">
          <el-button :disabled="saveBtnDisabled" type="primary" @click="saveAndNext()">保存并下一步</el-button>
        </div>
      </div>
    </template>

## 3 组件js ##

# 三 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/a42e0b26f9b94e23a0f9762129fc9f58.png