day08【课程发布-课程大纲和课程发布】/14-尚硅谷-谷粒学院-课程管理-添加小节

一下章节中加小节，第一个你要明确。章节它里边可以有很多小节，也就是说呢，你加小节的时候一定要用到这个章节，没有章节小节是不能单独存在的，所以大家要章节里面加小节，那在页面中该怎么做呢？你看这里边啊。这是我们的章节部分，在它后面呢，目前有两个按钮，一个叫编辑，一个叫删除，那我们就把小结怎么做，其实咱可以在这个位置再加上一个按钮，比如我们就叫添加小结，这是咱要做的第一个，而加完之后，当我们点击添加小按钮之后，怎么做呢？跟章节一样。咱也可以弹个框，输入小结的相关数据，最终点确定这数据添加到数据库，这就是添加小结，但是添加小节中有这么一个特点，大家可以先看表里边啊。就是表里边这个地方。大家看到啊，在这个表里边呢，有几个字段，咱今天应该做不到这么多，但各位先都解释一下啊，有哪些字段？第一个最直接就是小节的名称，包括小节ID，然后里边还有这两个字段。

这两是什么呢？大家看啊，这个字段是我们说那个章节ID，因为小节属于某一个章节，然后还有一个字段是什么，是不是就是课程ID，所以咱们一会儿加小节的时候，你需要课程ID，还需要这个章节ID，两个ID都需要，另外这里边的还有一个ID，这单今天用到，后面会用到这个东西。这是什么呢？叫video素ID。咱们来写一下啊，首先还是把接口先写一下。那我写接口啊，这些先都关掉。这个小节呢，咱要到一个新的controlr中，就这个controlr了，叫video，之前有课程章节，现在是小节，把这名字我先改一下，我就叫video，然后在CTRL上边咱加上一个注解。

就是这个跨越，然后里边写一下啊。先写一个注入。Private edu video service。然后这个叫video series，在里边我们写它的增加修改删除这些接口啊，我就写一个添加删除，各位把修改给它完善出来。写一下啊，第一个添加小结。然后第二个删除小结，还有一个叫做修改小结，这个过程各位给他完善出来啊，就加入图度啊，需要各位完善的，然后咱们写添加删除，首先写个添加。我写个post，提交方式叫A的。Video。然后下面加一个叫public RA的video。在这个里边呢，咱把那个数据得到，就是它那个对象还是用这个request的body叫edu video e video，然后最后我们调方法，Video所中这个添加方法，就一个叫C把这个传进来。

最后咱给他退一个值，就是r.OK。这个啊是我们的第一个添加小结，我们直接调数据加就可以了，然后第二个叫删除小节，咱写一下啊，里边加一个叫比例的调方式，而删除肯定根据ID用删除，那里边我就给它传入这么一个ID去表示小节ID下面写方法。Public r这个方法，比如我就叫delete video。这是方法，写完之后在方法中呢，咱们把ID给它取到。加上一个string ID，这个得到了啊，得到之后最后我们调方法做个删除，就调这个video service中的方法给他先删一下。这里边我们调一下啊，它应该叫。

这个100ID，咱传个ID。最终我就给它蕊吞一个值，这样的话删除就完成了啊，就是两个最基本方法。但是删除我要说明啊，这个方法我这里特别标注一下啊，我就加一个图do。标注什么呢，咱们后面。这个方法是需要完善的。怎么完善呢？因为咱们后面呢，在小节中会有那个课程的视频，咱没有做到，所以咱们就是要这么来完善，在我删除小结的时候。同时要把里边那个视频给它也要删掉，这咱们后面完出来，咱先放到这里加上一个注释，这是需要后面完善的啊，现在我们先做一个最基本删除，所以这个两个接口做到了一个添加小结，一个伸手小结，各位把这个修改这个班出来，跟我们刚才做的章节修改是一样的，一个ID查询，一个修改。

这个啊接口。然后接口选完之后，下面咱还是写它那个前端部分，把前端做实现。因为这个章节小节它都是在开页面中，所以它代码都写到这里边去啊，这个代码从前端多一点，但这结构应该都差不多，那我就把它写到我们的呃，这个上边了啊上面这个位置。这个位置啊，为了明显我特别加个注释啊。加个注释。就是下面部分都是我们针对章节的操作。然后上面部分是咱针对小结的那个情况操作。啊，价格出示，让咱们更好区分，这是小节部分，那咱下面写这个最终的小节操作，那咱看怎么做啊。首先第一部分咱要添加小节，那我们就是在每个章节后边，咱可以给它加上一个按钮，也就是在我们的。

这个位置咱再加上一个按钮，之前有编辑和删除，那我们加一个就叫添加小结，这是它的第一步。小这个位置啊，这个叫添加小结。这个按钮啊。然后这个写完之后，在里边我们写内容，添加小结，肯定它要绑定一个事件。然后添加小节的时候，各位要注意啊，跟章节一样，就是当你点添加章节是弹个框，咱们点添加小节，它是不是也要弹购框，跟这个一样。但是这里边啊，我们这个弹框跟之前稍微有一点点区别，我把这写一下啊，这叫改个名字叫open这个。Video，然后在里边啊，我需要传个参数，因为刚才我提到咱们添加章节的时候需要课程，添加小节的时候是需要章节，所以我在添加小节的时候把这个章节ID传进去，或者咱们后面方便这个啊，是我们传一个值，下面咱写这个方法。

写到这个位置啊，这个方法。这个方法就是添加小结。弹框的这个方法。在方法里边呢，有一个就是章节的ID。这个啊方法我们定义出来了，然后定义之后咱要做的话，让他要弹个框。但是这里边有一个问题，各位注意啊，咱刚才的弹框是章节，而这章节弹框就不能再用小节了，因为里面东西是不一样的，所以咱们做小结需要写一个新的弹框。作用跟它一样，只说里边名字改一下就可以了，所以咱们加个新的弹框，专门做小结的这个操作，那咱们我从课件中复制过来啊，这个小结是这个地方。接口写完了，然后咱们看那个弹框。

弹框就是这个。我把它拿过来哈。这是一个小节的弹框。然后大家看弹框中，当然有些功能我们暂时用不到，后面会用到，比如这个什么上传视频等等，你看里边有一个值，这个值咱们跟刚才一样，让这个值等于处，那这弹框就可以显示。那我首先啊，在里边先来个初始值，默认值，让它是一个false。这值就表示。小节的一个弹框，包括这个小节，咱也加上这么一个video，这么一个具象，就是里边的这个值video。加一个对象的定义。然后在里边写上几个初始值啊，就把这个咱就直接。拿过来了啊，主要这么几个啊。当然有些暂时用到，后面咱都会用到啊，先给他都放到这里。然后这个定义出来了，定义之后咱下面要做的事情就是当我点添加小结，肯定它要弹出这么一个框，就是弹框，那怎么弹框呢？让咱们刚才看到这个值叫video，这个form等于一个处，它就可以把小节的弹框弹出来，也就是这个值等于处。那我们的。

这个弹框就可以出来啊，这是我们做的第一部分，那咱们做到之后，咱们把效果我们先看一下，然后再往下实现。看一下效果啊。在里边，比如我们来到这个页面中。火线。刷新啊。等下刷新啊。啊，当然他如果比较慢啊，我就把这个服务重启一下啊，我先重启一下吧，啊加了很多东西。这个重启一下啊。然后咱们再看效果啊。包括接口给它引。

启动一下啊。就是现在我们要测试的效果就是点击这个添加小结，它会弹个框，然后弹框里边呢，咱能输入小结中的数据，最终实现它的一个添加，咱把服务器都给它重启一下啊，因为它就是稍微慢一点啊，重启让它快一点啊。这是接口部分，然后这是前端都可以了，转到里边啊，重新登录进来。登录之后看到里面那个。课程部分。那咱就啊，重新加一条数据吧，回来更明显啊，重新来一个就来一个。123456啊，随便写个值。先加个课程。点保存下一步到第二步，在第二步的时候呢，咱们现在添加一个章节，比如说第一章啊，1010，我们点确定章节加进去了，然后加完章节之后，大家看在章节后面一个按钮，是不是要添加小节，我们现在点添加小节，各位看到是不是就是弹购框了，在弹框里边咱能输入小节名称啊，或者叫课时，课时就是小结一个意思啊，大可输入它的名称排序，或者说你的课程是否免费。

这些都可以输入，然后下面还有一个地方，这个咱们明天会做到，就这个地方叫上传视频，因为在小节里边会有课程视频，我们要先出来，所以现在弹框做到了，然后做到之后下面在里边输入数据，首先可以选择，然后咱们点确定。就会调接口加到我们的数据库中。那咱把这个我们来做一下啊。首先还是在API中把这接口我们先定一下。用它我就复制改一下了啊，你跟它差不多。这接口我们叫。video.js，然后video里边有它的最基本几个方法，第一个我们写个叫添加小结。

这些名字都改一下啊。他要这个。Video，然后这个叫video。在下面写上我们那个添加小节的接口名称，这个名称edu service video。后面加上这个叫a video，这是添加小结，然后下面是post提交里边传这个对象啊，这是第一个，然后第二个就修改啊，各位去完善，我就写一个删除，删除小结。然后删除，改个名字，我们叫这个video。里边传入一个ID。下面写上它那个方法咱就叫edu service video后面有一个ID，它是一个比例的提交，这是一个。删除啊，所以这是两个方法定义，然后定义之后，最后咱们来到我们的页面中做一个调用就可以了，在页面中呢，把这video我们先给它引进来。

Video。后面加上它那个名字叫做video。这个我们做到啊，然后做到之后我们最后作为添加，也就是在里边呢，当我点这个确定，它会调我们机构中的方法，然后把数据可以加到数据库中啊，主要就是跟刚才章节是一样的啊，没有太大区别，但最终做到就可以了。所以咱们啊，先弄到这里啊，下节课把这功能最终给它完善出来，我就把添加删除做到，然后这个修改给去完善。啊，所以这节课呢，咱就是章节部分都完成了，然后小节部分写了两个接口，包括前端我们做了一部分，下节课把前端我们最终完成，然后包括咱的第三步，咱也能做一部分，就是课程的这个信息确认。