day17/上午/337-尚硅谷-尚融宝-借款信息列表的前端整合

啊，前端整合这块呢，咱们跟之前呢，就是没有任何区别，一模一样啊，所以咱们就按流程吧，先把组件创建出来，在borrow in for里面啊创建一个list。啊，先把这个全头关掉啊，然后呢，找到admin，找到src，找到views，找到car，然后在这里面呢，咱们新建一个目录叫做borrow in for，在borrow in for里面呢，新建一个文件叫list.view好，然后在list view里面呢，咱们就直接把这个内容呢给大家复制过来吧，好，这是基本的框架，然后接下来呢，啊，未来呢，咱们还要有一个借款详情哈，咱们先把这个借款详情的页面呢也提前创建出来。新建文件好，然后在接下来呢，咱们来看一下这个。借款详情的内容，你把它复制进去，好，这些都是基础结构，那这些都做完了之后，我们就知道了，该配路由了，所以我们把路由呢，也给它复制过去，我们把它直接放在借款管理下面啊。

啊，注意粘贴的位置，所以呢，我们找到ruler，找到inex JS，然后呢，在我们的借款管理这个地方，在这个children里面，啊，注意在这个位置加一个逗号。逗号，然后在后面这块这这部分的路由，好，然后呢，这个路由两个啊，一个呢是接刚才咱们的列表页，一个呢是连接刚才咱们的详情页，好然后接下来呢，咱们来看一下咱们的后台页面，Local host9528。好，然后我们登录啊，然后这边呢，有一个借款管理好，那这边呢，就是咱们刚才的这个。我看一下啊，刚才的这个借款列表了，对吧？啊两个为什么只展现出了一个借借款列表，因为借款详情对面咱们还掉了啊，就是隐藏掉了一会儿呢，呃，将会在借款列表里面，通过点击详情查看来看这个借款详情，所以呢，左侧导航这面呢，就只出现了一个借款列表啊，借款列表这个好，那在这个地方呢，咱们就要去啊，整合刚才咱们啊。

创建的这个API接口了。所以呢，这个刚才咱们写的这个API接口呢，也和之前咱们整合前端一样，是不是得先定义在API里面呀，那么我们就找到这个API，然后在API里面呢，找到靠啊，那然后在靠里面呢，咱们去创建咱们一个新的API文件，那这个文件呢，我们可以给它定义为borrow in for.js哈。直接粘一下的好，然后这个里面的内容呢，也跟之前没有任何区别啊，咱们就直接把它写过来就行了，这块呢，就是调用刚才我们写的in call borrowing for list，通过get的方式啊去调用啊，然后这边写完了之后呢，我们就可以在页面脚本当中去。

引用它了，所以页面脚本list view这块，咱们再把这个整个的代码让它手写一遍吧，也就整个就算回忆回顾一下了，Import，然后是BOO for API对吧？啊，然后from啊，刚才这个路径API的路径哈，就是杠圈，杠API圈的意思是src的意思是吧，啊然后C，然后呢是Bo。Ow啊，然后呢是大in对吧？啊检查一下对不对哈。Bo，然后杠in for，对吧？啊，就这样的一个路径，好，那这个刚才这个API模块引进来之后呢，我们在这个create里面呢，肯定是要调用了啊，比如说我们就调用一个fetch，呃，Data，一个方法，那当然了，我们得把这个fe data方法呢给它定义出来啊，Methods，然后five FA data，好，然后接下来呢，这面呢，我们就写Bo哈，Borrow in for API，然后DR get get。

List，好，然后刚才我们在这个包in for里面不是写了一个at list嘛，好，就调用一下，等一下之后呢，直接就then就行了，然后呢棒好，然后呢，我们肯定是要渲染数据了，数据要显示呢，显示在页面上，所以呢我们得定一个data啊，然后这面呢，我们定一个list对吧？啊，然后接下来呢，这面呢，我们就把数据复制给list是不是啊，然后response.data然后看一下后台我们这个数据是怎么返回的。然后一看我们这个后台的数据呢，是在类里面返回的啊，所以前端这块呢，我们就直接类是不是就好了，所以这样的话呢，我们这个数据呢，就绑上了啊，所以呢，接下来呢，我们就来看看这个数据有没有进行远程获取并绑定，这怎么看来着，是不是在列表E12啊，先看一看有没有进行成功的远程获取，那么在network里面看我们刷新这个页面，然后看一看这块有一个list对吧，有一个远程请求发出去了，并且呢成功的得到了结果，所以呢，这个就是远程获取已经成功，接下来呢。

我们再来看，既然这一步远程获取成功了，再看一看这部的绑定成没成功，那绑定成没成功，在view里面看看一下这个APP list里面，这个list有没有数据，一看有就说明数据绑定成功了啊好，绑定成功了之后呢，我们就要把这个数据渲染的这个借款列表页面当中了，所以接下来呢，我们就要在这个页面当中啊，去完善这个借款列表的这个啊element UI当中的table组件，好，那这个table组件我们之前也讲过，所以那这个组件这块我就不给大家写了啊好，那咱们就复制过去吧。

哎，我看一下我是从template复制的啊，那么就直接替换这个template好，那这样的话呢，我们就table组件呢，它绑定到list，然后其他的这个列呢，就和我们之前的绑定方式一样，就依次给它绑定上，像这种呢，需要展示，展示成特殊样式的呢，我们就定义在temp里面，对不对，好，然后包括后面这些都是一样的啊，然后咱们直接看一眼吧。这样的话呢，这个数据就展示出来了啊好，这数据展示出来之后呢，啊，其中有几个比较特殊的，我们来看一下，就是比如说刚才咱们的那个，嗯。还款方式和资金用途，那必须得从permeter这个扩展的集合当中去获取method的，这个也是从permeter扩展的集合当中去获取money use这个也是从permeter扩展的集合当中去获取status，所以说这三个字段呢，它获取的方式呢，都是parameter点，然后这个建的方式啊，然后其他的字段呢，直接就是字段的名字啊，包括我们扩展的这两个name和mobile字段，就直接写字段的名字是吧，就扩展进去了啊，然后接下来呢，后面这两个按钮操作按钮啊，一个是查看按钮，一个是审批按钮啊那么呃，查看按钮呢，就是随时可见，审批按钮呢，是当我的这个审批的状态，呃，C等于一的时候才可见，一呢就是审批中啊，如果是审批结束了，审批成功或者是审批失败，那么这个按钮呢，就不可见了，就审批完了之后就不能再审批了，就这个意思，好，那所以呢，这个是咱们的查看按钮和审批按钮，那当然审批按钮这块呢，我们有一个就是呢要展示。

是一个审批表单。那审批表单呢，就是刚才咱们看到的借款审批这个需求啊，这个里面当我点击这个审批按钮的时候，对面当我点击审批按钮的时候，这面呢是通过一个弹窗的形式展示一个审批表单啊，所以这块其实啊和咱们之前的借款额度审批有点不一样，借款额度审批呢，是直接在详情页里下面追加一个审批表单，这面是弹窗啊好，那在实际开发的过程当中，大家就要么你就追加，要么你就弹窗，就选用一种就行了啊，你不要一会儿这样一会儿那样的，感觉系统就是风格很不统一，那在咱们这个项目当中，因为是个练习项目了，所以呢，就把这几种不同的实现方案呢都给大家讲一讲，那所以这个审批呢，我们就用弹窗的方式进行审批哈，所以呢，一会儿我们点击这个审批按钮呢，会弹出一个弹窗，那通过什么来弹呢？就通过这个uproval show这个方法来谈，那所以呢，我们就可以先把这个RO show啊。

先暂时在这个地方去给它定义一下啊好，先定义在这，然后呢，整个呢，这块就是咱们这个列表页的一个实现了，好吧。