day15/下午/312-尚硅谷-尚融宝-借款人详情的前端整合

好，那么前端整合这块呢，也没有什么特别的啊地方啊，也都是咱们学过的知识，只不过呢，这一次整合的内容就比较多而已啊，就是展示的啊，内容呢就是你看。嗯，就就这些对不对啊，但是呢，没有任何新的知识点，所以呢我们就快速把它整合一下，那目前为止我们还没有去做后面这块啊，审批表单这块，所以这块呢，大家先不用管它，我们先来看上面这一块就可以了，那我们就嗯在这个位置呢，我们打开，嗯，刚才我们的笔记啊，打开笔记，然后这块呢，我们直接把这个API呢，就拷贝过去了啊，因为这块也也就是什么新的新鲜的东西了，所以呢，我们找到包，然后在这面呢，把它copy到GA之类在下面，那这个呢，就是刚才咱们那个show方法，然后通过get的形式来调用好，这个是前端整合的第一个步骤，接下来呢，我们来打开页面。

打开页面呢，就是这个d two页，D two页面也是一样的啊，你没有任何新的知识点，我们呢，就是把该定义的这个内容呢，都给它定义出来，所以呢，咱们先啊看一下default里面的这个data。我现在一点也考不了啊，对data先考不来啊，你要是愿意自己写的话，你写一写哈也行，要是时间不太够的话，你你也就考虑一下就可以了，因为这块其实到真正企业开发的时候就是个工作量的问题啊，我们我是个人认为没有必要在咱们现在这个阶段把时间就浪费在这块，因为毕竟咱们时间有限，是不是给你拷贝过来看一眼就行了，包就是啊，用户的借款，用户的信息，这个就是我们的防止表单重复提交啊，这个是后面我们要用到的，所以现在你先不用管它，这个是什么呢？这个是审批表单啊，这个审批表单这个呢是防止重复提交啊，重复提交，然后这个呢是借款人信息，所以我们刚才在后台封装的那个啊，接口最后返回的那个结果啊，我们要把它绑定到这个。

把包里面啊是这样的，然后接下来呢，我们就来看一下，那我我肯定是要调用刚才的那个后端接口了，所以是不是把这个API先给它引进来呀，好引进来之后呢，那么是不是肯定是要在这里面去页面一加载的时候就调用啊，所以这块呢，就是啊create了对不对啊create页面一加载的时候我就啊，因为我当前这个是一个。啊，就是这样的一个详情页，所以我还要把这个详情页当中的这个ID取出来，对不对啊，我要把ID取出来的话呢，大家想之前根据我们学习的内容，要先判断一下这里面有没有ID this.story啊，有同学我就记不住，记不住没关系，没让你记，你怎么看在这个地方F12。

找到这个页。啊APP啊，找到这个页，这不写着呢吗？Root呀，你不用记呀，到底是怎么拼这个东西，你这一看就root就行了，对吧？啊，然后再有你要是这还不会看，你看看别的代码不也行吗？之前写过的代码咋写你就抄过来不就得了吗？是不是不用不用记啊，你这个你第一遍第二遍记不住，你写多了自然就记住了，你不想记就能记住，所以this点啊再data。来ID好，然后呢，我们就如果路由当中有ID，我们就发的ID，所以这面呢，你就写一个my such data ID，然后接下来呢，我们这面呢，就写嗯，包API对吧，要用啊包API，然后刚才那个包里面瘦对吧？啊把这个点瘦，然后接下来呢，IDID你这怎么写都行，ID你可以这样写对吧，也可以怎么写，也可以在这传过来。

这不都可以吗？都可以啊，你怎么写都行，在这块啊，你传就不能这么传这么传啊，在这传过来对吧，在这传在这传就行，但是这个我觉得太麻烦了哈，还不如刚才那样写法，但是都可以啊，所以这块其实没有唯一的答案，你只要写对了就行，用不着非得把我写的记住，然后点，然后棒，然后接下来呢，This点。包若刚才我不说了吗？就是为了封装它response.data点看后台返回的是啥？

后台返回的叫做。看一下后台啊，注意这个API下面的是前台的，呃，网站端的接口，这个in下面是后台的接口，所以in borrow controller，我们后台返回就是包肉而D球VO，所以这块能没水包肉而d to VO啊。这数据不就绑上了吗？对不对啊，绑上了之后呢，我们来看一眼，看看绑没绑上那你伤心。好刷新之后呢，首先第一个步骤看这个数据有没有有是吧，啊绑上了。那这个这个不是绑上了，这个是查出来了是吧，这个只是从呃后端啊，已经给他查到前端了，但是绑没绑上呢，绑没绑上看这。D看看这个包热里面，你看有那就绑上了，好，所以这块是绑定，然后这块呢是是否返回了啊好，那这样既绑既返回了又绑定了，我们就是不是就可以做数据渲染了啊，那数据渲染这一块呢，我们就页面模板这块，我就不一行一行写了啊，因为它无非就是把这些值呢都给它按照这样的一个形式呢，给它展示到这就行了，给它绑到这，你看都是一样的代码。

好，那我们就整体复制一下了。这个代码我不建议大家去写了，就你也是复制一下。地球。然后以后上班的时候，如果需要你写，你再好好去慢慢写一写，因为他没有任何没有任何难度啊，就是浪费时间，工作量好，然后接下来呢，我们就在这块刷新一下，当然这面刷新的话呢，我们还是要看一看，这里面，你看它有错误吗？有问题，是不是有问题的话，我们就解决它，首先第一个问题就是back is not DeFined，这个好办，这个是什么呢？这个是这样。

就是在咱们刚刚才的这个页面当中啊，找到这个页面，在咱们这页面当中呢，这里面有一个返回，有个back啊一点这个返回呢，回到列表页，所以呢，我们得把这个back呢给它定义出来。先把这个给他定一下，然后一回到列表页呢，就是this到这个是改变路由啊，这个注意这是如刚才那个叫什么叫root。叫root，它俩不太一样哈，是两个对象，别搞混了啊，然后root.push好，我们把这个路由地址呢，Push一下它这个地方两种写法就pass，然后呢，然后我们就希望他回到原来的那个列表页。一表页是什么？一表页是这个靠borrow类，所以呢，这边就是靠borrow类啊，这是一种写法，还有一种简写，简写呢，其实直接这样写也行，就不用写这个pass大括号了。

如果你只写了这么一个值的话，意思呢，就是把路径呢跳转过来啊的意思，所以这块是back的一个实现，那我们先试一下这个反点审批，然后点这个返回对吧。这不就回来了嘛，是这样的啊，所以那到这为止呢，我们现在这个就都展示出来了啊，这是这个人的这个基本信息，上面是状态创建时间，然后基本信息，然后他的这个各项的这个身份信息都在这块展示着呢，然后呢，我们先简单来看一下刚才这块的这个身份信息的这个便利。你看这块主要是什么，就判断判断，如果你当前的image type是ID card1，那我就干嘛，我就展示。就先便利一下嘛，便利所有的VI list啊，然后如果是ID card的一，我就把当前的这个。

啊，我就把当前的这个啊，URL地址展示给这个页面制图片，对吧？啊，就展示给这个页面图片，然后接下来呢，这个面制图片呢，我一点它还能有一个预览的一个功能啊，那这预览的功能是哪来的呢？是就是我们用的这个EL image，然后呢，它有一个叫preview s RC list啊我当前预览的图片的图片列表是什么？当然我们这边呢，这个预览的是只是写了当前这一个图片，就是这样的。嗯，好，然后这是身份证正面，然后这是身份证反面啊，他的ID type呢是ID type2，然后这呢是房产信息，他的啊这个image type呢是house啊接下来是车辆信息，它的image type呢是car，这样的话呢，每一个我们都可以进行这样一个展示，对吧？啊这样就给大家展示出来啊好，那这块呢，就是。我们整个的啊一个。

借款人。基本信息详情信息的一个展示了，那么写到这为止呢，接下来我们要做的就是额度审核了，也就是说我们要去做这个审核表单了，那这个呢，是我们明天啊需要完成的内容，所以今天呢，我们就讲到这儿。