00:00
好，那么接下来我们就来实现一下，我们把之前的先删掉啊，接下来我们就来实现一下这个JS了，这一部分代码可能确实有点有点复杂，对吧？大家如果刚才已经瞄过一眼的话，好，首先尽管复杂，我们一点一点写，按照我们的功能一点一点写，其实也就也就还好，对吧？呃，100行的一个JS也不会太多，好首先那么大家就会想到我们是不是一开始首先要把我们需要的那些模块先先先引入进来，对吧？我们onepa里边的写法一般都是这个IM对吧？这种写法import就像我们上次写的一样啊，In import default as web。然后from web3对吧，好，然后import，大家还记得还要import一个什么，除了web还有什么？我们还要从travel的这个框架里边，把它的叫做travelle contract contract的一个组件引入进来，对吧？然后在我们的文件里边就把它叫做contract来用，给它取一个别名叫contract。
01:21
好，那接下来大家应该还记得，我们还得把我们的原文件引入进来，对吧？这个voting当时我们给一个名字叫artifacs，对吧？Voing artifacts from从我们的原文件中引入进来，不是原文件啊，是Jason里面对吧？已经编译好的Jason文件里面，Build下边的，Contract下边的。它这个提示不对啊，Voting点好好，这样我们就把需要引入进来的东西都引入进来了，博经典Jason里边我们可以拿到自解码和和abi，主要是拿AABI对吧，因为我们都已经部署好了嘛，那contract里边，这个里边就包含了travel给我们包装好的对合约的各种处理，所以我们就可以直接用voting.deploy这样的方式了，对吧？所以大家注意一下这样的一个方法，那呃，当然了，首先我们先得先得定义这个voting对吧，比方说constant，一个voting，它等于什么呢？Contract我们先把这个实例先拿到voting artifacts对吧，这样的话，呃，这样大家可以想，就是认为这个voting artifacts我。
02:53
我们从Jason里面拿的主要是拿那个API对吧？所以这一步相当于还是我们之前拿到WEB3里边抽象合约对象的那一步，所以之后我们在voting.deployed就拿到了它的真正的合约实力，大家应该能把这个流程顺起来对吧？窗口这里只不过给我们又包了一层而已，跟之前也没有什么区别，呃，在这里呢，我们先定义两个定义两个变量啊，这这其实可以是抗了candidate。
03:32
我们定义一个candidate的一个对象，那大家想到我们就是之前需要去保存的，大家还记得之前我们怎么写的吗？看直接就写死了对吧，所以现在我们不是写死了。不是hard code的这种写法了，我们一开始只能是一个空的一个变量，还不知道它是什么值，我们要从合约里边附到的那个初值拿出来，然后读在这里，这样去动态的去显示，所以我们这里就先把它放在这里啊，啊，所以前面不能是POS的啊，还是给一个let吧，好，那同样大家会想到我们还有一个重要的变量叫做token price，对吧，这个东西我们也是要动态的去拿到，不要还扣，因为这个都在合约里面都已经给定了，对吧？啊，那这个一开始我们不知道给一个none好了，好，那接下来大家应该就能想到，我们是不是一开始就应该去处理一下，呃，我们这个页面加载的时候的一个行为啊，呃，大家应该能想到这个。
04:43
还是JA query的这种写法，Dollar大家还记得吗？嗯，document.ready对吧？好，里边我们，呃，大家也可以用方程这种写法，也可以这个用箭头函数的写法啊，看大家习惯怎么样，用熟了就什么样都可以了啊。首先我们还是像之前的写法一样，就是假如说已经定义了WEB3，就是在当前的这个浏览器环境里边已经找到了WEB3的话，我们就用ma mask，对吧？浏览器环境里边ma MAS，我会把WEB3对象嵌入进来，On d find，好，如果有的话，那我们就window.web3等于new，一个WEB3里面我们要给的是web3.current。
05:44
Provider对吧？对，这是我们的，就是在浏览器环境里面拿到的一个东西，好那么除了这种情况else的话，我们就直接把local host 8545当做provider提供进去，对吧？所以这个都是我们昨天就已经实现过的，大家再重新敲一下，熟悉熟悉WEB3NEW web3点providers.http provider好，里边大家敲了很多遍，应该这一串代码很熟了，对吧，八五。
06:26
这是我们的一个常规做法，先把当前的这个，呃，就是我们的环境先搞清楚，然后把浏览器里边已有的ma mask注入到我们的这个WEB3对象里面来，好，那接下来大家记得我们还有一部要。ro.set provider对吧，Provider，那这个我们就直接给一个WEB3点current provider，因为前面我们已经定义了当前的这个WEB3对象之后，这个current provider其实就是前面我们定义好的对吧？对，所以这个是已经有的话就用用这个已经有的，没有的话，我们再新建一个这个对象，好，那大家可以想到接下来的话，我们是不是就是要到区块链上去查很多信息，然后填到我们初始页面里面去了，对吧？这些信息就包括比方说我们的候选人的一些基本信息，有哪几个候选人啊，然后他们有哪几票，对吧，有有有多少票，得了多少票，另外还有就是我们当前的这个通的信息也是。
07:44
在一开始就可以查得到，所以这些东西我们通通都要查出来啊，那我们这个就给它包装一下吧。呃，我看我尽量跟这个课件上的代码写，写成一样的定义成一样的函数名称吧，它这里面叫什么来着。
08:04
它叫popul candidates，所以就是相当于把这些candidate全部放上去，对吧，全部给售出来好，定义成一样的popul candidate好，定义这样一个函数好，那接下来我们就得实现这么一个函数了，对吧？方什么情况function popul candidates好，那么大家可以想到，在这个方法里边，我们主要是要去做什么样的事情呢？呃，我们其实就是要把基本的呃，我们需要的数据都拿过来，然后该往哪塞塞进去，对吧？那么大家看一下，首先我们是不是要去把当前所有的candidate要拿出来啊，所以那就要跟区块链交互了，那voting.deployed。
09:13
点that肯定就是这种写法了，对吧？好，呃，我们还是叫voting instance啊，我这个已经简写了voting，我给一个箭头函数的写法floating in，所以我们的第一步其实是要去调用。呃，大家还记得我们的合约里边有一个什么方法可以去查询所有的这个candidate吗？我们定义了一个all candidate对吧？专门把这个暴露出来，又包了一下，其实大家知道这也是public，直接查也可以，那我们既然定义了这个，我们就用这个方法吧，所以点all candidate，对吧，All candidates。
10:08
点呃这里就可以直接去把它调用出来了，然后点赞我们处理一下毁掉呃在里边的话，大家就会发现我们是可以拿到整个这个返回数组的，对吧？那所以我们把这个定义成叫candidate，好，同样这个回调我们用这个箭头函数的方式。拿到它，拿到它之后，那大家应该就能够想到，呃，我们首先应该是不是把我们的这个这里还定义了这个candy的这个变量的，对吧，我们先应该把这个先实现，就是之前我们这里边写好的这个Alice对应谁报对应谁，因为我们在HTML里边是用它后面的这个ID去做识别的，所以我们还是要先把这个定义出来，对吧？好，我们类似的这个就是想法都是一样，那如果之前已经有这样的概念的话，现在应该实现是很简单的，好，那么我们就candidates。
11:21
应该叫candidate，前面我们这个是不是应该定义成candidates啊，对，这个定义错了对吧？Candidates啊，所以我们这里就是candidates，然后大家可以想到，呃，啊，这个这个不对啊，我们不能直接就这么赋值，所以相当于还是应该有一个for循环去遍历这个数组，对吧，所以大家for。呃，一个I等于零，I小于。看瑞点爱加加。
12:08
好，那么我们在这里循环里边去处理candidates，它对应的呃，大家肯定想到了，就是candidate array里边的I，我们拿到的这个里边的每一个元素就应该是每一个候选人的名字，对吧？所以就会放在这里，然后每一个名字作为P，然后后边给到就是我们定义好的那个叫做叫做什么来着，来看一下啊，之前叫啊就是can点几对吧，所以我们就定义一个这样的一个拼接，加上APP这样就可以了，对吧？所以这是我们的就是把之前已经定义好的那些再重新的实现一下，但是这里大家需要注意一点啊。
13:07
呃，大家可以看到，就是我这里实现的应该跟这个给出来的示例代码是不一样的，代码好像找不到对，大家可以想想一下，就是这里可能会有什么问题。Candidate array里边这是合约给我们返回的一个东西，对吧，合约给我们返回的东西其实是有问题的，刚才大家如果要是已经在这里，大家做过这个。我们在这里试一下啊，这个方法叫什么。好，这里is not a function。
14:04
没有定义的方式吗？大家前面试过这个方法没有？我们看一下这里啊哦，这里定义的居然叫all candidate这个好吧，太坑了啊。Open这个明显名字就不太不太好，所以大家看到返回的这个东西其实是一串helps字符，对吧？汉字符串，所以这个东西对于我们来讲是不可读的，我们总不能在网页上直接把这个说出来吧，说这是候选人一，这是候选人二，这这个就太夸张了，对，所以大家肯定想到我们既然这个不可读，那我们是不是有别的方法，比如说web，三是不是有一个叫做to utf utf8的一个方法啊？
15:02
嗯，这又has hass.sub substream，每一次我们只能取一个对大家看到，所以大家看到这是Alice丝，对吧，这是Bob，这是凯瑞，所以就是我们既然拿到的是一个he字符，那我们自然是可以利用WEB3的这些，就是通用的这些转换函数，这些方法去把它做一个转转码的，所以大家注意这里我们拿到的还是那个hi字符。对吧，所以我们得去怎么样呢？web3.toutf，那后面就把它括起来了，对吧？好，所以大家看到这是这么一长串，好那么拿到了这串东西之后，我们接下来其实要做的东西还挺多的，首先把candidate这部分东西都都拿在这个上面，对吧？Candidate的信息放上去，然后我们还要查询他现在到底有多少票，每个人到底有多少票，还得跟在后面。
16:11
然后呢，还应该去查token的相关信息，所以大家会发现我们主要这三部分内容，那我们就干脆啊，就是模块化一点，我们在定义三个函数，分别去实现这三部分内容，好了啊，首先第一个是要做这个，呃，就是candidate的每一行，因为大家记得我们在HTHTML里边，现在整个candidate那一块还没东西呢，对吧。什么东西都没有，所以这个时候我们先得把candidate的每一行先定义出来，所以这一步是第一步看一下它那个方法给的名字叫什么啊，我就不专门再去想叫什么啊，它叫setup candidate Rose好，我们就叫这这个名字，Setup candidate Rose好，然后下一个他做的是什么呢？叫popul candidate votes，所以就是把它对应的那个票数查起查出来，然后放上去，对吧，Popul candidatedy votes，好，最后还有一个方法是什么？好，这就是token的对吧，Popul to data。
17:33
Token data，好，那这三个函数接下来我们就要一个一个去实现了，好首先我们定义一个function setup candidate Rose，所有的这些方法应该都没有输输入的参数，对吧？我们直接就是一个功能性的一个一个用法，好首先是setup candidate roses setup candidate roses，这这一部分大家会想到我们其实就是要在之前定义好的，大家还记得那个HTML吗？我们来回顾一下啊。
18:17
HTML大家会记得在我们一开始的这一部分内容里边，这是vote for candidate啊。这是token，大家看candidate，这里我们首先就是定义了一个表头，Candidate votes对吧，然后后面t body是不是直接就给了一个看Rose啥都没有，所以我们现在其实就是要把我们已经知道了，现在已经知道了就三个候选人，然后每个人的名字都知道了，那我们是不是得在这一部分里面去加上三行啊？所以大家会看到这里定义的我们就叫setup candidate roses啊，所以那大家会想到我们怎么样去做呢？首先我们是不是要拿到这个刚才我们定义好的candidates这一个对象里边的所有的key，这就是我们的name对吧？这跟我们之前的那个做法是一样的，拿到它所有的key，那我们就要便利它了，对吧？我们便利用什么样的方法便利呢？我们可以直接用这个JS里边的for each这个方法，这个是比较比较方便的，对吧？For each，然后这个就可以用箭头函数来做了，For each，那每一个都是一个candidate，然后我们去定义一个箭头函数，每一个candidate，我们要做什么样的事情呢？
19:46
我们要把他的名字要写到，写到我们的下面的一行里边，对，呃，去对吧，那这一行我们现在还没有，所以我们是不是还得先去，在当前大家看到那个叫做candidate Rose的这里是不是还要去添加一些行啊，所以大家注意这里的写法啊，就是我们用j query这个写法，Dollar，它的这个ID叫做candidate Rose。
20:23
好，然后下边我们要用它的aend的方法，在这块RY里边aend就是直接在后面要要要添加这个倒元素，对吧？大家如果之前用这query的话，应该这个东西还是比较熟的，那后面我们要添加什么样的元素呢？那我们就得用字符串的形式把它加进去了，TDTR对吧？我们要加一行，呃，那么这里首先我们得加TDTR，这里是先要给那个名字对不对？所以这里的名字我们已经拿到了，就是candidate，好，那么我们再加加后边是不是就可以把这个TDTR封封起来了，TRTD对吧？好，那么大家想一下，我们除了这里要给一个，呃，诶，不对啊，我们这个应该是TR7D对吧？
21:21
先先定义这个行，然后再定义单元格嘛，对吧，这直接写错了啊，所以这里不是TT，我们这里先把这个单元格TD先先封闭起来，对吧，然后大家可以看一下我们这边是怎么写的啊。我们再瞄一眼这边的写法。呃，这已经是到了pop。这玩意有点乱啊，大家看一下，就是我们后边还要跟上一个单元格，这个单元格是真正要去把那个投票信息筛选出来之后放进去的那个位置，对吧，就像我们之前写死的那个单元格一样，所以大家注意这里是还有一个ID的。
22:13
那ID写什么呢？就是写我们之前已经定义好的candidates对象里边每一个名字对应哪个candidate对吧？CANDIDATE1CANDIDATE2写那个，所以大家注意看这里的这个内容啊，这里就是TD，后面再跟一个TD，而且还得有ID对吧？ID等于什么？呃，这里就不能不能有这个框，不能先把它封起来了对吧？呃，那首先我们这里就要去。好，ID这里应该还得有引号，对吧？所以我们这里定义一个单引号，把它引起来，好，然后我们加上candidates里边的candidate，大家知道这是什么意思对吧？Candidates就是我们前面定义的这个对象，前面我们不是已经把每一个它里面对应的那个名字都已经塞进去了吗？然后它的名字就是说对应的值是什么呢？是CANDIDATE1CANDIDATE2 candidate3这样对吧？所以我们这里要做的是啊这里啊。
23:23
把它拿出来，其实就是ID等于CAN1CAN2这样拿出来，所以后边我们再加去把它引起来，那还缺半个半个这个引号对吧，然后把这个刚才的单元格封闭起来，后边的内容就先不用不用放了，那就放在这里，然后我们就可以把这个TD封闭起来了。好来看一下啊T哦TR我们还没封闭对吧。所以我们这里再把TR封闭起来，所以大家可以这里可以看一下我们是怎么样把它加进去的啊，就是一个TR，一个TD，所以TR就是一整行，这是整个的这一行，对吧？然后这一行里边有两个单元格，前面这是candidate，这是它的名字，后边呢是它的得票数，这个得票数现在我们还没有等一下在动态查询之后塞进去，那这里首先要给一个DD是什么呢？就是刚才我们塞好的那个东西，对吧？好，这是这一部分内容啊好，那接下来。
24:36
嗯。这个set Rose我们就算告一段落，接下来我们set Rose了，接下来我们就把那个popul roses要放上去，对吧？Pop candidate books，那这一部分大家应该就能够想到，我们肯定就跟之前的时限是差不多的了，对吧？其实就是说把我们每一个人的呃，对应的那个票数从区块链上访问查询出来，呃，然后这样就可以去去塞到我们对应的那个do do下面去了。那首先我们先要定义一下我们当前的所有的name对吧？之前我们都是这么做的啊，Candidate candidate names我先定义一下，那candidate names应该是什么呢？这个是我们的object.key是就是我们刚才已经。
25:38
定义好的candidates里边所有的K，对吧？这就是他所有的内好，那接下来肯定就是for循环了，For let I等于零，I小于can name，这应该叫names啊，这是一个数组对吧？Candidate names.las爱加加好。
26:14
呃，那这就相当于我们要便利每一个内，好，那接下来我们怎么去做呢？就是voting对吧？去区块链上去查了voting.deploy的点，好，那这个过程大家会去拿到一个叫做voting instance instance去定义一个。定义一个回调对吧，然后在这个里边我们拿到了呃，Instant的话，那么就可以直接去查询他的方法叫什么叫叫偷偷看一下啊，合约里面定义好的叫total for。
27:07
Total vote for对吧？好，我们把这个定义好，那totals for谁呢？肯定就是我们这里的candidate names里面的第二个元素，对吧？所以直接把这个传进去，我们就可以去查询它的呃，它的值了。好，那么这个完了之后，肯定要把它打印出来，就是点赞对吧？呃，这个返回的应该我们就是一个数量了，所以我们叫一个count吧。我们拿到这个数量之后，是不是就应该直接写到它对应的那个单元格里去啊，所以又是一个j query方法对吧？Dollar这个首先找他的那个ID，他的ID是什么呢？那我们还得到前面我们定义好的candidates那个里面去找了，对吧？所以是加上我们的candidates candidates什么呢？得把这个name放进去对不对？所以是candidate names，哎，大家注意这里写的稍微复杂一点，大家如果要是想把这个提出来，也可以提出来写，对吧？好，那么它的内容是什么呢？那肯定就是HTML，把我们想要写的内容直接写在里边，那这里边的count应该还是一个big number的，那呃，那个big big number的一个类型，所以我们要用一个to string的方法把它做一个转换，这就是我们。
28:46
把这个查询出来的每个人的得票数，然后直接写到前面我们定义好的对应的这个ID这里的这个单元格去，跟我们之前的做法是相似的，对吧，只不过就是所有东西都是动态的了，变成动态的而已，好，最后我们再来实现一下最后一个方式，哎呀，已经50了，但大家是不是想消化消化，还是说我们先把这个实现完，实现完嘛，对吧，毕竟这这一部分就是。
29:16
Popul token data对吧？这是我们定义好的这样的一个函数，它其实就是要呃，让我们到区块链上去查到我们的这个token的相关信息，那这个其实就更简单一些了，我们就voting.deploy的。点the voting in对吧，然后定义回调，回调里面我们要去做什么事情呢？回调里边要去挨个查我们跟token相关的信息，那这个其实就就对大家来讲就简单多了啊好。
30:04
首先我们看一下要什么东西啊，大家还记得我们这里HTML里面要什么东西吗？Token相关。Token相关四个东西，一个token for sale，这就是呃，相当于是我们那个总共总共的token对吧，还有一个是token so的，还有一个是token price，好，那么我们这里就是我们的函数叫什么名字来着，叫叫偷偷偷粉子是吧。我没定义。啊，所以我们就直接用这个就是public变量直接去调用吧，Total to to。好，然后拿到它的返回值，大家会想到这里应该就是一个number对吧，定义一个number amount吧，好，那么拿到的这个amount要写到哪里呢？写到对应刚才我们看到的。
31:15
Tokens total这个地方对吧？ID在这里，我们要写到这个单元格里面来，好，所以还是这块这个写法，然后井号表示token，井号表示它的ID token to是叫token total吗？Tokens total，好吧，得注意这些细节啊，要不然到时候这个bug都不好调，Token toke，呃，To，然后我们直接HTML，呃，把我们刚刚拿到的amount to string就可以了，对吧，跟我们前面的那个处理几乎都是一样的。好，那接下来大家看到我们除了要做这个token tos，那应该还有别的对吧，类似的。
32:06
呃，下一个我们要拿那个so的，对吧，Toke token so的就叫token sold，好，这个简单啊，Token。对。同样我们也是一样的调用方式，对吧？这个大家都是无脑的去敲就可以了，同样Dollar我们把它写进去，这个是在哪里呢？看一眼叫token sold，这个不要少了，这个s token，然后点HTML。哦，我们这里怎么还定义这个voting in的光超上面了啊，Amount对吧，amount.to string，好，呃，那同样我们类似的，哎，这个其实都是都ke跟这个复制粘贴差不多了，对吧？大家能想到我们下边应该还有一个查它单价，那我们就看单价定义的叫叫token token price对吧。
33:24
所以这里token price点，呃，这个我们就叫吧。Daughter，哎，再来看一眼，我们定义的叫什么？这个叫token cost，好，就按你这个名字来cost.html，对吧？price.to string，好。呃，下面应该还有一个什么，还有一个balance，当前合约里面的balance，诶这个就有意思了，刚才大家记得我们给大家控制台有十个问题，让大家自己去敲，最后一个大家还记得是什么吗？就是查看当前合约的balance，对吧？大家是怎么敲的，敲出来了吗？所以我们现在是要用WEB3点Eth.get balance方法去做，对不对？大家刚才是不是是不是做到了。
34:33
所以大家注意一下这个啊，那这里边你到底要get谁的balance呢？那就注意啊，我们这里是就是我们voting instance这个合约它的地址对吧，所以我们把这个拿到里面来，好，那接下来大家就会发现。呃，Get balance，然后我们拿到的这个balance就叫balance吧，好，那接下来同样我们把它写入到对应的到节点中去，我看一下叫什么名字啊，Contract balance，注意井号contract balance.html，对吧？
35:31
balance.to string，好，所以大家看这就是我们简单的实现了，一开始加载这个页面的时候，我们需要去查询哪些内容，然后填入到我们当前的内容，就是当前的页面中来，大家可以发现就这么一个小项目，其实里边需要查的东西还不少呢，对吧？一点一点去写，当然就是一点一点去写的话，看起来也没那么多，大家看到现在写了60号，其实里边的真正的工作量也没太多，就是重复劳动，对吧？所以大家自己去敲一敲，把这个实现一下。
我来说两句