45-尚硅谷-硅谷通用权限项目-开发角色管理前端-角色列表（页面调用接口上）

下面呢，我们继续来开发角色列表，前端刚才完成了第一步，第二步，第三步，下面呢进入到第四步，第四步做的那就是最核心部分，在具体页面中调用API中定义的接口方法，最终得到数据进行显示。下面进入到第四步，那咱们来到我们的页面中，因为咱们做的是角色管理，所以找到角色管理页面应该在这里，就是system肉里面的list.voe那在里边怎么做？给各位说明啊，按照我们用这个voein，他们的框架里边有一个固定的这么一个结构。那在里边写下，首先我加上这么一个script，这么一个结构，咱们选这个叫javascript.we这个结构，把它点开，这是它里边一个结构，那结构中怎么做，给各位详细一步一步写下，首先我们的第一步，因为咱们刚才在肉点JS中把接口是做定义啊，所以我们的第一部分把这个文件在页面中先进行引入，就引入以定义接口的JS文件，那咱们写一下啊，加上port，我们起个名字API from加上路径。

然后路径就是艾特杠API里边咱们找一下这个页面这个位置API中的肉加上肉点JS现在把这个就引入进来了。这是我们的第一部分，当然这里边呢有一个点JS，这JS可以省略不写，这步做到，做到之后呢，在你的PT default里边就写上咱们view is这么一个基本结构，那下面我们来继续写一下view的结构。在写之前特别说明，要求各位同学要有VE的基础知识。

有voe之后，咱们更好能完成我们的代码，另外强调啊，咱们引入文件是写到exportt defportt外边，然后其他代码都是在这里边进行编写，这个特别注意，我再说一遍啊，引入代码是放到exportt default外边，然后其他代码，也就是voe的核心代码都放到isportt deft里边进行编写。下面在里边咱们把结构先写一下，首先第一部分。咱们先定义我们需要一些变量，包括一些初始值，第一个那怎么做？咱们用一个方法叫date方法，然后在date里边呢，加上一个re t里边加上你的初始变量，包括初始值，这是第一个，然后在我们再写第二个方法，第二个方法什么意思呢？咱们应该都知道voe中有一个方法，这个方法名字叫created。

然后这方法什么含义给大家再重复一遍啊，它就表示在我们的页面渲染之前会执行，也就是说你进入页面数据还没有显示，会先执行create的方法，执行完create的方法之后才会显示页面，所以这个里边咱们做的一般都是去调用接口得到数据，因为你只有得到数据之后才能做显示，它表示在页面渲染之前执行，就是数据显示之前，这一方法先调用。然后在里边还有一个结构，这个结构叫MY。里边呢，就是写我们具体那个方法的部分。比如说你写列表，写添加，那基本的方法都是在method里边进行定义，进行编写，Create中一般都是调用方法，那比如说我们现在在method中咱们加一个方法，或者一会儿我们操作。

列表方法，我们给它起个名字，就叫fetch date。里边具体逻辑一会编写，然后把date在create里边做个调用，调用列表方法，也就是说我们一进入页面就调方法，在方法中呢，咱们发送那个阿贾克斯请求得到数据，然后这个数据在页面中进行显示，一就页面就调方法得到数据，然后数据显示。这是fetch date，现在这个结构就完成了，这是我们写的一个页面中的结构，这结构给各位再做一个强调，因为这个写法呢，如果说啊，你是第一次写，很容易写错，很多细节各位要特别注意，我再说一遍啊，第一个细节引入文件要放到disportt det外边，其他代码都在这里边，在里边有一个固定结构，第一部分叫date定义的初始值，第二个created调用方法，Method里边写具体方法，然后调用方法咱需要加上一个关键字叫this，表示调用当前voe范围中，这个方法现在就完成了。另外注意啊，调方法的时候别忘记啊，方法后面要多个括号。

而另外就是这个方法，名字不要写错，它里边有提示，如果没有提示这个名字，你最好直接复制，防止写错。现在这个页面结构我们就完成了，完成之后呢，我们继续往下来写，首先我们看第一部分，在这里边呢，定义初始值。

那咱们定几个初始值，如果值不够，一会咱再往里面加上，首先我们写第一个值。咱就来一个历史的。这个值什么意思呢？一会儿咱们的角色列表数组放到这里边，另外因为你是分页嘛，咱加上一个total初始值，来一个零表示我们的总记住数。这是第二个，第三个加上一个配置，代表我们这个就是当前页，就是默认我们查的是第一页的数据，然后这个之后再加上一个limit，表示每页显示多少记录，咱们先来个三，为了咱方便每页显示的记住数。除此之外，我们再加上一个名字，比如说我们叫这个search。OD。

咱们初始值来个空的对象，它就代表咱们那个条件查询封装的对象，所以以上把date中的初始值我们就完成定义，这是咱们做的第一部分。然后咱们继续往下来写。下面写什么呢？咱们来到这个方法中，叫fetch data。这个方法中就是发送阿贾克斯请求，调用接口得到咱们每页的数据，那下面我们来在里边具体写一下这个方法。首先我们的第一部分，因为这个方法做的呀，是什么，是不是条件分页上学列表，所以咱们在方法中第一部分我们给他传一个参数，这个参数我起个名字就叫做配置am，代表你这个就是当前查的是第几页的数据，比如说你传一那就代表第一页，你传二就代表第二页，就是你查询那个页数，这里我加个注释。

加到这里，然后这个查询页数中呢，咱这么来做啊，大家看啊，如果说我这么写，这里边是要传个值啊，我传值是一表示是不是查第一页，我传，二是不是查第二页，但是咱第一次肯定查第一页，但是查第一页的时候呢，我这么写肯定没有错，咱们还有一种写法，我可以不传值，然后在里边呢，加上一个默认值，就是我这么来做。大家看看这个写法啊，跟Java中不太一样，这是JS写法，什么意思？就表示这里边如果说你不传值，它的值默认就是一，如果你传的值，那就用你传的值进行操作，所以咱们在里边加上一个默认值，默认就差第一页的数据。现在这个完成，完成之后呢，下面咱做个赋值，这点上配置等于配置am做个赋值，赋值之后下面呢，咱就发送阿贾克斯请求来调用我们的接口，这里我加个注释。

页数的负值。然后怎么发送呢？注意啊，刚才咱是不是引入了这个文件，它的名字叫API，所以我们现在调用API里边，刚才我们定义的这个方法，它叫get配置list，把这个咱们拿过来，我这里特别说明啊，这个点的时候呢，它可能没有提示。也可能有提示，根据实际来看，没有提示的话，那你把这个方法名字从你的肉点摘中直接复制过来，这个词不要手敲，很容易写错，然后复制之后里边有三个参数，咱们传三个参数，第一个参数这次点配置当前页，第二个这次点limit，每页记住数，第三个条件封装对象search OB BD，这个咱们做了一个传递，然后注意啊，因为这个属性是在我当前vouee范围中定义的，所以你调用里边的方法，或者说用里面的属性，前面需要加上一个叫Z，你看我这三个配置设置OBG都加了Z，然后加上之后呢，下面我们有两个方法，一个方法叫Z。

然后还有一个方法叫。给各位特别说一下啊，什么意思，人家说这个ZZ就表示呢，你调用接口成功就会执行这个Z方法，如果说你失败执行catch方法，但这个K方法呢，咱目前不需要写了，因为咱们刚才在里边引入的中给咱们已经做了封装，咱们看一下啊，就是里边。

这个在这个里边，大家看这个位置。Respond是不是响应，当你响应会到这里边，然后里面做了一个判断，如果它的值不是200，代表就失败，失败用的是IUY会弹出一个错误提示，所以里边的K情况咱不需要考虑，因为它已经封装了，我们只需要写Z就足够了。然后里边怎么做呢？得到接口给咱们返回的信息，我们加上一个名字接收一下，比如我们叫response，这个可以随便记，你叫别的也可以。然后后面加上一个写法，是一种叫箭头函数写法，跟咱们Java中的拉表达式类似，Response就是得到接口返回的信息。那这个信息我在这里边啊，做个输出，咱们先做个测试，一会儿再来做个完善，Response，也就说现在把这个结构我们就完成了，咱们再看一遍啊，一进入页面调用FT的方法，FT的方法中加上页码数的初始值，然后发送阿贾克的请求，调用接口，接口最终会返回数据，我们用response做了一个接收。

以上就是写的这个结构，大家把这个要特别熟练，那咱们马上做个测试，就看一下response到底返回的是什么，再通过response得到它的具体内容，最终用IUI在页面中我们做显示。