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

下面我们继续往下来看，刚才呢，咱们通过调用接口，最终我把这个response这里边做一个输出，那下面咱来做个测试，就看一下这个过程中能不能正确调到接口，以及这个输出值到底是什么，下面咱们测试一下，首先我把F12先打开，打开之后在里边找到这个console控制台，然后咱们刷新看效果，角色列表中大家看啊，最终他给我们返回了一段内容，这个内容咱们把它打开，我们来看一下，给各位结构图咱们做一个分析。看一下这个内容到底返回的是什么东西。我直接截过来。咱们啊，到这里边，我们来看一下这个内容。首先大家看啊，它返回部分是不是就是这个部分，这个部分是什么呢？各位应该清楚啊，大家应该知道一个东西叫HTTP协议里边有请求响应，响应中有什么响应行，响应头，响应体，其实这部分返回的就是响应体的部分。

然后这个响应体部分呢，在request JS里边，大家看这位置response.date就是返回响应体部分，所以咱们得到响应体，那大家看一遍啊，首先第一个状态码是不是200代表咱们成功的状态码，因为接口咱就200，然后再来看，大家看这里。这个地方。Records是不是咱们的数据，还有一个叫什么total，就是你一共多少条记录，另外有一个叫pages，就是你一共有多少页，所以现在在date里边我们就看到了我们需要的数据，那咱们从里边把这数据给它取出来，怎么取？很简单啊，我整个部分是不是叫response，然后里边有个什么，是不是date date下面有什么，是不是有records，有total等那种，所以咱做好就是response.data再点上一个record，或者说再点上一个total，能得到你对应的这个那种。

那下面啊，咱们把这个给它来取一下，然后最终最后赋值，为了最终我们进行显示，我写到这里。这一行先给它注掉。盆在下面开始做一下啊。Response点点上一个叫record。注意啊，这个名字一定不要写错，咱们可以对照这里边给它复制一下，你要手敲，一定不要敲错，敲错的话这值肯定取不到record，然后record，最后赋值this.list等于record，咱们赋值给这个list，就咱上面写的这个list。

角色列表，然后除了这个之外，我们在里边还有一个叫total，一共有多少条记录，这个咱们也做过赋值，这次点total。等于response.date点上total，同样这个名字也不要写错，要跟这里保持一致，另外注意啊，这date也不要写错啊，就是date和records date和total这些名字建议各位同学都复制就可以了，有同学写的时候呢，他经常会这么写错，给大家演示一下啊。第一个很常见的。很低端的错误，他可能这么写。肯定不对，这里不报错，最终结果肯定没有另外第二个错误，这错误更可以说更低端啊，同学会这么来写。给大家演示一下啊，这么来做。看到问题了吗？这个单词是不是写错了，你要跟response保持一致，比如说这个意思啊，你要写错，你可以都写错。

这没有问题，你别一个写错，一个还写对，那肯定就有问题了，要跟它保持一致，这个啊是咱们得到的两个值，我加个注释，一个是就是每页数据的那个列表，另外一个就是总记录数。现在咱们就得到了，然后得到之后呢，我们下面做什么呢？是不是就把这数据在页面中做个显示，是不是就可以了，那咱们下面开始做显示，那咱们显示呢，咱们看到我们的页面中啊，这个显示呢，就需要用到一个新的组件叫IUY，通过饿了么提供这个就是前端的组件库，把内容进行显示，所以最后我们就是把接口反应的数据进行处理，使用IUY，咱们最终进行显示。