day19/上午/371-尚硅谷-尚融宝-标的详情和借款人信息的前端整合

好，前端整合这块呢，需要我们有一个ID页，这ID页呢都给大家写好了，呃，绝大部分内容都给大家写好，大家只需要把一些关键的，嗯，接口代码，就是调用API的代码加上就行了，在资料第四部分配对烂的有个橡皮ID的，你上下载一下，我把修打开，你现在就下，然后接下来呢，把这个。把这个放到我们的这个里面。放烂在这里啊，拉过来是吧，好，那这样的话呢，我们这个ID呢，这个页面就有了，这个页面内容还相对来说比较多哈，所就不给大家那么大压力了，不让你们自己写了，Temp的部分几乎都给大家实现好了，我们只需要去了解一下script的部分就可以了，那么script的部分呢，首先第一个我们要获取标记详情，这个和我们获取标记列表一样，这个标记详情里面的内容呢，其实我们也是希望所有的引擎啊什么的都能收入一下，这样它也帮助我们的，这我们这也是一个产品啊啊，它无论是金融产品也好，还是你买的那种什么衣服呀啊，什么那个那个美团上买菜呀啥的，它都是一个商品，那都希望可以类搜索隐形收入是吧，所以这个呢，我们也在义步方案当中去去查询啊，那所以呢，在这个异步方法当中。

我们呢，首先通过paraters这块呢，是一个啊结构赋值还记得吧啊，因为在一读方法当中，之前我们最开始的时候讲过，这里面其实有一个一个一个就默认的对象，这个对象里面有非常丰富的内容，它都注入进来了啊，那其中呢，这里面有两个我们非常常用的，一个就是X自动注入进来，直接能用，还有一个呢，就paraters页面当中的路由参数都放到到这个里面，也是直接能用的，那我们这个页面的路由呢，是是这样的一个形式的，就是当我点我要投资啊，这个路由是这样的一个形式的，所以我们得把这个路由的这个这个ID取出来，对吧？啊，所以说怎么取呀，就从这个perters里取啊，那在这个地方我们就拍metters表ID，就是刚才露露那个I idea，然后呢，我们把它付给一个叫做烂的I idea这一变量。

好，然后接下来呢，我们就可以做什么呢，就可以做这个啊，查询了the Dollar sales，然后点对days对吧。嗯，不对，没有this了，This是在哪写的，This是在这个这个里面或者是这个里面写的，对吧？写this，然后这个里面是不是我们就直接X就注入进来了，就直接写X就行了，好，那么这是Dollar X点二，然后是Dollar get啊然后这个地址呢，就是我们的，呃，一个获取详情的地址，那么在这个地方呢，我们去找到。

烂，这是上哈，找到刚才咱们的那个好，找到这个烂的controltler，然后找到IDID显示是API land ID那就是API land受然后I didd的话呢，我们去加上land的ID啊，加上刚才这个好，然后不要忘了呢，这个我们嗯做这个嗯服务器端渲染，呃，我们让它是变成同步方法，这个之前讲的了，然后接下来呢，Wait，所以是light response response，然后等于o it，就是等它这个异步调用成功了之后，那当然了，那就变成很度调用了，等它成功了之后，然后呢，再把最终的时值呢做到response，这样的话呢，在这个return这个里面呢，我就能够拿到response了，就是response掉啊。

Data点，然后看一下后台，我们返回的这个叫做烂的。Land detail，因为这个land detail里面我们返回了两部分的信息，一部分是标的详情，一部分是这的信息啊，那所以呢，在这个land detail里面，实际上我有两部分内容，一个是烂的，一个是包，所以呢，这面呢，就是烂的地点烂的，然后这面是land to.follow啊所以这样的话呢，我就把这两部分的信息呢，分别不给这两个对象了，这样的话，在前端的取值的时候呢，我的就会更方便一些，好，那这块呢，是咱们前端的一个呃信息的呃，基本信息的一个整合，然后那我们来看一下这里就是。

这个前端这的信息整合完了之后呢，上面这些就仿真了啊，数据这块就不用就不用大家做了哈，你这这个其实就是工作量的问题，所以呢，你找一下这个上面这块的内容就行了，嗯，你要是愿意看的话，你看一眼就可以了，在这个位置，这款金额你看就land on就方了，然后年利率land，嗯，It大概得乘以一个100啊，然后因为是用百分数表示的，这个是个小数对吧，也乘以100加百分号，然后这边呢，是借款期限，借款编号，借款时间啊，还有还款方式，这个是我们的扩展计算当时呃，投标进度，投标进度呢，我们要算出一个百分比来啊，百分比就是实际上就是这个地方，这个地上它会展示一个百分比，然后这个百分比的这个，这个样子呢，它是通过这个计算算出来的一个一个一个百分数，然后呢，把它作为这个style放在这个地方，当然这是CSS内容了，然后是动态计算出来。

的一个动态的这么一个CSS的宽度啊，这样的话呢，这面一旦有投标这个投资人的话，投资的话，那么这块会有一个进度条的一个展示，所以这个其实是前端的一个数理啊，所以这大家了解一下就可以了，然后接下来呢，这块呢，就是呃呃，就是就具体展示的那个百分比的数字啊，这个地方是样式一个就是就是一个是这块样式就是一个呢，是这个百分比的数字，然后再接下来呢，后面就是已经有多少人啊，投资了多少人啊，这些都是难的，这里的一些基本信息，对吧。好，那这块呢，是标的记的信息的一个开始的一个部分，然后我们来看一下，今天我们就是就在这个地方先展示出来啊，目前后面呢，还会有更多的这个投资记录，还款计划，借款信息，然后借款信息这块，大家看这里面有个借款人信息，还有这块有个项目介绍，这些也是从咱们刚才的那个接口当中获取出来的值啊，然后项目介绍这块你看一下。

这款是烂的那个里面的烂的银后啊，然后再有呢，就是这款人信息，这款人信息呢，就是我们的包刃，刚才我们那个第一个接口不是取了一个烂的，还取了一个包刃吗？然后这个地方呢，会把包儿给你展示，就是这样的啊，然后呃，这块就是呃，我们处理的比较简单啊，真正的这个平台上，他会把这个借款人的姓名和手机号码部分隐藏的，比如说姚女士对吧？啊，再比如说手机号码什么形成新形就是杂，明白这个意思吧啊，所以这就是前端的部分的处理了，那我们就可以把它模糊处理一下，那这个地方我们为了省事啊，就直接把它展出来，但是实际的场景大家要了解好，然后呢，这块呢就是呃，关于这款人信息，那当然了，呃，在真正的这个场景下，可能这个项目介绍要介绍的再详细一点，我们这边写的就比较简单了。

那你这个项目介绍应该把这个借款人他的这个基本情况详细的介绍一下啊，然后他为什么要要要借这笔钱，然后他的风险的这个承受，就是他的这个呃，还款能力啊，经过我们调研，然后就是基本上就是他是有还款能力的吧，可给这个投资人要有这样的一个信心哈，好所以说呢，这个地方最好是介绍的越详细越好啊，就这个项目介绍，当然了，这是业务方面的事情，所以说在真正录入这个信息的时候，管理员在审核这个信息的时候，那他要他去做一个详细的介绍，然后这个后面这块其实就是一些通通用的一些内容了，比如说审核信息风控步骤，就像你上那个网站上去去买东西，你上淘宝上去买东西，然后每一个商品详情页面后面都有一些啊，比如说什么呃，物流配送方式，然后售后服务等等等等，对吧，每一个商品小品面面都有一些统一的内容，那这个就是那个统一的内容啊，就展示在这。

好，那这块呢，是我们的这个详情页，那未来呢，我们还会添加投资记录，还款记录啊，这这这些内容，好，那这是我们这个前端的一个整合，针对这个标的详情信息的一个前端的整合。