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

好，那么接下来我就给大家来说一下我们这个HTML。这一部分视图对吧？网页视图大家看到这个量是很大，但是事实上呢，呃，我觉得其实并不难，因为里面大家如果去看的话，就会发现大部分都是重复性的一些一些结构，所以我们简单的过一下就好，我这边呢，就是到时候我把这个直接贴到，就是我就直接贴过去了，那大家就是我觉得一些比较核心的部分，大家可能还是自己手敲一下，那像有一些就像这个link什么的，那直接复制粘贴肯定没什么问题，对吧？好呃，我们现大概来说一下，首先HTML还是啊，前面是这部分是头对吧？那头这个我们大家可能一般都不关心，因为头里边就是定义一些样式啊，还有我们title，就整个这个网页的title，这些其实在页面上都没有什么展示的，所以大家可能也不是太关心，那我们主要看下面的body这一部分，从下边这里开始一直到结束，这里都是body对吧？啊，当然最后。

还有这个scripts，那是就是我们这个JS的部分，呃，我们先看这个body里边，这包含了我们整个的页面布局，大家应该能够想到，对于我们之前的简单投票来说，那其实很简单，就是一个表格，然后里边是有哪些人，然后每个人多少票，下边有一个投票的那个输入框和按钮，对吧，就非常简单，一个架构一下就能想到，那现在呢，我们这个作为一个，呃，真正意义上的算是一个项目的一个实现，那肯定就没有那么简单了，那大家可以大概看一下我们现在的这一部分会分为就是哪几个模块。呃，当然首先这个h one这一行，这是这是我们网页的大标题对吧？啊，这里写的还是rob的，就是一开始是基于测试网络去做的，所以说大家没有这个环境的话，我们的思恋，或者甚至就是大家直接布到这个GA纳上，我觉得也可以啊，就只不过思恋上面的境，大家会发现，如果有同学不了思恋的话，会发现明显环境比开尬是复杂很多，对吧？所以我建议大家还是能不思恋就不思恋啊，当然有同学说，要是说我回去之后我电脑性能好，回去之后我同步一下rosson，我觉得更好啊，就大家啊，我觉得是可以的，呃，就是看大家这个自己的条件，还有这个自己想法，好，那接下来我们来看一下这个下面的这个结构，主体的结构，大家就会看到了，那外面这个div其实就是一层一层的包起来，对吧，最外面一个container，那全放在一个容器里边，然后下边大家看这是。

一个肉，那其实就是会把下面的这一个整个这一部分当成一个大拈来算，那整个下面的这个大模块，大家看这是一个什么东西呢？大家会发现啊，这其实前面这么大一坨，其实就是一些帮助性的文档。

所以这就是如果我们真正去做一个DAPP的话，如果这其实很糙的一个实现了啊，当然就是大家会看到直接就是how to use，然后下面就是step one step two step three，就这样就来了，对吧？呃，当然了，里面还会有一些这个像这些就是链接啊什么的，Twitter对吧？这这些东西我都没删啊，就是这本来就是这个上面它的一些项目，我就直接把这个直接都扒下来了啊，这大大家就是自己做项目的时候，肯定就是说会把这些东西根据自己定制化的内容去做一些调整，对吧？呃，所以这些东西大家看着内容多，其实这些东西我们过一眼就知道了，前面就是一些说明性的文档，好，那接下来我们看这个div，这一部分就是下面的这个div，下面的这个div，这又是一个肉，所以它是用这种方式去给大家做这种样式的布局的，对吧？那接下来的这一部分来看一眼，这是在做什么呢？

大概到一直到这里对吧，一直到这里。整个的这一部分大家会发现，首先它的标题是candidates，所以整个这一部分其实就是候选人的信息，候选人列在这里，大家想到了我们之前最主要的就是候选人和他得票数嘛，所以这个肯定后边也会跟上得票数，对吧？好，呃，大家应该还记得我们之前简单投票里边，在他的HTML里边直接就把候选人名字全哈写在里面了，那我们这里边作为一个正规的项目，大家会想到我们肯定不会这么去写了，那我们怎么实现呢？大家看一下啊，首先上面标题就是整个这个模块叫candidates，这是候选人，然后下边有一个table。

这个table就是我们之前的那个主体对吧，一个候选人，一个他后面的得票数，那我们看一下前面t had，这是他的表头，表头这里跟之前还一样，一个叫candidate，一个叫votes，这是表头下面大家注意啊，这个t body里边什么东西都没了，然后里边给了一个ID，叫做candidate Rose。所以大家能想到之后我们会用什么样的方式去实现吗？对，我们会应该会根据在就是在JS里边，我们会去动态的把相应的这个道结构添加到这个模块里面去，对吧，添加到这个t body这里来，所以等一下在JS里面我们看一下它的实现，好table这里看起来比之前还简单了，好那接下来除了上面这个table呢，下面大家看第二部分是什么。

第二部分叫tokens，所以大家很自然的就能想到这个tokens这里，那就是当前的这个发行的代币的信息，也就是说呃，一共发行了多少，已经卖出去多少啊，这个我们当前这个代币的单价是多少啊，肯定都会在这里面写出来，好，我们大概的瞄一眼下面啊，又是一个table。这个TABLE1直到哪里啊，这个TABLE1直到这里，这几乎就完了，对吧，那里边其实那就简单了，都是一些table像了，好，首先我们看一下啊，这个里面它都没分这个表头和表身，直接上来之后简单粗暴，就一行一行的往。列在一起，我们看一下每一行是什么东西呢？一个哦，这还是有表头的TH，对吧，Tokens info和value。那所以就是这边一列是token info，这边是value，就一边是它的信息，另外一边是它的值，那信息这部分是什么呢？我们就看到了这是token for sale。

就是啊，这里它的意思其实是总共去发售的token，总，也就是我们所说的总数，对吧，就是total tokens，那接下来就是token so，已经卖出去的token，接下来是price和token单价，最后balance in the contract，这是当前合约里边已经有的以态的数量，对吧？是这样的一个结构，好，那么大家可以看到每一个表格后边的这一列，Value这一列都是空着的。所以当然这个就是我们要实时的去查询，然后填在后面去显示出来，那每一个都给了一个相应的ID，比如说一开始这个叫token to，所以这是total token，后面叫to tokens sold，然后这个叫token cost，这个单价啊，花费它这个给了一个叫cost的名字，然后最后一个叫contract balance啊，这是这几部分token和我们的candidate信息都有了，那接下来大家可能就会想到我们是不是还应该有voter的信息啊。

好，接下来我们再看下面还有什么东西啊，啊，当然了，那个最重要的一个，其实我们很重要的一个功能是投票功能啊，这个东西不能少，所以大家可以看到下边还有两部分内容，一部分就是投票vote for candidate，还有一部分啊，当然了，就是还有一个功能叫叫买token，对吧，就是去buy purchase token。那另外还有一个模块就叫做lookup water info，所以就是还有就是water的信息，那这三部分我们再大概的看一下这个HMHTML里边这个页面是怎么布局的啊，Vote for tokens vote for candidate，这个里边首先给了一个message，这就是还是跟我们之前那个改动是一样的啊，然后这里大家发现跟我们之前的实现类似，给了一个。

Input，也就是说这里还是要手动去输入ID candidate，它的name名字对吧，手动去输入，然后呢，后面空了一行，下边又有一个vote tokens。所以就是说跟之前不一样了，你不光是给谁投票就完了，你还得指定给谁投，给他投多少票，所以这两个信息都是要输入的，那接下来大家就熟悉了，还有一个button对吧？啊，这个button这是用这个链接的形式去实现的，那么它的有一个on click方法，大家看这里写的有一点有一点特别啊，大家见过这种写法吗？Vote for candidate，那很明显就是我们在JS里边要实现这样一个一个函数，然后就可以实现这个on click它的这个事件的处理，那后面这个return false又是什么意思呢？

嗯，取消默认，对，取消默认行为对吧，而且大家知道在这个on click这个事件里边，给他绑定的这个函数方法其实是可以有多个的，对吧，所以这两个同时绑定给他，它的效果就是我们会去执行vote for candidate这个函数里边的方法，它里边的内容，然后return false，取消掉它默认的行为，它默认的行为会是什么呢？呃，这里面它是不是会跳转啊，对，它是一个link对吧，点击的时候会跳转，所以说这个时候就把我们之前大家知道这个是要跳转到当前页的头上去的，所以这个之前我们简单实现其实是不对的，所以我们在后面加一个return for把它取消掉啊，当然这个这里给一个名字叫vote啊，这是我们投票的这个环节，那接下来我们看他买买这个代币的这个环节，买代币的这个环节大家就会发现，首先也得有一个输入框，就是你要买多少对吧。

呃，这里大家就注意了，我们要买多少，这里其实我们不应该让用户输入。你花多少以态对吧？所以大家注意啊，这里其实我们要做的是让用户输入他到底要买多少token，这才是一个合理的一个应用的一个表现，对吧？我不能说我上来之后你直接就告诉我说你要花多少以太，这个明显就好像跟我的需求就不符合嘛，我是要买多少票，这个才是正常的一个需求，所以这里我们输入输入的是number of tokens to办，然后接下来又是一个button，同样是用链接形式实现的，那这个点击的时候，我们的on click事件是一个by tokens这样的一个函数，同样后面for取消到取消掉它的默认行为，然后这个名字叫做BY。

好，这是我们的两个主要的呃行为对吧，然后下面还有一个行为，我们可以去查voter的信息，那大家就能想到这个输入，那你当然就要输入一个voter的一个地址了，对吧？然后我们后面跟一个按钮on click的时候，我们给定一个一个调用的事件，我们用这个函数去处理他这个返回我们投票者voter的信息。然后显示在这里面，所以大家可以看到下边还定义了我们这个一个div，叫做vote details，所以到时候我们一定会根据他的这个tokenport和votes cast这两个ID去把查出来的内容填到里面去，对吧？所以大家能看到整个这个页面怎么样去实现。

好呃，接下来呃，当然了，我们最后这个还有这个我们要用到的脚本，首先这块这个不能少对吧，然后就是这个APP的JS大家注意一下啊，再跟大家强调一下，我们文件结构里边大家能够看到。在one pack con JS里边，我们定义了是要one pack是一个打包工具对吧，所以它会把我们app.scripts下面的index.js。打包之后生成build下边的app.js所以我们的HTML里边引用的一定是app.js对吧？所以大家要注意这一点啊，大家可以看到build的这个文件夹下面，我们这里边能用到的就是app.js和。index.html，所以大家看到它俩是会放在一起的，所以我们在index.html里边直接引用这个app.js就可以。

那当然了，就是我们真正编辑的JS源文件是哪个呢？那还是这里的index.js对吧？所以这里我们注意分清楚这个我们真正要编辑的JS和最后要用到HML里面要用到的JS是哪个。