一、课程发布表单-步骤导航
1.1 需求分析
1.2 课程相关表关系
二、添加课程基本信息后台
2.1 生成课程相关代码
使用代码生成器生成课程相关的代码。
2.2 定义form表单对象
我们添加基本课程信息时，需要涉及到两张表edu_course和edu_course_description，同时我们在添加课时还需要指定课程的老师和课程的分类。添加的内容比较多，所以我们将前台提交的数据，进行封装为一个CourseInfoFormVo对象。
在entity/vo下创建CourseInfoForm类
@ApiModel(value = "课程基本信息", description = "编辑课程基本信息的表单对象")@Data
public class CourseInfoFormVo 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;
}
2.3 定义控制层EduCourseController
前面我们已经使用代码生成工具，将代码生成完毕，我们只需要在EduCourseController.java编写代码即可。
@Api(description="课程管理")@CrossOrigin //跨域
@RestController
@RequestMapping("/eduservice/course")
public class EduCourseController {
@Autowired
private CourseService courseService;
@ApiOperation(value = "新增课程")
@PostMapping("/addCourseInfo")
public R addCourseInfo(@RequestBody CourseInfoFormVo courseInfoFormVo) {
String courseId = eduCourseService.saveCourseInfo(courseInfoFormVo);
return R.ok().data("courseId",courseId);
}
}
2.4 定义业务层方法CourseService
接口：CourseService.java
/** * 保存课程和课程详情信息
* @param courseInfoForm
* @return 新生成的课程id
*/
void saveCourseInfo(CourseInfoFormVo courseInfoFormVo);
实现：CourseServiceImpl.java
/**
* <p>
* 课程 服务实现类
* </p>
*
* @author zjl
*/
@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
@Autowired
EduCourseDescriptionService eduCourseDescriptionService;
// 添加课程信息
@Override
public void saveCourseInfo(CourseInfoFormVo courseInfoFormVo) {
// 向课程表添加课程基本信息
EduCourse eduCourse = new EduCourse();
BeanUtils.copyProperties(courseInfoFormVo, eduCourse);
int insert = this.baseMapper.insert(eduCourse);
// 判断添加课程基本信息是否成功
if (insert==0) {
throw new EduException(20001, "添加课程基本信息失败!");
}
// 向课程简介表添加课程简介
EduCourseDescription eduCourseDescription = new EduCourseDescription();
eduCourseDescription.setDescription(courseInfoFormVo.getDescription());
eduCourseDescriptionService.save(eduCourseDescription);
}
}
2.5 Swagger测试
查看数据库信息
在数据库分析中，课程表和课程简介表是一对一的关系，但是添加数据时，却发现不是一对一的关系。
在edu_course表中的id是1548334513809661953, 在edu_course_description表中的id是1548334513809661954
通过两个id值发现它们两个表是没有关系的。想要一对一关系，在edu_course_description表的id值应该是edu_course表中的id值 。
2.6 修改CourseServiceImpl
在添加完课程信息之后，获取课程的Id，再将课程的id设置到课程描述信息中即可。
同时修改EduCourseDescription类中的id主键策略，这个表中的id不需要生动生成。需要我们手动插入。
三、添加基本课程信息前端
3.1 添加课程管理路由
// 课程管理 {
path: '/course',
component: Layout,
redirect: '/course/list',
name: '课程管理',
meta: { title: '课程管理', icon: 'form' },
children: [
{
path: 'list',
name: '课程列表',
component: () => import('@/views/edu/course/list'),
meta: { title: '课程列表' }
},
{
path: 'info',
name: '添加课程',
component: () => import('@/views/edu/course/info'),
meta: { title: '添加课程' }
},
{
path: 'info/:id',
name: '编辑课程基本信息',
component: () => import('@/views/edu/course/info'),
meta: { title: '编辑课程基本信息', noCache: true },
hidden: true
},
{
path: 'chapter/:id',
name: '编辑课程大纲',
component: () => import('@/views/edu/course/chapter'),
meta: { title: '编辑课程大纲', noCache: true },
hidden: true
},
{
path: 'publish/:id',
name: '发布课程',
component: () => import('@/views/edu/course/publish'),
meta: { title: '发布课程', noCache: true },
hidden: true
}
]
}
3.2 添加vue组件
3.3 整合步骤条组件
参考 http://element-cn.eleme.io/#/zh-CN/component/steps
3.3.1 课程信息页面
在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 // 保存按钮是否禁用
}
},
created() {
console.log('info created')
},
methods: {
next() {
console.log('next')
this.$router.push({ path: '/course/chapter/1' })
}
}
}
</script>
3.3.2 课程大纲页面
在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 // 保存按钮是否禁用
}
},
created() {
console.log('chapter created')
},
methods: {
previous() {
console.log('previous')
this.$router.push({ path: '/course/info/1' })
},
next() {
console.log('next')
this.$router.push({ path: '/course/publish/1' })
}
}
}
</script>
3.3.3 课程发布页面
在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 // 保存按钮是否禁用
}
},
created() {
console.log('publish created')
},
methods: {
previous() {
console.log('previous')
this.$router.push({ path: '/course/chapter/1' })
},
publish() {
console.log('publish')
this.$router.push({ path: '/course/list' })
}
}
}
</script>
3.4 添加课程页面实现
3.4.1 定义api
在src/api/edu下创建course.js文件，添加以下内容
import request from '@/utils/request'export default {
addCourseInfo(courseInfo) {
return request({
url: `/eduservice/course/addCourseInfo`,
method: 'post',
data: courseInfo
})
}
3.4.2 组件模板
在edu/course/info.vue中添加以下页面信息:
<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="next">保存并下一步</el-button>
</el-form-item>
</el-form>
3.4.3 添加js
<script>import course from '@/api/edu/course.js'
export default {
data() {
return {
saveBtnDisabled: false ,// 保存按钮是否禁用
courseInfo:{
title: '',
subjectId: '',
teacherId: '',
lessonNum: 0,
description: '',
cover: '',
price: 0
}
}
},
created() {
console.log('info created')
},
methods: {
saveOrUpdate() {
console.log('next')
course.addCourseInfo(this.courseInfo).then(response =>{
this.$message({
type: 'success',
message: '保存成功!'
})
this.$router.push({ path: '/course/chapter/1' })
})
}
}
}
</script>
3.4.4 添加之后，返回课程id
添加课程信息之后，后面在添加小节时，还是需要课程的id，所以我们要如下改造:
修改EduCourseController
在EduCourseController中的addCourseInfo方法，添加返回值
@PostMapping("/addCourseInfo")public R addCourseInfo(@RequestBody CourseInfoFormVo courseInfoFormVo) {
String courseId = eduCourseService.saveCourseInfo(courseInfoFormVo);
return R.ok().data("courseId",courseId);
}
修改EduCourseService
添加返回值String
public interface EduCourseService extends IService<EduCourse> { String saveCourseInfo(CourseInfoFormVo courseInfoFormVo);
}
// 添加课程信息@Override
public String saveCourseInfo(CourseInfoFormVo courseInfoFormVo) {
// 向课程表添加课程基本信息
EduCourse eduCourse = new EduCourse();
BeanUtils.copyProperties(courseInfoFormVo, eduCourse);
int insert = this.baseMapper.insert(eduCourse);
// 判断添加课程基本信息是否成功
if (insert==0) {
throw new EduException(20001, "添加课程基本信息失败!");
}
// 获取添加课程之后的id
String cid = eduCourse.getId();
// 向课程简介表添加课程简介
EduCourseDescription eduCourseDescription = new EduCourseDescription();
eduCourseDescription.setId(cid);
eduCourseDescription.setDescription(courseInfoFormVo.getDescription());
eduCourseDescriptionService.save(eduCourseDescription);
return cid;
}
修改info.vue
修改edu/course/info.vue中的saveOrUpdate方法
saveOrUpdate() { console.log('next')
course.addCourseInfo(this.courseInfo).then(response =>{
this.$message({
type: 'success',
message: '保存成功!'
})
this.$router.push({ path: '/course/chapter/'+response.data.courseId })
})
}
3.5 讲师下拉列表
3.5.1 组件模板
将以下代码添加到views/edu/course/info.vue中
<!-- 课程讲师 --><el-form-item label="课程讲师">
<el-select
v-model="courseInfo.teacherId"
placeholder="请选择">
<el-option
v-for="teacher in teacherList"
:key="teacher.id"
:label="teacher.name"
:value="teacher.id"/>
</el-select>
</el-form-item>
3.5.2 定义获取讲师列表接口
直接调用EduTeacherController中的findAll接口即可。之前我们都已经写过。
3.5.3 定义api
在api/edu/course.js中定义查询所有讲师
getListTeacher() { return request({
url: `/eduservice/edu-teacher/findAll`,
method: 'get'
})
},
3.5.4 组件脚本
定义data，不要定义在courseInfo中
teacherList: [] // 讲师列表
表单初始化时获取讲师列表
created() { console.log('info created')
// 初始化讲师列表
this.getListTeacher()
},
methods: {
// 查询所有讲师
getListTeacher(){
course.getListTeacher().then(response =>{
this.teacherList = response.data.items
})
},
}
3.5.5 效果展示
3.6 课程分类多级联动的实现
需求
3.6.1 获取一级分类
组件数据定义
在views/edu/course/info.vue的data中定义一级分类和二级分类集合.最后在courseInfo中添加subjectParentId
subjectOneList: [],//一级分类列表subjectTwoList: []//二级分类列表
组件模板
在course/info.vue中定义一级分类下拉框
<!-- 一级分类 --><el-form-item label="课程类别">
<el-select
v-model="courseInfo.subjectParentId"
placeholder="请选择">
<el-option
v-for="subject in subjectOneList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
</el-form-item>
组件脚本
在course/info.vue中引入subject.js
import subject from '@/api/edu/subject.js'
定义方法,查询所有的一级分类
created() { console.log('info created')
// 初始化讲师列表
this.getListTeacher()
// 初始化一级分类列表
this.getOneSubjectList()
},
methods: {
// 查询所有的一级分类
getOneSubjectList(){
subject.getSubjectList().then(response =>{
this.subjectOneList = response.data.list
})
},
}
3.6.2 级联显示二级分类
组件模板
<!-- 二级分类 --><el-select v-model="courseInfo.subjectId" placeholder="二级分类">
<el-option
v-for="subject in subjectTwoList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
注册change事件
在一级分类的<el-select>组件中注册change事件
<el-select @change="subjectLevelOneChanged" ......
定义change事件方法
subjectLevelOneChanged(value) { console.log(value);
// 遍历所有的分类，包含一级分类和二级分类
for (let i = 0; i < this.subjectOneList.length; i++) {
if (this.subjectOneList[i].id === value) {
this.subjectTwoList = this.subjectOneList[i].children;
// 清空二级分类
this.courseInfo.subjectId = "";
}
}
},
3.7 课程封面
3.7.1 整合上传组件
参考 http://element-cn.eleme.io/#/zh-CN/component/upload 用户头像上传
3.7.2 上传默认封面
创建文件夹cover，上传默认的课程封面
3.7.3 定义data数据
BASE_API: process.env.BASE_API // 接口API地址
3.7.4 组件模板
在info.vue中添加上传组件模板
<!-- 课程封面--><el-form-item label="课程封面">
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/eduoss/file/upload'"
class="avatar-uploader">
<img :src="courseInfo.cover" width="250px" height="150px" />
</el-upload>
</el-form-item>
3.7.5 定义默认封面
cover: "https://zjledu.oss-cn-beijing.aliyuncs.com/cover/%E9%BB%98%E8%AE%A4%E8%AF%BE%E7%A8%8B%E5%B0%81%E9%9D%A2.jpg",
3.7.6 结果回调
handleAvatarSuccess(res, file) { console.log(res)// 上传响应
console.log(URL.createObjectURL(file.raw))// base64编码
this.courseInfo.cover = res.data.url
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
3.7.8 综合测试
四、富文本编辑器Tinymce
在课程基本信息添加页面中，集成富文本编辑器
4.1 组件初始化
Tinymce是一个传统javascript插件，默认不能用于Vue.js因此需要做一些特殊的整合步骤
4.1.1 复制脚本库
将资料中的components/Tinymce复制到前端工程中components目录下
将资料中的\static\tinymce4.7.5得到到static目录下
4.1.2 配置html变量
在 /build/webpack.dev.conf.js 中添加配置 使在html页面中可是使用这里定义的BASE_URL变量
new HtmlWebpackPlugin({ ......
templateParameters: {
BASE_URL: config.dev.assetsPublicPath + config.dev.assetsSubDirectory
}
})
注意：配置完成之后，最好重启一下前端服务器
4.1.3 引入js脚本
在/index.html 中引入js脚本
<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js></script><script src=<%= BASE_URL %>/tinymce4.7.5/langs/zh_CN.js></script>
4.2 使用文本编辑器
为了让Tinymce能用于Vue.js项目，vue-element-admin-master对Tinymce进行了封装，下面我们将它引入到我们的课程信息页面
4.2.1 引入组件
在课程信息info.vue中引入 Tinymce
import Tinymce from '@/components/Tinymce'export default {
components: { Tinymce },
......
}
4.2.2 引用组件模板
<!-- 课程简介--><el-form-item label="课程简介">
<tinymce :height="300" v-model="courseInfo.description"/>
</el-form-item>
4.2.3 组件样式
在info.vue文件的最后添加如下代码，调整上传图片按钮的高度
<style scoped> .tinymce-container {
line-height: 29px;
}
</style>
4.2.5 图片的base64编码
Tinymce中的图片上传功能直接存储的是图片的base64编码，因此无需图片服务器
4.2.6 测试
测试会出现添加课程二级分类时，会没有数据。是因为，在CourseInfoFormVo中，没有subjectParentId这个字段。在CourseInfoFormVo类中添加该字段即可。
@ApiModelProperty(value = "一级分类ID")private String subjectParentId;
