day05【讲师管理模块前端开发】/10-尚硅谷-谷粒学院-讲师管理前端-讲师添加

下面啊，咱们先来把这个添加讲师功能，我们先给它做到啊。这是一个也是一个比较基础的一个功能。写到这位置啊，添加讲师功能，那这功能怎么来做，给大家还是先做一个基本分析，然后咱们来写它这个具体代码，首先我们看第一部分啊，在这里边呢，我们有一个路由，这路由的名字就叫做添加讲师啊，这路由咱应该之前已经加过了，这是他的第一部分，而现在咱做到第二步，比如我现在啊，我这里边就是点击这个添加。讲师的这么一个路由或者按钮，大家说他应该干什么，我点添加讲师要做什么。咱是不是要加讲师数据啊，就是做到的话跟这个类似，当我点其加讲师，他是不是就要到这么一个表单页面中去，咱可以输入，比如说你输入讲师名称，什么讲师的头衔，什么讲师的资历等等，当最后我点保存这些数据是不是加到数据库中，所以咱们肯定这么做，当我点添加讲师，他要进入到一个表单疑问中去。

小这位置啊，进入到一个表单的一个页面，咱们可以输入讲师的一些信息，比如说你的讲师名称，什么讲师头衔，什么讲师资历等等啊，咱们这么来做，那这个表单咱们同样还是用这个element UI做到，刚才咱都做到过，那下面我们来直接用一下啊，因为刚才我们做那个圈查询中应该用到。就是那个表单部分，咱现在就加到讲师这个位置，加上一个表单。那我们下面啊，咱就来加一下啊，这个加的话不需要各位去敲，别咱从我文档中课件中直接复制就可以了啊，那我就复制一下啊。到这里边有一个表单，然后表单中这些方法咱一会儿再定义，先把这个页面我先复制过来，呃，在上面啊，有一个页面。

就是表单的这部分，那我把这部分给大家就复制过来。然后咱们复制啊，我就复制表单这个位置啊，就中间这部分e form。然后把这部分呢，复制到咱那个表单页面中。那我们看一下啊，咱先看路由，在路由里边呢，添加讲师答案是不是到这个teacher的C里边，所以咱把这代码复制到C这个页面中。我们找到这个里面啊，里边有这个，咱在div里边把这个复制就是一个e form的这么一个表单啊，就这个，然后咱们来看一下这个表单。首先E啊，里边有这么一个宽度啊，然后它有很多的item，第一个是讲师名称，包括讲师的排序，讲师头衔，还有什么讲师资历，讲师简介，最后有一个八腿是保存按钮啊，所以咱们把这加上，而在里边有一个地方，各位注意啊，就这个地方。

啊，这个啊，我说一下啊，这地方呢，因为咱那个头衔在咱们的数据库中存的，它存的不是高级特级讲师，存的是是一和二啊，所以我们写的时候在里边就写上一个select option，它的Y6值最终会提交是一和二，然后它显示是高级和首席讲师，就跟咱们HT中那个赖的标签是一样的。这是它的Y6值会提交，然后显示的是这个值，就是里边这个高级讲师和手机讲师啊，所以咱们写了一个表单部分，然后在表单中大家应该清楚看到有一个地方，这个地方叫V-model，给咱上一个用到过V-model是不是一个双向数据绑定了，所以咱这条件值最终应该会封装到一个对象中去。包咱在接口里边大家看到啊，接口中咱做的这个特点就是直接用这块body得到这个Jason，就Jason这个数据放到对象中，然后咱做添加啊，所以现在咱把这个给他页面弄出来了，然后弄出来之后下面咱写它那个Java部分。

来写一下啊，用这个提示就这部分。然后在里边结构咱再写一遍啊，第一个叫做。Eight。各位要熟悉啊，然后你加个。退，这是第一部分，然后第二部分我们有一个叫可瑞的。就是在你页面渲染之前执行，这叫C，还有第三个叫这个。Method里边定理的具体方法啊，所以咱们写每次都是这个结构，那结构写完之后，咱们首先先写几个初始值，那有什么值，其实就是这个VGA model，因为它这个对象嘛，所以在里边啊，我就定一个对象，咱就叫这个。Teacher啊，这个对象，这对象呢，就用于封装你里边的这些值，因为它是teacher，但是teacher里边呢，你可以加上它那个具体的属性，比如说里边有这个叫name。

啊，包括有什么sot等等，你不加也可以，加上也没有错，咱刚才写中，你看到我刚才在例中，咱是不是就没有加呀，可以啊，这里边不加也可以，大家换一下，这里边我给它加上啊，咱再换一种写法，把这些值都加上，就是里边这个name so level，这个资历级别啊，什么简介等等啊，这些都给它加上啊，不加也对。呃，这个我就从课件中复制了啊，就是这么几个。把这几个咱们给它加上啊。不加也没有问题，效果都一样的啊，就是有你的讲师名称，讲师排序，讲师级别，什么讲师简介资历，还有一个头像啊，主要这一个值。然后除了这几个之外呢，在我这里边还有一个东西，就是这个不是特别重要啊，咱也加上吧，这是什么意思呢？当然这个单词叫disabled。

Disable表示是是否可用啊，它就表示什么意思呢？比如说现在在页面中，咱就以这为例啊，当我点添加之后，我当我一点让添加，不能再点第二次，一点完之后它就禁用掉了，它是为了预防你重复提交多次那个问题啊，咱们可以加一个按钮，但是不加功能无所谓啊，那我就加一个，比如默认值就是true或者false，咱默认来一个false。就是啊，这么一个值，未来那个按钮是否禁用啊，就这么一个描述啊。这个拿过来哈。但是这个不重要啊，表示上面，所以咱下面把这个初始值都加进去了，然后加完之后我们先看一下它目前的一个默认的效果什么样，然后咱们再写里边这个接口调用过程啊，咱先看目前的一个结果。那我们看到啊。在这里边，比如说现在我重新刷新，就F5重新刷新，刷新之后我点这个叫添加讲师，大家看效果，我们看到这表单是不出来了，就这个表单你可以输入，比如说讲师名称，假如我们这个什么什么张老师，然后排序，比如零和一啊，头衔高级和首席，这是资历，这是简介，这个表单就可以了，然后都数之后，最后我点保存这些数据是不是加到数据库中啊，所以咱们现在把表单我们就做到了。

啊，就是这么一个。基本效果啊，我就简单啊，咱截个图。主要这么一种情况啊，就进入到这个表单中，咱们完成了啊，然后完成之后咱们往下来做啊，就是下面要做的事情，小这个位置，咱们在这个表单的页面中。啊，表单页面中，当我点击这个叫保存，它就会啊，把我这数据提交到我们的接口里面去，然后最终添加到数据库啊，所以咱们最后就来去请求接口把数据交过去，最终给他加到数据库啊，最后来写这部分。

这比刚才列表简单很多啊，咱来写一下啊，看怎么做。首先大家看啊，因为咱们现在肯定最后要点保存，保存呢是一个button按钮，所以在按钮中呢，这位置我们是绑定一个事件，然后里边加个方法啊，这个方法我就叫save update。这些方法之前写到我曾经提过啊，你可以加个括号，括号也可以不写啊，都一样的，那我就不写啊，直接加这个方法，然后我在method中写下这个方法叫save update。啊，这是咱们写的方法，然后这个方法有个特点啊，给大家强调啊。你看我方法的命名特点。我是不是叫save o update save是不是保存啊，O是或者update是不是叫修改啊，就这个方法，咱为什么这么写啊，这边我有一个目的啊，就是一会儿呢，我们做修改的时候，我想让修改跟添加用同一个表单，为了咱们方便，但你可以不用一个表单啊，我就想用一个表单，为了它少写一个页面，所以咱就叫这个名字，那叫这个名字之后下面我就单独写个方法叫这个。

添加讲值方法，为了咱一会儿能区分啊，因为这个方法中一会儿这个页面叫做添加。还要做这个修改啊，咱为了这个做准备啊，咱先这么来写啊，我下面先写个保存，我就叫save这个teacher。啊，这是一个方法。咱们现在把方案写出来，然后里边我先做个调用，一会儿咱再完善，写到修改的时候咱再给完善出来啊，就是目前咱先这么来写啊，先做个调用。然后这个写完之后，现在方法就写出来了，包括咱这个teacher在上面有V杠，Model里边有数据，然后最后咱要做的肯定是调用咱的接口就可以做到啊，那咱写下啊，按照咱们刚才写到的咱们做法就是。

呃，我直接啊，直接写代码了，在这个API中的teacher里边，咱就把这个添加方法给它就定义出来啊，那我来做个定义。小D位置啊。这个方法就叫添加讲师，我起个名字，比如我叫A。Teacher。添加讲师，因为咱要传一个对象，我来一个叫teacher，然后在里边结构跟这应该一样，再用它来改一下啊，这是结构，在结构中首先第一部分咱就加上那个接口的路径，路径这个a teacher啊，前面都一样，就是ewi teacher，然后这个叫a teacher。他的提交方式，咱看到。是不是这个POS提交啊，那我们改一个叫。

然后最后还一个值，就是这个T对象。A怎么写，然后各位知道啊，咱写列表中都写过，因为现在我接口中用的是不是瑞块的包点，就是他需要通过Jason传递，所以咱在页面中怎么传Jason的，我们就加上一个叫date冒号，然后加这个teacher，它就会把T转换成DC给你传到接口中来啊，所以咱们API中就写上这么一个方法啊，就是。添加讲示方法，咱们把这里边的路径，包括提交方式，包括这个date转成Json传到结构中去，最终实现。所以我们现在写的这个啊。在里边标注一下哈。这是第一个API中定义你的接口的地址。这个定义了啊，然后定义之后，咱下面就是在页面中进行调用啊，页面实现我们的调用，那咱就来调一下啊，咱看怎么调。

这都完成了啊，然后来到页面，在页面中呢，因为咱们要调那个方法，所以首先第一步这个就是t.JS文件在里边，咱是不是先引入啊。那我们来一个import。Teacher。From加上地址写法，前面是固定的at斜杠，后面加上API。然后大家看这地址啊，但是这个它叫edu里边的teacher啊DJS可以省略，就是teacher这就引入了，引入之后我们就是在这里边做个调用就可以了，那咱就调一下啊。Teacher点上这个方法叫A的teacher。然后在里边传参数，它的参数就是这个提成，那我们写一个叫。点teacher啊，当然为了区分啊，当然为了区分明显把这名字都给它换一下啊，要不然这样都叫teacher，比如这个我就叫teacher API啊，咱区分一下啊。

然后我这里边调用就是teacher A片，点上这个叫做A的teacher。在里边我们加上一个叫this.teacher写名字一样也可以啊，我就为了区分一下，让它更明显，然后后面加上这么一个叫。点赞啊，咱加一个叫response。电流函数，这就表示添加成功。插绘啊调理方法，然后咱们在里边给他做一个操作啊。各位要知道啊，比如说我现在在这个页面中，当我输入了数据都输入了，最后我点保存，保存之后咱你添加成功，那咱要做什么事情。要各位能想到啊，第一个事情。咱给用户是不是一个提示，说它添加数据成功，或者说添加讲值成功，这是咱做的第一步，然后第二步，当你保存之后，咱们是不是要回到列表页面中，在列表中显示你添加之后的最新数据啊，所以咱要做这两部分，第一部分给他来一个提示信息。

啊，就是提示他成功，然后第二个回到我们的列表页面啊，咱要做这两个事情。这各位要知道啊，那咱来写一下啊，首先提示信息咱到例子中直接复制了，因为刚才刚写过就是。这个信息我把它拿回来啊，这一段就是提示信息，比如说这里边的名字给它改一下啊。把格式稍微调整一下啊，这个信息我就叫添加成功。这是一个啊，然后写完之后咱要回到列表中去。这是一个关键啊，咱要怎么回去？大家看一下啊，我们目前的特点啊，因为咱们目前呢，是在这个页面中，而我要回到列表中，是不是要到这个页面中去，这两个是不同的界面啊，这是不一样的，而这个过程中呢，在咱VE中有一个术语的说法，它叫路由的一个切换，什么叫路由切换，大家来看啊，就是你看这个位置。

一会儿大家看这个路径中的变化啊，这是默认的一个路径，比如我现在点讲师列表，大家看这是不是叫teacher table，我再点添加讲师是不是到teacher save，而在要实现添加之后，这里边是不是要变成叫teacher table才可以，这叫路由跳转，所以我们现在需要正来做才能回到列表卷中去。各位啊，不知道是否能看到，咱再说一遍啊，它默认是个斜杠，当我点讲师列表，这里边叫teacher table，我点添加讲师，这里边叫teacher c，而这个值是在哪里看到的呢？咱在写路由的时候就这个值，你看啊。这个路径叫teacher，这叫table，他们构建到一起叫teacher table，这叫save，然后加上它叫teacher save啊，这是一层目录，这是二层目录，他们就是拼接成这个地址，所以我们要到这个地方去，这叫路由跳转啊，咱需要这么做才能回去，要不然你这里边回不去的啊。

我写一下叫路由跳转。而路由跳转呢，说的底层点就是咱们最早在web阶段学的一个东西，叫做重定向操作，就这个操作，只是目前咱是用vouee啊，他不要写什么通向代码，咱是用voe中的方式，能跳回到你的录由中去，就是回到列表中去。那怎么回去给大家写一下啊，我强调这个代码是一个比较固定的代码，希望各位记住，以后这个代码咱会经常写到啊，就是里边的这段。叫这点route.push里边加上你那个地址啊，那我给大家写一下啊，怎么跳转回去。

加一个叫这点Dollar符号，这叫route，点上叫push，然后在里边小括号大括号里边加个pass pass的值就加上你要跳转那个地址。哪个地址就是咱加上。这个地址叫teacher，杠table，你把这个复制过来，或者说你到它那个路由里边，你可以复制它，就是杠teacher，然后杠table这个可以过来，这叫路由跳转，就是当我们添加之后，先提示成功，然后通过路由跳转回到列表页面中，在列表页面中咱也做这个调用啊，就是KT里面调用，它能查出最新的数据。啊，所以我们就是这么来做到，可以称为路由跳转。大家啊，把这个给他要知道啊，咱后面肯定经常会这么写，就你通过一个地方到另一个地方，咱用路由跳转方式，最终做到。

这个啊，我们就写完了啊，然后写完之后咱们来把最终的效果再来试一下啊，主要就这过程啊，最后咱重复一遍，然后实现看结果啊，做法就是路由里边到页面，页面中的先写个表单，用V-model做双向绑定，绑定中可以加属性，不加也可以，然后加完之后咱在下面做法就是在里边我们一点保存，它就会提交这个，就是提交这个数据到咱们接口中去，在JS里边把接口这个方法定义出来。然后定义之后，在页面中先引入，然后做一个调用，调用之后咱就添加成功，然后成功之后先提示信息，再回到列保页面，那怎么回到列表页面，因为他们是不同的路由，就是每次这个值都不一样，咱通过的方式叫路由跳转，这写法是固定的。this.router.push然后pass，这加上你跳转那个地址，也就是你这个地址就是teacher table。

啊，什么teacher save，就是通过它能跳过去啊，所以咱们主要一个过程啊，那咱们现在就写完了，然后注意啊，这个写的过程中，咱们不需要在create里面调用，因为create在你这边加载句型，这个方法调用是你点按钮才调用，而咱们不要在这里面调用啊，你别多写步啊，这是不需要的。它是点的时候才调用所里边直接这么来写，这里不要再调了啊，那写完之后咱最后试一下最终的结果啊。最后咱试一下啊，我先刷新，然后点击添加讲师，在这里边我就随便写几个值，比如说写一个这个。测试1010啊，排序就来个一啊，高级讲师，比如资历这个什么。教授啊，你现在是个人都叫教授啊，教授。

然后这个写完之后，最后咱点保存看一下结果啊，我点保存大家看提示成功，并且是不是回到了VI移民啊，回来了啊，但是回来之后这数据啊，咱这个没做排序，其实数据应该是有的这个数据。啊，那这个啊，为了咱们明显，我把这个数据啊，给他简单排个序。什么叫排序呢？因为大家注意啊，一般来讲咱们就是每次新加的数据是不是应该是在第一个显示啊，所以咱把这数据给它排一下序，怎么排序呢？你可以根据ID排序，或者说根据时间是不是也可以排序啊，那咱就根据时间给他先排个序，因为这样的话更明显，当然目前功能已经做到了。啊，咱把代码稍微改造一下啊，做个排序，要不然他看的不明显啊，那排序咱找到列表方法中，就这位置就加个排序的一个条件就可以了。小的位置啊，做个排序。

那我来一个叫rapper，点上这个方法。不知各位是否记得啊，Order by DSC，那我们根据这个时间，就这个创建时间做一个降序排列，这样的话，你每次加的数据就是新加的数据都在第一个显示啊，咱为了更明显，加个排序的这个代码。啊，这个各位给他知道啊，是为了更清楚啊。那我给他重启，最后咱来试一下啊，就是现在这功能我们用实验出来了，添加讲师。这个啊，等它重启啊。好，这个可以了啊，然后重启之后我们重新试一下啊，点添加讲师。啊，添加讲师，然后点完之后，比如现在我加一个数据，比如就叫啊，咱写个老师，比如说这个老师，假如他姓一个，那个复姓就是什么。东方老师啊，复姓东方。

这是排序啊，然后这是它那个资历，比如什么什么教授啊，什么博士后，现在都加完之后，我们点保存提示成功到列表页面，大家看在列表中的第一个数据，是不是咱们刚才加这个数据，因为咱们根据时间做的排序。啊，这样的话就完成了，这就是添加的这么一个功能，就是添加讲师这种做到了，而这里边啊，做到还是咱们刚才那个列表那个过程都差不多，你把这过程要知道啊，特别是里边这些写法怎么去定义，包括怎么调用，在咱们定义方法的时候，这个date什么含义它表示。把这个数据变成data，传到接口中去。主要这个添加啊。