课程管理-添加课程信息完善

开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:课程管理-添加课程信息完善】学习笔记，与课程紧密联系，让用户快速学习知识。

课程地址：https://developer.aliyun.com/learning/course/667/detail/11375

内容介绍

一、本章内容介绍

二、Tinymce 可视化编辑器

三、整合富文本编辑器

四、组件引入

五、效果测试

六、最终结果展示

一、本章内容介绍

项目第八天

1、添加课程基本信息完善

(1）整合文本编辑器

2、课程大纲管理

(1)课程大纲列表显示

(2)章节添加修改删除

(3）小节添加修改珊除

3、课程信息确认

(1）编写 sql 语句实现

(2）课程最终发布

本章为添加课程的基本信息页面作进一步完善，之前完成了课程分类中的下拉列表和二级联动，课程讲师的下拉列表和课程封面显示三个功能。

二、Tinymce 可视化编辑器

参考

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

https://panjiachen.gitee.iofvue-element-admin/#lexamplefcreate

复制网站链接到页面登陆网站即可查看什么是富文本编辑器。

即要整合在课程简介中的形式。如：在文本框中任意输入文字，可以点击调整文字的大小和粗细，或是下划线样式。

包括可以上传本地的图片，如：上传本地照片02.jpg 至文本框中，文本框就会对应做显示，以上就叫做富文本编辑器，就是我们需要在课程简介中整合一个相同的组件。

整合的过程相当于不需要特别记忆，只需要按照流程操作整合即可，此过程相当于开发前端 vue 组件的过程。

三、整合富文本编辑器

l 组件初始化

Tinymce 是一个传统 javascript 插件，默认不能用于 Vue.js

因此需要做一些特殊的整合步骤

1. 复制脚本库

将脚本库复制到项目的 static 目录下

（在 vue-element-admin-master 的 static 路径下)

首先第一步：复制文本编辑器的相关组件，该组件在框架中并不存在，所以需要将组件添加进去。打开电脑中1010oline 中的源码，点击富文本编辑组件。

分别将 components 中的 Tinymce 和 static 中的 tinymce4.7.5两者对应复制到我们所写项目中的 components 和 Tinymce4.7.5即可。

下面进行复制，首先找到所写项目在计算机内的存储位置：E 盘/work/vs1010/vue-admin-1010。

打开复制的组件和所写项目文件，对照相同文件夹名称-components,之后将源码components 文件夹中的 Tinymce 对应复制到项目的 components 文件夹。

同理对照相同文件夹名称-static，将源码 static 文件夹中的 tinymce4.7.5对应复制到项目的 static 文件夹。

以上就为，第一步复制相关组件的过程，组件必须要复制完全，因为需要作使用。

2. 配置 html 变量

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

使在 html 页面中可是使用这里定义的 BASE_URL 变量

第二步：找到 build/webpack.dev.conf.js 中添加配置

第二步操作需要在项目的配置文件中加上一段新配置（即代码绿色部分），为了之后的使用。

//即为需要添加的新配置，为了能够找到路径，为vue开发写法

templatePar ameters: {

BASE_URL:config.dev.assetsPublicPath + config.dev.assetsSubDirectory

}

l 代码如下：

new HtmlwebpackPlugin({

..........，//省略号表示之前有内容，注意要添加逗号

//即为需要添加的新配置，为了能够找到路径

templatePar ameters: {

BASE_URL:config.dev.assetsPublicPath+ config.dev.assetsSubDirectory

}

})

l 项目中代码如下：

//代码添加处，首先找到此处，再将红色部分添加进来，同时在原代码最后添加逗号‘，’

new HtmlWebpackPlugin({

filename: 'index.html' ,

template: 'index.html' ,

inject: true,

favicon: resolve( ' favicon.ico'),

title: 'vue-admin-template', //红色框为新复制进来的内容

templateParameters: {

BASE_URL:config.dev.assetsPublicPath+ config.dev.assetsSubDirectory

按照步骤首先在项目中的 build 下找到 webpack.dev.conf.js。打开注意不能改变其中代码，根据上述代码提示找到-HtmlwebpackPlugin，在其中内容的最后面添加逗号‘，’后再将要添加的新配置代码复制进去。

3.引入 js 脚本

在 guli-admin/index.html中引入 js 脚本

第三步：找到 index.html 引入脚本文件（即下列两行代码）

<script src=<%= BASE_URL %>/tinymce4.7.5/tinymce.min.js>

</script>

<script src=<%=BASE_URL %>/tinymce4.7.5/langs /zh_CN.js>

</script>

首先找到项目文件 src 中的 index.html，将两行代码复制进去，任意放置即可。

保存之后会显示保存仅仅是因为项目未重启，重启之后即可，同时复制代码的</script>部分会出现红色报错可忽略，并未影响仅仅是框架本身解析问题。<script src=<%=BASE_URL %>/tinymce4.7.5/langs /zh_CN.js></script>同时后一行代码表示中文的一个软件包，不添加也不影响。

四、组件引入

第四步：页面使用文本编辑器组件

前期准备完成后就是使用，涉及到页面中首先是import Tinymce from "@lcomponents /Tinymce'将组件引入，之后再 export default 声明，最后再使用一个组件标签名称，如果想要更加完善可以添加组件样式。

为了让 Tinymce 能用于 Vuejs 项目，vue-element-admin-master 对 Tinymce进行了封装，下面我们将它引入到我们的课程信息页面

1、复制组件

src/components/Tinymce

2、引入组件

在页面代码 info.vue代码98行中引入组件，该组件即为刚课程信息组件components 中引入的 Tinymce。之后再 export default ｛｝中声明组件：添加代码 components : { Tinymce },即可。

l 代码如下：

import Tinymce from "@/components /Tinymce'//引用组件

//声明组件代码添加的位置

export default {

components : { Tinymce }, //声明组件代码

……

}

3、组件模板

第五步：页面中使用标签实现文本编辑器组件

标签就是 tinymce，将以下代码复制到页面代码中

部分，将之前的简介之前覆盖即可。

l 代码如下：

//将代码覆盖页面代码的 部分

 <el-form-item label="课程简介">

//组件标签名称

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

</el-form-item>

4、组件样式

其中还包含组件的样式，可自行选择添加。代码一般添加至页面代码的最后端，其中 scoped 表示该样式只在当前页面中生效，到其他页面样式无效。

在 info.vue 文件的最后添加如下代码，调整上传图片按钮的高度

l 代码如下：

//scoped表示该样式只在当前页面中生效，到其他页面样式无效。

<style scoped>

.tinymce-container {

line-height: 29px;//表示内容的文字大小

}

</style>

总结：

整合文本编辑器的过程主要分为以下几步：

Ø 第一步：复制文本编辑器组件把相关组件进行复制到项目里面。

Ø 第二步：找到 build/webpack.dev.conf.js 中添加配置

Ø 第三步：找到 index.html 引入脚本文件（即下列两行代码）

Ø 第四步：页面使用文本编辑器组件

Ø 第五步：页面中使用标签实现文本编辑器组件

l 重启前端项目

完成整合之后，配置中因为未重启前端项目而报错，所以重启前端项目。提示：终止批处理操作吗？Y之后再输入 npm run dev 操作。

重启后等待页面打开，点击添加课程部分可以发现课程简介成功添加了富文本编辑器。同时文本编辑器也从官方的英文模式变为了中文模式，因为我们之前添加的中文包起到了作用，同时页面代码中添加的中文包：<script src=<%=BASE_URL %>/tinymce4.7.5/langs /zh_CN.js></script>有一处错误提示可忽略，仅框架解析问题。

五、效果测试

1.二级分类 id 值为空

（1）问题描述

最后我们对最终的效果做个测试：点击添加课程将其中所有的内容都填上，之后点击保存并下一步，查看效果为在edu_course课程表和

edu_course_description 描述表都有数据。

设置课程标题为0303测试最终添加课程信息，课程分类的一级分类为前端二级分类为 vue。课程讲师为王五，总课时10。

同时在课程简介中任意输入 abcdwww 再将其加粗插入图片02.jpg

使用设置的默认代码01.jpg，课程价格为99元。全部设置完毕后点击保存并下一步。

看见提示保存成功后到表中查看数据是否真正被成功保存。

由于数据繁多，将其设置为由时间排序，即可根据时间找到添加的-0303测试最终添加课程信息。

打开表 edu_course 表依次对照 id 和讲师 techer_id,名称 title 和价格 price,课时数lesson_num 和封面 cover 都正确。唯独 subject_id 和 subject_parent_id 应该分别为二级分类 id 和一级分类 id，但此时只有二级分类 id 而一级分类 id（subject_parent_id）中的值为空。

（2）解决方法

出现一级分类 id（subject_parent_id）中的值为空的情况是因为

在 EduCourseController 接口中添加的课程对象是 CourseInfoVo，按住Ctrl点击查看其中代码有许多属性，但其中的课程分类部分只有 subjectId，其中并没有subject_parent_Id，所以只需将 subject_parent_Id 添加到 CourseInfoVo 中即可（代码如下）。添加时前端代码中一级分类的名字需要保持一致，如：info.vue 中的subject_id(二级分类)和 subject_parent_id（一级分类）要和 CourseInfoVo 接口中定义的名称一致。

（3）总结

数据库表中二级分类 id 为空的原因是实体类中缺少二级分类属性，所以提交时缺少了。只需要在 CourseInfoVo 接口中添加即可。

l CourseInfoVo 代码中添加部分

@ApiModelProperty(value = "一级分类级ID")

private String subjectParentId;

l EduCourseController代码

*@since 2020-03-02

*╱

@RestController

@RequestMapping("/eduservice/course")

@CrossOrigin

public class EduCourseController{

@Autowired

private EduCourseService courseService;

//添加课程基本信息的方法

@PostMapping("addCourseInfo")

public R addCourseInfo(@RequestBody CourseInfovo courseInfoVo){

//返回添加之后课程id，为了后面添加大纲使用

String id = courseService.saveCourseInfo(courseInfoVo) ;

return R.ok ().data("courseld",id) ;

}

2.图片存储形式

l 图片的 base64编码

Tinymce 中的图片上传功能直接存储的是图片的 base64编码，因此无需图片服务器。

因为编译器中没有存放图片的服务器，所以只能先通过 base64编码形式，编码的目的是让图片转为更以存储的形式，再将编码后的内容存入数据库。

打开 edu_course_description 表查看 id 尾号为5953的详细描述。在描述中，因为添加了富文本编辑器含有样式以及图片等。点击 5Info。

其中的 text 表示文本类型能存更多更丰富的内容。

将其点开查看如何存储，可以看见显示内容为一串。

l 存储内容：

存在数据库下的主要分为以下三部分内容

//abcdwww 为刚编辑时输入的值，并赋予加粗效果

//外围的<strong>标签用作 html 方式对文字做了加粗效果

<p><strong>abcdwww

//img 此部分标示图片，src 表示图片地址，src=’ ’其中的为图片的内容，因为使用了富文本编辑器，而之前的课程封面的图片上传到了 oss 中有图片服务器来存储。但在编辑器中并没有服务器来存储，所以只能将上传的图片作个 base64的编码模式，即下面的东西，将其变为更易存储的形式。再将 base64编码后的内容直接存入数据库中。

//即图片文件是先经过 base64编码转为下方的代码再存入数据库中。

3.图片存储大小

上传的图片存储大小不易过大，因为其中的存储大小是有限制的。