day17/上午/343-尚硅谷-尚融宝-借款审批的前端整合

好，那写完这个approval这个接口之后呢，接下来呢，我们来看一下啊，把这个API啊，也就是前端的这个API给它定义出来，那么这边也是一样的，我们在borrow in for这个里面呢，去把刚才的这个定义的pro的这个API呢给它啊定义进去，所以呢，咱们找到borrow in for，然后在这里面呢，我们approval，那么我们希望呢，从表单当中搜集过来borrow in for approval数据，然后呢，用post的形式作为Jason字符串，把这个borrow for approval呢提交到我们刚刚后台写的这个接口当中，所以呢，这是API的定义，然后呢，接下来呢，我们来看页面的脚本，页面的脚本呢，我们是希望在。这个列表页啊。好在这个列表页点击审批按钮弹出啊一个表单啊，一个弹窗，然后在弹窗当中通过点击啊刚才的这个啊按钮，然后调用刚才的这个API，所以呢，我们就要在这个列表页当中呢，去添加我们相关的功能，那么我们找到我们的列表页。

啊，那这个列表页呢，就是我们s RC views car in for下面的这个list view啊，在这个类似view里面呢，我们先啊定义一些。这个呃，页面模板啊，这页面模板呢，我们来看一下，就是先把这个对话框给它粘贴过来，就是那个弹窗啊，所以我们先把弹窗给它粘贴过来，那这边也是一样，咱们就不一一的一行一行去写了啊，我们找到类似这个页面，找到table啊，粘到table下面。好，那这块呢，就是我们的啊审批对话框了，那默认情况下呢，这个审批对话框呢，啊，应该和我们之前做的对话框一样，就是它呢是不显示的，所以呢，我们其实应该定义一个Di log visible对吧？啊然后呢，我们审批对话框里面的所有的表单数据呢，咱们呢，一会要搜集上来，那么我们用borrow in for approval啊去绑定这个表单当中咱们填写的数据，所以呢，我们要定义dialogue visval以及borrow in for approval，并且呢，Borrow for approval里面有一些这个属性啊，我们想让它有一个默认值，比如说status的状态，我们想让它默认就先等于二，也就是说看一下我们这个需求页面啊，当我们点击这个审批按钮，打开这个审批表单的时候，我们想让这个通过和不通过这两个啊，单选按钮呢，默认选中不通过，所以那现在呢，我们这个status的状态呢，就默认是二，然后再有呢，就是平台服务费，那我们呢，默认情况下呢，就让它是五啊好，然后。

那接下来呢？就是啊这个啊其他的这个内容，比如说这个年化收益，我们先让他默认情况下呢是零，然后再根据我们实际的情况啊，实际用户的这个借款的情况去给他进行一个调整啊所以呢，我们先把这几个内容呢，先给他初始化出来，那这样的话呢，我们定义的这样的一个初始化的这么一个数据呢，就要在这个地方给它定义出来，并且给它做初始化，那怎么去定义呢？那这样去定义。

那直接粘过去了啊，在这面呢，加一个逗号哈，就刚才我说的这两个内容，第1DIALGUE现在它是不显示啊，第二啊，Borrowing for approval1定要先定义出来，并且呢，里面这几个数据呢，咱们呢都给它初始化出来啊，初始化出来之后呢，像这个land your啊，Land in rate这个啊，它实际上呢，选数我先把它屏蔽掉吧，啊一会咱们再说这个问题，好，这个我让他默认是这个选择，选中那个已审批啊，就是这个通过啊，这个我让他默认15啊是这样，然后所以呢，咱们来看一下。添加这个页面啊，现在呢，Diallo因为是没显示嘛，所以还没有这个具体的内容，但是呢，我想一点击审批呢，就显示这个diallo啊，然后展示刚才咱们绑定的这些数据，所以呢，咱们接下来呢，还要给这个审批呢加一个啊这个功能对不对，所以咱们呢，要在列表页当中找到审批按钮。

好，这边就有个审批按钮，然后呢，有一个up approve show对吧？啊，那up approve show呢，它传了一个肉啊这样的一个参数，好，那么up approve show这块呢，我们前面已经定义过了，只不过呢，这面呢，我们需要把这个啊，就我们给它定一个形式参数吧，就说就叫肉啊当前行给它传过来，好，那当前行传过来的第一件事情呢，我们就要把这个dialogue visible呢给它显示出来，对吧？啊，这是我们要做的这个第一件事情，然后接下来我们先来看一下。啊，点击审批好，刚才这个Di visible呢，就显示出来了，显示出来之后呢，这块有一个是否通过，那我们这边呢就叫通过啊，所以这个是刚才那个默认值，然后这块呢是服务费率，服务费率呢这块是五啊这块是五，所以说呢，这块就是刚才我们这两个默认值啊。

一个呢是二，一个呢是五对吧？啊，我们就给它填充上，然后接下来呢，我们F12看一下啊。现刷新一下。好刷新一下，刷新一下之后呢，你会发现。这里面呢，就又有一个错误哈，这个错误是什么呢？我们先来看一下，先解决一下它啊，把它复制一下，也就根据刚才咱们学的这个解决错误问题的方案啊，呃，Approve submit，那很显然我们弹窗这个它是有一个是这个确定按钮的，而这个确定按按钮呢，就调用了刚才我们看到的这个approve submit这个方法，那因为这个方法我们还没有定义，所以呢，他就报告了这个错误，他说approve submit is not DeFined对吧？啊，那我们先给它定义出来啊，这样的话就不会报这个错误了，所以呢，我们在这个地方多好，然后呢，Val suddenly先先给它定义出来，好，然后接下来呢，我们再重新刷新这个页面。

然后呢，点击审批，好，大家看刚才那个错误呢，就我们就给它解决掉了，那这样的话呢，我们就把这个审批表单呢，就啊就弹出了。啊，弹出了之后呢，我们现在呢，要呃解决的一个问题呢，就是啊第一个就是在approval show这个地方。啊，我们要呃，把这个刚才我们所看到的这个是呃，借款信息当中相关的信息呢，提取到这个里面来，那么我们能提取的是什么呢？能提取的就是这个年化利率啊，你看这个表单里面是不是标的名称，你得自己取一下啊，啊因为得就比如说白领带或者是什么带哈，你得自己写啊，起息日呢也得要自己确定一下，标的描述呢，也要自己写一下，那么这个年化利率。啊，这个我们就可以先从这个地方先动态的把它提取出来啊，那如果需要修改的话，我们再修改啊，但是呢，你先需要把人家默认的申请人申请的这个年化利率呢，先给他动态的先提取出来，好，那我们就提取一下。

提取下的话呢，啊，这面。嗯，我看一下啊。在这块写。啊，Pro show这个地方啊，啊写this，然后点呢叫Bo，叫the borrow in for啊approval，因为最终呢，实际上我们提交表单的时候呢，要提交的是这么一个对象，对不对，我们得把这个对象呢给它完善，所以呢是borrow for approval点然后年化利率。年化利率呢，就是刚才这块就年化收益哈，Land。好land in啊，然后等于等于什么呢？等于我们的这个啊，肉就是从这个里面啊，然后里面呢，我们的看一下那个列表啊。

列表服务费率年化利率这个列表里面。列表在这儿呢？年化利率对吧，肉里面的包叶这么个东西。写到这好，然后这个borrow your rate呢，它在数据库当中，它存的是一个小数的形式，所以呢，你要给它展示出来的话，后面加上百分号，展示出来的话，那你得给它乘以个100，那么在我们这个位置。我们呢，也是希望它是通过后面加百分号的形式展示出来的，所以呢，我们展示的时候呢，需要乘一个100展示。那这样的话呢，我在这个地方呢，就要写一个乘以100，好在这边写乘以100啊，然后接下来呢，我们点审批，那你会发现呢，这个年化利率呢，就啊就展示出来了啊啊它呢就。

可以把它直接渲染到咱们的这个页面当中了啊好，然后那接下来呢，我们来看一下，嗯。还有一个内容呢，需要我们去组装，也就是说我们最终的目的其实是组装什么呀？是组装这个borrow in for approval对吧？啊然后呢，最后我们要干嘛呢？是不是要调用刚才我们的这个后台，后台写的这个approval这个接口啊啊然后呢，这个包for approval呢，我们就来检查一下还有哪些字段的我们没有去组装，所以呢，我们来看一下我们的后台啊的这个包INF for blue VO里面啊我我们这个里面呢，啊，还有一个叫ID的这个东西没组装，那么状态呢，其实就是这个表单当中的啊，这个通过是吧？啊然后标的名称呢，一会儿我们要通过自己填去组装，然后起息，起息日，年化收益，服务费率和描述啊，我们都可以在这个表单当中通过用户填写的方式去组装，所以呢，这里面唯一没有组装进来的呢，就是这个ID了，而这个ID呢，我们说应该是borrow for的ID，所以呢，我们在前端呢，把它给它组装进来，那这样的话呢，我们在前端的这个类似view这个里面，我们。

那就是this，点包borrow啊，In for approval。啊，然后点。ID啊，然后等于什么呢？就是当前的这条记录的id.D。明白这意思吧，啊，然后接下来呢，我们就就好了，然后点审批就可以了，这样的话，这个数据呢，啊就组装进来了，我们看一下这个view。看看我们刚才的数据有没有组装完整。你看这个ID是不是就进来了啊，然后这个land rate，还有service rate，还有CS都组装进来了，那么这里面呢，说一个兼容性的问题啊，就有些浏览器呢，这个landar rate呀，我们通过这种方式呢，它就是赋值啊，它赋不进来啊，当然这是个别浏览器会有的问题啊，为了解决这个问题呢，我们可以在这个地方先把这个land rate呢，先给它初始化为零，就是有些同学如果你自己在测的时候出现了啊，就是这个表单一打开。

出现了这个这个表单一打开，然后这个年化收益率它没显示出来，这种情况的话呢，啊，我们就先把它初始化为零，这样的话就可以解决你的问题，当然我目前为止我这浏览器没有对不对啊，有些同学会有哈，那么就先把它初始化一下，然后这样的话呢，我们再打开有单的时候，这块呢，就能够100%的做到兼容了啊就就渲染进来了，好，这个是一些细节的前端问题，那这样的话，我们在这个地方把所有的数据都组装完了之后，像标的名称我们写，我们写一下来领带对吧。还有起息日，比如说我们选明天开始啊，标的描述啊，这个你就自己描述一下好，然后接下来呢，我们点确定就可以调用刚才我们写的那个后端。

接口了啊，所以这块呢，是我们的这个审批表单。的一个渲染的一个过程，那接下来呢，我们点击这个确定按钮调用接口的过程呢，我们最后呢，再来给它实现一下，所以在我们的list view这个地方，我们呢，点击审批按钮调用接口的过程呢，就在这个位置，所以呢，调用刚才的这个啊，Borrow borrow in for API，然后里面上堂课我们写的这个approval API方法对吧？啊然后你粘过来粘一下好调用这个pro v API方法，然后接下来呢，把刚才咱们啊组装了半天的这个数据再给他传递进去，这样的话呢，我们这个API就调用好了，调用好了之后呢，我们来看结果，所以在这里面呢，我拿到response，好，然后呢，拿到这个response之后呢，我们啊直接就关闭，也就是说当你点确定的时候，是不是对话框给关闭掉了，好，那我们就关闭这个对话框，然后false这样，然后接下来。

那弹出一个审批啊，完毕的这么一个提示，点Dollar message啊，然后点useuses啊啊瑞bus.message哈，然后呢，这边呢就是啊呃，当我们这个关闭对话框之后，那我们希望呢啊就是整个的这个列表页呢，刷新一下啊，尤其呢，我们希望的这个状态啊，它展示最新的一个审核完毕的一个状态，所以呢，在这面呢，我们就写Dis，点再data就可以了，所以这块整个呢，就是我们的前端整合，然后呢，我们来看一下啊，点击查看啊不对，点击审批对吧，然后点通过，然后标的名称来领带001号哈，然后起息日，然后我们写明天，然后年化收益，那我们就就12吧，服务费率我们也是五，然后呢就是啊这个是。

描述信息啊好，那自己描述一下就行了，然后点确定好，那这面呢，就是审批完成，然后接下来呢，这面呢就刷新了，就变成审核通过了，明白哈，好，那所以呢，我们再来检查一下后端的啊这个数据库，后端数据库呢，实际上我们就做了一件事情，就是把这个status形成由一变成二了，好，那这块呢，就是整个的一个审批的过程，那审批完成了之后，下一个步骤我们就来做什么呀，就来做标的产生啊这样的一个过程哈，这个我们下午再说啊。