day14/上午/283-尚硅谷-尚融宝-表单提交测试和账户绑定说明

好，那么我们来看一下前面两节课，咱们经过分析这个用户绑定的需求，经过阅读啊，这个惠宝商户的这样的一个接口文档，然后呢，再通过啊整合我们一些啊辅助的一些工具类，还有一些依赖等等啊啊这样的一个流程呢，最终我们其实就做了一件事情，就是写了一个接口啊，剩下其他的事情都是为这个接口做辅助的，那么这个接口是什么呢？这个接口呢，就是用户绑定接口，这个用户绑定接口会在哪个地方调用呢？会在我们点击开户按钮的这一瞬间调用，那调用这个用户绑定接口的时候，我们要做什么呢？我们要做的事情就是组装一个表单字符串，好组装完这个表单字符串之后呢，我们将会把这个表单字符串呢？啊。提交给前端，然后在前端呢，我们想办法把这个表单字符串呢，在浏览器当中给它展示出来，只要这个字符串一展示，那么表单就会提交，为什么？因为在这个字符串里面我们做了什么呀，做了自动提交啊，哪个地方是自动提交呢？就是最终的这个位置。

它有自动提交，所以那我们通过这种表单提交的方式，或者是说通过组装表单字符串的提交的方式，去向远程的服务器发起远程调用，当然这是我们远程调用的其中的方式之一啊，后面我们还会接触其其他的方式好。那接下来呢，我们就来看一看如何在我们的前端对我们刚才的这个接口进行调用，好，那么在前端进行接口进行调用呢，我们要打开的就是我们s r b site pages user下面的半点view了，那么这个半view里面呢，就有这么一个开户按钮，好，这个开户按钮呢啊，前提是你必须得先点击前面的这个check box啊，让这个agree等于true，那么这个开户按钮呢，就可以被啊启用了，所以呢，我们在这个地方点它，然后点这个开户就行了，当然了，因为我们是后端哈，所以前端这面呢，关于表单验证这块我们就没有去做啊，那你呢，一定要先把这个都给它写上，一个一个都给它填上啊，填上之后呢，最后点击开户，点击开户之后呢，它就会弹出这样的一个提示，叫做现在呢，您即将前往恢付宝绑定账号啊，是否要前往，如果我们点击叉的话。

那我就不前往，如果我要点击立即前往，那我就前往，所以咱们现在要完成这个功能的开发，那么我们来看一下，首先开户按钮这一块，它绑定的是这个commit b这样的一个方法，对吧？好，然后接下来呢，在commit这个里面，我们呢，是有一个弹出提示，就是刚才你看到的啊，一个弹窗提示叫前往会保资金托管平台，那么就是这款。

啊，这块的话呢，里面的这个下面的这个小提示，它呢是可以定义HTML样式的啊，所以呢，我们就给它有一个div定义了一个样式，那主要呢，就是想让它展示成这个红色的更醒目的这样的一个文本啊内容，然后接下来呢，这里面呢，有个dangerously use HTML，这个string什么意思呢？就是默认情况下呢，这个值是false，那如果这个值是false的话。好，那这块呢，就原样输出了，所以现在我们不想让它原样输出，我们想让它解析成HTML，并且呢给它渲染出来，那这样的话呢，你这个题就在身上出好，然后呢，接下来呢，就是立即前往，就是confirm button text就是这个按钮了啊，当我们点击这个按钮的时候。这个call back里面的action就会被自动调用啊，当我们点击的时候呢，啊，这个action的值呢，它就是等于confirm，可以看一下pencil.log。

挨个挨个挨个是啊。那就是你的纸。好。然后呢，我们来重来一下F12。F12啊。好，然后接下来呢，在这边我们看看啊，当我点击。立即前往，你看这个action的值是不是等于confirm啊好，那么当action的值等于confirm的时候，我就调用刚才咱们写的后端接口，所以呢，这样的话呢，我们前后端呢，就建立了联系，所以这面就是if。Action等于confirm，然后呢？接下来this.dollar。

点Dollar post。原括号，然后呢，刚才我们那个接口地址。我们这个接口的地址呢，就是呃，API靠U办杠O杠办。所以呢是API car use band，然后杠O杠。对的，对吧，啊好，把它们连起来就是我们完整的接口地址了，然后接下来呢，我们还是需要传一个参数的，那传参的话呢，这个啊，Post的形式传这个Jason字符串，我们还可以这样传，在后面第二个参数里面直接写this.user半这样的话呢，这个里面的内容就会作为一个Jason字符串啊，以post的形式在请求体当中进行传输，然后接下来呢，我们写表问瑞斯棒，好，然后呢，在这个问里面呢，我们写什么呢？Response里面拿到的是什么？注意，Response里面拿到的就是我们后端。

返回来的这个字符串啊，也就意味着我们response里面拿到的就是通过这些参数传递进去组装出来的最终的表单字符串，那么这个表单字符串呢，我们想让它直接渲染到浏览器当中，并且直接做提交，然后直接提交到这个ul的当中去，所以呢，在咱们当前的这个页面当中，咱们应该如何写呢？写document点啊叫right，这样的话呢，我们返回的这个整个的表单字符串就会直接渲染到浏览器当中，好，然后浏览器呢，直接就会执行这个表单，然后继而呢，它识别出表单里面有commit方法，直接就会进行表单提交，所以呢，Response。

第二塔，第2FORM ST。就是这样的一个过程，那接下来呢，我们来看一下吧，那这面呢，我们比如说写一下这个。真实姓名啊，比如说我就不写真实姓名了。啊，那个这个啊，这是我的生日，然后接下来呢，银绑定银行，比如说我可绑定招商银行。好，然后接下来银行卡号好，然后预留手机好，然后接下来呢，我们在这个地方呢，点击开户啊，点击开户它就会调用刚才我们那个后端接口对吧。

好，立即前往交友。好，现在呢，他就应该去调用我们的后端接口了，但是呢，这块有个问题，我们来看一下是什么，他这问题呢，叫local host API car user band o band，他说404能fund，那就说明这个接口地址他没找着对吧，没找着，那我上我上堂课是不是应该去重启了API call user band or and，对照一下啊。API call user。User band or band？应该没问题哈，我们来重新启动一下这个后台了。我上堂课好像启动的。没启动，靠哈，我上上课最后启动了一下，好像启动的是他是不是。

好。那我就启动成功了，现在。然后再来点一下。然后点立即前往，大家看呢，现在呢，已经前往前往马上就提交了，我不知道大家注没注意看上面的这个跳转的路径啊，如果你没注意看的话，回头看看视频，好，这个路径这块呢，先提交到我们后台的接口，然后马上就跳转到这个band agree user to，这个地址是什么地址，就是我们提交的地址，看一下我们刚才的提交接口。就是这个URL啊，看这U是不是us办班agree you啊九九。对吧，就是它哈，这个就是汇付宝里面给我们准备好的一个页面，他把刚才我们在。

我们的上荣宝端录入的数据全都怎么样，全都读取出来了啊，全都读取出来了，读取出来之后呢，这面呢，你需要点击一下获取验证码，然后呢，你的手机里面呢，就会啊得到一个验证码，然后在这个地方呢，你就输入你得到的那个验证码，当然了，惠付宝那边我们没有去真正的实现这个功能啊，因为其实跟咱们这个业务的核心流程呢就关系不大了，因为而且呢，这个也不用咱们自己去写，到时候呢，是恢付宝那面写，是资金拓展平台里面写，所以这边呢，咱们就象征性的输入一个验证码就行了啊，我们后端没有对这个验证码的正确与否进行校验啊，输入一个验证码就可以了，然后接下来呢，当然呢，真正的汇付宝那一端呢，他会去银行端，就比如说你这个银行呢，是招商银行的这个银行卡号啊，然后呢，他就去这个银行端去把这个。这个数据呢，去获取出来，然后这面他这边是写死了得民生了，实际上呢，应该是招商银行好，他去银行端把这个数据获取出来，获取出来之后干什么。

获取出来之后呢，他就去银行端校验你的这个账号，你的这个手机号是不是你招商银行的这个卡号，然后绑定的那个手机号啊，如果是的话，那么他就校验你的验证码啊，验证码校验成功了，就说明这个这个人就是你对吧？啊好，然后接下来呢，你可以设置一个支付密码，比如说我设置一个支付密码叫123456，那未来咱们在上荣宝这一段。啊，充值也好啊，转账也好啊，提现也好啊，投资也好，对吧？啊等等等等还款也好，我们所输入的这个这个支付密码啊，都是这个密码，所以这个是你的初始密码啊，在上荣宝里面的初始密码，当然了这个密码呢，是由恢付宝这边管理的啊，所以呢，我们在这边去初出初始化一下就可以了，然后点击确定就可以了，当然现在我们还不能去点，为什么，因为现在我们其实啊，整个账户绑定的这个工作呢，还没有完全做完啊，我们账户绑定的这个工作呢，最开始生成这个表单的时候，也就是说在这个位置啊。

这个不是我们相当于生成了一个账户绑定的表单吗？你在这个位置。User。在这个位置，当我们点击这个立即前往的一瞬间，我们应该先做一件事情，做什么事情呢？就是在我们的数据库当中先生成一个user的数据。啊，然后接下来呢，刚才不是到了恢复宝端吗？恢复宝那一端也会生成的数据，并且生成user数据。啊，然后最后我们的这面的user count和user band和这面的user band和user count以及user info做数据绑定，做数据记录的绑定，啊通过什么绑定，就通过这个班code绑定，所以呢，最开始的时候我们应该去创建一个UC办的记录，在我们的上中保段，那接下来呢，我们来做这件事情啊，先把user b给它。

创建出来。