day12/下午/248-尚硅谷-尚融宝-前端整合远程调用和数据绑定

好，那首先呢，我们知道的就是前端我们需要有个列表页，所以呢，有列表页呢，我们就必须得创建这么一个页面出来，我们在课里面的user in for里面创建一个list view。啊，所以呢，在admin这块。我们找到views，然后呢，我们找到car啊在这面呢，我们新建一个文件夹好，然后呢，在这个文件夹里面呢，我们写一个list和点view，好，那这个呢，就是我们未来的列表页了，我们把列表页的内容呢，先给它做一个初始化，那接下来呢，我们再配一下路由。好，路由这个地方呢，我们。直接粘过去啊。我就把它配到我们数据字典上面吧，看一下数据字典新增积分等级会员管理哈，我就把它粘到这吧，当然这个粘到哪完全凭你个人喜好，然后呢，我们看一下这个后台，后台我看一下启不启动啊。

就是。嗯，这年的没动，这是谁？这个是这是3000是吧，所以呢，我们也要启动一下。NPM。好，然后呢，我们来点击登录，那么我们看到刚才我们添加的这个会员管理就在这面显示出来了啊，我们点击这个会员列表，所以我们接下来呢，将会在这个地方呢，添加我们的具体的信这个呃，会员列表信息，那根据之前我们学习的啊，这个后台管理系统开发的流程呢，我们知道我们要定义API模块对不对，在列表里面呢，我们去调用这个API，所以呢，我们找到API模块的位置啊，添加一个user in JS文件。

那么我们打开API，然后打开靠在这个下面呢，我们添加一个文件叫做user info.js，那么这个API的调用呢，和之前没什么区别，我们直接就粘贴了。和以前一模一样的啊啊，那不一样的地方呢，就是关于参数传递这块，参数传递这一块呢，一个呢是路径参数啊，还有一个就是刚才我们说的get形式的传插，注意如果这块是post形式的穿插，并且是Jason传值，那么这块用data这个关键字啊，如果是get形式的传插，并且我们要传一个对象，我们知道data关键字传的是。

请求体是在请求体中传参，所以这面如果是get的话，刚才我们讲接口的时候也讲到了，没有办法在请求体中传参，那么我们就要用parameters，这个呢，实际上就是在啊，它会把这个参数的内容最后呢给你啊，分散到我们的URL地址栏后面的问号后面，哎，这个怎么去看啊。看一下我们这个测试啊，实际上最终。他这个测试，比如说手机号13768163好，然后我们点击发送，他最后生成的这个请求是这样的。啊，然后呢，里面有参数，参数呢，是是这种mobile等于1376688666816630，这个参数是以什么形式存在的呢？实际上它会以问号的形式，最后追加到这个URL地址的后面，是这种形式传过去的啊，凡是以这种形式传过去的整体的对象我们都用。

Paras来传参啊，所以这个结论大家记住，我再强调一遍，如果这边是post，并且后台一定要后台对应啥，并且后台对应了。这个request body。啊就是啊，后台是这样的，然后后台这块呢，是POS卡。是这样的，然后前端呢，我们这边呢，是。Post，那这款你就必须写data塔啊，它是对应的啊，因为用data传的是在请求体中传什么呀，传递追son啊就是这样的，那么同样如果我们后台这面是我们这个一开始写的这个get，那get前面我讲过不能有请求体，所以这面就啥也不写，啥也不写的话，前端是什么样的，所以前端就变成。

还就不能用data了，明白哈，所以这个结论大家记住啊，你前后端一定要对应上，对应不上最后连调就失败。好，那这面呢，是我们的API这块需要大家知道了没，然后接下来呢，我们来看脚本。脚本这块呢，首先在我们的这个类似view当中，我们先定义什么呢？先把这个API先给它引进来啊。所以呢，我们找到我们的类似view，好在这面呢，我们写script对吧，然后script里面呢，我们先把刚才这个API呢，给他引进来，就刚刚写好了，这个写好了之后呢，我们实际上这个地方我我最好怎么写，最好这样写，可我也不想是吧，它直接生成啊这化。

好。然后这样的话呢，在这个export default里面，我们先定一些初始化的数据，这些初始化的数据呢，我先定义出来啊，然后后面每一个都用于什么，咱们再讲。好，这些呢，都是初始化的数据了，然后呢，我们希望干嘛，就页面一加载的时候，是不是就展示这个信息呀，所以create，然后写一个this.such data，好，下面这块呢，我们写MY对吧？Such data，感觉好几天没写这后面的这个后台管理系统的这个这个前端代码了哈，然后呢，接下来呢，这面我们就调用这个user in PI。好，调用这个user in for API里面，刚才咱们刚刚写好的这个get page类方法，嗯，把它呢，在这个地方呢，调用一下，好，然后接下来调用的过程看一下它。

需要1233个参数吧，配置limit和such object那就传过去就好了，好配置在哪定义的，我们配置呢是在这定义的。啊，作为一个数据模型先放在这儿了啊，那所以呢，就页码this点配置好，还有一个呢是limit。每页记录数啊，所以呢，这块呢是this limit，还有一个呢是查询对象，这呢。啊，所有的查询条件我们会封装到这个对象里啊，所以this点4OBJECT。好，这样的话呢，查询就执行了，执行了之后呢，我们来看一看，就是它有没有调用啊，那有没有调用呢？我们怎么看呢？首先看一下这个有初始值哈，10可以，然后接下来呢，我们就直接放到这个页面F12一下。

然后呢，呃，我们在。会员管理这块直接啊，先切换到network啊XHR，然后会员管理这块点会员列表啊，大家看这面呢，就发了一个远程请求。然后呢，我们来看，嗯，Carry，我们看调用了是不是啊，就说明我们远程调用成功了啊好，那远程调用成功了，下面的一个步骤就是数据绑定，那么数据绑定怎么绑呢？前面我们定义了一个list叫数据列表，一个total叫数据库中的总记录数，那么谁给list赋值呢？我们用这个。Data里面的配置，Model里面的给list复制啊。所以呢，就是在这个地方，我们写第2THEN。this.list等于瑞棒点data点位置。

正品model点来好好用，它呢，先给类子赋一个值。我看一下我这个怎么写，那个箭头哪去了。等哈圆括号那个什么瑞斯棒对吧，是吧，啊这样的。好，然后这样的话呢，我们通过这个方式呢，给类似复制。稍等啊，你怎么感觉这个。这款。嗯，这个是好像少一个圆括号似的，对，这样就可以了啊，就千万别少东西，少东西一会该那个出现问题了哈，所以这样的话呢，我们就赋值了，赋值给谁赋值给它赋值给它赋值，我们来看一下有没有进行数据绑定，怎么看呢？View对吧。

啊，然后APP layout APP list好，看看这个list里面有没有值，有我们注册的那一个用户已经呢被绑定到了这个类型上面，啊虽然只有一个，但是呢，它值确实是已经拿过来了，然后接下来呢，我们前端呢，我们还定义了一个叫做total，这total呢就是数据库中的总记录数，好这个呢在后端。后端看后端返回的这个数据啊，在后端呢，有一个叫做。啊，Total的这么一个啊，其实后端执行分页查询的时候，给我们计算出来的这么一个总记录数，它呢是在配置model.total这个属性当中，所以呢，我们可以给它附一个值。这也是一会儿分页插件需要的啊this.total分页插件呢，需要这个total来帮助他展示一些分页信息，所以呢，我们给它拿过来棒，点data，点配置model，然后点头是不是，嗯，然后我们来检查一下看看。

View里面的这个偷偷有没有复制？好，这个偷偷呢，已经附上纸了。那这样的话呢。我们整个的这个啊，数据列表，以及和分页相关的这个total啊，咱们就都准备好了，准备好了之后呢，咱们就可以做前端的页面的渲染了。