谷粒学院66——课程管理模块的功能实现

3.2数据库设计

image-20211112223608207

数据建表过程如下。

CREATE TABLE `edu_course_description` (
  `id` char(19) NOT NULL COMMENT '课程ID',
  `description` text COMMENT '课程简介',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='课程简介';

#
# Data for table "edu_course_description"
#

INSERT INTO `edu_course_description` VALUES ('1104870479077879809','<p>11</p>','2019-03-11 06:23:44','2019-03-11 06:23:44'),('1192252213659774977','<p>测试</p>','2019-11-07 09:27:33','2019-11-13 16:21:28'),('14','','2019-03-13 06:04:43','2019-03-13 06:05:33'),('15','','2019-03-13 06:03:33','2019-03-13 06:04:22'),('18','<p>本套Java视频完全针对零基础学员，课堂实录，自发布以来，好评如潮！Java视频中注重与学生互动，讲授幽默诙谐、细致入微，覆盖Java基础所有核心知识点，同类Java视频中也是代码量大、案例多、实战性强的。同时，本Java视频教程注重技术原理剖析，深入JDK源码，辅以代码实战贯穿始终，用实践驱动理论，并辅以必要的代码练习。</p>\n<p>------------------------------------</p>\n<p>视频特点：</p>\n<p>通过学习本Java视频教程，大家能够真正将Java基础知识学以致用、活学活用，构架Java编程思想，牢牢掌握\"源码级\"的Javase核心技术，并为后续JavaWeb等技术的学习奠定扎实基础。<br /><br />1.通俗易懂，细致入微：每个知识点高屋建瓴，深入浅出，简洁明了的说明问题<br />2.具实战性：全程真正代码实战，涵盖上百个企业应用案例及练习<br />3.深入：源码分析，更有 Java 反射、动态代理的实际应用等<br />4.登录尚硅谷官网，技术讲师免费在线答疑</p>','2019-03-06 18:06:36','2019-10-30 19:58:36');

CREATE TABLE `edu_video` (
  `id` char(19) NOT NULL COMMENT '视频ID',
  `course_id` char(19) NOT NULL COMMENT '课程ID',
  `chapter_id` char(19) NOT NULL COMMENT '章节ID',
  `title` varchar(50) NOT NULL COMMENT '节点名称',
  `video_source_id` varchar(100) DEFAULT NULL COMMENT '云端视频资源',
  `video_original_name` varchar(100) DEFAULT NULL COMMENT '原始文件名称',
  `sort` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '排序字段',
  `play_count` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '播放次数',
  `is_free` tinyint(1) unsigned NOT NULL DEFAULT '0' COMMENT '是否可以试听：0收费 1免费',
  `duration` float NOT NULL DEFAULT '0' COMMENT '视频时长（秒）',
  `status` varchar(20) NOT NULL DEFAULT 'Empty' COMMENT 'Empty未上传 Transcoding转码中  Normal正常',
  `size` bigint(20) unsigned NOT NULL DEFAULT '0' COMMENT '视频源文件大小（字节）',
  `version` bigint(20) unsigned NOT NULL DEFAULT '1' COMMENT '乐观锁',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_course_id` (`course_id`),
  KEY `idx_chapter_id` (`chapter_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT='课程视频';

#
# Data for table "edu_video"
#

INSERT INTO `edu_video` VALUES ('1182499307429339137','18','32','第一节','','',0,0,0,0,'',0,1,'2019-10-11 11:32:59','2019-10-11 11:57:38'),('1185312444399071234','14','1','12','','',0,0,0,0,'Empty',0,1,'2019-10-19 05:51:23','2019-10-19 05:51:33'),('1189434737808990210','18','44','测试','','',1,0,0,0,'Empty',0,1,'2019-10-30 14:51:55','2019-10-30 14:51:55'),('1189471423678939138','18','1181729226915577857','test','2b887dc9584d4dc68908780ec57cd3b9','视频',1,0,0,0,'Empty',0,1,'2019-10-30 17:17:41','2019-10-30 17:17:41'),('1189476403626409986','18','1181729226915577857','22','5155c73dc112475cbbddccf4723f7cef','视频.mp4',0,0,0,0,'Empty',0,1,'2019-10-30 17:37:29','2019-10-30 17:37:29'),('1192252824606289921','1192252213659774977','1192252428399751169','第一课时','756cf06db9cb4f30be85a9758b19c645','eae2b847ef8503b81f5d5593d769dde2.mp4',0,0,0,0,'Empty',0,1,'2019-11-07 09:29:59','2019-11-07 09:29:59'),('1192628092797730818','1192252213659774977','1192252428399751169','第二课时','2a02d726622f4c7089d44cb993c531e1','eae2b847ef8503b81f5d5593d769dde2.mp4',0,0,1,0,'Empty',0,1,'2019-11-08 10:21:10','2019-11-08 10:21:22'),('1192632495013380097','1192252213659774977','1192252428399751169','第三课时','4e560c892fdf4fa2b42e0671aa42fa9d','eae2b847ef8503b81f5d5593d769dde2.mp4',0,0,1,0,'Empty',0,1,'2019-11-08 10:38:40','2019-11-08 10:38:40'),('1194117638832111617','1192252213659774977','1192252428399751169','第四课时','4e560c892fdf4fa2b42e0671aa42fa9d','eae2b847ef8503b81f5d5593d769dde2.mp4',0,0,0,0,'Empty',0,1,'2019-11-12 13:00:05','2019-11-12 13:00:05'),('1196263770832023554','1192252213659774977','1192252428399751169','第五课时','27d21158b0834cb5a8d50710937de330','eae2b847ef8503b81f5d5593d769dde2.mp4',5,0,0,0,'Empty',0,1,'2019-11-18 11:08:03','2019-11-18 11:08:03'),('17','18','15','第一节：Java简介','196116a6fee742e1ba9f6c18f65bd8c1','1',1,1000,1,100,'Draft',0,1,'2019-01-01 13:08:57','2019-10-11 11:26:39'),('18','18','15','第二节：表达式和赋值语句','2d99b08ca0214909899910c9ba042d47','7 - How Do I Find Time for My ',2,999,1,100,'Draft',0,1,'2019-01-01 13:09:02','2019-03-08 03:30:27'),('19','18','15','第三节：String类','51120d59ddfd424cb5ab08b44fc8b23a','eae2b847ef8503b81f5d5593d769dde2.mp4',3,888,0,100,'Draft',0,1,'2019-01-01 13:09:05','2019-11-12 12:50:45'),('20','18','15','第四节：程序风格','2a38988892d84df598752226c50f3fa3','00-day10总结.avi',4,666,0,100,'Draft',0,1,'2019-01-01 13:09:05','2019-10-11 09:20:09');

CREATE TABLE `edu_course` (
  `id` char(19) NOT NULL COMMENT '课程ID',
  `teacher_id` char(19) NOT NULL COMMENT '课程讲师ID',
  `subject_id` char(19) NOT NULL COMMENT '课程专业ID',
  `subject_parent_id` char(19) NOT NULL COMMENT '课程专业父级ID',
  `title` varchar(50) NOT NULL COMMENT '课程标题',
  `price` decimal(10,2) unsigned NOT NULL DEFAULT '0.00' COMMENT '课程销售价格，设置为0则可免费观看',
  `lesson_num` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '总课时',
  `cover` varchar(255) CHARACTER SET utf8 NOT NULL COMMENT '课程封面图片路径',
  `buy_count` bigint(10) unsigned NOT NULL DEFAULT '0' COMMENT '销售数量',
  `view_count` bigint(10) unsigned NOT NULL DEFAULT '0' COMMENT '浏览数量',
  `version` bigint(20) unsigned NOT NULL DEFAULT '1' COMMENT '乐观锁',
  `status` varchar(10) NOT NULL DEFAULT 'Draft' COMMENT '课程状态 Draft未发布  Normal已发布',
  `is_deleted` tinyint(3) DEFAULT NULL COMMENT '逻辑删除 1（true）已删除， 0（false）未删除',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_title` (`title`),
  KEY `idx_subject_id` (`subject_id`),
  KEY `idx_teacher_id` (`teacher_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT='课程';

#
# Data for table "edu_course"
#

INSERT INTO `edu_course` VALUES ('1192252213659774977','1189389726308478977','1178214681139539969','1178214681118568449','java基础课程：test',0.01,2,'https://guli-file-190513.oss-cn-beijing.aliyuncs.com/cover/default.gif',4,387,1,'Normal',0,'2019-11-07 09:27:33','2019-11-18 13:35:03'),('14','1189389726308478977','1101348944971091969','1101348944920760321','XHTML CSS2 JS整站制作教程课程学习',0.00,3,'http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/13/d0086eb0-f2dc-45f7-bba1-744d95e5be0f.jpg',3,44,15,'Normal',0,'2018-04-02 18:33:34','2019-11-16 21:21:45'),('15','1189389726308478977','1101348944971091969','1101348944920760321','HTML5入门课程学习',0.00,23,'http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/13/22997b8e-3606-4d2e-9b4f-09f48418b6e4.jpg',0,51,17,'Normal',0,'2018-04-02 18:34:32','2019-11-12 10:19:20'),('18','1189389726308478977','1178214681139539969','1178214681118568449','Java精品课程',0.01,20,'http://guli-file.oss-cn-beijing.aliyuncs.com/cover/2019/03/06/866e9aca-b530-4f71-a690-72d4a4bfd1e7.jpg',151,737,6,'Normal',0,'2018-04-02 21:28:46','2019-11-18 11:14:52');

CREATE TABLE `edu_chapter` (
  `id` char(19) NOT NULL COMMENT '章节ID',
  `course_id` char(19) NOT NULL COMMENT '课程ID',
  `title` varchar(50) NOT NULL COMMENT '章节名称',
  `sort` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '显示排序',
  `gmt_create` datetime NOT NULL COMMENT '创建时间',
  `gmt_modified` datetime NOT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`),
  KEY `idx_course_id` (`course_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 ROW_FORMAT=COMPACT COMMENT='课程';

#
# Data for table "edu_chapter"
#

INSERT INTO `edu_chapter` VALUES ('1','14','第一章：HTML',0,'2019-01-01 12:27:40','2019-01-01 12:55:30'),('1181729226915577857','18','第七章：I/O流',70,'2019-10-09 08:32:58','2019-10-09 08:33:20'),('1192252428399751169','1192252213659774977','第一章节',0,'2019-11-07 09:28:25','2019-11-07 09:28:25'),('15','18','第一章：Java入门',0,'2019-01-01 12:27:40','2019-10-09 09:13:19'),('3','14','第二章：CSS',0,'2019-01-01 12:55:35','2019-01-01 12:27:40'),('32','18','第二章：控制台输入和输出',0,'2019-01-01 12:27:40','2019-01-01 12:27:40'),('44','18','第三章：控制流',0,'2019-01-01 12:27:40','2019-01-01 12:27:40'),('48','18','第四章：类的定义',0,'2019-01-01 12:27:40','2019-01-01 12:27:40'),('63','18','第五章：数组',0,'2019-01-01 12:27:40','2019-01-01 12:27:40'),('64','18','第六章：继承',61,'2019-01-01 12:27:40','2019-10-09 08:32:47');
3.3.后端实现

(1)生成mvc模板代码

修改codeGenerator中的表。

image-20211112225349021

生成代码。

由于课程简介不需要单独提供接口访问，而是在配合课程使用，我们可以将EduCourseDescriptionController删除。EduCourseController增加注解@CrossOrigin。

(2) 功能分析

课程管理模块的主要功能和数据库建表都完成了，不过在实现功能前还需要考虑以下问题。

1)数据怎么封装？

image-20211112230404602

根据之前的经验，前端添加的数据可以通过json数据传递给后端，不过传递的数据类型是什么？传递EduCourse可以满足大部分课程信息的传递，不过无法传递课程简介，因此我们需要创建一个vo类专门用于前后端数据的传递。

2)数据怎么添加到数据库

可能一个数据对应多张数据表，比如课程信息和课程简介。

3)二级联动问题

选择课程分类时，通过下拉列表实现，选择一级课程分类，二级课程分类的下拉框要属于前面选择的课程分类。

(3)实现vo类

@ApiModel(value = "课程基本信息", description = "编辑课程基本信息的表单对象")
@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 = "课程标题")
    private String title;

    @ApiModelProperty(value = "课程销售价格，设置为0则可免费观看")
    private BigDecimal price;

    @ApiModelProperty(value = "总课时")
    private Integer lessonNum;

    @ApiModelProperty(value = "课程封面图片路径")
    private String cover;

    @ApiModelProperty(value = "课程简介")
    private String description;
    
}

(4)controller

@RestController
@RequestMapping("/eduservice/edu-course")
@CrossOrigin
public class EduCourseController {
    @Autowired
    EduCourseService eduCourseService;

    @PostMapping("/addCourse")
    public R addCourse(@RequestBody CourseInfoForm courseInfoForm) {
        eduCourseService.saveCourse(courseInfoForm);
        return R.ok();
    }
}

(5)service

接口部分省略，后面不再赘述。

@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
    @Autowired
    EduCourseDescriptionService eduCourseDescriptionService;

    @Override
    public void saveCourse(CourseInfoForm courseInfoForm) {
        // 1.存储EduCourse
        EduCourse eduCourse = new EduCourse();
        BeanUtils.copyProperties(courseInfoForm, eduCourse);
        baseMapper.insert(eduCourse);
        // 2.存储EduCourseDescription
        // 这是EduCourseServiceImpl，baseMapper无法直接把数据EduCourseDescription存到数据库
        EduCourseDescription eduCourseDescription = new EduCourseDescription();
        eduCourseDescription.setDescription(courseInfoForm.getDescription());
        eduCourseDescriptionService.save(eduCourseDescription);
    }
}

另：

  • 实体类的时间属性记得加@TableField注解,EduCourseDescription示例如下，EduCourse同理。
public class EduCourseDescription implements Serializable {

    //...

    @TableField(fill = FieldFill.INSERT)
    @ApiModelProperty(value = "创建时间")
    private Date gmtCreate;

    @TableField(fill = FieldFill.INSERT_UPDATE)
    @ApiModelProperty(value = "更新时间")
    private Date gmtModified;


}
  • 数据库``EduCourse中subjectParentId`默认值设置为null。

添加课程功能的后端实现就完成了，请读者用swagger进行自测。

(6) 建立课程信息与详情一对一关系

不过我们前面提过，课程信息EduCourse与课程细节EduCourseDescription两个表应该是一对一的关系，而目前它们还没有任何关系。如何做到呢？让它们的id一致即可，之前它们的id都是自动生成的，现在在service中手动设置eduCourseDescription的id，使其与eduCourse保持一致。

image-20211113203018174

// 手动设置eduCourseDescription的id，使其与eduCourse保持一致
eduCourseDescription.setId(eduCourse.getId());

然后将主键策略设置为input。

image-20211113203343090

3.4 前端实现

(1) 在router/index.js中添加路由。

  {
    path: '/subject',
    component: Layout,
    redirect: '/subject/list', //在页面中访问'/teacher'会被重定向到'/teacher/table'
    name: '课程管理',
    meta: { title: '课程管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '课程列表',
        component: () => import('@/views/edu/subject/list'),
        meta: { title: '课程列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程',
        component: () => import('@/views/edu/subject/save'),
        meta: { title: '添加课程', icon: 'tree' }
      }
    ]
  }

(2)创建页面

前面的需求分析提到我们课程添加的过程中需要展示三个页面。

image-20211111195818602

下面我们创建三个页面对应的vue文件。

image-20211113211430661

参考element-ui官方文档实现。

info.vue.

.<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-
bottom: 40px;"
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>
    <el-form label-width="120px">
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
          >保 存并下一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveBtnDisabled:false,
    };
  },
  methods: {
    next() {
        //跳转到第二步
      this.$router.push({path:'/course/chapter/1'})
    },
  },
  created(){

  }
};
</script>

<style></style>

chapter.vue.

.<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="2"
      process-status="wait"
      align-center
      style="margin-
bottom: 40px;"
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>
    <el-form label-width="120px">
      <el-form-item>
        <el-button @click="previous">上一步</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="next"
          >下 一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveBtnDisabled: false,
    };
  },
  methods: {
    //跳转到上一步
    previous() {
      this.$router.push({ path: "/course/info/1" });
    },
    next() {
      //跳转到第三步
      this.$router.push({ path: "/course/publish/1" });
    },
  },
  created() {},
};
</script>

<style>
</style>

publish.vue.

.<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="3"
      process-status="wait"
      align-center
      style="margin-
bottom: 40px;"
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>
    <el-form label-width="120px">
      <el-form-item>
        <el-button @click="previous">返回修改</el-button>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="publish"
          >发布课程</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      saveBtnDisabled: false,
    };
  },
  methods: {
    //跳转到上一步
    previous() {    
      this.$router.push({ path: "/course/chapter/1" });
    },
    publish(){
      this.$router.push({ path: "/course/list" });
    }

  },
};
</script>

<style>
</style>

上面最后pubish.vue页面保存后会跳转到list.vue，因此记得在相同目录下创建list.vue。

(3)隐藏路由

修改前面的路由，并添加隐藏路由。

{
    path: '/course',
    component: Layout,
    redirect: '/course/list', 
    name: '课程管理',
    meta: { title: '课程管理', icon: 'example' },
    children: [
      {
        path: 'list',
        name: '课程列表',
        component: () => import('@/views/edu/course/list'),
        meta: { title: '课程列表', icon: 'table' }
      },
      {
        path: 'save',
        name: '添加课程',
        component: () => import('@/views/edu/course/info'),
        meta: { title: '添加课程', icon: 'tree' }
      },
      // 通过隐藏路由访问添加课程的三个页面
      {
        path: 'info/:id',
        name: 'EduCourseInfoEdit',
        component: () => import('@/views/edu/course/info.vue'),
        meta: { title: '编辑课程基本信息', noCache: true },
        hidden: true
        },
        {
        path: 'chapter/:id',
        name: 'EduCourseChapterEdit',
        component: () => import('@/views/edu/course/chapter.vue'),
        meta: { title: '编辑课程大纲', noCache: true },
        hidden: true
        },
        {
        path: 'publish/:id',
        name: 'EduCoursePublishEdit',
        component: () => import('@/views/edu/course/publish.vue'),
        meta: { title: '发布课程', noCache: true },
        hidden: true
        }
    ]
  }

展示下目前的效果吧。

image-20211113214308728

(4)实现添加基本信息表单

完善ui组件如下(info.vue)。

.<template>
  <div class="app-container">
    <h2 style="text-align: center">发布新课程</h2>
    <el-steps
      :active="1"
      process-status="wait"
      align-center
      style="margin-
bottom: 40px;"
    >
      <el-step title="填写课程基本信息" />
      <el-step title="创建课程大纲" />
      <el-step title="最终发布" />
    </el-steps>
    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input
          v-model="courseInfo.title"
          placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
        />
      </el-form-item>

      <!-- 所属分类 TODO -->

      <!-- 课程讲师 TODO -->

      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="right"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>

      <!-- 课程简介 TODO -->
      <el-form-item label="课程简介">
        <el-input v-model="courseInfo.description" placeholder="" />
      </el-form-item>

      <!-- 课程封面 TODO -->

      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />
        元
      </el-form-item>

      <el-form-item>
        <el-button
          :disabled="saveBtnDisabled"
          type="primary"
          @click="saveOrUpdate"
          >保存并下一步</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import course from "@/api/edu/course.js";

export default {
  data() {
    return {
      saveBtnDisabled: false,
      courseInfo: 
        {
          title: "",
          subjectId: "",
          teacherId: "",
          lessonNum: 0,
          description: "",
          cover: "",
          price: 0,
        },
    };
  },
  methods: {
    saveOrUpdate() {
      course.addCourseInfo(this.courseInfo).then(resp => {
        this.$message({
          message: "添加课程信息成功",
          type: "success",
        })
        //跳转到第二步，并带着这个课程生成的id
        this.$router.push({ path: "/course/chapter/"+resp.data.courseId });
      });
    },
  },
  created() {},
};
</script>

<style>
</style>

新建course.js.

import request from '@/utils/request' 

export default {
  // 添加课程信息
  addCourseInfo(courseInfo) {
    return request({
      url: `/eduservice/edu-course/addCourse`,
      method: 'post',
      data: courseInfo
    })
  }
}

测试下。

image-20211126202551318

注意到标红部分代码，为什么要传课程id？

image-20211126204014442

还记得我们的需求吗，第二部时创建课程大纲，而这个课程大纲的页面需要用到第一部的课程id，因此我们把这个id值通过路由传递给第二部的页面。

这个id从何而来？当然是后端传过来咯。对后端进行修改。

public class EduCourseController {
    @Autowired
    EduCourseService eduCourseService;

    @PostMapping("/addCourse")
    public R addCourse(@RequestBody CourseInfoForm courseInfoForm) {
        String id = eduCourseService.saveCourse(courseInfoForm);
        return R.ok().data("courseId",id);
    }
}

public interface EduCourseService extends IService<EduCourse> {

    String saveCourse(CourseInfoForm courseInfoForm);
}

@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
    @Autowired
    EduCourseDescriptionService eduCourseDescriptionService;

    @Override
    public String saveCourse(CourseInfoForm courseInfoForm) {
       ...

        return eduCourse.getId();
    }
}

测试下。注意下面路径中的路由。

image-20211126205302516

3.5 功能完善

下面把功能进一步完善，使之与实际业务需求相符合。

(1)实现讲师、课程分类的下拉框选择功能

info.vue实现组件。

<!--课程讲师-->
<el-form-item label="课程讲师">
    <el-select v-model="courseInfo.teacherId" placeholder="请选择">
        <el-option
                   v-for="teacher in teacherLists"
                   :key="teacher.id"
                   :label="teacher.name"
                   :value="teacher.id"
                   ></el-option>
    </el-select>
</el-form-item>

.course.js编写查找讲师的接口。

//查询所有讲师
getAllTeacher(){
    return request({
        url:"/eduservice/edu-teacher/findAll",
        method: 'get'
    })
}

在info.vue调用接口。

data() {
    return {
        ...
      teacherLists: [], //封装所有讲师数据

    };
},
methods: {
    ...
     //查询所有讲师
    getListTeacher() {
      course.getAllTeacher().then((resp) => {
        this.teacherLists = resp.data.items;
      });
     }
  },
created() {
   this.getListTeacher();
}

在之前写的ui中，已经对于后端传过来的数据进行了遍历，这里摘录下。

image-20211126235216271

测试下功能。

image-20211127000141697

(2)实现课程一、二级分类的联动

info.vue

.<template>
  		...

      <!-- 一级分类 -->
      <el-form-item label="课程分类">
          <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectOneChanged">
            <!-- 课程分类信息的遍历 -->
              <el-option
                        v-for="subject in subjectOneList"
                        :key="subject.id"
                        :label="subject.title"
                        :value="subject.id"
                        ></el-option>
          </el-select>
      </el-form-item>

       <!-- 二级分类 -->
      <el-form-item label="课程分类">
          <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
            <!-- 课程分类信息的遍历 -->
              <el-option
                        v-for="subject in subjectTwoList"
                        :key="subject.id"
                        :label="subject.title"
                        :value="subject.id"
                        ></el-option>
          </el-select>
      </el-form-item>

    
</template>

<script>
......                          
import subject from "@/api/edu/subject.js";

export default {
  data() {
    return {
    ......
      subjectOneList: [], //封装一级课程分类
      subjecTwoList: [] //封装二级课程分类

    };
  },
  methods: {
  ......
     getOneSubject() {
        subject.getAllSubject().then((resp) => {
          this.subjectOneList = resp.data.list;
        })
     },
     // 点击某个一级分类时，触发显示二级分类
     subjectOneChanged(value) { //value就是一级分类的id，是框架帮我们做到的
       //value就是一级分类的id值
    for (let i = 0; i < this.subjectOneList.length; i++) {
        if (this.subjectOneList[i].id === value) {
            this.subjectTwoList = this.subjectOneList[i].children;
            this.courseInfo.subjectId = ""; //清空，避免选择新的以及分类后二级分类时仍然有值，读者可以去掉自测
        }
    }
     
  }

  },
  created() {
      ...
      this.getOneSubject()
  }
}
</script>

<style>
</style>

效果如下。

image-20211127005318905

java全栈日日学 文章被收录于专栏

java全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事

全部评论

相关推荐

头像
04-01 23:24
游卡_运营_HR
游卡春招
很多同学问还有没有春招，我说你现在直接投就行了，别问，把秋招投过的再投一遍，你进面率至少比秋招高50%&nbsp;春招现在就是捡漏，不要畏手畏脚，再不投就毕业失去应届生身份了！入职游卡也有段时间了了，说说卡子的上班感受，毕竟如果我自己都感受不好，也没啥动力推荐大家来了大家可能更熟悉它的“三国杀”，在游戏圈里也算是个老牌子了。公司总部在上海闵行区虹桥国际商务广场，办公环境还不错，交通也挺方便。工作时间是早上9点到下午6点，双休，弹性工作制。福利方面，五险一金、补充医疗、定期体检这些都有，餐补是25块一天，社保公积金公司和个人各12%。整体来说，福利还算可以，公司里有不少海归硕士，薪资水平也相...
游卡公司福利 149人发布
点赞 评论 收藏
分享
03-31 21:28
广州中医药大学 安卓
被美团选中的 简历，长这样👇
第18期的简历优化实战案例是校招实习，中大本科的同学，求职岗位Java后台研发，已上岸美团看下如何优化来扩大简历的相对优势。原简历：🧩结构优化突出求职岗位：要明确写出求职岗位简化个人信息：移除出生年月、身高等无用个人信息，只留姓名、电话、邮箱移除专业技能：&quot;专业技能&quot;是技术简历的大坑❌，最佳实践是在项目主要工作中描述，否则会吃亏，详情见主页置顶，移除移除自我评价：&quot;自我评价&quot;同样是技术简历的大坑❌，主观评价无法量化和验证，移除🎨排版设计优化移除冗余图标：去除带冗余信息的图标，增加简洁度移除冗余排版：去除上下边距的无用排版，增加美观度调整时间顺序：中文...
投递美团等公司6个岗位 > 如何写一份好简历 你的简历改到第几版了
点赞 评论 收藏
分享
02-15 17:56
已编辑
广州大学 C++
26Java找实习
求建议，某双非一本，前两年浪费时间跑去打竞赛了（结果还没啥成绩），最近刚敲完苍穹外卖，想问问各位大佬这样能找到实习吗，有没有什么建议
lylyhhh：个人优势换专业技能吧 然后把六级叉了 奖项你觉得有含金量的往教育经历丢 专业技能里面你能答哪些八股就写你这个东西能解决什么什么问题
点赞 评论 收藏
分享
04-01 12:59
合合信息_运营管理_HR
合合信息内推——合合信息春招内推码
哥几个过完年又来上班了！！，第一周完全没啥工作效率，做点简单的事情内推一下同学们看一一下春招岗位还是蛮多，hc算中等主要是研发&nbsp;算法&nbsp;开发之类&nbsp;春招现在就是捡漏，不要畏手畏脚，再不投就毕业失去应届生身份了！&nbsp;咱们合合春招开的岗位还有很多，虽然hc少了点，但是竞争人也少！面试官关注的是简历的内容和细节，而且会根据你的简历对你进行提问，你的简历实际上就是给面试官的关于你自己的一份考试大纲，面试官根据&quot;考试大纲&quot;对你进行考察，所以简历不要给自己挖坑；&nbsp;目前秋招刚开不久，大家略微改好记得慢慢冲~关于合合的福利，免费早晚餐，六点半晚餐，七点半应该就没人了。ld，mt都很...
合合信息公司福利 271人发布
点赞 评论 收藏
分享
评论
点赞
收藏
分享

全站热榜

更多

创作者周榜

更多
正在热议
更多
# 滴滴求职进展汇总 #
168185次浏览 1659人参与
# 你觉得材料专业有必要实习嘛 #
10441次浏览 51人参与
# 美团求职进展汇总 #
1916533次浏览 17778人参与
# 找工作有哪些冷知识 #
6824次浏览 105人参与
# 应届生应该先就业还是先择业 #
92763次浏览 566人参与
# 德州仪器求职进展汇总 #
4436次浏览 139人参与
# 实习期间如何提升留用概率？ #
19494次浏览 295人参与
# 小米硬件提前批进度交流 #
161475次浏览 1503人参与
# 应届生简历当中，HR最关注哪些？ #
28240次浏览 220人参与
# 互联网公司爆料 #
109702次浏览 649人参与
# vivo工作体验 #
18066次浏览 116人参与
# 牛友投递互助，不漏校招机会 #
263940次浏览 3653人参与
# 机械人避雷的岗位/公司 #
9039次浏览 51人参与
# Offer比较，你最看重什么？ #
139953次浏览 886人参与
# 机械人晒出你的简历 #
68500次浏览 600人参与
# 小鹏汽车工作体验 #
6412次浏览 42人参与
# 通信/硬件求职避坑tips #
47921次浏览 450人参与
# 双非能在秋招上岸吗？ #
205837次浏览 1064人参与
# 机械人，说说你的烦心事 #
58709次浏览 796人参与
# 扒一扒那些奇葩实习经历 #
21215次浏览 599人参与
牛客网
牛客企业服务