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

好，呃，那么大家可以看到我们进行了这些针对穿里边它的对WEB3不同的调用方式，所以我们要在JS里边也要去做一些相应的更改，大家把这些都更改完了之后呢，就可以把这些东西部署到我们的这个应用当中去了，所以呃，接下来。大家可以看，就是这里，这里边还有两句解释啊，就是我们这个voting.deployed这是会返回这个合约实例的，然后travel的每一次的调用，它包装好了之后，都会返回一个promise，这个不管是就是0.20.1的版本，还是1.0.0的版本，T的这个包装它都是这样去包的，所以我们在后面就可以直接用点赞去做链式调用了。好，那接下来大家就可以把它这个部署到部署到这个网络当中去了，对吧，大家可以看一下我们这个部署的时候怎么部署呢？其实也非常简单，穿好我们先看一眼这个外派外pad，其实就是我们的一个部署工具，大家在这里边可以看到我们。

哦，这里wipad没有定义它的脚本啊，所以其实都是直接就是默认的一些脚本就可以，所以我们自己在用的时候直接去，呃，应该是onepa wrong是吧，N PM run d就可以，我们看一下，这是要看这里的这个PA package Jason里面的定义大家可以看到。我们真正如果要去run一个呃，就是我们的那个外PE的server的时候，用的是什么命令呢？用的是wipe dev server这句命令就可以直接在我们本地用本地的APP这个目录下面的，呃，就是用我们这个build下面的这些文件去起一个外pad server。

当然是一个开发环境的server了，默认的端口是8080，所以我们已经把这个配在package Jason里面的话，大家还记得这个package就是NPM的scripts吗？我们当时在做自动化编译，自动化部署和测试的时候用过，对吧，所以这里它其实用到的也是这样的一串东西，所以大家其实可以看到这里其实已经给我们都写好了，对吧？PA dev server这个命令我们可以用n PM run dev来做操作，好，我们在这里去NPM直接绕一下啊，NPM让第一位。大家可以看到这里就启动了一个外派DV server，对吧。

好，所以我们现在这个project就启动在了local host8080的这个这个端口上，好，那么我们看一下当前的这个8080啊啊，这是这是travel的这个官方网站，大家可以就是对travel有不了解的地方，可以到这里来看啊，Travel framework do com。而且里边其实这里多跟大家说一句，就是有很多这个t box。这些就相当于都是现成的项目，大家可以在里边去自己下载一些chop box来做一些这个对应的这个操作，比方说这这里这个boxes啊，Travel framework do com，大家可以看到这里有很多现成的这个叉box。呃，这里这个官方。的教程，一个是这个ma point，就是这个一个子货币对吧？原货币这个是比较简单的一个例子，大家可以去看一看，下载看一看，另外还有一个这个宠物商店，这也是官方给的一个非常，呃，就是非常完善的一个例子，大家也可以去下载下来玩一玩，嗯，太难了是吗？对，这个比较复杂一些，是最简单的一个react是吗？哦，React这个它不是一个一个项目。

所以说它相当于只是就是给大家有一个这个react的一个一个环境，一个组件，对吧？对，所以说这个就是里也有一很简单哦，所以说就是大家如果要是想看这个复杂的项目，它做成什么样子的话，可以看这个宠物商店啊，当然就是说还有一些别的一些资源，大家都可以在上面去看好我们现在是想要去看一下我们local host到底起来没有啊local host。默认的端口是8080，好，我们去看一下，大家可以看到我们在这里已经把这个8080已经记起来了，对吧，这里好像没有查到东西啊，我看一下。

Put has not been deployed。呃，所以他是说我当前的这个没有部署上是吧？呃，我们看一下哦，因为我们这里是有这个mama的，大家注意啊，我这里有mama，所以说默认它是不是会选我mama这里配置好的这个这个这个环境对不对，所以大家看我这里是RBY的话，那其实他是要到RBY上去找我这个合约的。那当然了，我现在没有部署到RI，所以这个肯定是没法用的，我切换一下local host8545。好，诶，大家看现在就找到了对吧？那当然我可以去给报投一票看看，哎，报错了invalid number arguments，呃，所以我们这里写的应该是有问题的，对吧？看一下这个刚才的这个index里边哪里写错了，投票的时候应该写错了对吧？HTML里边是怎么写的，应该是没东西的是吧？

HTML。这里的调用好这里边就是直接调用了这个方法，所以其实是没东西的对吧？所以这里边肯定是有问题的，我直接这么调的话，里面拿不到东西，好好这个确实没有注意到啊，所以这里其实是没有东西，对吧？所以在这里的话，我们第一步应该要先去拿一下。我们可能要定义一个变量了，对吧？呃，定义一个can name吧，Can name从这个，呃，但是这里的话，如果要用Dollar服去拿的话，应该是拿我们当前应该是candidate输入的那个内容，对吧？因为它不是通过我们这个方式参数传进来的，而是通过这一个就是我们那个输入框文本框传进来的，所以我们在这里要用文本框来拿到它的值，好对吧，对吧，然后下面我们要把这里改成看见内内。

然后这里。也要是看点内对吧，这里也是看点内全改。OK，现在应该可以了，你试一下啊呃，大家注意看，其实我们这里就是如果用ipad去做这样的包管理的话，它这里正常来讲应该是可以实时生效的，我们重新刷新一下，看一下投一下票啊。

哦。不要把这个断点打上，嗯，好像还是没没投成功是吧，还是一样的问题，那我们重新启一下服务器吧，NPM上D。好，嘴是不是没起来啊？

嗯，这里好像有点问题是吧，关调要重新开一下，有时候我们如果本地有一些这个，哎，现在这个状况啊，现在才起起来啊，刚才这个更改了之后，它这个有点慢，呃，大家看到它每一次起的时候其实是wipad，它会自动给我们去做这些包管理，大家看他在重新的编译，然后生成对应的文件，对不对，就每一次都在做这样的事情，所以这里会稍微有点慢，好现在刷出来了啊，好，我们再去试一下看看vote。还是不行。嗯，哦，Inval利的dress现在报的错，是赢利的dress，所以。

看一下。呃，所以我们这里在做这个交易提交的时候，大家要注意一下，我们这里是没有指定任何的提交交易的参数的，对吧？大家看到这里好像我们什么东西都没加，所以如果他报这个地址错误的话，那可能就是我们需要去加上from，我们加上from来试一下Eth.account好，我们现在再来看一下这个状态，N上第一位。因为我们在做这个发送交易的时候，有可能这个窗口是不知道我们从要从哪个账户去发送的，对吧，所以呃，之前我记得好像窗口是可以默认的啊，但是这里好像没有默认，我们试一下吧，看看是不是这个问题，因为他报是非法地址，把这好注意刷新完了啊好，我们把这个先刷出来。

然后把这边。Pencil，打开我去给报投一票，好，现在可以了，对吧，大家看我会弹出这个mama的这个，这个确认的这个。啊，当然这里的话，我的这个come可能里面没钱对吧，所以这里面我如果去confirm的话，可能说说有是会有问题的，所以大家如果要是想要去发送的话，可能需要先保证自己的这个账户里面有钱才行，对吧？诶我这个是有钱的，这个居然还是攀定，那可能是我这边没有挖矿，是不是我们起一个挖矿看一下。

好，现在是已经在挖矿了，对吧，但是这里好像这个还是没有发出来啊。我这边看到的一个问题是什么呢？是因为和ma mask很多个不同的客户端，就同一个账都提起过不同的交易，所以导致在发送交易的时候，Na就出现了这种混乱的情况，Ma ask那边提交就是我们想要投票的时候，提交的交易一直处在一个判定的状态，没有没有打包镜框，我这边排查到的是这样一个问题，后来我把这个就是用之前跟大家说的那个发送一个相同档次的交易，把之前交易顶掉，用这种方式把这个交易相当于清空，之后试的情况是可以跑步，我再给大家演示一下，看看现在效果怎么样啊，我们看看还有问题没有啊，首先我这边洗一下这个挖矿，然后我们这边把这个。

So，好，我们先看一下，呃，我这边刷是能正常刷出来的，大家如果要是担心的话，可以打开这个pencil监监控一下他的状态，对吧？好，现在是只有Bob有一票，我去给爱丽丝投一票。他没有弹出来啊。呃，大家可以看到，我现在已经是提交了这个有这个交易了，对吧，Confirm一下，我们看一下。这个已经发出去了，然后我们看一下，诶大家看到这边已经确认了，对吧，交易确认了，然后我们看一下我们这里更新了没有，这里已经及时更新了，刚刚我是给爱丽丝投了一票对吧？好，我们在给凯瑞投一票。

哦，这个ma有时候会不弹出来，没有点到他吗。大家可以看到这边还是一样的，对吧，Confirm一下，所以如果要是这边发送交易，整个NUS这些参数都正常的话，其实是大家可以看到这个流程还是比较顺的对吧？不出问题的话就很顺，诶这边好像好像也已经提交了，诶这边已经显示了对吧？这边又是一个凯瑞，这边有一票，我们刷新一下，确认一下没有问题，大家不放心的话，我们再给其他人投一票，看看是不是每个人都能投的上这个ma ma经常会不谈出来啊。

而且刚才第一个交易有提示，第二个好像没有提示是吧。稍微等一下，那边起着挖矿，他应该是可以自己完成这个交易，诶大家已经看到可以了是吧？哦，这边已经显示了对吧，这边显示肯定就没问题了，所以大家可以看到，如果要是我们觉得这个过程当中还有很多地方，我们就是看不到一些关键信息的话，大家也可以在加入一些，比如说错误的处理啊，然后关键节点我们拿到它返回的时候显示一个什么样的信息啊，也可以把这些就是优化的一些功能再再加进去。