尚硅谷区块链项目之(基于Token的)硅谷投票系统 (13)

好，那现在其实大家会发现这个已经比较算是一个比较完善的一个页面了，对吧，尽管我们现在还没有具体的那些投票的动作，那我们现在其实可以看一眼啊，我先。我先在里边去起一个页面，我们一起先看一下现在长什么样。嗯，我觉得叫川佛啊，呃，大家大家说这个我们应该怎么启动，我们昨天已经都已经编译和部署过了，对吧，那现在启动其实非常简单，我们是不是就是NPM让D就可以了。起一个外派server。这个可能会相对慢一点，那我们这边要记得把这个。以太坊的节点打开对吧，保证我们这里边是在运作的一个状态，我看一下block number应该还没变啊，没有开启挖矿。

Ipad在启动的时候确实是会稍微有一点慢。呃，这里还是给大家再强调一下，就是大家注意这个外派打包的路径，呃，我们这里真正的脚本写完，呃，这不是脚本啊，就是我们的index.js是放在scripts脚本这个目录下边的，但这就是我们所有的JS的路径，它在哪里指定，再给大家说一下，强调一下，大家看这个安T对吧，是在onepa perfect.js里面指定的，所以我们如果要是想在其他的目录去写自己的JS的话，改外派这里的指定目录，那到时候他打包的时候就会去相对应的地方去打。大家看到它输出的是app.js对吧？好，那么我看一下这边起来了啊，好，这就是我们当前的这个这个样子，当然这个就是有一些页面大家还可以去做微调，对吧？那大家可以看到我现在已经可以查出来每一个人，我这里边Alice是300票，Carry是十票，Bob是零票，对吧？这是我当前这个区块链上的一个状态，那大家看这边tokens的信息呢？Tokens for sale，呃，是1万个，我这里边已经卖了的有有4200个啊这这当然是我之前在冰行里面试过的，对吧。

然后这个单价，诶，那大家看到这个单价好像显示的有点不合理，对吧，这个显示的应该是尾是不是，那大家就想到我们是不是在这个就应该在JS里面改还是HTML里面改，对肯定是在JS，所以我们在JS里边看一下我们在哪里把它售出来的呢？这里这个单价对吧，price.to string，那我们是不是应该要把它做一个转换WEB3。From尾对吧？对，Price to string，然后后面我们跟一个eer，把它转换成以态对吧？后面它总会自动的去少一个括号大注意一下Vs code里边有这些问题啊，好，那么后边我们是不是还可以再给它加个单位，比方说我们就显示比方说大写的这个ETH对吧。

那这应该就显示的是这么多仪态对吧？好，那么这里面大家还注意到我们好像这里的这个balance没有显示出来，对吧？那我们看一眼它出什么问题了。大家随时要开启啊，我们这里边显示说。Ma ma mamak web3对象，它不支持同步方法ETH get balance，所以这里边大家就要注意了，那这个ETH get balance我们还不能用同步方式调用，对吧？它必须得用就是一个call back的方式，作为call back的这个参数返回才可以，我们这里是直接用了，就像这个之前的这种调用方式，认为它是返回一个promise对吧，然后直接去点赞了，那看来travel没有把这个get balance这个给我们包起来。

那好吧，那我们就还用这个老办法吧，大家还记得之前我们是怎么用的吗？我们这样对吧，把它作为一个这个回调函数方式返回回去，那本身零点二零点零点二零点几的这个版本里边，它应该是一个error优先的一个回调，对吧？所以这里我们还是记得按之前的这个模式来写啊，一个error一个balance，好，那相当于这样，我们就这个balance，相当于是我们的一个之前的result一样的东西，对吧？然后我们用这种回调的方式再把它重新拿回来，我们检查一下括号对不对。哦，这是这个回调应该没问题对吧，那当然大家这里看到这个balance返回的时候，是不是也应该是尾啊。啊，所以那我们要记得的话，我们就把它一下都按上面这个方式先写好，省得到时候又麻烦对吧。

Ether。好，它后面又少了一个括号，我们还是给它加一个单位吧，ETH，好，现在我们来看一下我这里好像。就没有没有自动刷新啊。你这个还是没有刷新，所以重启一下，其实真正wipad，它其实大家可以看到它启动的时候，启动这个DA server，就D这个模式的server的时候，其实大家会发现它是不更新我们这里的这个build下边的文件，大家如果仔细观察的话，可能会可能会发现你看这里我删掉了那个app.js和index.h.Y，这里没有自动生成。所以大家注意一下，就是deve deve server这个模式，它其实就是直接在内存里边给我们模拟的，所以在这个过程当中，有些同学可能会发现，其实我们这里任何的做更改，其实它有时候会反应的特别快，对吧？呃，随时就能体现在我们那个页面上当中去，所以这也是就是关pad，它这个DA都是比较好使的一个地方，但有时候确实会发现好像会不太好使，它这边可能就没有及时更新，所以遇到这种情况我们大家，诶，大家可以看到这里我已经刷出来了，对吧，我没有再去刷新页面，但这里已经显示出来了，所以大家看到我们这里的单价是0.01ETH，这符合我们刚才的这个呃，设定的这个值，对吧？然后balance in contract，那大家看到我已经卖出了4200个token，我每一个卖0.01，那我是不是当前balance就应该是42个ETH啊，所以这个完全符合我们，而且大家发现我们这个肯定不是自己算出来给填进去的，我们就是当当场查的对吧。

我们JS里边就是去调用它get balance方法查出来的，所以这个就说明一点问题没有，那当然在这个页面大家可以大家看一看啊，这个我们如果看HTML直接大家看不明白的话，看这个页面就一目了然了，对吧？我们的页面布局是怎么做的？上面标题啊，当然这里我没改啊，这个还是robson的，这个我这里应该改成自己测试网对吧？那上面这一部分，那这个很简单的，这是一个一个user guide，相当于是一个引导，引导的条款，呃，一般情况下做APP，现在这个引导页都应该是一个单独的页面了，对吧？那这个我们就是一个简单实现，大家就是单一页面，大家想做复杂的话，自己可以扩展。

然后大家看下面这其实就这就是我们说的几部分，首先最重要的两部分是我们一开始加载的时候就要售出来的，哪两部分的candidates的信息，还有一个是token的信息，大家看到这个我们都是实时加载查出来的，对吧？所以这我们已经实现跟我们以太坊节点的一个通信了，这边是。而且大家注意，就是我们这里边的信息，Candidatedy也是从以太坊就是我们合约里边真正查出来填进去的，对吧？我们在JS代码和HTML代码里边有见到Alice Bob这些这些hot code的参数吗？没有见到，对不对，我们都是实时从合约里面读出来，然后添加进去的，而这是真正一个应用正确的一个表达方式，而不是像我们之前写简单合约的时候，简单投票的时候，直接就HTM2里面直接写死，对吧？那那种情况，如果大家做出来应用让别人一看，那肯定你这个就不靠谱嘛，因为大家知道这个HHTM2的这个源码，大家都可以直接随随随便便都可以看得到，对吧？这些东西都是别人都可以扒得到的，好，那么大家可以看到这些东西，我我们都查出来了，那接下来我们要实现的肯定就是应该下面这一部分，对吧，真正我们要上面只是一个信息展示，下面这一部分才是真正用户要。

要用到的去做操作的部分，那哪两部分呢？一部分是post candidate，那这个是我们要去真正投票核心功能，那大家可以看到这里边有两个文本框，一个是看电影name，一个是你要给他投多少token，对吧。

呃，这里大家注意，这里我们是有一个本来有一个提示信息的，大家知道这个肯定就是用了一个placeholder对吧，一个文本框的一个属性。大家知道这个吧，我们在HTML里面看一眼啊，文本框。我们的文本方在。这里啊，大家看这个text ID class后面还跟了一个place holder。大家用过这个是吧？没用过的话大家看一下，这个很简单，后面这个显示的信息是不是就是我们在这里边默认的显示信息，对，所以大家呃，注意一下自己在这个前端页面设计的时候，呃，那当然了，这边还有两个功能，你要投票的话，至少你得先有token啊，我们这里边有一个BY的一个按钮，去买多少token，这里要输入的就是我们的要买的token的数量，对吧？

不是以太数量对不对，那大家能想到这个动作是什么样的，我在这里说我要买1000个token，我一点半，然后是不是我这里有ma mask，这里应该ma MAS弹出来告诉我要花多少以态啊，所以大家注意啊，这个这个过程，这个产品流程应该是这样的，这才符合我们直觉，对吧？所以大家注意就是这里用户不需要知道他需要花多少以太，我们给他算，他只要输一个我要买多少token，然后我们会做一个计算，把这个数作为他发起交易里边要支付的这个仪态数量就可以了。所以我们现在就来在JS里面实现一下这个功能，好，我们首先要去做一个好，就在上面查函数了，对吧？下面这一部分就是，呃，Dollar document ready，这就是我们一开始页面加载的时候要显示的内容，上面这就是我们跟这个页面交互的一些内容，所以就是要实现这个button on click方法，对吧？我们看一下这边我们定义的叫什么，这个名字不要搞错了啊。

这个去哪了？Vote for在这里对吧？On click，这是vote，我们先实现BY。就叫by token，我们把它复制一下，所以我们这里要实现一个function by by token这样的一个函数，那它里面要做什么事情呢？主要就是要把我们就是这个用户要买多少token读进来，然后我们提起一笔交易，去调用我们的那个拜方法对吧？所以在这个是非常直观就能够想到的，好，那么接下来我们看。By token的时候，我们首先应该拿到当前用户输入，对吧，他要买多少token，好，我们定义一个局部变量，比方说就叫做tokens to，拜吧，等于还是用j query的方法，这里边看一下我们页面里面定义的这个ID叫什么啊，前面的这个input的ID对不对，就叫BY。

好，那么我们这里就叫BY，然后它点value，这是不是就把刚才输入的这个值拿出来了，呃，大家注意我们这里的值都没有做校验啊，就真正大家做项目的时候，就像这些输入文本框，肯定大家要做一个正则判断啊，对吧？校验它到底是不是一个数啊，是不是我们合法的输入区间啊，这些都是一些小问题，大家都自己再去做校验对吧？把这些东西做好做完善，我们这里就实现功能，就不给大家敲那么多代码了，好那么这里我们就可以直接想到，呃，这个拜。

拜，这个token的时候，接下来我们是不是应该还要算一下，真正我们发起交易的时候要有多少以态对不对？好，那么我们再let一个变量，比方说叫value吧，那大家说现在他要买这么多token token To Buy，我们真正要提起交易的时候要给多少以太呢？这里是不是应该乘以我们的token price啊，对，我们前面定义的token price对吧？所以乘起来，这就是我们要转账的时候要带的那个value，好，那接下来我们是不是就可以发起交易了，voting.deploy的，这都是常规操作啊，就大家都应该很熟悉了，对吧？呃，那这里边我们接下来应该拿到我们的voting instant，然后去做操作，同样voting instant点应该是我们有一个BY方法对不对？

大家还记得我们那个合约里边实现的是叫拜拜，大家注意这个名字千万不要搞错啊，就是有时候大家可能看到我带大家敲的时候，有时候会跟课件里边可能名字不一样，那名字不一样，这个大家就及时的去，就是最好敲的时候再确认一下自己的合约里边这个方法叫什么名字，HTML里边定义的那个on事件方法叫什么名字，然后ID是什么，大家都确认一下，好，这里就叫BY，所以我们就是点拜对吧？好呃，点拜这个没有传入的参数，那我们是不是就可以直接传入一个交易对象就可以了。对，所以大家可以就是把这个value传进去啊，我们前面这个还是尽量不要用value了啊，或者大家用对用一个下划线，这样尽量不要有这个相同的标志符，然后我们value的话就直接传当前的value对吧？诶大家注意这里边我们的这个value大家要注意啊，这里得看我们的token price到底是什么对吧。

我们可能是希望给下面显示的时候，这个ton price是以太对不对，所以我们存的时候应该也是用以太去存，所以我们这里边呃，啊这这个到时候我再大家再看吧，到时候如果大家觉得这个发现有问题的时候，我们到时候再调啊，我们先这么先写上吧，这个比较直观啊，所以就是我们先给一个呃，Value，那有了这个value之后就可以发送交易了，对吧？好，那么我们在这里就点BY。为什么把刚才的这两个都删掉了？然后就可以点赞了，对吧，拿到这个结果之后，这个败的返回其实没有什么真正的返回对吧，所以我定义一个箭头函数其实也可以没有什么东西好，那么接下来他拿到这个就真正提交交易成功之后，我们是不是应该去把。

就当前的内容要去做一个更改，对吧？呃，现在还不到更改的时候，我们是不是还得先去查询一下当前的这个这个值啊。所以web，呃，大家看是应该用这个instant对吧，Voting instant。大家想一下，我这边买完之后，我应该改这个页面上的哪几个东西呢。我这边一点这个买，假如这边成功了，我应该改哪几个东西。大家首先想到这里token so的你应该改了对吧？对，卖了这么多，然后是不是balance in contract也应该改了呀，对，这两个应该是实时的变一下对吧？好，那么我们这里实现一下，呃，Voting点我们看一下下面这个token sold是函数叫什么啊，就叫tokenld对吧？Token sold，好，Token so的点认。

然后我们拿到这个amount去把它。Dollar写到对应的这个里边来，对吧，我们看一下这个ID叫什么，这ID叫叫TOKENS1好。Tokens so，好，那么点HTML，把它的内容放进去，To string，这样就更改了这个token so的内容，对吧？那同样的我们是不是还得去更改那个balance啊，Balance的方法大家注意啊，是web3.1th.get balance，然后让大家注意这里边我们就得用回调的方式，对吧？大家看一下刚才他报的那个错啊，我们这里就不能直接这么去做，得用回调的方式，所以是这里voting instance.address然后我这里都用箭头函数了，大家要不习惯用箭头函数的话，就还可以方审，对吧？Error。

我们这个叫balance，拿到之后我们把对应的这个位置要改过来，对吧，这个叫什么contract balance好。这个我们直接copy吧，这个没什么难度了，对吧？我们之前已经实现过了，所以后面还一串的得得这个from尾，把它从尾转换过来，所以我们这里就直接把这句copy过来就可以了，其实就是更新一下这个数据对吧？好，所以大家看到这我们就实现了这个购买的这个流程就非常其实也还是非常简单的，对吧？很简单的就把这个购买流程，呃，这个完成了，大家注意，就是在回调里边要处理我们这个页面上的一些变化，大家直接用这块去重新写一下就可以了。

好，那么在页面上我们做了这个购买之后，还有一步做什么呢？还有一步我们要去vote for candidate对吧？所以这里我们还得去实现一个叫做。啊，这里还是去确认一下啊，HDML里边看一下它的那个onli方法到底叫什么啊，这个叫这个没有。Vote for candidate好，我们实现一个这样的一个方法，那这样一个方法大家注意，就是我们既然是vote for，那我们前面是有两个输入的，对吧，一个是输入当前你这个candidate来看上面的这个ID啊，ID是candidate，一个是它的name是什么，一个是它提供了多少，要投多少token，对吧？在我们页面上的话，就是这两个输入框嘛，所以我们JS里边肯定也是第一步先把这两个拿到好，Let let candidate name吧，我们就叫candidate name等于Dollar。

那个叫什么来着。叫就叫candidate啊，candidate.value好，它拿到，然后除了这个candidate之外，还有一个token对吧，那我们这个叫什么叫，叫vote tokens吧。应该没这个变量对吧，What tokens我们拿到的是还是回来确认一下啊。

好，这叫vote tokens，中间有一个井号vote token，这个大家就是一定要知道这些东西要到哪里拿，它的对应关系在哪里，然后小心一点，不要搞错，对吧？好，那么我们先把这两个变量都拿到，那接下来大家就会想到，我们既然已经保存了，那按照我们之前的这种这个方式是一投票的时候，这里的东西都要清空了，对吧？好，那么我们先直接就可以清空了，Dollar。candidate.html，我们给一个空字符串，这就是把它清空对吧？啊，这里边我们得给Y是吧。它不是一个简单的DOM节点，对吧，这是一个输入框，好，然后我们把这个。

Votekes，同样内容清空，这鼠标怎么飘的，好，接下来这个就是预先的这些工作都做完了，那接下来就是我们真正的要发起一个交易去做这个投票，对吧？好，那么我们voting，诶。写大写啊。voting.deployed点，再我们拿到这个voting instance，然后给一个箭头函数做回调。好，那接下来大家就会发现，我们直接用这个voting instance要调的方法应该是我们那个真正投票的那个方法，对吧，就是vote，我们再去确认一眼啊，这这就到合约里面确认了，对吧，Vote for candidate。

Vote for candidate，然后这里大家注意我们这个是不是需要传入参数，这就跟我们刚才BY不一样了，对吧？这里它是真正需要我们把之前的这个参数传进去的，所以我们这里要第一个参数是什么，大家瞄一眼。32CANDIDATE对吧？好，那么我们在这里把传进去，然后下一个肯定就是vote tokens了，对吧？好，那之后我们还可以再去加一个交易对象，然后指明从谁到谁，那我们这里的话，大家如果要是说呃，可以可以先不加，对吧？我们看看它到底这个长什么样子，好那么这个做完之后我们就可以点赞。拿到这个结果了，对吧，那当然了，我们一般情况拿这个结果的时候，呃，大家可能就是这个是一个提交了一个交易，他返回的话，其实是一个交易收据之类的东西，对吧，我们可以不要他的这个返回参数，那接下来他返回之后，我们需要去改变什么东西呢？我们页面上需要去改变什么东西呢？大家想一想。

看一下这个页面，这个页面上我们这边投票完了之后，应该改改什么东西。应该改这边candy的得票数对不对，这边要去实施查询，所以我们这里要去，呃，不，我们肯定是要用这个voting instant，是不是还要去做一个查询啊。查询他的投票数的时候，那个方法啊，回忆一下应该叫total votes for对吧？为了避免写错，我们还是看一眼啊，Total was。Total was for，然后我们是不是要传入这个name对吧？

然后total votes for.the这里我们就会拿到它的一个返回，我们就可以拿到一个amount，对吧？这里我们叫count吧，好，拿到这个返回之后就可以用j query的方法，呃，大家注意啊，这里边我们是不是得到它对应的？就是那个我们定义好是看例一看例二那个地方去写对吧，所以这里大家还得从我们的，呃，之前的那个存好，大家还记得在哪里存着吗？是在这个candidates里边存着对不对？所以我们得从这个candidates里边去拿，那大家注意一下，我们这里是不是就得Dollar再加上candidates里边的candidate name去从里面把它拿出来，对不对，对应的这一个值把它拿出来。

好，那后边的话，我们就是把这个HTML写进去，对吧。呃，这里我们查出来的叫account叫叫count啊，我们就count.to string把它写进去，好好这就实现了一个我们这个基本的投票的一个操作，大家可以看到我们这个过程是是怎么样做的，对吧。好，那接下来我们，哎，我看一下这里报了一个错啊。Voting，这里好像又有语法错误，我们来校验一下啊，Voting。

大家。也帮着一起看一下，我们是不是又少了括号了啊？哦，这里是直接等于了是吧。好好，那么我们现在已经把这两个基本的功能完成了，那最后大家看到我们页面上还有一个lookup water infer对吧？那这个其实就是查我们这个每一个，呃，就是投票人的一个信息了，那按照我们的这个要求的话，还是实现一个这样的方式，在HTML里面去看到我们给的这个on click方法是什么，不要写错，好，那么我们的方法就叫lookup water infer，所以我们这里实现一下这个方法。那同样我们是不是这个方法的时候，我们得输入一个地址啊，Put的地址对吧，所以我们这里边去给一个叫address的变量，拿的就应该是。

就应该是我们在HTML里边定义好的这个water infer的这个T它的值对吧，所以我们把这个拿过来，Water infer.value好，这是我们的这一个拿到的地址对吧？好，那接下来我们就要去查询了。既然要拿他的信息嘛，mo.deploy的还是一样的东西啊，写熟了之后发现就是都大同小异。就是一些业务逻辑上的事情了，对吧，好，那么我们这里拿到这个voting instant。然后呃，这里大家就会注意我们voting instant需要我们想要去调用的方法应该是叫做。Detail的那个方法对吧？我们再看一眼，当时我们怎么定义的这个方法就叫vote details，好，那么我们在这里就是用vote voting instant调用它的vote details，然后我们把address传进去，对不对？这样就可以拿到它的结果。

好，那么大家注意这个我们拿到结果是一个什么东西啊，大家还有印象吗？我们当时定义的这个东西是什么？大家再看一眼，他拿到的是是两个东西对吧？所以返回的是一个数组对吧？大家还有印象吧，所以第一个是我们的那个他现在有的token number，然后第二个呢，是他当前给哪些人投了票，所以这是。两个数组，所以说我们还是拿一个完整的一个对象来保存一下吧，对吧。

比方说就叫result rest好，那么在这个里边大家就会注意我们这里是不是就要去在我们的HTML里面，大家看一下这个页面啊，在vote vote in下边，这里是有一个叫voters Bo的一个东西的，那这里边我们是什么什么内容都没有的，对吧，现在还。然后下面还有一个votes cast，这个也什么都没有，所以我们是要把这个信息要显示，什么都要写进去的，大家肯定想到了这个BOT多少是不是就是我们这里面的第一个参数啊，所以我们这里就可以直接写了，既然已经拿到这个东西了嘛，我们直接写啊。Dollar，这是什么？Token复制过来。Po spot，那这个是一个div，我们就直接给他写内容了，对吧？HTM，那大家可以在，呃，就是可以加一点东西，因为你直接输出它的这个，呃，就是大家后面可以想到我们会直接输出这个REST0对不对，这是它BOT的这个所有的东西，当然后面应该to string，我们把它转成字符串，但是如果我们只写这么一个数放在这儿的话，不知道这是什么东西，对吧？那我们大概的说一下，这是这是什么东西呢？这是就是叫tokensport，好加一个这样的文字性的说明，那就把这一行填在我们对应的那个div下面了，对吧？好，那接下来那就我们还得有一个第二个元素是我们整个的一个数组对不对？

呃，所以一个数组的话，那我们是不是要遍历这个数组，然后去把我们每一个人的那个信息填出来，加一行加在后面，所以这个大家就应该想到，我们是不是应该得有一个for循环去做这件事情啊，对吧？所以呃，那我们要放循环的话，我们还是先把我们的那个数组里边的元素都拿出来吧，对吧？比方说我们这里先定义一个叫candidate。

Name我们这里没有定义过，看name吧。呃，底下定义过局部变量，那应该没有关系，对吧？Names object，我们要从这个对象里面去拿object点，对吧。大家还记得是不是这样的，Object address.kiss然后我们要拿的东西从哪里呢？Re，一里面它返回的就是一个对象数组，每一个对象都是它的K是这个内对吧？然后呃，它的这个它的，诶，不是啊，我们这里不是从这个里面的，这个返回的应该就是一一串数对吧？但大家应该记得我们当时返回的是什么，都是big number的一个一个数，对象数组对吧？我们这里边应该想要去拿到什么样的东西呢？我们是想知道每一个对象数组里边，它对应的那个人的名字叫什么，所以我们其实是要在我们之前定义好的这个candy里边去拿这个名字对不对？

这是我们已经保存好的当前我们的投票人的所有的名字信息，尽管我们现在不拿他后面对应的那个ID，对吧？我们现在是要拿他的name的，所以我们这里还是去candidates里边把它所有的name先拿出来好，接下来我们就可以放了，放放一个left I等于零。爱小于candidate names点对吧，爱佳好，那么我们写到这个东西之后，大家就可以想到每一次循环，我们拿出对应的呃，在这个REST1里边的那个值，然后我们要添加到后面这一部分里面来，对吧？所以我们这就Dollar井号，大家看看一眼，我们要在哪个位置去添加呢？叫votes cast的这个位置添加。

我们把这个填上它点，呃，大家注意啊，这里边我们是不是就不是直接去改它这个HTML了，是我们是希望每一次都添加到后面对吧？所以我们这里用这个这块里边的PA的这个方法，然后把我们对应的下面的这一个元素直接添加进去，对吧？那么我们a upon的一个什么样的东西呢？大家是不是想到我们需要添加的是。

呃，应该是它的前面是，那后面是它的那个数对吧，所以我们前面的这个就应该叫做can。Candidate names，我们已经把这个name都已经存在candidate names里面了，对吧？Candidate names I，然后我们应该要加上，加上至少得加一个冒号吧，我们先不加别的，然后后边是不是我们要把查出来那个数填进去啊。所以后边这个就是我们的RISE1里边的第二个元素，那当然这个应该是一个big number了，我们再把它to string一下对吧？好，所以大家看这样我们就把这个查出来的元素真正的添加到了后边。