068_尚硅谷_以太坊理论_DApp示例-简单投票（七）

刚才在就是我们看大家这个碰到问题的时候，其实有时候就会发现，有时候可能是自己不经意的一个就是一个小操作，有时候可能就是复制粘贴没有没有贴全，或者说是出了一些就是差错，那就有可能后面就会出现很诡异的问题，所以大家有时候就是在复制粘贴，包括大家一步一步走的时候，就是还是需要稍微细心一点，就包括像特别是前面咱们看到那个abi，还有bad code这两个东西，它很大一串，大家在复制粘贴的时候，有可能就很容易就会稍微有一点差错，对吧？所以如果在部署的时候，大家发现这个没有部署成功，那肯定就是中间某个环节可能会有问题，所以呃，有时候这个如果自己没有注意到一些细节的话，有可能就会耗比较多的时间去去找这个问题所在，好那么接下来我们还是接着上节课，我们把就是最后一个这个方法来实现一下。因为我们记。

这个这里面还有一个方法我们没有实现对吧？那这个东西我们是需要放在JS里边的，那我们要定义一个function，我直接把这个方法名copy过来，那JS里边的方法大家应该知道，就是这个，这个是很简单的一个一个操作了，对吧，就直接定义一个function，然后方法名定义过来就可以了，那么我们肯定一样的是要拿到当前的can name，对吧，我们给一个。Let这个关键字主要就是在JS里边是ES6之后引入，大家知道是吧？呃，之前的话大家定义变量直接都是Y或者是不给，就是默认就是全局变量，就是挖出来的，那由于JS里边这个挖确实是有各种各样的坑啊，就是它会有这个作用域，就是变量的作用域会提升，对变量提升大家应该都清楚啊，所以说就是我们在函数里边定义出来的局部变量都会变成全局变量，那所以这种用法肯定是不太安全，也是不太合理的，所以我们在定义一些明确知道是就是局部变量的时候，可以用ES6里面的let语法啊，当然就是有一些常量，其实我们可以用ES6里面的cost啊，这里我们是都用，其实我们用constant也可以。

好，这里是name，那大家想到我们这个应该是从哪里去拿呢？Name这里是vote的时候，我们要把当前要投给谁，要拿出来，对吧，所以我们是到这个input这个里面去拿的。那这个音部呢，我们还是根据ID去筛选，那同样大家就知道了，我们这里肯定是一个Dollar，用j query的这个方式，呃，Dollar什么东西呢，我们就这个就写死了，我们又没有传变量，对吧，直接一个井号，看它是叫Penny吗？

对，我们就叫candidate，那这里直接就给他一个candidate，所以这个Dollar服拿出来的这个do对象，就是我们这里的input的这个输入框，文本输入框这个对象。那我们这里是要是要拿它的内容的，所以就是点value对吧，那这个就是直接取我们这一个DOM节点的值，它的内容它的value是多少，所以就是大家输进去的那个值就会传递到这里来，好那么接下来我们看到呃，接下来其实就是要去发这个义务请求了，对吧。呃，我们看一下这里是不是它做了一个什么操作啊啊，这里的操作是用一个try catch把它包起来了啊，大家可以看到就是我们在里边如果要想去做一些上层的异步处理的话，可以用拆开把它从里边如果报错的话，到外面去catch出来，这样可以实现我们异常处理的这种嵌套，大家在里边这个看到的东西还可以再through出来，对吧，可以到更高层再去做处理，那这个都是可以实现，当然我们这里的穿其实没什么用啊，啊，我们这里就还是照这个来写一下。

那对应着下面就有一个catch对吧。Catch一个error，它其实这里没做什么操作吧，对，没做什么操作好，那么这里的TRY的话，我们肯定就是要去发预务请求了，我们已经有了contract的instance，直接调用它的方法。大家还记得那个投票叫什么方法吗？好像给忘记了啊。呃，这个我们直接在这里看它这个API吧，这是一个mean特，诶特，好吧，我刚才部署错了啊，这个可能部署成那个，大家看这个名特，这个是部署成那个，对Co那个，那个就是我们之前的那个合约了，所以等一下我这个要试的话还得重新部署，呃，这个没关系，我记得好像是vote啊，就是我们先这么写，到时候如果出错的话，我们再调好，那么这里去调用我们这个合约方法vote，那这里边vote是要传递一个参数的，对吧？所以我们要把当前选择的can name给进去。

然后我们会构造一个交易对象from，大家注意这里不是下面的car，这里是send transfer，呃，Send transaction对吧，是一个提交一个交易，然后才能投票成功，所以我们这里边是需要指定from谁的，如果不指定这个参数的话，到时候又会报错。好，我们这个大家如果想要去指定gas的话，那可以再去，就是后面跟上gas，如果说就是觉得没有问题的话，用默认也是可以的，大家想到了我们这个处理完之后，是不是还应该有一个回调呢，对吧？呃，这里可以用这种传统的写法，大家也可以用我们这个就是。

可以用我们这个就是ES6里面的建成函数的写法，对吧，这里可以就是error result。好，那么我们这里其实就是一副error的话，o.log还是一样的，昨天那个这些都已经操作过很多遍了。Else else的时候，这个大家要注意，我们肯定就不仅仅是把它打印出来了，我们是想要在这个投票成功之后，即使我们这里没有别的返回，我们也应该在界页面上有什么显示，它那个票数应该加一对吧，这个是要及时去更新的，所以大家注意这里我们还应该把我们下边的这个。

就是对应的这个内容要更新掉对吧？那大家肯定可以想到我们还是用这query的这个方法去获取到我们当天当前要更新的这一个节点的内容，那要更新的这个节点是谁呢？其实我们现在不知道，因为我们只知道看这内容对吧？那这个节点的这个ID，其实我们当时是有这个对应关系的，所以说我们还得从这个对应关系里面去把它找出来。好，那么我们就let一下I，这个不要叫ID了，叫什么啊？就叫ID吧，大家知道是什么，就给局部变量candidate candidates对吧？然后传入我们的candidate内，然后就可以找到我们上面定义好的这个ID的名称。

这就是对应的key，对应的value拿出来，然后下边我们就可以用这个ID Dollar，这个ID就可以拿到我们对应的这一个节点，我们现在是要往里边写内容，所以我们直接点HTML，呃，大家可以想到我们要写什么东西呢？那其实是我们还要去查询一下对吧，就是let，其实这个就跟下面一样，大家应该能想到的啊，就是我们的contract instance.total vote for for，我们的这个candidate内，对吧，是不是这样。

呃，当然，我们这里应该还来一个to string对吧？好，那我们这里要写的内容就是这个count对吧。所以大家可以看到这样我们就把这个投票的这个函数完成了，可能稍微就是多一点操作，就是我们做了投票操作之后，在回调里边还要去更新我们的页面，那这个地方我们是用到了。回调函数里边，我们再重新去查询一下，当前页面里边，呃，就是我们的这一个对应的候选人，他的票数变成了几，我们不能直接加一，直接加一的话，那相当于是我们就是前台自己更新了，对吧？没有直接从后台去拿最新数据，所以我们真正刷新的时候一定是到后台去拿数据的，那我们现在的后台就是合约，所以我们到合约里面去找到当前的这个最新的，靠把它写进来。更新页面就完了，好，那接下来我们部署一下吧，我这里刚才部署错了啊，所以这个还是有点坑。

所以我还是先出去编译一下吧，我可能没有把这个编译掉，我们在外面编译的话，大家知道是sock杠杠abi杠杠B，对吧。这稍微有点慢啊，OK，呃，我们就先反应一下，放在这里，省得等一下这个复制不出来，并好。现在我们可以进到note里面。这个我就快速的把它复制一下啊，WEB3。嗯。居然敲错了。

好，那接下来我们就定义。不写B了啊abi等于。所以大家会发现我们其实在做这个操作的时候很容易出问题，对吧，即使首先它步骤很多，其次就是说即使我们很熟了之后，还会有很多坑等着我们，对没有复制到啊，这个就特别难受啊，点半天然后没有复制到。好，这是我们的API，然后我们定义一个bad code，大家应该记得我们白扣可以不加0X了，对吧，似乎是可以的，看一下。

好。我们把bad code弄起来，那这里的话，我们肯定就是需要去构建一个我们的合约对象，这里叫voting contract，它等于WEB3点Eth.contract a，那接下来我们就建立我们的instance。VO上面定义的好吧，等VO。

这里要点new对吧，大家看我这里如果要直接点new的话，里边是要传入参数的，大家应该还记得我们这个部署的时候需要储值对吧，大家部署的时候里边给初值了吗？是不是有些同学没给？那我们这里的data是刚才定义的bad code，大家看我这里是没有在定义那个对象，直接在这里写了，对吧，这也是可以的，From web3点Eth.ACCOUNT0好定义一个。给500万应该够了，好，大家看到这里我们就已经。完成了我们这个合约的部署，那大家看一下我们现在的这个instant.address获取到的这个内容就可以作为我们在JS里边。

要填入的这个内容了，对吧，好，我们把这个更改一下。哦，这里看到这个API确实有问题啊，大家看到了对吧，直接就是特，这明显是错的delete。好，我们准备把刚才的API再传进来，那其实我们的哦，这里的话，那我们还是到外面去看吧，我们看一下这个文件的内容，把它复制到。JS文件里面定义好的API里面来。当然我们要这里是把它Jason pass一下，作为一个对象解析出来，对吧，这里是这么用的啊好。

其实我们直接如果不加不加引号的话，直接去定义也是可以的，对吧，这里是用了Jason pass，就是方便大家从那个文本里面把它拷出来的时候去调用，好我们看一下结果吧，现在我们去F5刷新一下，诶大家可以看到现在我们这里直接就有零了，对吧，000已经有了，好，那我们来试一下吧，Alice。哎，直接就变成一了，大家看到这个变化了是吧。好，再变成二。换一个人提交一下报。变成一，哎，看看是不是每个人都可以可以这么去投呢？CARRY123，大家看就是这样一个简单的一个交互，所以说什么样的东西叫DAPP，真正我们把这个产品做出来，大家连到我们的自己的网站上之后，打开这个页面，直接能用，直接能玩，这样才叫DAPP，所以到目前为止，我们就完成了这个DAPP的基本的一个内容。

呃，当然了，就是在可以再多给大家讲一点，就是如果大家觉得，呃，你你如果这么说的话，这个其实看起来他也没有什么，就是我们这只是一个静态页面嘛，对吧，那如果说我们实际的这个D应该是怎么去做呢？呃，大家可能就会想到我们需要去部署到一个服务器上，对吧？对，我们需要去部署到一个服务器上。