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

呃，这一部分代码并不难，大家如果要是快速的这个浏览拖一下的话，其实可发现它就这么点东西对吧？呃，这个JS下面也很简单，就这么点东西，那本身这个难度在哪呢？我觉得其实就是我们是通过这样一个小项目，或者说说是D，其实就是一个DEMO，我们通过这么一个DEMO，其实是要构建起一个一个概念，就是D到底是个什么东西。我们就是想到哦，前面我们有合约，我们想清楚这是一个什么样的东西，实现什么样的功能，那我们首先要把核心逻辑放在合约里面，然后合约创建好了之后。啊，我们就是要先部署，呃，编译部署，把它直接放到区块链上去，当然我们是先放到测试链，用GALA，当我们的测试环境放上去了之后，我们就先来校验一下它的功能是不是好使呢？我们就用控制台去测一测我们想要的，到时候我们想要的用户他去他去想要用的那些功能，我们就先测试一下，这就相当于我们是把合约。

当成了整个我们这个产品的后台，那我们控制台测试的时候就有点像是接口测试，所以大家如果以前做过这种开发的话，外部开发的话，可能大家就会对这个感觉就是这没什么，就是更新鲜的，其实就差不多，就只不过是我们把后台那部分做到合约里面。那接下来呢，我们就是想到了后台开发完了，接口调通了，那我们还有前前端的工作，那前端我们做什么呢？那就是要做网页，就是要控制这个交互的一些逻辑，所以在这一部分里边，大家首先其实就是先头脑里边有这个一个想象，我们想要让最后客户看到的，或者说就是我们自己想要看到的一个页面是什么样的，那这么简单的一个应用呢，前面我们也已经说了，就是每个人三个投票人，我们现在三个投票人，呃呃，候选人啊，三个候选人他们每个人我们应该显示出他们的名字，然后他们后面每个人后面就应该有一个当前他们的得票数。

然后还应该有一个按钮表示我要给这个人投票，呃，那我们在控制台的这个交互的时候，写命令的时候，我们是要查哪个人，我们，呃，就在remix上大家也看到了，要查哪个人，我们要输入他的名字，那具体如果是一个。一个客户或者说大家自己去上一个网站给人投票的话，肯定不会说我要给谁投票，我还去手输他的名字，对吧，这是绝对不可能的，所以这个我们一定是要在网页上去设计好就是，所以大家大概就可以想象得到，我们在网页上我们的投票按钮一定就会绑定一个ID，这个ID是跟我们对应的那个投票人就候选人是相关的，对吧？所以说他一点这个我们就知道，根据ID就可以知道他到底是给谁投票，而这个调用我们后台接口的时候，给我们合约传递参数的时候，就要把对应的那个人拿出来啊，这就是我们在设计这个网页上面首先应该想到的。

我们注意到的是这些东西，好，那我们，呃，今天可能来不及跟大家一起把这个码一遍，那就先跟大家过一遍吧，过一遍然后呃，明天上午我们再用一点时间把这个码完，大家来试一试就可以了，嗯。那现在的这些时间，我们就先来看一下这个HTML这个文件吧。这个文件大家可以看到。呃，大小上看的话好像还有点长，但其实这个HTML嘛，大部分大，把这个一梳理出来之后就会发现，其实body里边主要的就是一个table，对吧。

大家可以看到啊，这里body里边，首先one，这是我们的一个标题，就是a symbol voting application。下面呢，就主要就是一个table，这个table里边它的表头有两列，一个是candidate，一个是boats，那大家已经想到了，这个表其实就是设计了，这边是候选人名单列表，然后这一列就是他们的得票数，对吧，就是一个很简单的表格就把它搞定了，呃，那大就看到这这前面是表头啊，T head，然后下面就是t body，我们的整个表格内容是什么呢？大家就看到了啊，这就是我们已经已经写死的这些东西，这在HTTMR里边也写死了啊，第一个是Alice，第一行Alice，第二行Bo，第三行carry。那大家注意，就是在我们的这个名字，每个候选人的名字后边还跟了一个单元格，它只有一个ID，后面没内容来这个地方，到时候我们填什么呢。

这一行。按钮吗？票数对吧？对我们前面的那个表头定义的，这边是候选人，这边是投票数，所以大家可以看到啊，就是我这边列名字，这边先空着，那到时候我查出来之后往这儿填是这样的一个状态啊呃，当然大家看到我们既然你要往里面塞值嘛。那用这个j query也好，或者是其他的一些东西也好，我们肯定得定，就是知道往哪塞，所以我们这个ID一定是要定义出来的，那这里边ID定义的，呃，是一个CANDIDATE1这样的一个东西，那也就是说其实这还是预留了一点扩展的空间的，没有直接写死这个ID就叫Alice丝，那如果这里如果就叫Alice丝的话，那可能我们这个就呃，对吧，你这个候选人的名字就都都不能变了，呃，事实上我们这个hard code，这这里爱ice丝也是hard code了，对吧，这个其实也是不应该的，因为我们是根据这个初始的这个状状态读出来是什么，应该我们这里就去塞什么，这样才对。

啊，那我们这里是一个简单的DEMO，所以说没有考虑那么细，呃，前面的这三个候选人列出来之后，后面都有一个得票数，那大家看到下边。就还有一个对吧，还有一个input。诶，大家可以看到这里的input是一个text text。啊，所以这里我们的这个设计其实还是还是有问题的啊，就是没有像我们想的那样有三个按钮去放在后面，直接一点就是给谁投，而是它是下面还是给了一个input的。

然后有一个ID candidate，所以说这个地方的话，那其实是下面还得有一个输入框，你去输入我要给谁投才可以啊，这个就相当于产品设计上的话，肯定是有问题的，那我们可以想象一下，到时候我们怎么改，把它改成就是后面都跟着有一个有一个按钮，然后把它改成我们想要的那个模式，好，这里是一个input，呃，大家可以看到它的type是text的，然后ID也给一个叫candidate。所以这里的这个输入的其实就是我们的一个候选人的名字。呃，对，然后大家看到下边就是它这里是用一个就是link的方式来实现了一个按钮。啊，大家可以看到对吧。A，然后它的这个，呃，就是h reference，这个是给的是星号，呃井号，井号代表什么呢？呃，这是一个锚点是吧？那这个代表什么呢？这个它的这个链，这本来应该是给他的那个链接的地址的，对吧？那给井号是什么意思呢？

当前页对吧？对，所以其实就是说它不跳转嘛，这是一个不跳转的链接，那下面它有一个on on click事件，这个就很很关键了，大家想象得到点这个按钮的时候，那相当于我们就要触发投票的事件了。对，所以说后面on click，我们定义一个方法，那这个函数等一下我们在JS里边肯定要实现，要把它跟我们的区块链就要交互起来，对吧，这里面肯定就要用到WEB3的一些接口。呃，那大家看到它的class这个是用到了这个对吧，是一个button primary，所以这里边我们肯定就还需要引入一些CSS了，这里都已经写好，大家可以不管这个啊啊，当然这个CSS我们这里引入的是这个boostep里边的一些东西，但是都不完善，因为只是一个DEMO嘛，做出来可能是很丑的一个东西，所以到时候大家如果要是想把它做成一个真正的看起来还像回事儿的一个项目的话，那就再把这些都改一改，CSS这些东西大家自己去调样式，我我我们这个讲区块链内容，大家不会去专门讲这些啊，听说大家之前CSS学的时间还挺长的是不是？

是是啊，就到这会儿就就用上了，检检验一下大家这个功底怎么样，我们这个显写的这个样式都不太好，所以大家可以去把它完善一下考虑，呃，应该是可以的啊，当然这个就没有细化一些东西，就是比方说对齐啊，还有一些就真正这个样式上的一些美化或者怎么样，呃，大家可以去找这些工具去做。然后最下面这就是我们把这个脚本，就是script都都用script标签引到下面来，这里首先我们用到的是一个WEB3的命的一个GS，也就是最小版本的一个WEB3。

网页上去会引入这个，这个到时候我们看情况吧，如果说大家这个网络状况访问不到这个文件的话，我们就自己把它下下来，然后就是用自己本地的目录把它引用就可以，呃，当然了，就还有这个j query，这是肯定要用的，对吧。最后就还有这个index.js，所以index.js就是我们自己的这个核心的JS文件，那大家能够想象得到，这个文件里边，至少我们得把这个搞定，对吧？Vote for candidate这个方法要搞定好，我们再大致的瞄一眼这个。呃，JS。这里这个JS呢，大家看到这就跟我们熟悉的这个写法都很像了，呃上来之后当然它都没有用Y啊，就直接就全局变量了，大家最好还是按照呃比较标准的这种编程习惯来，就一开始还是有一个变量声明比较好，就。

一个WEB3，然后我们把这个WEB3的这个provider这上面少了一句吧。我们没有定义这个这个WEB3吗？它引入的这个里边，呃，到到时候我们再试一下吧，有可能这个里边本身export出来的，有可能就是一个一个大的这个WEB3对吧？好，我们到时候再看一下，呃。然后同样的这个东西啊，就是abi，这里是直接写死了，就是直接我们把那个复制过来，直接就写在这个后面啊，到时候大家如果要。啊，当然这个是因为是GS，所以说按道理我们不能把它去读别的地方的文件，对吧，所这个鞋子也是没有问题的，因为这些本来都是区块链上公开的信息嘛。

呃，然后就是同样大家就是看这个跟合约的这个部署有点类似，先定义我们这个，呃，抽象合约，然后呢，我们已经部署了，所以直接把地址拿出来艾就可以了，获取到我们的合约实例。接下来我们的操作就肯定是用这个合约实力的方法了，对吧？啊，这个能够想到一些基础的东西，然后大家看到这里还定义了一个这个这样的对象candidates，他是要把我们的对象的名字跟什么对应起来的。就是前面这里的这个ID对吧，要跟这个对应起来，因为我们这里是根据ID去往里塞值的嘛，那你投票要投给爱丽丝的时候，我怎么知道就是往哪里塞呢？那我得知道爱丽丝对应的是看电的企业，所以要把这个ID要对应起来，这个其实是呃，都是一些简单的一些做法。

下面这个就是投票方法了，Vote for candidate，这个投票的时候，你要把candidate首先就是传进来，我们看到那个上边。诶，我们的那个投票在哪里，大家看这个on click的时候是直接是掉了这个方法的，对吧，并没有传值，那咱们可以想象得到这个candidate我们应该是什么东西呢？应该是一个。如果要是没传值的话，那我们应该在下面应该直接得拿到当前的candidate是谁，对吧？所以大家就会看到candidate name。对，去用这块的方式，我们读出当前这个，呃，这个candidate这个。这个位置的内容我们看看是什么ID是candidate的啊，就是这个input对吧？对，所以这是没问题的，这里定义了是candidate。

然后我们在后面把它的内容拿出来，给到这个看见内。接下来我们就是调用我们的WEB3接口了。合约实例，然后vote for candidate，然后传进去指定我们的account，啊，大家注意，这里边是JS的环境，如果在浏览器里边的话，这个WEB3ETH accounts。应该是什么呢，Account？我们默认应该得去找，如果我们安装了ma mask的话，那应该得去找ma mask那里，对吧，应该是这样。呃，然后下面是这个方式。然后function这个是一个回调了，这个回调没有拿参数，那大家想想这个回调是要干什么。

我们已经投票成功之后的回调，哦对，肯定是要更改他现在得票数了，对吧，所以大家能想到下面就是去更改得票数啊，大家可以看到也是用了这query的这些操作去更改我们的DOM上面的信息，呃，然后下面还有一个。就是document点点那个ready，这其实就是在我们整个初始化的时候，渲渲染界面的时候，就要拿到我们每个人现在的得票数，对吧。所以同样在这个里边，我们定义一个for循环，然后把每个人的得票数拿出来，写到对应的地方去啊，大概的结构就是这样的一个结构啊。