day07/下午/145-尚硅谷-尚融宝-表单数据回显

好危险呢，我们是打算这样，就是在这个地方，在删除按钮的旁边哈，咱们再添加一个修改按钮，然后一点击这个修改按钮的时候呢，就进入到一个啊，就是这个编辑表单里面去，只不过编辑表单里面会把数据都回显出来，然后咱们改的时候呢，一点保存，诶，它就更新了这数据，所以两个步骤，一个步骤呢是数据的回显，一个步骤呢是数据的更新，那首先第一个步骤呢，我们先把这个回显按钮先给它添加上回选按钮，怎么添加呢？在这块我直接给大家写好了，大家这块能看懂就可以啊，然后未来如果有相同功能的话，就照回法条写就可以了，其实前端很多都是这样的啊，最开始不会的时候先先弄一个，就是现成的，先参考着做啊，然后等着做熟悉了啊，就是东东拷一下西拷贝一下你的页面就出来了啊，就挺简单的，其实好，然后接下来呢，这块是link link其实就是相当于。

我们原来的那个路由地址嘛，然后我们跳转到这个路由，这个路由是不是一开始我们在路由里面。Rootr index里面配的这个edit ID啊，你看它完整的入有呢叫car integr grade，然后呢edit ID啊，所以这面呢，你看我们这个完整的路由就是car integral gradeid edit，然后动态的ID给它传进来，同样这个ID也是通过这个templatelo scope传过来的啊传过来之后呢，我我们就是像一点击这个这个呃，Root link，它是不是页面就会跳转到这个地方来呀，我们试一下啊。所以你看点击这个修改，诶，页面是不是跳过来了啊，所以就初步完成了这个路由跳转的功能。好，然后而且呢，这个root link里面呢，它不是一个普通的超链接，它是个按钮哈，我们呢想如果想把这个按钮呢，做成一个超链接的话呢，那你就里面放个按钮，外面放个root link，那么这个按钮呢，就就像超链接了啊，因为它其实你像这个删除是按钮的功能，它有这个click事件，但是这个修改其实并不是按钮的功能，它是什么呀，它是一个像超链接一样的东西，让URL地址变化了，所以这种功能的话，我们一般就这样写啊EL button外面嵌一个入link就可以了，然后接下来呢，点击这个入link之后，我们是不是进入到这个页面了，这个页面是哪个页面，这个页面是不是就是这个还是这个form.view啊啊，因为我们在这个，呃，路由这个里面的这个IID所连的这不是还是form嘛，对吧？好，那我们就还是处理这个form，处理这个form的话，你第一个步骤就是我们肯定是要做这个数据的回线呀，要把刚才我们点击的这个数据，比如说我点这个评分区。

间借款额度等于3万这个一点，那你要把3万呀，什么这几个数据是不是都回显在这儿，回显在这，这是不是就需要我们的后台的API的一个调用了啊，所以呢，接下来呢，我们来看一看，就是后台的API的一个调用啊。

那就开始变API了，所以呢，在这个地方我们还是找到我们的integral轨啊这个API模块，然后在这个里面呢，咱们写回线API。戴白ID啊，然后这里面呢，其实也是这么个东西啊，好，然后这块改成get对吧，然后这块呢，就是啊，The main call integralrate，我看后面应该是get吧。明显get对吧，把ID盖，然后把ID然同样这个ID也从这传过来，好，然后接下来呢，这个方法就写好了，你看我们写第一个方法的时候呢，感觉好像挺复杂的，但是后面越写越简单，是不是你就在这里填方法就行了啊。然后接下来呢，在form里面，我们就调用这个get get。

在form里面哪个地方调用呢？肯定是页面一加载的时候就调用，所以呢，在这面我们定义可因为给的生命周期函数，然后页面一加载的时候就this啊，我看一下啊，页面一加载的时候，我们现在这个地方写一个方法吧，叫做bit by ID啊，根据ID获取数句。啊，然后呢，先把ID传过来，然后先调用一下刚才我们那个后台刚刚写的那个接口。盖个白ID好，然后把这个ID传回来，传来之后呢就笨。但就是啊，处理数据绑定嘛，一旦这个数据拿到了的话，那么就说明我们当前这个response里面，你看我们回想怎么写的。

你显response里面就有个考是不是啊，然后呢，我们从response里面拿到，所以呢，付给谁呀，付给他就可以了，那么this第二。EGGR，然后等于with response。啊，点看。response.data啊点是吧，这个数据呢，就付给他了，那同样的我们要在里面呢，去调用一下它。This ID，然后呢，我们得传一个ID进来啊，传个ID进来，ID怎么传呢？ID这样穿就是大家看啊。在这个地方。我刷新一下这个ID等于二吧，这个二在哪能拿到呢？我们看一下这个phone，你看除了我们就是定义的这个integral grade和save between disable的这两个就是数据模型之外，都这两个数据模型都是我们在这显示定义的，对吧？啊，它这里面还有一个隐含的数据模型叫root。

Root是什么呢？打开看一下，你看它是不是可以把这个路径当中的内容拿到啊，Pass对吧，然后query啥也没有parameters诶有ID等于二什么就是它呀。啊，ID哪来的ID是占位符啊，我们在路由当中。这块写的不是冒号ID吗？啊，这块你如果写冒号ID，那么占位符就是ID，变量的名字就是ID，所以这个地方就叫I didd等于二，所以怎么拿到这个二这个值呢？叫Dollar root parameters.i did就拿到这个二了，那我们在刚才这个位置。刚才这个位置啊，咱们其实就是this.dollar root.parameters点。

就拿到这个二了啊，但是这个前提是什么？就必须是回显状态的时候才有ID，我们来看一下啊，现在是回显状态才有这个ID，如果你是新增状态的话。新增啊，这边不是create嘛，对吧，新增状态你看这个地方有ID吗？都是空的，就没有ID，因为这块你也没传ID对不对，所以呢，我们什么时候调用它呢？当这个ID存在的时候，我们调用这个方法，当ID不存在的时候，其实就是新增了，当ID存在的时候，其实就是回想。这样啊，当ID存在时，当路由中。存在ID属性的时候，就是明显表达是吧？啊，我们就需要调用需要调用危险数据的接口。

好，那么所以这个是回显状态，然后调用它，调用它之后呢，我们来看一下这边。啊，这个是新增状态啊，没有数据。然后这个呢，是回显状态，这个数据回显回来了，对吧，我把刚才这几个删除的数据给他还原一下。这个呢是零。零零。好，然后呢，看一下。看这个。啊，是100多少万的修改，你看这数据是不是回想回来了。要看这个散万这个修改，看数据是不是回答回来了，很简单啊，那怎么就展示出来了呢？它有双向数据绑定啊，你只要把我们发白ID的这个拿后台拿到的这个直接复制给他就行了，复制给他就意味着复制给他了，对吧，他就是他嘛，调用制给他就意味着这数据直接绑在这里面了，那它不就展示出来了吗？所以这个没有。

GS的好处就在这，你你没你不用去做这个页面的一个展示的处理，你只要把数据绑着就行，然后绑着之后我们只要给这数据能附上值就可以啊，它就显示出来了，所以呢，这个就是引入API模块啊，然后呢，从API模块里面调这个get白ID啊，然后呢，从里面拿这个数据做上下数据绑定，回想我就写好了。