本文介绍了前端如何实现课程信息的添加，包括讲师显示、课程id的获取，以及分类显示的实现，特别是二级分类联动的效果。在讲师显示部分，详细讲解了info.vue的修改和course.js的添加。在分类显示部分，阐述了一级分类查询及二级分类联动的逻辑，并给出了实现思路。
一.讲师显示
1.修改info.vue，替换原先的<el-from-item>中的内容
<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>2.添加course.js文件到api中
import request from '@/utils/request'
//引入了util中的request，request封装了axios
export default{
//1.添加课程信息功能
addCourseInfo(courseInfo){
return request({
//url: '/table/list',
url:`/eduservice/course/addCourseInfo`,
method: 'post',
data:courseInfo
})
}
}
3.添加课程之后，返回课程id
章节和课程是一对多的关系，所以需要添加之后的课程id，为了章节做准备
①.完善后端接口，返回id
String id = courseService.saveCourseInfo(courseInfoVo);@RestController
@RequestMapping("/eduservice/course")
@CrossOrigin
public class EduCourseController {
@Autowired
private EduCourseService courseService;
//添加课程基本信息的方法
@PostMapping("addCourseInfo")
public R addCourseInfo(@RequestBody CourseInfoVo courseInfoVo){
String id = courseService.saveCourseInfo(courseInfoVo);
return R.ok().data("courseId",id);
}
}
②.实现类中返回id，即cid
@Service
public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {
//课程描述的注入
@Autowired
private EduCourseDescriptionService courseDescriptionService;
//添加课程信息基本的方法
@Override
public String saveCourseInfo(CourseInfoVo courseInfoVo) {
//1.向课程表添加课程基本信息
//courseInfoVo对象转换eduCourse对象
EduCourse eduCourse = new EduCourse();
BeanUtils.copyProperties(courseInfoVo,eduCourse);
int insert = baseMapper.insert(eduCourse);
if (insert==0){
throw new GuliException(20001,"添加课程信息失败");
}
//获取添加之后课程id
String cid = eduCourse.getId();
//2.向课程简介表添加课程简介
EduCourseDescription courseDescription = new EduCourseDescription();
courseDescription.setDescription(courseInfoVo.getDescription());
//设置描述id就是课程id
courseDescription.setId(cid);
courseDescriptionService.save(courseDescription);
return cid;
}
}
③.前端在从resp中取得id
this.$router.push({path:'/course/chapter/'+resp.data.courseId})
<script>
import course from '@/api/edu/course'
export default {
data(){
return{
saveBtnDisabled:false,
courseInfo:{
title: '',
subjectId: '',//二级分类id
subjectParentId:'',//一级分类id
teacherId: '',
lessonNum: 0,
description: '',
cover: '/static/01.jpg',
price: 0
}
}
},
created(){
},
methods:{
saveOrUpdate(resp){
course.addCourseInfo(this.courseInfo)
.then(resp=>{
//提示
this.$message({
type:'success',
message:'添加课程信息成功'
})
//跳转到第二步 获取课程id
this.$router.push({path:'/course/chapter/'+resp.data.courseId})
})
}
}
}
</script>
二.分类显示
在<!-- 所属分类 TODO -->后增加代码
实现二级联动效果
1.页面实现
<!-- 所属分类 TODO -->
<el-form-item label="课程分类">
<el-select
v-model="courseInfo.subjectParentId"
placeholder="一级分类" @change="subjectLevelOneChanged">
<el-option
v-for="subject in subjectOneList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
<!-- 二级分类 -->
<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>
</el-form-item>2.查询所有的一级分类
//查询所有的一级分类
getOneSubject(){
subject.getSubjectList()
.then(resp=>{
this.subjectOneList= resp.data.list
})
}3.在create方法中初始化调用
created(){
//初始化所有讲师
this.getListTeacher()
//初始化一级分类
this.getOneSubject()
}4.实现一级分类二级分类联动
选择一级分类，二级分类的下拉列表中显示一级分类下的选项
思路：
获取一级分类的id值，先把所有一级分类查出显示，一级分类上绑定@change事件，表示当值改变时触发
placeholder="一级分类" @change="subjectLevelOneChanged">change事件中得到id，其中value就是一级分类的id值
subjectLevelOneChanged(value)遍历所有分类，将选择的分类和一级分类比较，如果相同将其中的二级分类取出。
//点击某个一级分类，触发change，显示对应的二级分类
subjectLevelOneChanged(value){
//alert(value)
//遍历所有的分类，里面包含一及和二级
for(var i=0;i<this.subjectOneList.length;i++){
//得到每个一级分类
var OneSubject=this.subjectOneList[i]
// 判断，所有一级分类和点击一级分类id是否一样
if(value===OneSubject.id){
//从一级分类里面获取所有的二级分类
this.subjectTwoList= OneSubject.children
//把二级分类的id清空
this.courseInfo.subjectId=''
}
}
三.封面上传
显示文件列表
<!-- 课程封面-->
<el-form-item label="课程封面">
<el-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/eduoss/fileoss'"
class="avatar-uploader">
<img :src="courseInfo.cover">
</el-upload>
</el-form-item> BASE_API: process.env.BASE_API, // 接口API地址 //上传封面成功
handleAvatarSuccess(res,file){
this.courseInfo.cover=res.data.url
},
//上传之前调用的方法
beforeAvatarUpload(){
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
},
最终代码
<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 -->
<el-form-item label="课程分类">
<el-select
v-model="courseInfo.subjectParentId"
placeholder="一级分类" @change="subjectLevelOneChanged">
<el-option
v-for="subject in subjectOneList"
:key="subject.id"
:label="subject.title"
:value="subject.id"/>
</el-select>
<!-- 二级分类 -->
<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>
</el-form-item>
<!-- 课程讲师 TODO -->
<!-- 课程讲师 -->
<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>
<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-upload
:show-file-list="false"
:on-success="handleAvatarSuccess"
:before-upload="beforeAvatarUpload"
:action="BASE_API+'/eduoss/fileoss'"
class="avatar-uploader">
<img :src="courseInfo.cover">
</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-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'
import subject from '@/api/edu/subject'
export default {
data(){
return{
saveBtnDisabled:false,
courseInfo:{
title: '',
subjectId: '',//二级分类id
subjectParentId:'',//一级分类id
teacherId: '',
lessonNum: 0,
description: '',
cover: '/static/01.jpg',
price: 0
},
BASE_API: process.env.BASE_API, // 接口API地址
teacherList:[],//封装所有的讲师
subjectOneList:[],//一级分类
subjectTwoList:[]//二级分类
}
},
created(){
//初始化所有讲师
this.getListTeacher()
//初始化一级分类
this.getOneSubject()
},
methods:{
//上传封面成功
handleAvatarSuccess(res,file){
this.courseInfo.cover=res.data.url
},
//上传之前调用的方法
beforeAvatarUpload(){
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
},
//点击某个一级分类，触发change，显示对应的二级分类
subjectLevelOneChanged(value){
//alert(value)
//遍历所有的分类，里面包含一及和二级
for(var i=0;i<this.subjectOneList.length;i++){
//得到每个一级分类
var OneSubject=this.subjectOneList[i]
// 判断，所有一级分类和点击一级分类id是否一样
if(value===OneSubject.id){
//从一级分类里面获取所有的二级分类
this.subjectTwoList= OneSubject.children
//把二级分类的id清空
this.courseInfo.subjectId=''
}
}
},
//查询所有的一级分类
getOneSubject(){
subject.getSubjectList()
.then(resp=>{
this.subjectOneList= resp.data.list
})
},
getListTeacher(){
course.getListTeacher()
.then(resp=>{
this.teacherList = resp.data.items
})
},
saveOrUpdate(resp){
course.addCourseInfo(this.courseInfo)
.then(resp=>{
//提示
this.$message({
type:'success',
message:'添加课程信息成功'
})
//跳转到第二步 获取课程id
this.$router.push({path:'/course/chapter/'+resp.data.courseId})
})
}
}
}
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
