day19/上午/376-尚硅谷-尚融宝-投资人投标的前端实现

好，然后接下来呢，我们来看一下啊，在这里面呢，我们刚才那堂课呢，呃，做了标的详情的展示，以及投资收益的计算，然后接下来呢，我当我们点击同意的时候，这个立即投资的按钮呢，就呃可以启用了，启用了之后呢，我们就可以针对我们的这个标的啊进行投资了，那么整个投资的过程和我们之前所说的啊，这个账户绑定以及啊我们充值的过程其实是类似的，所以接下来呢，我们来看一下这个投资，咱们先走个前端吧，如果先走个前端的话呢，咱们就最后先看一下前端。你看这个啊，好，那么大家看这段代码主要看哪段呢？看这段，看这段是不是很眼熟啊，对吧，是不是前往资金托管平台嘛啊然后接下来呢，就是呃，当我们的这个action等于confirm的时候，我们呢就提交一个远程的一个请求，对吧？然后这个呢，是我们投资的金额，呃的相关的数据，然后呢，这块呢，就是得到表单自动串之后，把它渲染到页面当中，然后做表单子自动提交，对吧？啊所以我们就先把这个方法整合进来啊，但是这方法前面还有一大堆is else，这个呢不要求大家自己写，但是要求大家能看懂，所以呢，我这边呢就给大家一点点好，大家看懂就可以了，然后这边呢，我们找到投资这个方法。

在投资这个方法里面呢，我们先来去整合，就是我们比较熟悉的这部分内这一部分内容。粘的别粘错了，应应该我看应该粘到哪啊，应该粘到最后的那个大括号之前是吧，别粘到这了。就粘这就行好，嗯，整个这段代码是之前我们写过很多次了，所以我们直接来试验一下。

还行。然后呢，比如说就投100块钱，然后呢，点这个立即投资，它是不是就弹出这个嗯提示呀，然后当我们点立即前往的时候，他是不是正常应该去前往资金托管平台啊，但是因为我们还没有去做什么，也没有去做那个接口，所以那肯定不好使啊，那这是一个，然后接下来呢，我们再来看一下咱们前端整合这个部分的其他的内容啊，首先这个部分就是判断这个用户是否登录，首先你你必须是登录的，当然了，咱们其实啊，这个是一个间状性的校验吧，如果咱们这用户不登录的情况下，实际上呢，它是看不到这个投资界面的啊，但是咱们也是为了防止一些这个恶意用户，他特意破坏咱们的系统吧，然后呢，咱们就。

咱们就做这么一个判断啊，你看进来之后呢，实际上正常情况下呢，我们还没有进行完整的判断啊，这C错的，后面咱们还会判断，那当我们正常用况它显示这个页面的时候呢，实际上它是不能够展示那个投资页面，明白吧，一为我们做完整了之后，我们再来看啊，然后接下来呢，在这个地方中有问题把它全关。就是这个开发的时候，他有时候他这就这样。可能发布到身上的句号。来，先看一下我的图片。嗯，行，一会再说这个这个问题啊，Except you in啊他这个是这样的，就是好像是在哪个地方啊，有一个对Jason数据的一个解析，Cookie不存在是吧？对，主要是这这不就是Jason嘛，是吧，Jason，我们是cookie里面有Jason嘛，对吧，然后他说I expect to。

U就是不希望看到的一个字符，U在这个Jason字符串里面，艾特和零，然后因为现在我们好像啥也没有，因为cookie呢，它那个值是onDeFied onde它解析不出来，解析不出来的话，它第一个字符串第零跟位置的第一个就是on DeFine是不是是不是是不是U啊，嗯，明白这意思吗？就是那个cook的值，现在是奥方定义啊，然后所以呢，他试图去pass那个Jason的时候，Pass的时候pass不出来最高的这个错误了，那嗯嗯，他是在哪pass的。

这个怎么看，我看一下啊。Has，那个地方咱们一会儿给他判断一下就可以了。嗯，在。找一下。这块吧。是吧，那这块怕也就是说，嗯，好像就这一个地方怕的地方吧，那就是他那就是判断一下。User in，当当他有的情况下咱们再pass，没有就不用pass，这个意思啊，当它有就如果是on the find的话，在word环境下它也是false啊，那如果是非on the find的话，那么在word环境下它就是树，所以这个地方就是当它有的时候，那么我们在past，当它没有的时候，我们就不pass。

他关上。好，大家看这样是不是就解决了刚才那个问题了啊，好，那这个就是在用户未登录的情况下，它实际上就不会展示那个，呃，投资的那个文本框明白吧，他不会展示的啊，但是我们为了做健康性校验，就是在未登录的况下，我们呢，就也判断一下，当这个user in后，如果啊没有的情况下，就直接让他去登陆页啊，什么情况让他去登陆页，就是当他点击投资按钮的时候，先判断一下库里有没有值，如果里库里没有值，直接就让他去登作业啊，这个怎么怎么测呢？我先把这段给它拿过来啊。拿到哪拿到这款，是不是拿到这块啊，那也就是说当我点击投资按钮的时候，什么时候能点击投资按钮，现在你点不了，必须得登录才能点。

嗯，这个页因为有一些功能没做完啊，所以它就它就卡在这儿，就是这页里面不有很多错误们大家知道吧啊，它就卡在那啊，晚上上这来，然后幺三七六六六六三零三四点进去之后呢，然后点我要投资，然后点这个。好，正常情况下呢，我们这个点投资是没问题的啊，点投资他就谈这个了，但是呢，如果假设说我现在已经登录了，然后呢，由于某些原因，我做了浏览器清理工作。因为你们经常就签下哭黑啥。啊，清了，或者是在这个地方历史记录对吧，清了啊等等这样的一个情况的话呢，那么我们就可以。

点击它了。它就会跳到登录页，然后这块还是刚才那个问题，就是刚才咱们不说这个页里面有很多问题嘛，有很多错误嘛，他就一直就就漏的不进来了，但是实际上我们在点击这个页面的时候呢，他在试图往这个登陆页跳啊，他试图往这个登录页跳，只不过现在对再跳过去，就是他跳别的页可以跳过去是吧，我们点别的页跳过去，但是一会我们全都测好了之后，要不然我们看一下或者是这样吧，怎么测呢？这样测吧，Pencil色行吧，这样能看出来打印一下，然后跳转到登录页面啊。这牌好一些，太难了，试一下，然后呢，嗯，现在其实点进来之后呢，其实就没登陆啊，没登录呢，它又没有那个是吧，那个，然后你还得重登录一下，所以这个测试大家一定要耐心啊，再重登录，二三七六三六三一二三四六点登录，然后再进来。

接进来，进来之后呢，就会有了，有了之后呢，听一下这个cookie是吧，这cook可清一下，好，然后接下来呢，同意，然后呢，看看是吧，打没打印刚才咱们那个跳板的录页啊，然后点投资是不是打印了，打印了就说明，如果咱们这个页面之后开发完了之后，其他的功能都好使了之后，那么这面呢，其实就已经走到了这了，走到了这了，它要正常能跳转，它就跳过去了啊，所以说后面咱们其他功能都开发完了，这边你再可以测一下啊，好，这块是一个判断一下，就是如果当前这个付费都不存在了，用户登录信息都丢失了，那么直接就给它跳转到登录页啊，就这样的一件事情，这第一个，然后呢第二个事情。

就是判断当前用户是不是投资人，如果当前用户不是投资人，他是借款人的话，那么我们其实是也没有办法让他执行投资的，所以说这个地方呢，把它加上，当然了，目前为止呢，我们现在这个页面做的呢，就是如果是借款人的话，他其实根本就看不到那个投资方，所以说我们其实是做了双重保障，就第一重保障是他连看都找不着，第二重保障是即使他能看着了，他点击这个按钮了，他也没有办法进行投资。明白哈，所以呢，现在我们就用一个借款人进行登录来试一试啊，他就在这个地方退出。这款137681631123456，好像是有啥没有632好，然后接下来呢，我们来到刚才这个我要投资这个页面进来，进来目前为止呢，这个地方呢，我们是判断了这个监款人的状态的啊和投资人的一个这个状态的，所以我们就根本就看不见那个呃按钮，但是假设说我们能看见啊，嗯，怎么才能让他能看见呢？就是在这个页面当中，咱把那个嗯判断呢给屏蔽掉啊，就是你测的话，你一定要充分的测。

就是这个是不是啊啊这这句话你把它屏蔽掉，会把它简介出去这样写，这样写的话呢，那就是无论是借款人还是投资人，我们都能看到这个框了，然后接下来呢，那我现在作为借款人，我点立即投资的时候，他要告诉借款人无法投资，明白这个意思吧，嗯，所以这个是这样的一个测试。嗯，然后接下来呢，我还原回来，然后下面这个步骤呢，就是判断是否超慢，其实就是什么意思，这个是标的的已投金额，再加上本次的投资金额是否大于标的的总金额，你投一共标的的总金额100万，然后现在呢，已经投了99万了，你非要投2万，那超了。

那就是可用，就是那个可投，呃，我看一下可投金额不足，就标的可投金额就剩1万了，一共100万的标的已经投了99万，那么现在只有1万是可投的，然后你就只能投1万，你不能投2万了，就是这个意思，明白这个意思吧，啊，所以呢，这个是判断是否啊。这个超卖了啊好，然后那我们来试一下吧，还得退出了用投资人啊137。

好，然后接下来呢，比如说这个标的一共多少钱个十百千万，10万是吧，那个十百千万。100001块钱是不是啊，就是现在已投金额是零，然后那我再加上我这个钱，那肯定超了，超了的话呢，那我就勾上点投资，哎，等一下我保存稍等啊，我给你加回来吧。嗯，稍等啊那句话你往你往这。对啊，还没粘呢，粘过来啊。这句话这了解是不是就我就跟大家详细说，但是这块我也说一下，就是这块加了个number哈，这这一会再说，然后我我先给大家试一下。把它关上。然后测嗯，各十百千万十万是吧，啊这一次然后点击，然后点击立即投资，然后他说标的的可投资金额不足啊，然后呢，这块假设说我这样去加吧，看守所。

点老，然后把他俩加起打印出来，然后接下来呢，我再打印一份。把这个给他。括号括号稍等啊，没问题吧。不对，我写哪写这啊，谁写的写这对不对，写F外面啊，就我要打印一下这两个纸啊，要打印一下这两个纸啊，咱们来看一眼。

F12。加上应该是零是吧，是零的话有问题，然后点击这个立即立即投资啊，点击立即投资，然后你看你是不是有问题，这个是零加个十百千万加1万，这个也是零加1万，但是一个是数值相加，一个是字数数相加了。明白明白为什么要转一下了吧，啊，那这个怎么看出来的呢，就是词汇的当中呢，这个坑其实挺多的，那么我们刚才这个1万是不是在投资金额这里面填的呀，我们看一下没有这个地方。嗯，投资金额这个叫做外么？你看这是什么字符差知道吧，方是文本框当中的值，它实际上出来之后都是一个字符串的形式，都是字符串的形式，而且你要确认它是什么格式，你就要看这它是字符串，你像这个这个就是数值，这个也是数值啊，这也是数值，这就是字串，所以在这词script当中有很多种这个数据类型转换的方式，那么这个里面大家就了解这个number，它就是将字符串转成数值的一种最简单的方式就可以了，然后那这样的话呢，我们用number加上前面的这个investment amount，当然investment你也可以去单独看一看它的是什么数思，那那怎么看land，然后investment这个是什么数值，对吧？啊，所以说这个就不用转了，然后但是你这个呢，你就得转一下啊，所以这个是数据类型转换这块。

那这个过程其实嗯，就是大家如果真是自己写这个代码的话，就肯定不是说只望大家一开始就能够知道这件事，都是在测试的过程当中发现的，那写的时候发现加起来不对，然后呢再去找解决方案，明白吧，啊所以呢，这个写代哪个流程是这样的，就是先先把它实现出来，然后有问题咱们再调试，再修改啊好，然后这块呢，是判断是否超慢，然后接下来呢，前面我们说需求的时候，是不是还有一个需求，叫做判断是否是100的整数倍啊好，那这块呢，就是判断是否是100的整数位，好，那首先呢，我们就判断一下。

这个它如果是零也行啊，然后或者是呢，它呃，除以Louis amount Louis amount就是100，我们在这个land当中之前维护的一个固定的值啊，我们可以看一下在这面的呃，Land。然后这块有一个100，这呢lowest amount对吧，它就是100好，所以在这面呢，我们就用amount，嗯，就这两个。

这面呢，就是你输入的那个那个投资金额。试一下。对对吧，这个弄框啊，确实叫他这个你输入的这个投资金额，然后如果除以100，再找个面方额啊，默认值是100，所以你进来的时候，你看这个地方默认值是100，啥意思，就是进来的时候。这块先给你填好一个100，那最少就100啊好，然后接下来呢，嗯，除以这个lo相等100是吧？啊，如果不等于零，然后或者是等于零，什么叫等于零，就是你一分钱都不投，你就点投资，那也不行对吧？或者是说呢，你投钱了，但是你投的钱呢，不是100的整数倍也不行，明白这个意思吧，啊都会提示你投资金额必须是150。

好，那这块呢，是我们这个投资后面的一个判断，这这是啊好，那所以我们可以测一下零也不行啊，然后是100的，不是100的整数倍也不行，这是零对吧，投资金额必须是190倍，然后呢，如果是99。这肯定也不行，对吧，投资金额必须是190倍，好，然后再接下来呢，就是余额的判断，余额的判断就是你要投资的金额和你的余额相比足不足，比如说你余额是个十百千万十万，然后你要投11万，那肯定就不行了，当然了，我们是先判断了这个十百千万十万先判断的超密超卖是不是，所以说那目前咱们现在这种情况可能是判断不到余额，那所以说咱们可以把余额这个手动先改一下，因为再改回来，那这样的话就可以判断到，也就是你这个余额必须得比他少，否则的话，在这超慢这块就给拦截下来了，然后所以呢，我们就嗯，为了测那个分支呢，我们就把这个用户的余额呢，可给他改一下。

呃，他的余额是10万，我们给它改成1万行吧，好给改成1万，然后接下来呢，这里面我们给它关掉再来，好然后这边呢，就个十百千啊这个可以了，好个十十百千万是吧，然后投了10001对吧，然后同意，然后列立即投资，还有投资啊，这个是投资金额必须百之倍的，然后那我们就一一万一一一一起这多少钱一一千行吧，这个是100的整数倍是吧？啊但是也没超卖啊，然后呢，我们来看一下，然后投资，哎，等一下我说没加过去余额的判断啊，加过来没加哈，你粘一下。

据了解哈，就判断的东西多一些，但是应该还不算难，所以就11000行吧，啊，它既没超卖，又是100的整数倍的，那么它就会接下来判断余额。然后点投资啊，余额不足请充值是吧，然后点马上充值，然后上去充点钱你再投明白吧，嗯，那所以这这个地方咱们再给它改回来啊，一定要给它改回来，因为你这个余额一定要和汇付宝同步，你改完了和汇付宝不同步了，一会儿你在后续做操作的时候会出现问题的啊好，然后呢，这样的话呢，我们前端的这几个判断，我们就判断完成了，所以这块是前端的整合啊好，那么后端整合这块我们下午再说，因为后端整合这块还挺多的内容，所以呢，我们上午。