day17/上午/340-尚硅谷-尚融宝-借款详情的前端整合

好，那我们来看前端，前端的定义呢，也是一样，先把API，刚才咱们写的这个接口呢，给它定义出来，所以呢，我来找到borrow in for.js，在界面加个逗号和刚才的这个show啊，给它定义到这面，好，这个是API的定义，然后接下来呢，咱们就是页面的啊渲染啊，啊页面的渲染这部分呢，首先啊，我们还是要写这个页面脚本的，所以说呢，咱们来到这个DQ这个页面当中，在脚本这个地方啊，咱们去引入这个相关的内容，就in套好，那么我们引的这个脚本呢，和类里面引的一样啊，我就直接把它粘过来，好，这个是引入borrow in for API，然后接下来呢，在这页面当中呢，咱们还是页面一加载的时候呢，我就想展示内容。啊，然后呢，我展示内容的话呢，我再看一看这个，如果页面当中就这面它有ID的话，我再展示这个内容，对吧？啊，所以在确保这个路由当中是有ID的，this.dollar RO，然后点pas，然后点ID，好，然后接下来呢，我们s.S贝塔就是。

By ID，根据ID呢获取数据啊，那所以接下来呢，我们下面这款呢，就写MYS，然后呢啊such他白D好，然后这块呢，我们就写包in API，然后第二。刚才我们写这方法叫受啊，然后把ID传进去受，然后这面呢，ID我们还是传路由当中的这个参数好，然后接下来呢，这边呢写the，然后写response啊好，接下来呢，我们把嗯这个我们response点贝塔点。点什么呢？看一下后台接口。

我们刚才写的这个controller这个里面，我们返回的是包。我看一下啊，包低是吧，我们把这个呢，给他复制过来。Borrow for detail，然后呢，这面呢，我们就得定义一个data来去绑定这个数据啊，所以这面呢，我们就写，嗯，Borrow Bo就也写这个吧，Borrow。啊，然后呢，它是一个对象啊，写成对象的形式，然后接下来呢，我们把这个borrow for detail给它复制一下，所以this.borrow for detail好我们就给它复制完毕了，复制完毕之后呢，那这个数据的绑定呢，我们就做好了是吧？所以这块呢，是数据的获取远程调用啊然后这面呢，是数据的绑定好，然后接下来呢，我们来看一下这个页面F12看一下这个页面呢，这个数据呢，能不能获取出来。好，我们来刷新一下。

然后看一看这面呢，有一个远程调用啊，然后呢，这个呢是远程调用的这个完整的路径，刚才我们调用了后台的这个接口，然后返回是200PRE view这块呢，我们已经拿到了这个数据，所以呢，这个数据的远程调用呢是成功的，接下来呢，看一看view这边就是数据绑定是不是成功，那么我们还是还是按照之前一样，DQ下面的这个包for DQ呢也成功的绑定上了，里面的数据呢，都在的是吧？啊所以接下来呢，数据调用也成功了，数据绑定也成功了，我们呢，就应该来做这个页面的渲染了，那页面的渲染的话呢，无非就是把刚才我们看到的这个。页面的内容呢，都展示出来就可以了啊，所以这块我也不领着大家去手工的去去去编写它了，我们直接把这个啊，页面详情当中的页面脚本部分咱们直接给它，呃，这个页面模板部分咱们直接给它粘过来啊。你看全都是数据绑定这块是吧？啊，你把正确的这个值啊内容都给他绑上就可以了啊。

放到这块好，然后呢，呃，这块的话呢，实际上就是从我们刚才那个borrow in for detail里面取到borrow in for，再取到amount，嗯，比如说刚才这个borrow in for detail里面取到borrow for，再取到amount，对吧，就把这个数据一个一个一个一个一个依次的，包括parameter里面啊，一次的都给它渲染到页面当中啊，那就是这样的，所以咱们就不一一一去看了，都是套路都是一样的，好，那有没有问题呢？我们来看一下。首先呢，这个好像貌似呢没有啥问题都展示出来了，但是有点难看啊，一会难看的问题我们一会再解决，看下这边有四个错误，这个错误是什么呢？看cancel啊在啊页面一开始渲染的时候呢，啊，就是它有一个叫amount of unDeFined amount of unDeFi是什么意思呢？我们来搜一下我们的这个amount哈。

就是呢，它实际上呢，呃，这个是我们整个的这个页面，它编译之后的一个结果啊，你可能就看不太懂，所以呢，我们就只能在页面当中去搜，哪个地方呢，有amount明白这意思吧，就是要会调错啊，Amount of UN find，就是哪个地方写了amount amount前面的那个调用amount的那个对象呢，它是个unde find，所以才报这个错，所以呢，我们来看一下这个有点类似于我们Java当中的那个什么空指针异常啊，如果你用空对象去点一个方法，或者是用空对象去去点一个啊呃，这个属性，那么它就会报控指针异常啊，如果我们用一个unde DeFine的对象，就未定义的对象去点一个属性或者是点一个方法，它就会报告这个错误啊，我跟控制常很像，然后呢，我们复制一下，复制一下的话呢，在这面我们搜一下。你会发现就唯一只有这一个地方要用amount，那么就说明这个borrow in for是on borrow in for，为什么是on find，我们明明把它取出来了。

在这个位置。Amount前面的包in for，它并不是一个空对象，它是一个完整的对象，然后里面有amount，而且amount还有，那为什么是空对象呢？原因。是因为我们这个方法是一个异步方法。这个credit里面调用的fe data by ID啊，调用的这个API show这个方法是一个异步方法，这个异步方法什么时候才能够被执行完毕，并且把borrow info detail渲染上呢？是页面加载之后，然后呢他呢去调用远程数据，然后呢，等远程数据响应了，他才能把这个borrow info detail给它渲染上，那也就是说在这个远程数据没有响应之前，这个borrow info detail它就是一个空对象，那么如果borrow in for d two它是一个空对象的话，就说明borrow in for d two里面的。

这个unde find它就是没定义，呃，里面的什么，它就是没定义里面的这个看这个页面啊，就是borrow in for detail里面的这个borrow borrow它都是没定义的，明白吧，包括borrow in for detail里面的啊这个。Borrow in for它都是没定义的，所以呢，如果borrow in for detail，它是个空对象，那就意味着borrow in for是没定义的，如果borrowing for没定义，那你在borrow in for.amount就会报错。这个大家应该理解吧，所以怎么解决这个问题，我们把包定义出来啊，就预先定义出来，它就不会出现刚才那个on犯的那个错误了，在哪定义呢？在这定义，哎，你要不写这个东西是个undein，你写上它就不是undein的了，明白吧。还还包括什么呢？刚才我们说的是borrow amount of find，解决这个borrowing food没定义的问题啊，再刷新一下，那么它还有错误，叫做method房，再搜一下，跟刚才方式一样。

好，那么就是return，谁，On find，是不是parater find perter，为什么on find，因为。Borrow in for定义了，但是parameter你又没定义，所以呢，我们还要在borrowing for里面再定义，Parameter都给它初始化出来啊，不需要初始化的。比这面呢，我们再定义parater，让它也初始化。明白吧，啊，所以这块可能对于大家来说，如果自己写的话是个难点，就不太好解决啊，这个问题那你现在知道了，你就总结了一个这个经验，然后我们刷新一下，刷新一下还有问题，但是这个问题坏了，就要变成name of name是哪？复制一下还是看页面啊，看看是谁，那就是borrow，所以前面我们除了borrow in for之外呢，因为我们后台集合其实返回了两个数据，一个是borrow for，一个是borrow，对吧？啊，你看我们后台的返回啊。

在这个啊，我们是不是返回了一个包孕付，还返回一个包啊，这个都是在前端作为这个集合的键的形式存在的，所以呢，刚才解决了包容应付，现在呢，我们还要解决borrow啊，那这样的话呢，在我们的呃，这个数据定义这块，在borrow in for跟它并列的位置，我们再定义个borrow。好，需要把这里面出现的这个属性啊，都给它初始化出来，然后所以我们再刷新一下。你会发现啊，这回呢，又出现最后的另外一个错误了，叫做back is not DeFine back又是什么？在这边看啊，在这边看搜一下好，这是一个方法对不对，叫返回，返回方法，那也就是说是哪个呢？是这个返回，我们点击这个返回，然后要返回到列表页啊，是这样的一个方法，所以呢，我们把这个bag呢给定出来。好，然后在这面的麦里面，我们给他定一半好，这个back呢，很简单，跟我们的那个包若里面的这个D一样的啊，我们这里面也有办法，对，就跟它一样，把它翻粘过来就行，只不过这块呢，我们返回的是borrow的，嗯，In list返回这个页面啊，好，然后所以呢。

我们再来看一下能不能返回啊返回。是不是返回到刚才我们做的这个借款列表页呀，好返回到这个页面，然后再接下来呢，我们F12看看这个，把这个错误清掉啊。好，大家看这一回。我们的所有的错误都解决了，在这个过程当中，实际上我主要想给大家说的就是怎么去调试前端类似于这样的错误啊，所以大家看到前端这面报错的时候，你不要不要害怕哈，不要慌，你就去认真阅读它的这个错误信息啊，都可以按部就班的去把它解决的好不好，那我希望大家通过这个例子能够解决，能够自己未来独立解决潜能绑定方面的这个问题啊好，那这样这样呢，我们的这个，嗯。

详情页这块呢，就初步实现了，最后一个问题呢，就是这详情页这块有点难看啊，难看的话呢，嗯，我就咱们就自己加了一个CSS样式，就给它修饰一下，那这个样式呢，就不需要大家自己去写了，我们把这个样式整合到我们的项目当中就可以了，所以在这面呢，我们有一个啊样式。啊，有一个瘦点CSS啊，昨天发给大家的，然后我们把这个瘦点CSS呢，放到咱们的项目当中。放到什么位置呢？放到style这个目录下，放到这个styles这个目录下就可以了。啊，我们把这个瘦的CSS呢，给它加进来好，然后接下来呢，在我们的这个页面当中，怎么去引呢，直接引就行，在这个地方给你泡，然后呢，这样写啊，CSS我们实际上是放在了。

这src下面刚才的style目录下，所以既然是src，那么引的话呢，也是圈啊，代表src，然后杠啊TYS对吧，Styles，然后刚才咱们那个受点CSS啊，在咱们这个view项目当中，CSS就这样去引进去就可以了啊，然后呢，呃，这样的话呢，我们来预览一下咱们的这个，我看一下啊，是是这个页面吧，对啊，我们预览一下这个页面，你看现在这个样式你就变得稍微好看一些了，明没明白啊，所以这块呢，是咱们整个的一个前端的整合的一个完整的流程。