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

好，那接下来其实大家看到啊，我们就是写这个HTML了，在写HTML之前，大家首先要整体的印象就是我们的这个HTML主要是长什么样子，对吧？昨天我们已经跟大家过了一遍，那大家应该能够想到我们要的其实就是简单的一个表格，然后能够列出我们的候选人名单，然后能够实时的查询到他现在有多少票，呃，当然了，我们当时说的是后面他应该跟一个按钮，直接点就给这个人投票，呃，但是我们刚那个昨天看了这个HML源文件之后，会发现我们最初的这个实现还是手输，用一个文本框把它输入，那我们还是先实现这个最基本的版本吧。好，那么接下来我们就开始手敲HTML2了，那大家应该之前呃学过这个前端的课程，应该大家都很。

熟悉一上来之后，它的头应该都是do type HTML，对吧？HTML，然后接下来会有一个HTML的标签，当然了，下面这个除了上面的do type之外，别的地方都是标签，都是成对出现，对吧？一定要有这个结束好。呃，我们这里就空格就可以了啊，要不然就是看的不是特别清楚对吧？我们知道一个HTML上面一定要有有head，有头，然后还有body，这个大家都都很熟对吧？我们就快速的把它这个整体的模样先搭出来，那接下来我们hat里边主要有什么呢？那肯定我们知道，就是主要的东西就是一个title，这是我们整个页面的一个标题，那我们这里就叫它，呃，Voting APP，好，后面开头，那接下来我们看包底这一部分，包底这一部分呢，大家肯定就想到了，首先我们应该哦，那个title是我们整个页面的title，这个不是显示在我们整个这个页面上的，对吧，它是在浏览器上面我们看到。

它的title，那我们在真正的这一个页面里边，当然也需要一个title，那这个我们不是title的关键字了，对，直接大家用用h one或者是别的一些东西，我们直接定义就好，或者大家想建一个d div也是可以的啊呃，我们直接给一个名字叫做，呃，一下子想不到别什么名字啊，我们就就就叫简单投票吧，就叫simple VO第好，然后。

我们把这个写好，接下来大家可以想到我们，呃，主要是一个表，那一般情况大家在做页面布局的时候，都会把它按照div来划分，对吧，大家应该之前是有过这个练习的，是不是页面设计，然后页面布局的一些设计对吧？好。好，有了这个整个的框架之后，呃，那大家发现里边我们想做的其实就是要塞一张表，对吧，那肯定就是一个table了，这个table啊，我们就先给定指定的这个class啊，呃，这个class我们现在先不想，就是应该默认它肯定是table，这个跟我们之后的CSS样式相关，对吧？我们最后再填它也是可以的，嗯，好，那么有这个table之后，接下来我们就会想我们的table里边，那还会有表头，还会有，还会有整个。

表的这个就是所谓的t body对吧，表表深，或者说这个整个的表体，那我们先定义一个t had t好。然后t hi，这里边大家会想到我们肯定就是，呃，我们先把下面的这个就是框架都搭出来啊，框架搭出来就简单了，Tbo t body，好，上面是表头，下面是这个整个的表格的内容，T焊里边呢，大家都知道，就是我们肯定定义一个这个行的时候是用TR对吧？杠TR啊先定义一个行，这个行里边我们要什么东西呢？呃，那我们要列写我们表头的内容对吧，一个是候选人，一个是他的得票数，那我们的候选人就呃，大家知道表头是得用TH的，对吧？表头的单元格是TH。

呃，那么我们，呃，这个就不要这么写了，一个单元格，我们直接把它写出来就可以了，对吧？Candidate，那接下来还有一个单元格，应该是叫做它的得票数，呃，我们就叫vote count吧。好，这是表头的两个单元格就已经出来了，那表身这里其实我们就是这个也是一样的啊，我们先定义一行，然后大家就会想到我们第一行应该是谁呢？我们当时啊，这里就不是TH了啊，应该想到对在表示里面是TD对吧？所以呃，第一个我们直接写死了Alice TD。

然后下边大家记得我们后面一个是先控制的，是要实时查取出来往里填的对吧？好，我们现在先不写，当然我们记得这里如果要是想要能往里插东西的话，肯定这里是得给ID的，对吧？这个我们先放着啊，之后我们再说，呃，然后这个我们就知道可以把它复制一下了啊，我们从这个直接从这个TR开始复制，这个方便一点啊，因为爱丽丝这是一行，下面我们还有报对吧。下面还有carry，好，我就先把他们这样都弄下来，好，Alice ball carry，这就是我们整个的这个表格的单元格都已经构建完了，这就是我们主体结构已经可以说已经搞定了，对吧，非常简单啊，就就这么一个表格，然后我们看一下我们定义了这个table之后。

那我们想到下面除了这个表格还得有一个投票按钮对吧？好，那我们这个投票按钮为了简单起见，我们是直接放在外边的，当然大家可以直接去定义button，呃，我们这里的方式是用这个呃，链接的形式，那链接的这个形式比较好的一点就是大家知道就是它的样式更更加的丰富一点，我们如果要是引用一些就是样式的内裤的话，就很容易能改变它的外观显示的样式，所以我们这里定义一个链接，那么大家还记得昨天我们讲到一点，就是它的这个链接的地址引用是给的一个星号，对吧？呃，井号。这个井号表示什么意思呢？当前的那个锚点，那其实就是我们当前页对吧，所以它其实就是不跳转的意思，我们只是一个按钮吧，按钮只是表示我们要投票，跟页面跳转没关系，所以我们这里就直接给一个井号。

那后边当然就有它的on click事件了，因为我们要把它当一个button来用嘛，所以on click，呃，这个我们先不写啊，之后我们再去实现它，当然了，这里肯定还会有class来定义它的样式，大家肯定能够想到的，我们先把它先放着，呃，然后之后大家可以想到这样的一个link，它应该。诶，大家发现这个只有一个link是不是还不行啊，你给他一个名字吧，这个应该就是就叫投票对吧，或者大家想给中文也可以啊，因为打英文会方便一点。呃，然后大家可以想到我们有这个link，这只是有了一个按钮，因为我们这里是直接把它放在表的下面了，那我们不知道给谁投，所以我们前面还得加一个文本输入框，对吧？那如果说大家想要把这个做一个改动的话，其实我们可以把这个按钮直接放在每一个。

行对，就是最后那个单元格里边，或者大家重新就是再再放一个放再放一列，然后把这个按钮放在后面也是可以的，那样的话我们可以直接选取它当当前的对应的那个ID就可以了，对吧，那现在的话我们没有把它选取出来放在下面，那我们得手输这个文本框了。得输入他这个候选人的名字对吧？那这里我们来定义一个input，它的type是呃，Text对吧，Text。那这里的话，我们直接就可以把它把这个音库的没有什么内容，直接可以直接就是一个监括号把它把它保存好对吧？好，那么大家可以看到，在这个过程当中，我们其实把主体的HTML页面里边的所有的元素都已经定义出来了，整体来讲我们啊，上面title这个先不说，下面的body的话，我们上面是一个大大标题。

下边是一个div，那div里边我们又分成主要分成两个部分，一个就是我们整体的一个表格。哪些候选人，每个人有多少票，那最下面呢，我们给个输入框，然后你要给谁投票的时候，把名字输进去，后面跟跟个按钮vote，然后提交，这就是我们基本的这个页面的形式，好那么下边的话当然就是保底完了之后大家会把我们的那个。脚本就是大家的JS文件要引入对吧？所以我们先放这里，先写一个script，我们先写在这里，呃，当然就是说现在我们还不确定，就是到底我们要引入哪些，那我们先把它放在这里再说，好那么这个页面大体这样完成之后啊，其实这个时候大家已经可以在我们的这个就是直接打开看一下效果了，对吧？当然我们现在这个效果会很简陋，非常简陋啊，你先瞄一眼，存一下看看。

呃，我直接把它存在桌面好了，呃，这个一般情况我们定义的话，定义简单一点，就就这个index.html对吧，大家知道这是很多这个我们服务器启动的时候，默认的路由下面就是默认的页面，加载的时候就是这个，好我们把它定义好了之后，我们现在直接在浏览器里面试图把它打开一下。呃，大家可以看到。就是我们很简单的这个定义，它就长这个样子，上面一个一个标题，然后下面这是我们一个表格，因为我们没有定义样式嘛，所以说它的连这个框线都没有，对吧？但是我们大家如果打开F12去看它的这个elements的这个元素的话，其实是可以看到这里每一个表格，它的这个单元格都是可以看的清楚的，对吧。

那我们这个表格现在定义的比较小，下面是一个input，然后这边是我们的这一个，呃，Button，所以我们的样式非常的简单，大家用这种方式就可以把它实现出来，呃，大家这个不需要留时间了吧，对吧，这个很简单，就我们就直接往后走，那接下来呢。接下来我们看一下，在这个页面里边，我们现在是只定义了一个静态页面，我们先把这个样式先加上吧，比如说我们看一下是用的什么样式，这个样式就不重要了，对吧，我们可以复制一下。

哦，这里是用了这个bootrap的这个样式，你直接把把它复制过来，在定义这个样式的时候，在head里边直接去引用这个link，对吧，直接就可以引用这BOO strap里边的样式了，呃，那这个等一下，我把这个放在这里，大家可以再去再去照着它写啊，应该昨天的这个课件已经上传了，大家应该能看到，对吧，我们直接把它加在里边，有了这个样式之后，那我们就得定义它里边的一些class，呃，那我们可以看到，就是前面我们已经定义了一个，呃，这个tableable的这个class，这个应该我们看看按什么定义啊，好，Body这里首先定义了一个container这个。我们需要按这个样式来把它写plus等于container好，然后table，我记得应该是有两个样式的，对，他还有一个table的。

直接把它复制过来，因为样式这一部分对于大家来说很简单，也不重要，我们就是实现一下就好，好这里还有一个table responsive，所以这是一个响应式的布局，对吧？引号不要忘掉，这个div是这样的一个样式，然后我们再看下面还有什么样式。下面哦，这里有一个这个button的样式，对吧？拉，我们的这个链接，它用到了一个button的样式，它是button和button primary好，我们现在再来看一下。

它的样式就变成了这样，就看起来这个好看多了，对吧，所以大家可以就是先把这个样式先调好，这个都不难，所以说大家呃，照着只要能把它实现出来就可以，那接下来我们想说的是什么呢？我们想说的是我们有了静态页面了，那怎么样去动呢？大家首先就想到那我们在里边需要动的地方，我们肯定是得指定ID的，对吧，要不然我们没有办法用这块去获取它的一些东西。呃，那这里哪些地方我们需要去去跟跟这个页面交互，跟我们的区块链去交互数据，去获取数据呢？我们先看一下这个页面上还缺什么东西。首先这里的what count，这里肯定是缺东西的，对吧？这里是到时候我们要从区块链那里去拿出来的，还有一部分呢，那肯定就是vote这里了，这里我们在点击的时候，代表我们一个投票操作，是要向区块链去发起发起请求的，所以这里一定是要带ID的，好，那么我们回到这个页面当中来就会看到。

我们这里在这个爱ice丝后面的这个单元格里边，我们要填充东西上去，那这里就得给一个ID对吧？我们这里的方式不是写死那个，把它叫做Alice，我们给的是一个编号啊，Candy one，我们就也先照着这个方式来，那么同样就是Bob这里的话，我们就candidate to，对吧？Carry这里我们给一个can three，好，这几个ID我们给了之后，我们就能想象到我们在页面加载的时候，就可以根据ID去筛选，然后把我们查出来的每个人到底是多少票，我们就可以塞到对应的这个单元格里边来了，对吧？啊，这都是我们JS里边要去实现的东西，好，那后面还有一个地方需要有ID，那那大家肯定想到了，就是我们投票的时候，这个是需要ID的，对吧？那这个ID主要用作什么呢？那这个投票我们主要。

而是要实现一个on click方法了，那另外就是我们是前面这个输入框，我们是需要一个ID的，因为这里我们得用ID来拿到它输入的信息，对吧？这里还是叫一个candidate好，这里就叫一个candidate好了，或者我们可以就是把这个名字大家再再弄的清楚一点，也可以自己去选一个特殊的名字啊好，那么我们把这几个ID加进来之后，就会发现需要跟页面交互的地方，我们已经有指定的锚定了，那接下来vote这一个动作，我们还得实现一个方法，对吧？On click的时候，我们需要去真正的给用户做一个投票，定义一个方法，Vote for Andy it，好，好，那么我们肯定就可以想到下面我们的这一个script的话，肯定就得把这块加进去，对吧？一般情况我们要交互的话。

咱家之前应该是详细讲过这块的吧，没没有讲过啊啊，我没讲过啊啊，那我们等一下涉及到的时候跟大家简单说一下，然后大家试一试，其实就知道它怎么用了，对吧？这块还是比较简单容易上手的，好那么我就把这里copy一下啊呃，大家可以看到，首先这里是一个j query的一个，就是它是我们在线的一个引用的一个文件，所以它是一个j query的最小版，对吧？STEM me.JS我们把这个引用过来之后，它就可以简单的满足我们需要的一些一些东西啊好，那大家刚才可以看到了，我们除了这个这carry瑞之外呢，哦，刚才这个弄错了啊。

应该放在S里面对吧，放在内容里面好，那么我们刚才大家看到了，除了这query之外，我们还得需要一些别的东西，我们还需要什么呢？我们得跟区块链去交互。所以说我们的前端就像我们之前在note里面一样，我们一上来就是require web3对吧，那我们的前端是不是也得有WEB3对象啊，所以在浏览器里边我们也得引入一个WEB3，那我们这里的引入方式是什么呢？也是大家可以用在线的这个这个文件啊，等一下大家可以试一下，如果要是这个在线的文件打不开的话，那可能就会比较麻烦，大家就得我到时候可以给大家分享一下这个原文件，大家把它要就是放到自己本地，然后引用一个自己本地的这个JS。

用这种方式好，这是一个，大家看到这也是一个WEB3的命，对吧，最小化的一个实现，把这个我们需要的东西都暴露出来，好，这是我们需要的依赖的这些JS，另外大家就想到了，我们自己肯定还得定义一个自己的JS，对吧，要不然怎么实现我们上面这些逻辑呢？所以我们最后再定义一个，那就是我们自己的index.js好，Script好，这个完全定义好之后，那这个当然页面上这个不会不会有什么变化了，对吧？大家这里刷新一下，看到还是同样的东西，呃，但是大家可以看到，这就已经把我们基本的这个HTML文件完全实现出来了，大家现在想要先把这个先做完吗？应该跟着可能已经做差不多了是吧。大家还需要单独的时间吗？那我们先往后走啊，等一下，就是大家全部等一下，我们全部讲完之后，给大家留整个时间，大家来来就是自己再来慢慢敲一下，好，那接下来我们既然这里定义了一个点index.js，那肯定我们这里是需要去创建一个index.js文件的，对吧？好，我们这里。

需要的这个index.js文件大家已经可以想到了，我们首先上来肯定是要去定义一个WEB3的，对吧？我们玩一下吧，WEB3等于因WEB3这个跟我们之前的写法都是一样的，对吧？我们还是用本地的这个，呃，就是我们启动的这个provider.providers.http provider，那我们等下就还是先用garage来来试验了，对吧？那后面是http local host8545，好，这是我们，那大家可能就想到，诶，那你这里怎么不像我们一开始你先要require一个WEB3的，对吧？

那这里为什么不去require这个东西呢？这里给大家简单的瞄眼，因为我们这里引用的是这个在线的这个这个mini版本，对吧，大家看一下它是个什么东西啊好，这里网站应该是能够打开的啊，所以大家看到就是这就是这个文件，我们引用的就是这么个东西，大家直接拖到它，它现在这个实现，这都是压缩过的这些方式，对吧？可能可读性比较差，但是我们直接拖到最后呢，大家就会看到，其实它是会定义，大家看到N等于T，然后会引入这个lab.WEB3这个包，对吧。

然后呢，他会去说这个window.web3就等于N，然后会exports n一点exports n，所以说其实我们的这个大的we就是大写的WEB3已经成为了我们引入这个文件之后，就已经成为了一个浏览器的一个全局全局对象了，对吧？所以我们在这里不需要再去，就是，呃，但是熟悉的可能前端是import或者怎么样的一些框架都是这样写，对吧，我们不用再去import或者require这样一个文件了，我们直接用就可以了，已经有了WEB30个对象，好，然后我们看一下，我们会去定义一个abi啊，这个abi我们就得去。jason.pass我们之前写出来的那些东西了，对吧？我们先先放在这里啊jason.pass这个会比较比较大，等一下我们再去选，然后我们肯定就会同样的步骤，我们之前都很熟悉的，我们定义一个抽象的合约对象voting contract，那它就等于WEB3点Eth.contract我们把前面的API重进来，然后我们再定义一个contract instance instance等于VO contract.at啊，当然这个后面是我们的那个address，对吧？啊，我们先写上contract address，那前面肯定我们还是得有一个，把那个address拿出来。

的对吧，Contract dress，我们这里的话就可以直接把它都，就是把我们前面部署完了之后那个hard code都拿出来，对吧？呃，现在我们现在不用管这些啊，然后大家注意，我们在HTML页面里边呢，是定义了这个就是直接写死了每个人的，但是后面这个ID我们又不是写死的，就是我们这个给的是123的编号，那我们在JS里边肯定得知道哪个编号对应哪个人，所以说我们在这里先定义一个这样的一个对象，对象数组啊，不是对象数啊，就是我们定义一个这样的一个对象，Candidate，哦，那大家终于想到了，这就是一个简单的对应关系了，Candy day。

特我们复制一下。哦，前面这个好像逗号打错了啊，报这里的逗号，注意变成半角。

好，我们定义了这个对应的关系，那接下来呃，大家肯定就会想到，我们一开始上来的时候，页面就要刷新，就要把它对应的那些值得放到我们这里看到的后面这个表格里边，对吧，就是我们ID candidate几要把它放进去，那我们怎么放呢？这里就用到了这query里边的写法，J query里边的写法是什么呢？有一个Dollar符，对，这个Dollar符就代表这query，那我们看它怎么写啊，Dollar，然后document，大家知道我们整个的这一个文档对象里边。就是我们我们整个的这个文档对象，其实它有一个名字就叫做document对吧，所以Dollar document，其实我们在这里就是要操作整个文档，就是操作这块里边，其实这个就是很方便的一个一个方式，就是只要加上Dollar服务，我们就可以直接操作文档里边HTML文档里边的do对象，那我们后边可以就是加上这个全局的这种变量名，也可以带上井号去按照ID去做筛选，当然了我们也可以按照plus之类的东西去去做筛选，这些大家应该是有概念的啊啊，那么我们这里去一个Dollar document，然后后面直接就可以调用它的方法，我们这里去调用它的一个ready方法，就是说整个文档页面加载要完成的时候，我们做一个渲染。

那怎么样渲染呢？大家可以看到它这个方式其实就是我们的回调函数的方式，对吧？我们写一个回调方式，然后这个里面做什么事情呢？因为大家知道这个文档加载本身就是一个异步的过程，所以我们是用回调来来完成的啊，所以Dollar document ready里边给一个回调，那首先我们定义一个candidate，呃，我们定义一个candidate list吧，Candidate list，它就等于我们已经定义好的candidate。

啊，当然我们这里定义的这个，呃，Candidates呢，这个是一个对象，所以说我们这里要的candidate list其实是要一个它的名字的数组，对吧，要一个列表，所以我们把它转一下，大家知道JS里边我们这个转换很方便啊，object.kiss啊，这个比我们solid里边就方便多了，对吧，我们直接拿一个这个对象，或者这个对象就有点像我们的mapping，我们直接这个拿他的key，就把所有的key就拿出来了，所以这个candidate list里面应该是什么东西。

这应该是什么东西？其实就是我们上面定义的Alice Bob和carry对不对，这就是我们这个对象的key，这是key，这是value嘛，对吧？所以object.key它其实就是把一个对象里面的所有的键，所有的key拿出来保存成一个数组，所以大家注意这个方法，呃，所以我们很方便的就提取出了我们这个定义好的对象里面的所有的，呃，看name list，好，然后我们下面就是要把每一个人的就是得票数查出来，写到后面去了，对吧？我们已经拿到了每个人的姓名，那么这个姓名就是我们去查的时候的那个参数，因为我们记得我们的合约里面有一个，呃，叫什么，Total叫什么，我给忘记了啊，等一下我们再去查，有一个叫做total lose for，好像是对吧，有一个这样的方法可以查，我们要传入的参数是他的姓名，所以我们这里有了这个姓名，我们就可以一个一个去查了。

好，那同样这个这个里边的局部变量，我们可以用一个let来表示，对吧？可以用这个就是ES6里边新的这个局部变量的定义方法，Let I等于零，然后I小于can list.la这都是常规的for循环的写法了，爱加加。好，我们定义了这么一个for循环，那么里边我们肯定就先保存一下name对吧，就是我们知道这是当前candidate list啊，I这个元素，我们把它叫做内，然后呢，我们就可以去查询了，对吧？呃，查询的时候我们还是把这个查询结果保存一下吧，那就是查询到的count，我们让它等于刚才我们已经有了这个contract的对象，Contract instance，我们就可以直接用WEB3里边调用方法大家还记得吗？昨天讲的这个就跟我们在note里面写的一样，对吧？就直接用我们的instance，后边就点我们的方法，那我去看一眼啊，有点忘记我们那个原文件是怎么写的了。

在里边去看吧。哦，我这里是启动了一个啊呃，哎，我们昨天这个原文件放在哪里了，我有点忘记了，这个是一个投票的原文件，应该就是在simple里面对吧，我们去好就是这个看。

好，我们看一下啊，我们定义了一个叫做total vote for的方法，是供我们来做这个查询的，对吧？里边传递一个candidate name，好，那么我们就点total是vote for还是vote for vote for，大家注意啊，这个这个名字其实最好还是去复制，不要打错，然后里边我们传递的当然就是就是它的这个name了，对吧？诶，那大家注意这这里边我们需要去再传递那个交易对象啊。好像不用，我们这里只是一个查询对吧，所以大家可以看到这里其实大家如果写全的话，应该是用call的方式去做的，对吧？我当然我们可以不写它，就默认去用判断类型之后用car就可以了，好那么点name，呃，这个就是用同步的方式，同步这个调用的方式把它查出来，那当然查出来的内容我们放在这个count里面的话，可能大家需要去to string一下，对吧，因为大家记得那个查出来经常都是那个big big number那种模式，我们去读好，把它写好。

然后最后我们要把对应的这个count写到它后面的那个单元格里边，大家看一下，只要跟这个我们的HML上面的DOM类型去做操作的时候，我们就用到j query了，对j query，然后我们用一个刀那个井号符表示ID筛选，然后我们筛选的时候加上它对应的那个，呃，就是对应的那个编号，对吧？我们应该去加上它的编号，那就是candidate编号是什么呢？我们得到candidates里边去找了，对吧？那我们现在是知道它的name，那name就是我们这里的键，所以根据这个键就可以去找到我们对应的值，是不是这样的一种写法，这是JS里边对象的一个操作，对吧？从对象里边根据它的键去拿它对应的值，所以那这样的话，如果传进来的是Alice，我们这里拿出来就是看点one，那么选择到的这一个对应的DOM节点就是我们这里的这个TD，对吧？好，这里大家给大家简单一说，大家都明确了之后，大家就是自己实现把这个东西啊，当然我们这里还没没完呢，我们这只是把它选择到了，对吧？那我们还得把值给它填进去啊，它这个值怎么填呢？这个这块提供了非常简单的方法，就是HTML，然后我们把这个count写进去就完了，就可以实现这样一个东西，好，我们把它保存在桌面，叫做index.js。

好好，那我们现在来跑一下再看看啊，关掉。

我们打开控制台，诶，大家可以看到我们这里在跑的时候，它直接就报错了，对吧，他就说这个WEB3IS not DeFine，哎，这个居然找不到WEB3。这个页面里面应该是可以有。哇塞。哦，他好像真的没有找到这个外对象啊，所以我们这里，哎，大家看到这里应该是有这个。这个好像复制的有点问题是吧，看这个我们这里会可以打开啊。

哦，这里大家可以看到这里多了这个引号了，对吧？对，然后前面这个引号没有放在里面，好，所以这个遇到问题的时候，大家就得去稍微注意一下，然后看到其实前面的j carry也也错了，对吧？这里这个引号引的不对，所以大家如果是能有这个合适的IDE的话，最好还是在IDE里面做这个，我如果在web STEM里面去做的话，他肯定就会报错，我就不可能看到这个，就是可以看到我们这个信息啊好，我们来看一眼吧，好，现在大家可以看到，哦，这个万三是已经引进来了，对吧，但是他没有拿到这个。哦，他是他现在是直接到我们这个，呃，就是就是桌面的这个目录，来去来去拿这个东西了，所以说就是会有问题对吧，那之后我们直接是希望他去在我们这个就是网上直接去实时的获取这个文件的，所以我们把它关掉，链接写错了吗？有有同学看到了吗？哦，这里刚才我们检检查了一遍，居然还没有看到这样的错误，都很低级。

好，我们刚才的index点不是在这里是吧？好，我们还是在桌面去把它打开一下，好现在我们看一下，好这里就不保错了，就大家可以看到刚才我们的引入都已经成功了，对吧，但是有问题他还是在报错，他说什么呢？啊Jason，不对，那大家知道我们刚才没填我们这个内容嘛，对吧，对吧，我这里没有填好，那么我们去我们之前的这个地方去把自己的。

呃，我们去拿一下contract a对吧，A好。我们把这个拿一下。Japas。哎，我们看一下这里他的JA Jason pass的时候传入的值是什么东西啊。它传入的是一个字符串对吧，所以我们这里不能把那个直接复制过来，我们这里是按字符串去传递的啊，这样一个一个方式啊，那接下来还有一个地方就是我们这个地址，那这个地址的话，呃，我这里可能我们启动了garla之后，大家可能会注意到，如果退出的话，整个它的这个环境就重新刷新了，所以它生成的账户和我们之前部署的合约其实都没有的，所以这就是GALA不好的一点，当然也是它方便的一点，就每次我们都是一个干净的环境重新来，对吧，但是我们这个如果想要用之前的这个地址的话，可能就会非常麻烦，非常的不爽，那这里的话，我这个部署可能还需要时间，大家现在可以先把我们这个讲过的这一部分内容，大家先实现一下。