day05【讲师管理模块前端开发】/05-尚硅谷-谷粒学院-讲师管理前端-讲师列表（1）

然后下面呢，咱就按照我们上节课说这个过程，把讲师的增删改查的这么一个功能给它练出来，接口咱都写过了，测试也都成功了，包括别忘记啊，这个给它加上，就是跨越这个注解，然后下面这个后端接口咱不需要动了，咱就要写重点写前端，那咱来写一下啊。首先我们先来写第一个功能，就是讲师列表功能，把这个功能我们先实现。啊，就是讲师列表的前端的实现，那按照我刚才说的步骤，咱就一步一步来写一下再来实现啊，首先我们做的。第一步操作刚才提到了，因为第一步呢，你需要在页面中做操作，所以第一步咱是不是要先要添加上一个路由啊，把路由加上，也就是说在这个位置咱加一个叫讲师管理，然后里边有讲师列表，添加讲师这些功能啊，这是第一部分，那咱们在里边我们就来加一下这个路由。

咱来加一下啊，首先第一个你要知道路由加的位置在哪里，在我们的src里边有一个叫UR里边有个叫index，在这里边咱们。加上这个路由啊，就是找到这个文件，各位能找到啊，Root。这个文件啊。然后找到之后再来加一下啊，怎么加A代码不需要各位去挑，你挑很容易错，咱们按照他之前用的代码，因为咱做讲师路由跟这example应该差不多，就按照它咱复制改就可以了，那我现在你注意啊，别复制多，也别复制少，因为它在中括号数组里边，这过程有个小括号加个逗号，咱把这段代码复制一份，然后给它我就放到最上边。这个咱们改一下啊，注意啊，逗号不能少啊，里边有个逗号，然后咱怎么改，从上往下改，因为它默认有些名字，咱把这些值都改一下啊，咱一个来看啊，首先第一个有一个叫pass，是最终那个路径，它之前叫example，因为咱做讲师嘛，我就叫这个。

Teacher啊，这是第一个，然后第二个有一个叫comment layout，这个不需要变，利用它layout叫布局，也是里边的，它是这种布局，你看啊，这是第一层，这是第二层，这叫布局，这不需要变，然后下一个有一个地址啊，这个我先改一下啊，比如说我叫这个teacher。Table这地址是什么？看这个单词叫direct，也就是说比如我现在啊，什么意思呢？比如说我现在你看啊，我直接去访问一个example，然后它默认就去访问这个table啊，因为这咱们改了地址，也就是说咱往下看你看啊，这叫example，当你在路径中直接输入example，它就去访问你的table这地址啊，这一单就word就是它了啊。

然后往下看，下面是名字，名字咱改一下，因为我这个叫讲师管理啊，这个咱改成叫讲师管理，改完之后这个会在我们里边的这个位置做个显示，叫讲师管理，就用它这个咱都需要改一下啊，然后改完之后里边有这个东西。这是什么呢？叫icon，就是用的就是里边那个图片，比如咱们看啊，在这个位置前面是不是有个图标用它。这个啊，就是我们写的这部分，然后写完之后，这个是咱说那个叫一级，就是一层目录，下面还有目录，就是里边有这两部分，那我们改一下啊，比如这个pass就叫table名称改一下，第一个我们叫讲师列表。然后这个title叫讲师列表，因为title中那种会在里面做个显示，就是你的页面中显示，然后这个比如我们叫添加讲师，这位置咱们叫。

添加讲师啊，包括这叫图标，咱就用默认了啊，当然你可以改其他图标里边，就是在我们的这个位置有其他的这种图标，比如什么example等等一系列的啊，我就用默认的这个图标了。就重点是里面这部分，所以现在我们这么做之后，把这个路由我们就做了一个初步修改，它的第一层目录叫讲师管理，然后后面里边有讲师列表添加讲师啊，包括名字改一下啊，列表我们就叫这个啊，就叫table了，然后这个添加，比如我叫这个C。啊，把它值改一下啊，这些可以随便写啊，我就叫table和C，这样的话就加完了啊，然后加完之后咱们到页面中我们刷新再来看一下啊，重新刷新。然后大家看在这个位置啊，我们清楚的看到是不是一个叫讲师管理，然后里边有这个叫讲师列表和添加讲师，所以这个路由我们就加上了啊，他就这么来做，你用其他的给他复制改一下就可以了啊，最终得到的就是讲师列表这么一个路由。

啊，这是我们的第一步啊，那代码就不截过来，按照这个他示例的这个改出来就足够了啊。第一步完成啊，我把这个画一下啊，然后这一步做完之后，下面咱来做一下我们的第二步操作，刚才我也说到了啊，第二步做什么呢？因为我现在就是我点这个讲师列表，它要显示列表内容，点添加讲师，要显示添加讲师内容，这第二步咱就实现我点路由跳转到不同的页面，咱把页面给它创建出来，这是咱做的第二步操作。啊，就是创建路由对应的那个页面。那我来啊写一下，然后这个页面啊，咱看到这个路由里边，就是现在我这没有改，还是之前的，那我们改成我们当前的页面，页面呢，这里边都放到views里边，当然可以放到别的目录啊，这是咱默认都放views，注意啊，这个不能变啊，叫艾斜杠，这是它默认的，就叫这个名字，他就相于咱写那个点杠。

就是咱们昨天写过啊，点告当天路径，但是现在它里边只认识艾特写告，不认识点告也不能改别的，然后下面我们写电报页面就是一个讲师列表，一个添加讲师可以参考里面这个就是。Table这个跟他一样啊，那我来写一下啊，比如现在我这么来做啊，在views里边呢，为了明显我建个文件夹，我们就叫edu。啊，Edo这个文件夹随便起名字，在edu中，我再建文件夹叫这个teacher啊，咱就小teacher中，然后最后在teacher里边我写两个页面，注意啊，它的页面都要写成这个view页面，一个页面是列表，一个是添加讲师，然我写第一个列表，比如就叫这个，呃，list.ve这是第一个啊。

一会咱写内容，然后第二个写个添加，我就叫save.voe咱们现在写这么两个页面，一个叫list代表列表，一个save代表添加，然后写完之后把这个咱需要给它改一下啊，那我来做个修改啊，注意它的地址啊，Views前面固定的，然后我们的地址后面是不是有一个。Edu。Edu中有一个叫teacher，然后teacher中的第一个页面列表。咱是不是叫list，这里边的点we省略不写啊，直接写list默认就有这个页面。然后第二个跟他一样啊，里边叫edu teacher。然后这个页面我们叫c.voe省略不写，这样的话咱就写了这么两个页面，把这个就做到了啊，这是我们创建两个页面，然后让路由去跳转到两个页面中来。

啊，这是我们创建的啊，当这目录结构你可以根据自己的习惯来创建，我就习惯叫edo teacher，你叫别的名字也可以，只要里边能引对就可以了。这步啊，我们就完成了啊，然后完成之后，在我们这里边把他们就给它。引进来啊。就是这部分啊，来做一个引入。引入就是在这个位置，还有这个位置。这个路径要写对啊，不写对它会有问题，所以咱们第二步我们就完成了啊，就是这么来做，然后这个完成之后呢，里边呢，各位在写的时候呢，可能会出现这么一个问题，就你路径写错了啊，那我给大家测试一下啊，比如我现在写都是对的，那我给他写错一下。你注意啊，我这么写是不对啊，因为我这个save它前面是不是有edu，但我现在这么写肯定不对，然后我一保存。

大家看啊。他下面呢，会给我报个错。你看报的错啊，注意他报的错是什么，他说说this dependence was not found，说这个依赖是找不到，他告诉你说这里边这个页面这么做找不到，但他告诉你解决方案，这方案不对啊，因为咱们下载这下不到，这是我们的页面，所以大家注意啊，当你看到这个提示，那肯定是你的路径写错了，你查一下路径到底有没有写错，刚才我这个就是故意写错了，这路径应该叫做。E Du teacher这个路径。包括比如说我现在再一保存。他这个啊，应该就没错了，如果你还有错，你给它重启一下应该就可以了啊，这样的话，这是我们说的第二步创建页面，这各位给他注意一下啊，路径不要写错，然后写完之后咱们简单做个测试啊，那我就在这个页面中，比如给他随便加点内容啊，咱做个简单测试。这个啊，咱都写到了啊。

然后怎么加内容呢？它这内容有一个固定写法，咱参考之，其他的你看写法中啊，就是它前面两标签必须是这个，一个叫time姆里，一个叫div啊，这是必须的，里边可以随便写，但是前面两标签必须是它time姆里的div div，因为它用这个给我们做了封装，所以咱按照它我就随便写一些内容。我就用这个复制了啊，比如说在这个例子中，咱们写个内容，这个我就叫讲师列表啊，前面是固定的啊，然后在这个添加讲述中，我也写一个，比如说叫讲师的添加。这是我们写入的页面中的内容，一个是列表，一个是添加，然后写完之后。咱就来试一下效果啊。怎么是效果呢？比如说这里边啊，我重新进入。就是现在，比如说我现在点这个讲师列表，它会显示讲师列表这个内容，添加讲师会显示讲师添加，咱就看路由能不能跳转啊，试一下啊，我点讲师列表。

大家看是不是讲师列表，我点添加讲师，讲师添加是不是显示出来了，这样的话就可以了啊，他把这个页面布局帮咱做到了，咱只要写路由写页面，让路由跟页面对应上就可以做到啊，这是我们说的第二步操作，那就完成了创建这个页面的这部分。所以大家啊，把这个能给他做到啊。然后这个做到之后，下面咱们继续往下来做，咱们做他的第三步操作。那我写到这个位置啊，第三步。而第三步咱要干什么呢？因为我现在要做的功能是一个叫讲师列表功能，而讲师列表咱肯定要请求咱们后端的接口，也就是请求的啊，应该是天差异带分页，那个请求是这个接口，那我们下面第三步咱就把这个接口在我这里边做个定义，就把它的路径做个定义啊，这是第三步。

那怎么定义？刚才提到了，在API的文件夹中，咱创建一个JS文件，比如我叫teacher.JS文件。然后在里边定义你要访问的那个。接口的一个地址，这是它的第三步操作，我们就这么来做，刚才给大家也都说到了啊，那大来写一下啊。但是这个其实位置啊，不一定放到API中，只要能调到就可以了，但是大家按照这种结构，我就在这里边按照它模板的方式来创建，那咱们写一下啊，在API中呢，我现在建一个文件啊，当然你可以在建文件夹。呃，我就呃见文件夹吧，我就叫teacher。然后teacher里边呢，建一个文件，这文件我就叫teacher d DS，这是啊我们创建的，创建之后咱们参考其他的，把里边的那个接口给它定义出来，而定义方式你可参考这两个都可以啊，参考哪个都一样啊，那比如说我参考它了啊，咱做个定义。

把这个背过来给大家解释一下啊，这什么意思啊？首先第一个第一行是固定的，它表示呢，引入了这么一个东西，叫U中的request，咱们找到。就这个东西啊，U中的request，而这里边是什么呢？大家看啊，它里边呢，就帮咱们封装的这个东西叫axlx，那它怎么封装的，给大家说一下啊，比如说咱们之前呢，写代码的时候，我们应该是这么写的。啊，咱看一下啊，不是各位是否记得啊，咱当时是这么写的，叫AXX，点上get或者post，然后点Z是不是点是不开等等，而现在他把这个代码帮咱们封装，咱只需要直接调方法就可以了，啊那我们看里边啊，他这个写法中。

Request子还找到啊，在request中它怎么做的？首先给我们创建了这么一个asxls的对象，然后在里边第一部分做了一个拼接，这拼接是什么呢？你看这个名字叫贝hi，它取到的是里边的这个值。被C就是把这支取到，然后取到之后在里边呢，把这地址最终给你拼上啊，咱刚才也看到了，然后你看这部分叫timeout，它表示是一个什么。叫做超时时间，也就是说你超过这个五天，它是个毫秒，你没有响应，他就直接报个错，说timeout就五天没有响应，然后下边是它那个基本的过程啊，这是封装好的，不需要咱去改，而在封装中，它里边主要在这里边做了判断，你看啊。response.date就得到数据，然后得到数据之后通过它判断，如果你的值不是2Y，那表示失败，它把失败信息给咱输出，如果说你是2万，那把信息给咱们直接返回，主要是做了一个判断，根据状态码判断2万成功给我们返回，不是2万把失败信息给你输出，这过程给咱也做了封装，所以咱们这些都无消息，写了直接掉就可以了啊，所以这个啊是一个封装的过程，大家给他引了解一下啊，然后写完之后在里边引入，咱下面只需要按照结构把方法定义就可以了。

然后怎么定义，我说明啊。这么来说啊，这里边是固定的，就是return request表示用到你这个东西，然后这是你接口那个地址，这是提交方式，这是参数啊主要这些。这种写法，但是咱们写的时候呢，还有一种写法，不是各位是否记得啊，就你这么写没有问题，但是你每次方法都需要这么写，然后咱们当时讲的文画画中还有一种写法给大家写一下啊，咱们后面都这么写，你这么做也可以啊。

那咱们这么来写，叫is port depot。不知各位是否记得啊，咱们讲模块化的时候，这是E6的运用写法，那我们这么来做啊，然后写的过程中，首先咱第一个方法就是讲师列表，也就是咱说那个条件查询分页的方法，那我在里边几个方法，比如我叫get。List啊，就get teacher list啊，咱给大家写的完整点啊，Teacher list这个配置。这个是咱们写一个方法，然后写完方法的时候，在方法里边你把这段话给它复制过来。然后这个就可以去掉了啊，就不能两个共存，写一个就可以了，然后这里边写上咱们的接口那个最终地址啊，它就是这个结构，那这地址怎么来写，咱来看一下啊，先看咱的接口中。

咱找到借口。接口因为是条件查询带分页，所以咱找的话呢，别找错，别找它这没有分页。这个没有条件，咱要找这个接口条件查询带分页接口，这个不要找错啊，然后找的时候大家看啊，这是它那个地址地址就是。E teacher加这个叫做配置teacher condition，但是大家看啊，在这接口中，咱是不是传了几个参数来看参数啊，这是第一部分参数。这两个当天也没有记住数，然后还用块的包底是不是传播条件值哦，所以通过接口咱看到这接口中一共是不是有三个参数，那咱把这方法写下啊，三个参数，第一个参数就这个current当前页。第二个，比如我们叫limit，每页记录数，还有第三个。是你那个叫条件的那个对象。

比如说我们叫teacher query啊，咱们把三个参数写过来，这是我们写的这个方法里边三个参数啊，这写法要各位不要觉得陌生啊，是咱们JS既学到的JS跟Java不一样，Java中写参数是不是要加上你的类型啊，比如说long什么对象，但是JS中参数直接写参数名称，前面不要加类型，这么写是不对的啊，直接写上名称，咱们就是三个参数。我再写一下啊。第一个current代表你那个分页中的当前页，第二个limit就是每页的记录数，第三个叫teacher，这个叫query，代表你那个就是条件的对象啊，所以咱们三个参数我们在里边传过来，然后传完之后咱往下写啊，要把这个值传到里边去，那怎么传？

看这个特点啊，第一个大家看啊，这个要你知道啊，之前我说过很多遍了，它就表示呢，通过你的这个路径传值，也就说在路径后面，比如说我们传个一传个三啊，当前页每个技术数咱需要这么做，那我们先解决这个问题，那它怎么传给大家写到这个位置啊，多种写法。呃，我都写一遍啊，首先第一种写法，你可以直接拼接，我加个就是斜杠。然后加上一个叫car。再加上一个斜杠。再加上一个叫limit，就是在在后面直接去拼接这个参数，做到字符串拼接，这么做是没有问题的，可以做到。但是咱们在当时啊，还需要一种方式，然后各位特别记过啊，那我写一下啊，我说各位是否记得啊。我想这位置啊，怎么做呢？咱加个符号，这个符号就这个飘的这个符号，然后在飘的符号中加上你的地址。

啊，那比如说我把地址复制过来啊。咱的地址这个地址叫edu service teacher，这个地址各位不要去敲，你去用它复制敲，很容易写错，比如你多字母少字母可能造成这问题不好找，Edu teacher，然后复制之后下面那个名字它叫这个。就是。配置teacher condition。把这个咱也复制过来。啊，这个啊，斜杠不能少，然后复制之后，后面咱也要拼参数，但是现在用漂之后，咱不需要拼了，当然咱们讲到过这个值呢，咱在里边可以加个表达式。比如我叫current啊，这单也复制过来啊，手敲很容易错啊current然后再加个斜杠，再加上一个叫limit，所以我们现在可以这么做，就两种写法都可以，要么你用上面写法直接拼字符串，要么用下面写法，用挑的符号加上表达式。

啊，这样写都是可以的。所以大家啊，两种写法都知道，因为咱们啊写哪个其实都一样，看你的喜好，但是我建议各位写下面这种方式，因为上面写法中啊，很多同学啊，写的时候经常经常会忘个东西，可能有同学少写斜杠，那就不对了，他在拼的话，你这个值中啊，他就后面加个一了，这有问题，所以建议各位最好这么来写啊，用这种表达式飘的符号取这个值。啊，这是我们写的地址，然后写完之后咱往下看啊，这是你接口地址来看这个地方。这好理解啊，麦色的。是不是提交方式，咱们的提交方式是POS提交，所以这里边我给它改成这个叫。Post啊，这个不能写错，跟你接口一样，不要说你这是posts，这里写盖肯定不对，然后写完之后还有最后一部分这个东西。这个大家特别说明啊，这里边写法就不这么做了啊，咱们写一下啊，就是现在我们这个就是条件的对象，因为咱们后端使用的是这个东西叫request的body底来获取这个数据啊，用这个来获取，所以这里边要各位记住啊，当你用request包底获取的时候，你前端要怎么写呢？咱需要加个属性，这个属性要date。

It后面加上你这个名字，这是它一个特点啊，用块的包底这么来写，这是什么意思呢？之前咱们说过再重复一遍啊。Request body就表示咱是不是要通过Jason数据传数据哦，然后里边做封装，就Jason传递，而你写date什么意思，就表示把这对象变成Jason，然后传到结构中去啊，它是这个作用。我写一下啊。It就表示把你这个就是对象。

啊，对象给他就是。转换成这个Jason。然后进行传递到我们的。接口里面去啊，所以现在我们这么来做，加一个date。这各位要知道啊，这种写法啊，当然如果说啊，你不用这种就是Jason方式传递啊，那咱写的就是这么一个基本写法，就是你直接传参数加个，但是现在我们用Jason传递，然后后面都是用这的body底，所以咱们用date这是一个固定的。这个啊，我们就写完了，方法定义我再重复一遍啊，第一次我说的卖点，后面我就直接写了，因为咱要做的第一个功能是讲师的条件查询带分页，在这里边三个参数，当前页，每页记录数，还有你的条件对象，所以咱们下面写这个结构，结构是固定的，你注意啊，结构不要写错，这结构不要各位去敲，最好你也复制敲，很容易敲错，你看啊，Request子跟它要对应啊，这个名字是对上的，然后里边第一个是你请求的地址，这地址你到接口中直接复制过来。

还是不要手敲，很容易写错啊，多字母少字母它不会有提示，但是没有效果。你把这复式之后，因为它里边第一个部分参数需要拼接，咱用表达式加飘的符号，或者说你这么做，第二个就是这个参数，因为它是用快的body获取，需要用Dis传递，所以在前端中我们加个it，加上这个对象，这个名字，它就会把这对象转成Jason，然后传到你的接口中来。啊，这是它的这么一个想法，所以咱这么做，把这个就是完成了一个定义。就是在我们的T设点中，把你的接口方法我们就定出来了。啊，他就是这么来做。所大家啊，就是把这给他好好去写写啊，因为咱家后面这个每天都要写到啊，他每天都要写一个东西。

这个啊，我们就做了一个说明啊，这是我们的第三步，在API接口中做这么一个最终的一个定义。这个啊完成了，大家把这个也知道啊。然后这一步做完之后呢，就是咱现在把这个啊，路由创建了，页面创建了，接口定义了，然后最后一步做的是在页面中，咱就需要调用这个方法，然后把这功能数据得到啊，最后就来写这个东西，那我们来最后写一下啊，就是第四步咱就写页面了。那给大家啊小的位置。就是我们的。第四步。咱们就是在这个讲师列表页面，也就是我们写那个list.voe这个页面，咱要调用咱们定义的那个接口的方法，然后得到接口返回的数据，把这个我们第四步在页面中操作，那怎么操作给大家来写一下啊，咱看这个写的过程。

首先啊，这是页面部分，咱先不管这个，先写Java所部分，然后Java部分这里写的话跟我们之前有点区别，因为咱用的是框架，你要按照框架的方式来写，那框架中怎么写，咱先做个参考啊，咱看它有的功能。它的写法就是在里边呢，首先你需要先加上词汇标签，然后在此标签中呢，加上这么一个结构叫isportt default，咱的核心代码都写到isportt default里边。这是它一个固定的结构啊，那咱来写一下啊，这个代码它会帮我们剩出来，你写一个script有提示，然后你点第一个。就是这个结构，咱的代码都是写到这里边啊，就是我们写那个核心的代码的一个位置。这各位知道啊，就是你不要直接写代码，需要写一个这个东西。

然后这个写完之后啊，说一下他为什么这么做啊，Exportt default呢，表示是不是可以被别人调用啊，因为咱们啊，就是在之前写那个最原始代码的时候呢，我们应该都是这么做的，在里边咱是不是new了一个vouee这个过程，但是现在new viewuee咱不需要写了，它里边呢，在那个就是man.DS中给咱们做了封装，就是它里边已经封装好了，你看这里都有，所以咱们只需要写个你portt defpot，然后写里边的具体内容就可以了，不需要再写那个new view了啊，这是他给咱们封装好的。所以咱们这么来做，这各位注意啊，然后做完之后咱们看一下这该怎么去写。因为第一个我们要调用刚才这个teacher里面这个方法，所以第一步操作啊，注意第一步写到外边啊，咱就要先。引入你调那个。teacher.JS的这么一个文件，把这个文件先给它引进来，那大家引一下啊，按照咱们之前学到的，我加个。

Import，然后给它起个名字叫teacher，再加个from from后面加上这么一个引号，单引号双引号都可以啊，我们一般习惯写单引号双引号也没错，然后后面怎么写呢？注意啊，但之前是不是加上点杠这种写法，现在我们加一个叫艾斜杠啊，跟之前类似，但是这里边不认识点杠，他只认识艾特斜杠，你不能写错啊，艾特斜杠。X箱后面加什么，加上这个叫API。Teacher里边这个叫teacher.Js.JS可以省略，这咱加的就是这个，你看这里边啊，API里边有teacher。然后T中有t.JS，所以我们现在就这么来做，用这个咱做到啊，当然为了区分，我把teacher给它换个名字啊，这么写也没错啊，它更明显一点，比如我叫E地的啊，咱叫他。

然后这个改完之后可改一下叫APIEDUT啊，咱们改成这个地址，它就表示把你的这个文件引进来，点DS可以省略，注意前面不要写错啊，艾特斜杠固定的，你不能不加斜杠，也不能写个点杠，对不对，必须加上艾特斜杠，要不然他找不到，这是框架中的做法。所以咱们啊，这个引入了，然后引入之后在你port底port中写上，我们之前教各位那个结构，我先写下结构啊，第一个写一个叫。Data。这是第一个啊，然后第二个写什么，所以各位应该知道啊，咱刚写过叫这个。可的。就是第一次写应该没有提示，后面就有提示啊，然后第三个这个叫methods。Method，所以咱们要写上这么一个结构，这个啊说我们要写到date中呢，就是定义变量初始值，Create里边调这个方法，Method中写具体方法，这结构我们要写出来，而写法中还有一个细节，各位注意啊，就这个date的写法，你这么写没有问题。

但我们实际中啊，很多人更习惯用另一种写法，就是这个写法没有错，咱也换一种写法啊，比如现在我这么写，我叫date，是个方法。然后在方法中加个吞蕊吞里边写那种啊，就是两种写法都可以啊，只是很多时候我们更建议用这种写法直接加上。Date的方法加return，在return中写内容，如果你不这么做，那就是在date这里边写内容，两种写法都可以啊，咱就这么来做，这是我们写的一个基本的结构啊，咱就写出来了，所以大家把这个知道啊。然后写完之后呢，在里边我们写内容啊，那这结构我再重复一遍啊，今天咱们说过很多次了啊，再重复最后一遍，第一个date里边干什么的呢？你可以理解为就是定义你当前页面中使用数据，那个就是数据的一个变量和它的初始值。

这是第一个，比如说我们定一个变量叫例子，初始值是空，比如定一变量叫配置，初始值是一，这在date中做定义啊，这是第一个，然后第二个叫created，这就表示在你的页面渲染之前执行里边一般都是调用咱们那个method里边定义的方法啊，经常都是这么来做啊，这是第二个，然后第三个叫里边就是创建我们具体的方法，然后咱们调用就是teacher点。里边定义的啊，那么一些方法，这是我们主要三个结构，Date created，还有这个叫methods。请大家把这知道啊，这个咱们就写出来了啊。

然后洗完之后咱下面啊，把这个效果我们先看一下啊，咱看这该怎么去做啊。首先第一个呢，我在date中先定义初始值，就是变量初始值，那我定义什么，咱按照我们的实际啊。因为我们现在啊，第一个在方法中是不是有三个参数，所以咱们先定义三个参数，这是第一个，我来一个就叫配置默认值是一，这就代表我们那个。当前页就默认第一页，第二个我叫厘米，比如来一个十啊，这就代表我们那个每页显示的记录数。啊，每页技数就是每页显示时效记录，然后还有一个是我们那个对象，比如叫teacher query啊是咱那个条件的对象，对象的话，咱来一个空对象，就是一个大括号。我们条件的那个封装的对象，这是我们的三部分啊，然后除了他之外，因为咱们就是最终查完之后肯定会有数据，所以咱们再来一个，比如我就叫这个list啊，咱就来一个空。

让他就表示咱们查询之后，接口返回那个就是集合或者那个速度。啊，所以这个啊，是我们写的这么几个初始值，我再说一遍啊，例子是你查询之后反映那个结果，Page，当前页，Leave it、每日记录数，Teacher query是咱做条件的一个碰撞对象，这是我们定义的这几个变量和初始值啊，我们现在写到这里，如果后面不够往里边再加，当然这四个肯定是必须的，而四个中有一点注意啊。他的名字可以随便起啊，这个名字没有说一定叫什么啊，包括各位看我这个课件中，好像我跟这课件中就没起成一样的名字啊，咱们看一下啊。我课件中的名字。呃，这里。他是叫。Total配置limit啊，应该色筹VG应该差不多啊，这几个名字，然后还少了一个是总记录数啊，咱也加上啊。

还有一个叫total。就是你那个总记录数，比如默认我们来一个零。啊，总记录数，这是我们的第一部分定义变量和初始值啊，这一步咱就做到了啊，就是里边解这些，根据我们的实际来做定义。然后这个做完之后，在create里边肯定是调方法，这方法咱一会儿再调，那我下面先写methods，在method中呢，咱就写这个讲师列表的这么一个方法啊，那我来写一下，比如说起个名字我就叫get。这个方法啊，这时候我们做表查列表，那这方法怎么做呢？大家注意，按照咱们之前的方式，我是不是要写一个AX iOS，点上一个提交方式，然后加上你的地址，再加上这么一个叫点份给写出来啊，还有一个叫点catch，之前咱是这么做的。

咱应该讲到过啊，但是现在不需要这么麻烦，因为他这过程中把很多帮咱做的封装，咱只需要怎么做呢？我刚才T里边呢，这方案已经定义出来，咱只需要调这个方法就可以了啊，那我来调一下啊，怎么调teacher，咱们已经给他引过来了啊，就是已经做了一个引入。就这个啊，Teacher，那我们现在就用这个叫teacher，点上里边的一个方法，它的方法这个名字叫get teacher list的配置啊，但我说个小问题啊，各位不用纠结这种问题啊，就现在如果你点的话，这方法没有提示，它提示不出来啊，这就是提示不出来，就没有什么奇怪的啊，它工具不像咱扎那个idea底特律那么智能，这点它就提示不出来，你把这方法给它就复制过来。啊，所以这个问题以后就不要问我啊，说老师为什么不提示，它就是不提示啊，它没有那么智能的开发，咱需要把这个方法复制过来，然后复制之后你看啊，这是咱们调的这个方法，在里边三个参数，咱把三个参数传进来。

那三个参数，其实就这三个。把它直接传过来啊，那怎么传咱说到了啊，因为这是我当前这个V页面，那我们写一个叫这次点第一个当前页，第二个每页技术数limit，还有第三个那个条件对象，我们调这个teacher query，就是你点只能显示当前的方法，你别的页面方法显不出来。所以咱们现在把这三个参数传进来了，这点配置当前页limit，每个记录数t query是你的对象，因为这个方法中需要参数参数。啊，这个写出来了，然后写完之后，后面跟之前一样了，咱就写一个。点阵还有一个叫这个。点开。点赞就表示什么是你这个就是请求成功。

点开表示叫请求失败啊，这个是咱们这么一个结构，然后写完之后，跟之前我们讲那个都一样啊，在点赞里边呢，咱加上一个名字，比如我叫response，在加个箭头函数。这response就表示得到你接口返回的数据。啊，就是response，就是我们接口。返回的那个数据啊，启用成功之后，Response可以得到这个啊给大家结过来，然后response，比如一会儿我们先做一个输出，然后看结果啊，然后开里边有它那个错误信息，就来一个A，我就来一个。箭头函数啊，里边加这么一个啊，包括咱们可以做这么一个，就是输出。呃，就来一个O啊。点这个log，把这A也是这个输出啊。主要这个结构，然后咱把那个也做一个集中输出啊。

就是这么一个基本结构啊，当然就是在写的时候啊，我前要有一个小细节啊，就是它这个工具本身啊，在写的时候不是刚才是我看到啊，我刚才一直在点回车，它一直就不回车，一直在这里，它就没有现在才有又有多个，它有时候可能会卡一会儿。啊，这个啊，它工具本身的一些小bug啊，这各位有时候用的时候注意一下啊，然后现在我再回来啊，就是如果说你起的快，可能有时候有些小bug，你再点回车，可能他不会马上下去，等一会儿它才会下去，他工具的问题啊。然后这个比如咱们写到下边啊这个位置。咱把这个结构先弄清晰点啊，这是我们的catch里，然后咱在这个then里边也做个输出，就是console.log我就把这个response做个输出，就是这个名字要给各位最好复制，你要写的话很容易写错，有时候你大写这个小写肯定不对啊，现在这就可以了啊，所以咱现在把这个结构就完成了，它就是调用咱们定义的这个方法，然后在里边传三个参数，最终返回的结果就是response，通过re response得到接口数据，如果失败，把失败信息返回。

MY完成了啊，然后完成之后，最后咱在create里边就来做一个最终的这么一个。调用啊，咱就调一下，写一个叫this.get list，注意别调错啊，调我的这个方法就可以做到。所以咱们结构就完成了，就这么来做。啊，我再说一遍啊，然后说一个小细节问题啊，然后过程就是咱们在页面中先引入你在API中定义的这个JS文件，用这个import from加上地址，地址别写错，At斜杠不能少，然后写完之后在port def里边。

加上三部分，Date methods。贝中是变量初始值。Create里边调方法，麦中先引的具体方法，而这方法就是调我们JS中的这个结构，咱们传我们里边几个参数，点赞成功，点开始失败，跟咱之前讲的一模一样，最后在可以里边调这个方法就可以了啊，但是调的话别调错，你调这个方法是你当前页面中的方法，你别去调这个方法，他调不到的。啊，这注意啊，所以咱们结构完成了。另外有一个细节啊，就是各位在写的时候，如果说你怕这个方法写错，你可以这么做，让你的当前页面和JS里面的方法名字都起成一样的名字，比如说我这里边都叫这个名字。那这么写绝对没有错啊，这样写就是更保险方式，但是我这么写是让各位看起来更清晰，我就专门写的不一样，你为了怕他出错，把你这个方法和你当前一面方法都起成一个名字，这样的话就是他肯定不会出错，因为都是一个方法啊，但是我这么写让大家看到更清楚啊。

这样的话，这个代码咱就完成了啊，就是这样的话，当一会儿我们一请求，他就会请求接口，然后调这个数据，就是response会做个输出。这是啊，我们写的前端的这么一个基本部分啊，所以大家把这结构给要知道啊。你代码我就不复制过来啊，因为比较多了啊，你通过我这个能看到啊。然后这个做到之后，下面呢，其实我们就可以做这么一个最终的一个测试，通过测试我们可以看一下它的结果啊，但是测试之前第一个你的接口必须要是个启动状态，另外第二个在接口这个CTRL上面这注解必须要加上，就这个注解，因为咱要用它做到那个。跨越的解决啊，那我把它重启一下啊。啊，然后咱们下节课把这个效果我们最终测试一下。