day08【课程发布-课程大纲和课程发布】/02-尚硅谷-谷粒学院-课程管理-添加课程信息完善

咱们今天的第一个功能呢，还是把这个添加课程的基本信息页面做一个完善，昨天完善了这么三个课程分类加列表，包括二级联动课程讲师下拉列表，还有一个上传课程封面，昨天是把这三个完善出来了，然后咱们今天完善这个地方。就是课程简介，而课程简介我们要怎么做呢？在里边呢，给大家加上一个叫文本编辑器，把这个给它做到，那什么叫文本编辑器，我们先看一个效果。就是在我这个课件中有一个叫副文本编辑器这个东西，然后咱们打开这么一个，就是它官方一个示例的一个程序，我们看一下什么叫文编辑器。把这个打开啊。现在我登录，然后大家看里边这个特点啊，文本编辑器就是这个东西，就是它一会儿咱就整合这么一个效果，什么叫文字编辑器呢？举个例子，比如现在我在里边的输入一些文字，那这文字可以改变样式，就是你可以加粗。

斜体，包括加上这个线或者可以去掉等等，就是一系列这个那种，这是给它加样式，包括这个内容中，咱可以。上传一个本地的一个图片，把图片在里边也可以做个显示。比如说我们来大概试一下，咱传一个图片，然后这个图片在你这个里边就可以做显示，这个就叫副文本编辑器，所以咱们在我们的简介部分就整合进来这么一个东西，为了我们那个效果更加的这种丰富。这是咱们要做的第一个东西，给各位先知道，然后这个东西怎么整合，给大家来说一下啊，就是这个整合过程不需要各位去记，你按照我笔中的流程把这个整合出来就可以了，因为这个过程是前端要用到相于你开发一个VE，一个插件过程，不需要过于去记，按照流程整合就可以了，那咱下面它就整合一下这个文本编辑器，这过程我把这步骤每步都给各位写出来了。

那我来整合一下啊。写到这张图上。整合文本编辑器，那怎么做呢？首先我们做的第一步操作，咱先复制那个文本编辑器的一些相关的组件，把这组件我们先给它复制过来，因为它用到在我这个框架本身，没有咱需要从其他地方给它复制过来。那怎么复制给大家来说一下啊，就是我在这个源码里边给大家已经听出来了，比如说我会共享出来，应该在昨天啊，复制到今天这里边来。就在今天的这个位置，有一个叫副文本编辑器的组件，然后咱们把它打开，在里边呢，有两个地方咱需要复制，第一个地方咱找到它。

咱把这个组件复到我们项目那个com中，然后把这个组件复制到我们项目那个叫CD中，因为咱这项目中也有这两个文件夹，咱找到一个叫comment，一个叫static，咱把两个文件夹包括内容给它复制过来，这是咱做的第一步。然后把这个给各位截个图，咱做一个复制。我给他。截到这边，然后我在里边描述一下啊，第一步复制组件，那我们就把这个相关的组件进行复制。到我们的这个项目里边去啊，这是里边的第一步操作，那咱现在就来做个复制。我先找到我这个项目，我的项目是这个VS1010，然后叫VE的ME1010，然后咱们左右啊，给它对照来复制，省得我们少东西，然后怎么复制呢？你看啊，在我提供的这个资料中，有一个叫com。

就是他。然后咱们找到我们项目的confidence是这个。你看这两个文件夹是不是一样，然后你怎么做呢？把我们这个源码中的comment中的这个文件夹直接给它复制过来，这是第一步，就是对应给它复制，然后第二个大家看在这里边有一个叫C，而在我们项目中有一个叫C在这里。然后你把里边的CD中的这文件夹直接复制过来，这就是它的第一步，复制相关组件各位应该能看到啊，你对应复制comment中，复制到你项目的。com里边去，就在src里边去，把S中的内种复制到你的项目中的SD中就可以了，这是第一步，我们就这么来做。

所以这一步咱就完成了啊，这组件咱们必须要复制，因为用的就是里边的相关内容。我把这个截个图，然后这个做到之后，下面我们进入到第二步操作，这里写到复制这些相关内容啊，然后第二步干什么呢？咱需要在我项目中啊，配置文件中加上一段话，为了后面能使用，这是它的第二步操作，那我们找的配置文件就是这个配置文件。给大家写到图上。这里边就是第二步操作。咱做法就是找到我们项目中的这个配置文件，然后里边添加上这么一段配置。这配置在我课件中给大家都写出来了，加上的就是这段配置，你把这段加上这段，其实主要做的就是为了用它找到你的路径。你看里边就是一个路径的写法啊，这是VE中那个开发过程，各位给它复制可以了，那咱来找一下啊，在build的下边有一个叫web派点Dv.ZF是那个打包的这么一个JS文件。

大家找到build下边build叫web pack bv.CNF这个文件，注意别找错，然后把它打开，大家看啊，这里边有很多内容，这里边的内容咱们不能给它去掉，也不能改变，然后你在复制的时候，也不能把这直接复制，把里面替换，咱找里面那种啊，大家看。在这位置呢，我加个省略号，表示它之前有内容，之前内容不能变，然后你先找到这个名字叫htl web pack，我们找到。应该是这个，然后找到之后怎么做呢？在这段内容的最后面，咱加个逗号，这内容不能变，然后把我们里边的这个新的这个内容，就是这个内容直接给它复制过来，这是里边的第二步，我们就做这个事情，在里边复制进来这段内容。

这个位。截个图。就是你找到这个地方，然后咱们新复制进来的是这个内容，之前那种不能变，你也不能去掉，去掉它会有问题了。这个啊，第二步就是它。所以咱们把这步就做到了，就是直接改配置，然后这一步做到之后，下面进入到第三步，我强调啊，这过程在前端中是一个开发插件，一个培训过程，各位做个了解，但按照流程把它整合就可以了，因为咱们重点不是在培训前端工程师，但是这过程各位能按照步骤做到。然后大家看第三步，第三步呢，咱需要在我们的HT文件中引入两个脚本，这就是这里边的这个定文件，这是第三步。然后写到这个位置啊。第三步。我们找到项目中的这个文件，叫inex.HTML。

在里边引入你那个脚本文件。这是第三步，那咱来找一下啊，找到我们项目中的index.html，咱们在第一天说这个框架时候曾经讲到过，咱找到就是这个文件。In desk，然后在里边呢，把我课件中的这两行内容给它就复制过来就可以了，这两行内容是引入相关这个JS文件给它直接就拿过来可以了，位置无所谓啊，我就放到这里了。这个是我们做的这么一个步骤，找到这个文件给它直接复制过来，但是你复制之后呢，这里边啊，你保存它会报个错，因为咱们这个文件改完之后没重启，你重启之后就没有问题了，但是重启之后呢，大家看啊，这个文件的这个位置还会有个红色，这个咱可以不用理会，它对咱运行没有影响，因为这个它是解析的问题，就是框架本身问题。

其实这句话咱可以不加，这句话什么意思呢？该能看懂啊叫ZH-CN，就是中文吗？中文一个软件包啊，不装也可以，但是这里报错咱可以忽略，它对运行没有影响，这是它框架本身造成一些问题。这就是第三步，在里边咱们引入这么两个脚本。这个各位接过来啊，第三步就这么来做。然后这一步做到之后，咱把这些最基本的准备都做完了，最后就开始做这个使用，那怎么使用，就是具体到我们的页面中使用，主要就是这个过程，咱看一下啊，先把这个组件引用。然后再声明，最后咱用的时候用一个标签，就是那个组件标签名称，然后就可以了，包括你做的更好效果，我这里边给大家提供了样式，样式可以加上，不加也有这个效果，所以咱们最后给他就做个使用。然后写到这里边啊，就是第四步。

在我们的页面中使用，这个就是文本。编辑器的这么一个组件，最后一步，那怎么做，就咱刚才看到这个过程，我直接就结构图了啊这个过程。然后给大家特别这里写一下啊，首先第一步你先。引入这个组件，这是第一个，然后第二个在你这里边来声明一下，这个组件不声明它不能用，肯定我们要做这两步骤。给大家寄过来啊，然后提过来之后，咱们把它也直接复制到我的代码中去，这就不需要各位敲一遍了，直接复制就可以了，因为是固定的，然后来到我们的页面中，因为咱们的页面是在这个info view中，在这里边用到我们的内容，那咱首先在这个JS里边把这个文编辑的组件。先引入这个组件，然后组件呢，就是咱刚才复制那个在comment中的，就是它就是这个组件，然后这个引入之后，咱下步操作把它做个声明。

啊，引入组件，然后第二个声明这个组件。因为你是一个第三方组件，必须要声明才能用声明方式，就加个comments，加上你那个组件名称，也就是这个名称。这个就可以了，然后这些都做完之后，最后呢，咱页面中使用标签就来使用。这个这个画个框啊，然后最后我们在页面中。使用标签就来实现这个文本。编辑器的一个组件，就是直接加个标签就能用了，然后它的标签就这个标签就这个组件名称，然后把这个给各位直接就复制过来，找到咱那个描述的那个地方。来找，或者说简介地方应该在这里啊，这是简介。

然后我现在把这个咱直接覆盖就可以了，换成咱们新的这个简介整合进来，这个编辑器的部分就是它。这个我们就把它弄过来了。然后里边那名字，你看都是之前那名字，Course in for description。记过来啊，所以咱现在按照这些过程把这编辑器就整合完成了，主要这么一个流程，各位按照流程把这个整合可以了，不需要各位记这个步骤，因为这是前端一个开发插件一个流程。然后这个做到之后呢。在我这个课件中呢，给大家还提了一段样式，这样式呢就为了更加美观，不加也可以，样式中呢，主要加了这么一个东西叫line height，就是你里边那个内容的一个文字大小啊，主要加了它，然后把这个啊给大家也复制过来，有一个样式。这个样式呢，在页面中呢，咱一般都是放到页面的最后。

就加一个样式啊，这表示样式部分，样式里边呢有一个。属性叫SCOSCO什么意思呢？它就表示这个样式只在我当前页面有效，如果说你到其他页面这一个一，就是这个样式就没有效果，主要这么一个特点啊，所以咱们过程就整合出来了，所以各位在整合的时候，你按照我刚才画图上的这个1234步把这个整合就可以了，而这几步中任何一步肯定都不能少，包括第一步复制。然后第二步改配置文件，第三步引入，第四步引入声明和标签使用，而这些过程中呢，之前班上很多同学经常少的，其实是这个步骤没有声明，没有声明肯定没有效果啊，所以各位写的时候，这步骤任何一步骤不能少。这图我先保存一下，然后咱们看效果。

这是第二个啊。整合一个文本编辑器。它的这个过程。这个咱就做到了啊，做到之后下面呢，我把这个前端项目我们做个启动，因为咱改配置文件里边啊，他现在没启动会报错，咱给他重启一下，最终看结果。NPRUDV给它启动。系统之后啊，他会给我们打开这个浏览器在等他。启动成功啊。啊，这个可以了啊，然后启用成功之后在里边，咱们现在来到这个页面中看一下它的效果是什么样的，大家看啊，现在我点添加课程，然后咱们看里边。各位清楚的看到课程简介是用编辑器，包括这编辑器中大家看啊，就刚才咱看他那个官方实例好像都是英文吧，而我现在变成是不是都是中文，因为咱们刚才呢，在这个H条页面中，刚才我也提到过引入了一个。

中文包啊，所以它现在就是中文了，但是这个包中啊，会有一个错误提示，这个来忽略，对我们运行没有影响，就是它框架本身解析问题，但是你看现在这些效果应该可以了，这就是一个文本编析的过程，所以咱把它最终做了一个实现，这是咱们整合的过程。所以各位啊，还是我说的，按照流程把这过程能整合出来就可以了。这个咱们就做到了啊。然后这个做到之后呢，咱们把最终的效果我们来做个测试，什么叫最终效果，就是我现在点添加课程在里边，咱把数据都给它传进去，包括这些都有最后点保存，下一步，然后咱们看最终结果啊，咱做个最终测试，那我来最后写一下啊，也就是加完之后，他会在咱的课程表里面有数据，在描述表有数据啊，包括在课程中有这个相关内容。

那咱们最终加一下啊，我来做个测试。我写一个值啊，比如叫0303这个测试。最终的那个添加课程信息啊，就写这个名字发咱们找，然后这个选完之后，第二个叫课程分类，我现在选个前端开发，然后选一个叫vuee，这是第二个，第三个讲师，咱随便选一个文物课知树是他，然后这里边有课程的简介，我们给他写一些内容，比如随便来一个啊abcd。啊加这个，然后把这个内容，比如给他做个加粗或者加样式，另外你看这个位置在它里边呢，可以上传个图片，那咱给他就传一个本地图片，我就把本地的这个图片传上来。我点打开。你看现在我再点确定各位看啊，在这个简介中，目前有文字加粗，是不是还有一个图片咱穿插，然后这里边有封面，封面呢，咱可以用OS上传，我就用个默认值的，咱当时写的默认值应该用这个S中等，就是这个图片啊，我用默认的，或者你打oss也一样。

然后这个之后，最后有一个价格，我就写一个，呃，为了区分来个九九，这样的话数据全有了，然后都有之后，最后咱点保存，并下一步看一下数据最终能不能加进去。我一点。现在提示咱是成功，但是咱要看一下表中数据到底全不全，或者到底对不对啊，咱不要被表面现象迷惑，看实际的效果，那我们现在来到表里边。啊，表的数据比较多啊，这么多啊，咱就根据时间排序一下啊，看我们最新加的这个数据。看这个3月3号09:03，咱刚加的就是第一条数据，那我们看里边的值，看它对不对啊，第一个本身ID没有错，第二个是讲师ID，然后大家看啊，这里边有问题了。

诶，我点错了啊，这里边有一个问题，我再点回来啊，刚才点错了。这个然后大家看啊，目前有问题，你看第二个和第就是这个值和这个值，这两只应该是什么呢？是不是咱们那个一级和二级分类有，但你看目前啊，这个值没有，而这个值是什么呢？应该是咱那个一级分类ID，这是二级分类ID，目前只有二级没有一级，这咱们马上解决，先往后看啊，后面有一个名称，这是咱那个价格，然后这是课时数，这是封面，咱用那个本地的那个封面，后面这些都没有错，所以目前有问题，就是这个值没有，就是一几分ID为空，马上来看啊，然后咱们再看看这个减D。咱先记这个ID调5953，看他的简介，5953。

是不是这个。但是各位看啊，这个简介地方呢，因为咱们是整合了一个叫文本编辑器啊，就是用到了这么一个东西，所以咱看我们刚才是里边又加了样式，又上传了图片，咱先看这是怎么存的。你看啊，里边是这种形式。也就是我这个简介用的这种类型叫test，是一个文本类型，就咱用这种类型，就文本类型中的能存更多更丰富那种，那咱看他是怎么存的。我把这个点开大家看一下啊，里边有这个内容，那这个内容呢，给各位我就复制出来啊，咱复制出来。然后咱们啊，看这里边是什么内容。我把它打开啊。再看我刚才复制内容，这个内容有很多，我给大家就给它稍微区分一下啊，咱看里边的值。主要是这部分啊，我把这些先给它拿下来，然后我解释这段什么意思啊。

有很多啊，咱们把最后一行拿下来。稍等啊，他这个东西比较多啊。这里啊。然后现在啊，我们发现再存到数据库中的又是这段内容，那这个内容再来看一下什么意思啊，首先大家看第一个这段值呢，刚才我做的是不是给它做了一个加粗的效果，就是它变成粗体，那你看现在它存完之后变成什么样子。各位清楚看到它外边是不是有个标签呀，叫这个死状，死状就表示啊，对你这个文字做了加速，就是他用这HTML方式，直接用这个标签做你内容做了加粗，然后下面这部分是咱这个图片，你看这个标签叫MDSRC是你图片地址，但是它的图片大家发现是不是有这么多内容啊，这个内容是什么，咱们直接看肯定看不懂。

那要解释一下这段内容什么意思啊？就是这段东西其实就是你那个图片中的那种，但是它为什么这种形式的，因为咱们现在啊，我们用的是一个叫文本编辑器，而咱之前上传图片，咱案是不是传到了osi中学，就是有一个图片服务器存储。但是目前他这编辑器中没有什么存储服务器可以存他的这个内容，那他怎么做到的，怎么进行存储呢？它的方式很简单把就是把这个上传到图片内容，先做第一件事情做了什么。这个事情。叫贝是64。什么叫贝64呢？大家理解为啊，它是一种编码方式，就给它编成一种更易于存储的一种结构，这叫编码，而它就对图片那种做了一个备份64，然后备上64编码之后就是这些东西，然后把你备上64之后的那种直接存到我们的数据库中，这是它的一种存储方式，就是它是在我们数据库中直接存文件，但是它的文件是先做编码之后，然后做了一个存储，最终咱看到的就是这种形式。

所以这是它图片这种方式的出了一种，就是这么一种特点啊，我再说一遍啊，因为咱们用这个编辑器里边也能上传图片，但是它本身并没有什么服务器，不像咱们之前用oss，它里边没有，而它是怎么去存图片的呢？它的做法就是把图片内容先做一种编码，这编码叫备注64，它编码的目的就是让这图片更易于存储。然后他把编码之后的内容直接存到数据库中，所以咱看到这些其实就是图片内容进行编码之后的效果，这是它的一种底层的过程，所以各位给他知道啊，所以咱们看到的就是。这么一个效果。

里边啊有编码之后的图片包，你掐那种加了这么一个就是。HTL标签最终给他做到这个啊，是我们说的这么一个东西啊，但是这个过程中啊，咱整合，所以各位演示这个过程在整合中呢，有这么一个小问题，希望各位注意啊，也就是说呢，这个T里边存的内容也是，这里边存的内容肯定不是无限存储的，它的大小也是有限制的，所以咱们传的话，咱不要传一个太大的图片，你传太大可能会造成这数据库中存不下。这个啊也是肯定不是无限，是有大小限制的。所以这是关于咱说这个文本编辑器里边这个特点，各位把这个先知道啊，这个我们就初步做到了，但是目前呢，还是有一个小问题，就是这个问题。再看这个东西，刚才咱们在就是添加之后，我们发现啊，这个值是为空的，那咱们最后把这个快速解决一下，那这是什么呢？其实是咱们说那个叫一级分类ID，这是二级分类ID，那这值为什么等于空？

我希望各位要知道啊，为什么等于空的，咱看个地方啊，直接咱找这个接口。找到咱们添加课程那个接口，就是这个接口。我们找到啊，添加课程信息的时候，咱们传的这个对象是不是叫cos info view，把这打开大家看里边啊，这里边有很多属性，当是咱们清楚的看到里边这个课程分类的时候，是不是只有subject ID，它里边没有，这个叫subject ID吧，就是没有一分ID，所以说你在提交的时候，它里边值就是没有一分ID，最终你的数据肯定数据库中没有。那我们的解决方案怎么做，在里边就加上一个一分类ID的属性就可以了，就这么来解决，那咱给他就加一下啊。

用之前那个，咱们给它复制一个改一下啊，应该就是这个。叫subject parent ID，咱们把这属性加到咱们那个VO那个是一类中啊，加上它。然后你加完之后就可以了，但是加完之后呢，要注意点啊。你前端的地方。这些名字跟他要一样，比如说咱们的这个名字subject ID perd，跟你里边的这个名字要对上啊，这不能写错啊，现在应该是都一样的啊，咱再检查一下啊。ID。Subject per应该都没有错，所以现在啊，把这个我们就做了一个解决，也就是说这里边没有指的原因是因为你写的实体类中没有这个属性，他在提交的时候里面就是没这个值，所以最终它是空这个啊我们就解决了啊，然后都解决之后，咱们看一下最终的一个结果，刚才结果就是这个值没有，其他值都存在。

嗯。然后把服务器重新启动，咱试一下最后的结果啊。啊，等等它听起来啊。这个啊，启动咱们来到我们的页面中，页面中我重新刷新。进入到添加课程页面，在里边我们就来写个值测试一下啊。写一下啊，就是最终那个测试添加课程。里边这些随便选个一级分类，二级分类课程的讲师课时数啊，这是简介啊，就随便写个值了，然后这是封面，这里边有它的价格，这些值我们现在都传进来了，包括有一级二级这些都有，然后都有之后最后我们点一个保存，并下一步数据肯定可以加到数据库，咱最后到表里边来看一下这个值。就看我们这个时间，3月3号09:12，大家看值，我们清楚看到一级二级讲师这些是不是都有了，现在就都加进来了，所以咱们把这个添加课程的第一步最终完成了，就是这么一个效果啊，各位把这个知道啊。

然后就是还有一个细节啊，给大家说一下啊，我觉得各位应该能想到这种细节问题啊，我知昨天是没有说，但是我好像昨天有同学在客户群中也问了这个问题啊，这个我也提一下啊。就这种细讲。什么问题呢？就是我给各位啊，提供那个数据库脚本的时候，里边有个地方，我这里边是后面改过了啊，就是不改也可以，然后里边有这么一个细节，什么地方呢？就是你看我的脚本中啊，每个字段后面都加了一个关键字，这关键字。叫什么？Notno，就是这个值不能为空啊，所以说就是昨天如果各位测试的话，这个属性你没有加，你在里边会报个错，说这个值没有固定值，就没有一个默认值，因为咱的数据库里边这些值不是为空，所以我这里边啊，之前我是改过了，我是这么改的。

谁这么做的？你看这个效果默认都是有对勾的，我给它都去掉了，就让它可以为空啊，所以我测试是没有错的，所以各位注意这种细节啊，就这里边我给大家提供脚本中都是nono，但是你自己为了测试方便，其实你可以改一下啊，不改也无所谓啊，里边就是这么一个值。啊，这种细节各位注意一下啊，你在看到应该能快速找到它是什么错误，要么就是你没传值，要么数据库中这值不能为空，所以他报的就是那个错。就这种啊，小问题啊，各位都注意一下啊。所以咱们啊，现在把第一个部分完成了添加课程信息，各位把这些给他知道，就是咱们刚才说到这些这些内容啊，包括你的课程分类，讲师课程简介封面这些都给它翻出来，然后最终添加，添加的时候我们有数据没有需要在实体类中加上一个一级分类这个属性，也就是加上。

这个纸最终数据都有了。这个啊，我们就完成。