day16/下午/324-尚硅谷-尚融宝-在前端进行借款额度的判断

好，那么我们接着上午的来讲，上午呢，我们是在咱们当前的页面上，荣宝这个页面当中呢，来刷新一下哈。好，看这个用户呢，还是登录状态，这样的话咱们就可以正常测试，那么尚荣宝的这个页面当中呢，我们在这个位置啊获取了借款额度，那现在呢，我就要填写这个表单，比如说我借三个月，然后呢，还款方式呢是嗯，一次还本付息哈，然后资金用途呢是旅游，然后年利呢是12，我就默认了，然后呢，您最多可以借多少元呢？这边是10万元，那假设说我这边就写2万元，那应该没问题啊，但是如果我一旦填20万元了的话，那系统当中呢，应该给我一个提示，就告诉我你的借款额度呢，最多是10万元，你不能够添2万元，并且呢，把这个两二十万元呢，给我改成10万元啊，现在呢，咱们先做这样的一个需求，那这个需求呢，在前端完全就可以实现了，我们呢，在我们先把这个所有的页面都关闭掉，我们先找到我们上午。

的这个页面S2B，然后user啊好，那在这里面呢，我们其实是要。监听这个借款金额这个input这个字段，那所以呢，我们对它进行watch啊，用户一旦输入的啊这个值超出了我们的借款金额的最大金额，就是超出了这个金额的话，那么我们就把呃，用户的这个输入的金额呢，再改回到最大金额，并且呢，提示用户啊您的借款金额呢，已经超出了应有的额度，所以那接下来呢，监听这个之前咱们学过，就是我们可以在这地方呢写一个watch。然后watch谁呢啊watch，比如说我要watch这个borrow in for，那你这块呢就写borrow in for对吧，比如说你要watch active，那你这边呢就写，对啊，那我现在watch的呢，是borrow in for下面的amount，好，那么这个borrow in for这个对象下面的amount属性，我怎么来watch呢？如果你这样去写的话，那么很显然这个是不符合语法规范的，因为这块呢，在javascript当中，它应该是个标识符的名字啊，比如说在这块它就应该是一个方法名啊，但是这块中间因为带点了，它是。

不是标识符的有效字符了，所以像这种带有特殊字符的这种标识，在javascript当中呢，一般我们会用引号把它引下来，所以你这样的话呢，就跟这个咱们普通的这种，比如说我我要我要这个监听active就跟普通的这种监听呢一致了啊，那因为这种普通的属性的监听呢，它这个属性里面没有特殊字符，所以直接就用嗯标识符的名字，然后圆括号大括号我们就可以监听它了，但这个里面有特殊字符，我们就必须在外面加上一个单引号或者是双引号都行啊好，然后呢，这样的话呢，我监听的就是它下面的这个属性，那接下来呢。

监听的值在哪呢？它会自动的被注入到这个参数当中，所以Y6呢，就是我们监听到的值，那我们来判断一下，如果Y6大于this点我们的借款额度，我们之前绑定到了这个位置，所以如果Y6大于this，点我们这个借款额度的话，那么实际上呢，我们就应该提示用户了，提示什么呢？就this.dollar啊。然后呢，您的借款额度不足对吧？啊。然后呢，这个到这个地方呢，我们还可以接收第二个参数，第二参数这块呢，我们可以写type啊，然后ER这样的话呢，这个就是一个错误类型的这样的一个提示，那么你像这种提示呢，之前我们也说过有一个简写的形式就是第二。

Alert。点A对吧，然后把这个您的借款额度不足写到这也可以，所以这种写法呢，和这种写法都可以啊，但是上面这种写法呢，还有一个呃，好处就是这块呢，我们还可以写靠外。靠是什么呢？就是当这个错误信息弹出完毕之后啊，然后呢，我们再来回调，回调什么呢？就是把这个借款额度呢，给他改回去啊，当然了，你不在回调里写就行了，因为他们其实嗯。就是。

同步发声也可以啊，一会我再说一下同步发生的这个这个场景，然后怎么改呢？就是改这个，把这个我们监听到的用户的输入它，再给它改回去，就会写this，然后呢，给它改成什么呢？给他再改成我们的额度，就是一旦你输入的这个额度超过了这个额度，那我们就把你输入的这个额度。改成最大额度。明白吧，就比如说最大额度是100，然后你输入的是101啊，他这面就一看监听到了101大于100了，那么马上就弹出您的借款额度不足，然后紧接着就把这个额度呢，再给用户改回去，就是把相当于把用户的输入呢，再自动给他改到啊这个合合理的范围内啊，所以接下来呢，我们先看一看有没有问题啊。那比如说这面呢，我输入啊个十百千万十万这都没有问题是吧？好，那我输入100001，大家看这个地方呢，就会出现您的借款额度不足这样的一个提示，并且这个地方呢，还没有改啊，当我点击确定的时候呢，其实我是希望这块改的，但是实际上呢，后台已经报错了啊，大家先看一下我们这个后台这个报错。

啊，这些这些问题大家先不用管它啊，我先把它清掉，我们主要看这个监听这块的这个问题，因为还没开始监听的，所以刚才那个错误呢，和这个还没有什么太大的关系，所以呢个十百千万。然后接下来呢，一大家看，然后这块呢，就弹出您的借款额度不足了，对吧？好，然后接下来呢，我点确定，然后大家可以发现这块呢，它弹出了一个错误，叫做borrow in full of onDeFi。Borrow INF for of ondein，这borrow info是哪个，也就是说一个ondein的值，它点的borrow in for，我们来看一下，那是this.borrow for，也就是说他认为呢，This是unDeFined的，那这个问题呢，就是一个很常见的一个问题了，呃，这个this明明它是有值的，它指的就是我们view的上下文，但是在这个地方，这个this呢，就变成unDeFi了，这是为什么呢？是因为它的作用欲发生了变化，这个this的作用域呢，是在这个watch的这个监听方法当中，而这个this的作用域呢，是在这个call back当中，这个this呢，实际上它的上下文是这个call back已经完全发生了变化了，所以这个也是作为Java程序员哈，啊，你可能不太熟悉的地方，这个就是javascript的作用欲啊，作用欲它呢在这个是个回调方法，回调方法呢，它有自己的作用欲和外面的这个呢是不一样的，大家就先这么理解啊，因为这个作用欲练的这个概念呢，加。

课当中也是属于比较高级的内容啊，我们呢，一两句话是不太明能说清楚的，所以大家呢，在这个地方呢，就暂时理解为call back里面的this和call back外面的this根本就不是一回事，那怎么办呢？我们需要把这个this呢传进来，那怎么传呢？我们可以在这个地方定义一个其他的变量，比如说下划线对的一对，当然这下划线对并不是一个特殊的关键字，是我们自己义的这么一个值啊，还不能写在这，就这好是我们自己定义的一个变量而已，或者是有的时候我也愿意写that是吧？啊，That等于this，那这个呢，就是我觉得还是写这个吧，啊这个我写的比较多，好，那这样的话呢，我们就在。

这个作用于的外面把this呢赋给了我们自定义的this，那这样的话呢，在这个内部的这个函数当中，这个this呢指的就是外面的days，否则这个days和外面这个days完全是。

不同的作用欲，它不是一个概念哈，好，然后呢，所以呢，我们这个days呢，真正才指向外面这个this，这样的话呢，才能够拿到我们的这个borrow，然后接下来呢，我们再来看一眼。好，先把其他的错误先给它忽略掉啊，好，然后这些错误先暂时给它忽略掉，然后接下来呢，输入个十百千万十万零一，大家看这个错误先忽略掉您的借款额度不足，对吧？然后接下来呢，我们来看一下这个里面的文本啊，就是当我点击确定的时候，大家看是不是又给我改回去了，改成原来的一半了啊，那为什么是点击确定的时候，那再来一遍，你看这样啊，呃，点确定，为什么是点击确定的时候，他帮我改回来了，因为在这个位置呢，我们是写在了call backck里，所以什么叫call back call back呢，就是这个alert的确定按钮被点击的时候，那这个call back呢，就会。

自动的发生明白哈，所以这块呢，是我们的这样的一个啊业务逻辑啊好，那这个业务逻辑咱们写好了之后呢，也就说明这块用户就不可能输入一个非法的一个值，它一定会在它的这个额度范围内去输入它的金额啊，当然了，这个只是一个前端的控制啊，那用户其实呢，他是可以绕过前端的控制啊，然后呢，直接向后端发起请求的，比如说自己写的页面，他就开发比较了解，他不用你这个页面他自己写了一个表单页，然后直接做提交，那就没有前端的这些校验了，那么这样的话，系统就存在一些安全隐患，所以呢，像这种校验，关键性的校验，我们不但要在前端做，前端主要就是提升用户体验的，它并不能够去啊这个啊，将这个安全性提升，那么将安全性提升呢，我们在后端接口当中还要再一次对这两个值进行比对和校验，所以这个大家要知道啊，所以那再次强调一下前。

端只是为了提升用户体验的，那么真正对安全性做校验呢，还是要在后端再做一遍的，否则的话，用户绕过你这个前端，那你给他颁发了10万的额度，他有可能能借出20万块钱，对不对？好，那这块呢，就是我们刚才说的借款金额这块的一个自动修正啊，然后。这个借款金额这边自动修正了之后呢，我们接下来再看其他的问题啊，因为刚才我们页面当中呢，还有一些多多少少还有一些这样的错误，是不是，那接下来呢，我们来把这些问题呢，统一给他解决一下啊。