課程相關(guān)表關(guān)系

01-課程發(fā)布表單-步驟導(dǎo)航

一互躬、需求

二尝胆、配置路由

1嗓奢、添加路由

?{

????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:?'info',

????????name:?'EduCourseInfo',

????????component:?()?=>?import('@/views/edu/course/info'),

????????meta:?{?title:?'發(fā)布課程'?,icon:?'tree'}

??????},

??????{

????????path:?'info/:id',

????????name:?'EduCourseInfoEdit',

????????component:?()?=>?import('@/views/edu/course/info'),

????????meta:?{?title:?'編輯課程基本信息',?noCache:?true?},

????????hidden:?true

??????},

??????{

????????path:?'chapter/:id',

????????name:?'編輯課程大綱',

????????component:?()?=>?import('@/views/edu/course/chapter'),

????????meta:?{?title:?'編輯課程大綱',?icon:?'tree'?},

????????hidden:?true

??????},

??????{

????????path:?'publish/:id',

????????name:?'EduTeacherEdit',

????????component:?()?=>?import('@/views/edu/course/publish'),

????????meta:?{?title:?'發(fā)布課程',?noCache:true?},

????????hidden:true

??????}

????]

??},

2除呵、添加vue組件

三鹉动、整合步驟條組件

參考?http://element-cn.eleme.io/#/zh-CN/component/steps

1轧坎、課程信息頁面

info.vue

<template>

??<div?class="app-container">

????<h2?style="text-align:?center;">發(fā)布新課程</h2>

????<el-steps?:active="1"?process-status="wait"?align-center?style="margin-bottom:?40px;">

??????<el-step?title="填寫課程基本信息"/>

??????<el-step?title="創(chuàng)建課程大綱"/>

??????<el-step?title="最終發(fā)布"/>

????</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(){

????},

????methods:{

????????next(){

????????????//跳轉(zhuǎn)到第二步

????????????this.$router.push({path:'/course/chapter/1'})

????????}

????}

}

</script>

2、課程大綱頁面

chapter.vue

<template>

??<div?class="app-container">

????<h2?style="text-align:?center;">發(fā)布新課程</h2>

????<el-steps?:active="2"?process-status="wait"?align-center?style="margin-bottom:?40px;">

??????<el-step?title="填寫課程基本信息"/>

??????<el-step?title="創(chuàng)建課程大綱"/>

??????<el-step?title="最終發(fā)布"/>

????</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(){

????},

????methods:{

????????//上一步

????????previous(){

????????????this.$router.push({path:'/course/info/1'})

????????},

????????next(){

????????????//跳轉(zhuǎn)到第二步

????????????this.$router.push({path:'/course/publish/1'})

????????}

????}

}

</script>

3泽示、課程發(fā)布頁面

publish.vue

<template>

??<div?class="app-container">

????<h2?style="text-align:?center;">發(fā)布新課程</h2>

????<el-steps?:active="3"?process-status="wait"?align-center?style="margin-bottom:?40px;">

??????<el-step?title="填寫課程基本信息"/>

??????<el-step?title="創(chuàng)建課程大綱"/>

??????<el-step?title="最終發(fā)布"/>

????</el-steps>

????<el-form?label-width="120px">

??????<el-form-item>

????????<el-button?@click="previous">返回修改</el-button>

????????<el-button?:disabled="saveBtnDisabled"?type="primary"?@click="publish">發(fā)布課程</el-button>

??????</el-form-item>

????</el-form>

??</div>

</template>

<script>

export?default?{

????data(){

????????return?{

????????????saveBtnDisabled:?false?//?保存按鈕是否禁用

????????}

????},

????created(){

????},

????methods:{

????????previous(){

????????????this.$router.push({path:'/course/chapter/1'})

????????},

????????publish(){

????????????//跳轉(zhuǎn)到第二步

????????????this.$router.push({path:'/course/list'})

????????}

????}

}

</script>

02-編輯課程基本信息

一缸血、后臺api

1蜜氨、定義form表單對象

CourseInfoVo.java

@ApiModel(value = "課程基本信息", description = "編輯課程基本信息的表單對象")

@Data

public class CourseInfoVo implements Serializable {

? ? private static final long serialVersionUID = 1L;

? ? @ApiModelProperty(value = "課程ID")

? ? private String id;

? ? @ApiModelProperty(value = "課程講師ID")

? ? private String teacherId;

? ? @ApiModelProperty(value = "課程專業(yè)ID")

? ? private String subjectId;

? ? @ApiModelProperty(value = "課程標題")

? ? private String title;

? ? @ApiModelProperty(value = "課程銷售價格，設(shè)置為0則可免費觀看")

? ? //0.01

? ? private BigDecimal price;

? ? @ApiModelProperty(value = "總課時")

? ? private Integer lessonNum;

? ? @ApiModelProperty(value = "課程封面圖片路徑")

? ? private String cover;

? ? @ApiModelProperty(value = "課程簡介")

? ? private String description;

}

2捎泻、修改CourseDescription主鍵生成策略

由于課程表和課程簡介表是一對一的關(guān)系飒炎，所以簡介表的id應(yīng)該與課程表的id一致。

3笆豁、定義控制層接口

@RestController

@RequestMapping("/eduservice/course")

@CrossOrigin

public class EduCourseController {

? ? @Autowired

? ? private EduCourseService courseService;

? ? //添加課程基本信息的方法

? ? @ApiOperation(value = "新增課程")

? ? @PostMapping("addCourseInfo")

? ? public R addCourseInfo( @ApiParam(name = "CourseInfoForm", value = "課程基本信息", required = true)

? ? ? ? ? ? @RequestBody CourseInfoVo courseInfoVo){

? ? ? ? courseService.saveCourseInfo(courseInfoVo);

? ? ? ? return R.ok();

? ? }

}

4郎汪、定義業(yè)務(wù)層方法

接口：EduCourseService.java

public interface EduCourseService extends IService<EduCourse> {

? ? //添加課程基本信息的方法

? ? void saveCourseInfo(CourseInfoVo courseInfoVo);

}

實現(xiàn)：EduCourseServiceImpl.java

@Service

public class EduCourseServiceImpl extends ServiceImpl<EduCourseMapper, EduCourse> implements EduCourseService {

? ? @Autowired

? ? private EduCourseDescriptionService courseDescriptionService;

? ? @Override

? ? public void saveCourseInfo(CourseInfoVo courseInfoVo) {

? ? ? ? //1 向課程表添加課程基本信息

? ? ? ? //將CourseInfoVo對象轉(zhuǎn)換為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

? ? ? ? EduCourseDescription courseDescription = new EduCourseDescription();

? ? ? ? courseDescription.setDescription(courseInfoVo.getDescription());

? ? ? ? //設(shè)置描述id就是課程id

? ? ? ? courseDescription.setId(cid);

? ? ? ? courseDescriptionService.save(courseDescription);

? ? }

}

6、Swagger測試

二渔呵、前端實現(xiàn)

1怒竿、定義api

import?request?from?'@/utils/request'

export?default{

????//1?添加課程信息

????addCourseInfo(courseInfo){

????????return?request({

????????????url:`/eduservice/course/addCourseInfo`,

????????????method:'post',

????????????data:courseInfo

????????})

????}

}

2砍鸠、組件模板

<el-form?label-width="120px">

????????<el-form-item?label="課程標題">

????????????<el-input?v-model="courseInfo.title"?placeholder="?示例：機器學(xué)習(xí)項目課：從基礎(chǔ)到搭建項目視頻課程扩氢。專業(yè)名稱注意大小寫"/>

????????</el-form-item>

????????

????????

????????<el-form-item?label="總課時">

????????????<el-input-number?:min="0"?v-model="courseInfo.lessonNum"?controls-position="right"?placeholder="請?zhí)顚懻n程的總課時數(shù)"/>

????????</el-form-item>

????????

????????<el-form-item?label="課程標題">

????????????<el-input?v-model="courseInfo.description"?placeholder="??"/>

????????</el-form-item>

????????

????????<el-form-item?label="課程價格">

????????????<el-input-number?:min="0"?v-model="courseInfo.price"?controls-position="right"?placeholder="免費課程請設(shè)置為0元"/>?元

????????</el-form-item>

????????<el-form-item>

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

????????</el-form-item>

????</el-form>

3、組件js

<script>

import?course?from?'@/api/edu/course'

export?default?{

????data(){

????????return?{

????????????courseInfo:{

????????????????title:?'',

????????????????subjectId:?'',

????????????????teacherId:?'',

????????????????lessonNum:?0,

????????????????description:?'',

????????????????cover:?'',

????????????????price:?0,

????????????},

????????????saveBtnDisabled:?false?//?保存按鈕是否禁用

????????}

????},

????created(){

????},

????methods:{

????????saveOrUpdate(){

????????????course.addCourseInfo(this.courseInfo)

????????????????.then(response=>{

????????????????????//提示

????????????????????this.$message({

?????????????????????????type:?'success',

?????????????????????????message:?'添加課程信息成功!'

????????????????????});

????????????????????//跳轉(zhuǎn)到第二步

????????????????????this.$router.push({path:'/course/chapter/'+response.data.courseId})

????????????????})

????????},

????}

}

</script>

03-課程分類多級聯(lián)動的實現(xiàn)

一爷辱、需求

二录豺、獲取一級分類

1、組件數(shù)據(jù)定義

定義在data中

? ? ? ? ? ? subjectOneList:[],//一級分類

????????????subjectTwoList:[],//二級分類

2饭弓、組件模板

????????<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>

3双饥、組件腳本

表單初始化時獲取一級分類嵌套列表，引入subject api

import?subject?from?'@/api/edu/subject'

定義方法

????????//獲取一級分類

????????getOneSubjectList(){

????????????subject.getSubjectList()

????????????????.then(response=>{

????????????????????this.subjectOneList?=?response.data.list

????????????????})

????????},

三弟断、級聯(lián)顯示二級分類

1咏花、組件模板

????????????

????????????<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>

2、注冊change事件

在一級分類的<el-select>組件中注冊change事件

????????

????????<el-form-item?label="課程分類">

????????????<el-select

????????????????v-model="courseInfo.subjectParentId"

????????????????placeholder="一級分類"?@change="subjectLevelOneChanged">

? ? ? ? ? ? ?? .......

????????????</el-select>

3阀趴、定義change事件方法

????????//點擊某一個一級分類昏翰，觸發(fā)change事件，顯示對應(yīng)二級分類

????????subjectLevelOneChanged(value){

????????????//value就是一級分類id值

????????????//遍歷所有的分類刘急，包含一級和二級

????????????for(var?i?=0;?i<this.subjectOneList.length;i++){

????????????????//每一個一級分類

????????????????var?oneSubject?=?this.subjectOneList[i]

????????????????//判斷：所有一級分類id和點擊一級分類id是否一樣

????????????????if(oneSubject.id?===?value){

????????????????????//從一級分類獲取里面所有的二級分類

????????????????????this.subjectTwoList?=?oneSubject.children

????????????????????//把二級分類id值清空

????????????????????this.courseInfo.subjectId?=?''

????????????????}

????????????}

????????},

04-講師下拉列表

一棚菊、前端實現(xiàn)

1、組件模板

????????

????????

????????<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>

2叔汁、定義api

api/edu/course.js

//2?查詢所有講師

????getListTeacher(){

????????return?request({

????????????url:`/eduservice/teacher/findAll`,

????????????method:'get'

????????})

????}

組件中引入course api

import?course?from?'@/api/edu/course'

3统求、組件腳本

定義data

teacherList:[],//講師列表

獲取講師列表：

????????//查詢所有講師

????????getListTeacher(){

????????????course.getListTeacher()

????????????????.then(response?=>?{

????????????????????this.teacherList?=?response.data.items

????????????????})

????????}

??created(){

????????//初始化所有講師

????????this.getListTeacher()

????},

05-富文本編輯器Tinymce

一、Tinymce可視化編輯器

參考

https://panjiachen.gitee.io/vue-element-admin/#/components/tinymce

https://panjiachen.gitee.io/vue-element-admin/#/example/create

二据块、組件初始化

Tinymce是一個傳統(tǒng)javascript插件码邻，默認不能用于Vue.js因此需要做一些特殊的整合步驟

1、復(fù)制腳本庫

將腳本庫復(fù)制到項目的static目錄下（在vue-element-admin-master的static路徑下）

2另假、配置html變量

在 guli-admin/build/webpack.dev.conf.js 中添加配置

使在html頁面中可是使用這里定義的BASE_URL變量

3冒滩、引入js腳本

在guli-admin/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>

三、組件引入

為了讓Tinymce能用于Vue.js項目浪谴，vue-element-admin-master對Tinymce進行了封裝开睡，下面我們將它引入到我們的課程信息頁面

1因苹、復(fù)制組件

src/components/Tinymce

2、引入組件

課程信息組件中引入 Tinymce

import?Tinymce?from?'@/components/Tinymce' //引用

export?default?{

????components:?{?Tinymce?}, //聲明

? ? .......

}

3篇恒、組件模板

???????

????????<el-form-item?label="課程簡介">

????????????<tinymce?:height="300"?v-model="courseInfo.description"/>

????????</el-form-item>

4扶檐、組件樣式

在info.vue文件的最后添加如下代碼，調(diào)整上傳圖片按鈕的高度

<style?scoped>/*?scoped表示只在當(dāng)前頁面有效?*/????

????.tinymce-container?{

????????line-height:?29px;

????}

</style>

5胁艰、圖片的base64編碼

Tinymce中的圖片上傳功能直接存儲的是圖片的base64編碼款筑，因此無需圖片服務(wù)器

測試：

添加一級分類id：

06-課程封面

一、整合上傳組件

參考?http://element-cn.eleme.io/#/zh-CN/component/upload用戶頭像上傳

1腾么、定義data數(shù)據(jù)

BASE_API:?process.env.BASE_API,?//?接口API地址

2奈梳、組件模板

在info.vue中添加上傳組件模板

????????

????????<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>

5、結(jié)果回調(diào)

????????//上傳封面成功

????????handleAvatarSuccess(res,?file){

????????????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

????????},

07-課程信息回顯

一解虱、后端實現(xiàn)

1攘须、業(yè)務(wù)層

接口：CourseService.java

//根據(jù)ID查詢課程

CourseInfoVo getCourseInfoFormById(String courseId);

實現(xiàn)：CourseServiceImpl.java

@Override

? ? public CourseInfoVo getCourseInfoFormById(String courseId) {

? ? ? ? //1 查詢課程表

? ? ? ? EduCourse eduCourse = baseMapper.selectById(courseId);

//? ? ? ? EduCourse eduCourse = this.getById(courseId);

? ? ? ? if (eduCourse == null){

? ? ? ? ? ? throw new GuliException(20001, "數(shù)據(jù)不存在");

? ? ? ? }

? ? ? ? //把eduCourse對象中的值復(fù)制到courseInfoVo中

? ? ? ? CourseInfoVo courseInfoVo = new CourseInfoVo();

? ? ? ? BeanUtils.copyProperties(eduCourse,courseInfoVo);

? ? ? ? //2 查詢描述表

? ? ? ? EduCourseDescription courseDescription = courseDescriptionService.getById(courseId);

? ? ? ? if (eduCourse !=null){

? ? ? ? ? ? //講描述信息放入courseInfoVo

? ? ? ? ? ? courseInfoVo.setDescription(courseDescription.getDescription());

? ? ? ? }

? ? ? ? return courseInfoVo;

? ? }

2、web層

????@ApiOperation(value = "根據(jù)ID查詢課程")

? ? @GetMapping("getCourseInfo/{courseId}")

? ? public R getCourseInfo(@ApiParam(name = "id", value = "課程ID", required = true)

? ? ? ? ? ? ? ? ? ? ? ? @PathVariable String courseId){

? ? ? CourseInfoVo courseInfoVo? = courseService.getCourseInfoFormById(courseId);

? ? ? ? return R.ok().data("courseInfoVo",courseInfoVo);

? ? }

3殴泰、Swagger中測試

二于宙、前端實現(xiàn)

1、定義api

api/edu/course.js

?//3?根據(jù)id獲取課程基本信息

????getCourseInfoById(id){

????????return?request({

????????????url:`/eduservice/course/getCourseInfo/${id}`,

????????????method:'get'????????????

????????})

????},

2悍汛、組件js

data中聲明：

??courseId:'',

created（）

????//獲取路由中的路由id值

????????if(this.$route.params?&&?this.$route.params.id){

????????????this.courseId?=?this.$route.params.id

????????????//調(diào)用

????????????this.getInfo()

????????}

方法：

????//根據(jù)id獲取課程信息

????????getInfo(){

????????????course.getCourseInfoById(this.courseId)

????????????????.then(response?=>?{

????????????????????this.courseInfo?=?response.data.courseInfoVo

????????????????})

????????},

三捞魁、解決級聯(lián)下拉菜單回顯問題

1、數(shù)據(jù)庫中增加冗余列

subject_parent_id課程專業(yè)父級ID

2离咐、pojo中增加屬性

entity.Course.java

form.CourseInfo.java

@ApiModelProperty(value = "一級分類ID")

? ? private String subjectParentId;

3谱俭、vue組件中綁定數(shù)據(jù)

edu/course/info.vue

4、修改init方法

將?this.initSubjectList() 和 this.initTeacherList()移至else

????????//init方法

????????init(){

?????????????//獲取路由中的路由id值

????????????if(this.$route.params?&&?this.$route.params.id){

????????????????this.courseId?=?this.$route.params.id

????????????????//調(diào)用

????????????????this.getInfo()

????????????}else{

????????????????//清空表單

????????????????this.courseInfo?=?{...defaultForm}

????????????????//初始化所有講師

????????????????this.getListTeacher()

????????????????//初始化一級分類

????????????????this.getOneSubjectList()

????????????}

????????},

5宵蛀、修改fetchCourseInfoById方法

解決在返回上一步的二級表單的問題昆著。

????//根據(jù)id獲取課程信息

????????getInfo(){

????????????course.getCourseInfoById(this.courseId)

????????????????.then(response?=>?{

????????????????????this.courseInfo?=?response.data.courseInfoVo

????????????????????//1?查詢所有的分類，包含一級和二級

????????????????????subject.getSubjectList()

????????????????????????.then(response=>{

????????????????????????????//2?獲取所有一級分類

????????????????????????????this.subjectOneList?=?response.data.list

????????????????????????????//3?把所有的一級分類數(shù)組進行遍歷

????????????????????????????for(var?i=0;i<this.subjectOneList.length;?i++){

????????????????????????????????//獲取每一個一級分類

????????????????????????????????var?subjectOne?=?this.subjectOneList[i]

????????????????????????????????//比較當(dāng)前courseInfo里面的一級分類id和所有的一級分類id

????????????????????????????????if(this.courseInfo.subjectParentId?==?subjectOne.id){

????????????????????????????????????//獲取一級分類里面的所有二級分類

????????????????????????????????????this.subjectTwoList?=?subjectOne.children

????????????????????????????????}

????????????????????????????}

????????????????????????})

????????????????????????//初始化所有講師

????????????????????????this.getListTeacher()

????????????????})

????????},

刷新發(fā)布課程頁面：

const?defaultForm?=?{

????title:?'',

????subjectId:?'',//二級分類id

????subjectParentId:'',//一級分類id

????teacherId:?'',

????lessonNum:?0,

????description:?'',

????cover:?'/static/11.jpg',

????price:?0

}

?created(){

???????this.init()

????},

????????//init方法

????????init(){

?????????????//獲取路由中的路由id值

????????????if(this.$route.params?&&?this.$route.params.id){

????????????????this.courseId?=?this.$route.params.id

????????????????//調(diào)用

????????????????this.getInfo()

????????????}else{

????????????????//清空表單

????????????????this.courseInfo?=?{...defaultForm}

????????????????//初始化所有講師

????????????????this.getListTeacher()

????????????????//初始化一級分類

????????????????this.getOneSubjectList()

????????????}

????????},

????//監(jiān)聽

????watch:{

????????$route(to,from){?//路由變化方式糖埋，路由發(fā)生變化宣吱，方法就會執(zhí)行

????????????this.init()

????????}

????},

08-更新課程信息

一、后端實現(xiàn)

1瞳别、業(yè)務(wù)層