120_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（三）主页面HTML设置

呃，我们看一下这个HML文件，首先就是在这个head这一部分文件头里边会看到，就是我们当前在我们这个网页上面会显示的这个开头，然后下面的link，这都是大家常规操作的CSS相关的，然后这个boostrap这里面的CSS，下面一个这个是j query啊，我们肯定是在JS里面要用到，对吧，那这里。再再次跟大家回顾一句，就是我们这里边要用到的是点app.js因为打包之后的文件叫做app.js对吧？在build目录下面，好，那接下来我们就看这个body body里边是什么样的一个东西呢？大家会看到啊，就是首先我们前面是一个大标题啊，叫做e commerce store，我们的商城。然后下边大家就会发现分成了好几个div div，对吧？首先上面这里是有一个total products，所以大家会想到这里应该是我们之后就去把那个总数算出来，放在这儿就行了，对吧？那我们的总数不就是那个product ind nes嘛，那个找出来放在这就可以。然后下边有一个link，这个link大家会看到后边它的class是button，对吧？所以这应该又是一个按钮，用link实验的一个按钮，然后这里写的是list it，那这是什么意思呢？那大家就会想到list本来有一个当动词讲的话就是就是发布一个东西对吧？提交一个东西，那这个其实就是我们之后要实现的一个页面，什么页面呢？就是我们去发布、提交、上传一个商品，一个产品。

这个就是如果商家要上架产品的时候，我们就跳到这个页面去，这里我们就暂时先不说这么多，然后接下来大家会看到就是又是一个div，整个的这个div里边分成了哪几部分呢？大家会看到又有一个叫categories，这是种类啊，也就是我们有哪几种在这里去写，那现在这个其实也不重要，就是去去编辑好了，去显示出来就可以，对吧？然后再往下看，那这里可能是我们比较重要的一部分，就是我们会把products To Buy，也就是说当前可以买的，可以去竞拍的产品都列在这里，大家会发现就是在这个标题下边，我们的div定义了一个ID，叫做product list。

当然这就是我们的，就是相当于主页面里面核心的一部分对吧？产品是展示的一部分，然后下面还有一部分叫products in review stage，也就是说这些product上架的产品都已经竞拍完了，对吧？然后等着大家去揭示报价了，那这部分产品我们再单独的分一块出来，让他去单独做显示，然后他的ID就叫做product review list，所以呃，大家能想到我们之后肯定是要利用这些ID去把它做一些相对应的操作的，现在的话我们就只要把这个就是简单的这个框架搭出来就可以了，那这样一个HTML呢，大家可以去把它就是就是直直接把它复制过来，但是我觉得最好是如果大家想要对这个了解更深刻的话，那应该还是要把它。

呃，好好的做一个，一步一步做一个实现的，我这里边就就不管了啊，就直接把它copy过来好了。HTML，大家注意，我们要更改的HTML其实在APP下面。大家不要直接改那个build下面啊啊，我就直接把它copy过来了。好，然后大家会想到我们肯定是要去改这个index.js对不对。

然后去展示我们对应的页面对吧，所以大家可以想到，那么在这样一个页面里边，我们在哪一部分去去渲染我们当前的主页面呢？呃，大家肯定想到我们一开始不是load嘛，Load完了之后不是app.start这是我们的主进程嘛，所以我们肯定就是在app.start里面去做渲染，对吧？所以大家会看到我们可以在这里去做一个。渲染，比如说呃，我们在这里定义一个函数，比方说叫render吧，那这个函数我们就是要下在下面去实现的，对吧？啊，另外还有一个看一眼是不是之前少配置的一个东西啊。好，大家注意，还有一个我们没有做的事情是什么呢？就是这个set provider，大家还记得在里边我们还得有一步，就是把当前的这个合约，合约的抽象对象要给他set一个provider，对吧？所以这一步大家还是要要做的啊，我们就把它放在这个启动的时候，所以这是e commerce store.set provider。

那我们的provider就是WEB3点current provider对吧？好，大家可以看到我们的start函数其实是非常的简洁的，就是直接就调用这个，呃，Render store这个方法了，对吧？那接下来我们就得实现这个renderto这个方法，所以我们在外边把它写出来render。然后在这个里边render的时候，我们怎么样去render呢？那render其实我们就肯定要拿到当前的这个产品信息嘛，那我们当前的产品信息应该在哪里放着呢？呃，那肯定就是我们得去查询了，对吧，从链上去查询e store，然后点deploy的股权啊deploy的点。

然后我们拿到这个合约实例去做一个处理，然后在这个处理的过程当中，大家肯定就是想到我们直接就去拿get product了，对吧。这个get product，当时我们给定的参数是要去传入一个product ID啊，那我们现在的话就先把这个流程简化一下，大家可以可以看到我们课件里面就是直接写死了，呃，那大家能想到，如果我们是之后的话，那肯定是相对应的是要去做一个便利的对吧，我们现在先先不那么麻烦，我们就写死吧，直接get product1，那就是把我们刚才写入的第一个那个iPhone给拿出来，对吧，然后点赞，那么呃，我们直接把它。

呃，这个点赞就不能简单的点log了，对吧，因为我们还要做页面渲染的，拿到这样一个product之后，我们要更改哪一部分的东西呢？大家会想到我们当时是不是有一个叫做product product list的一个一个div对吧？ID叫做product list。那么我们现在就应该要把。Dollar，我们要改的是不是就是这个product list这一部分对吧？利用ID把它选取出来，大家就会想到那个当前，它本身什么东西都没有，我们用一个这query的pen方法把一串东西，然后结合它的这个就是当前的呃，这个这个product的内容，把它放进去是不是就可以了？所以这里我们还是定一个就是舒服一点的名字吧，我们就叫它。

呃，就叫P好了product对吧，然后这个end的时候，大家会想到我们是要END1串这个do对象的，对吧，那这个时候我们可能在这里直接去写的话，又会很复杂，然后大家会想到我们后边可能你这是有了一了，那之后我可以还get product2对吧？所以我这里应该是有一个通用方法的，比如说我这里的通用方法就叫做。直接把这个弄掉了啊，叫做build product，然后我把当前的这个产品P传进来，我在另外外边去实现一下这个方法，把对应的想要的那些道元素都传进去，是不是就可以了？好，我们这是就是程序的这个结构化，程序的抽象化，大家要注意这些，呃做法啊，好，那接下来我们就实现这样一个build product的函数，这个东西怎么去实现呢？

呃，大家会，我我们先来在这边来瞄一眼，看这边怎么实现的吧，相对来讲，呃，其实不复杂，但是就是说大家可能得知道他每一步在干什么对吧？首先我们先定义一个node，那这个node就是一个这query里边的一个div的一个元素，对吧？所以它是相当于我们的这个product，最后要返回的就是一个div。呃，所以是这样来定义的，因为这个product里边大家能想到它不是一个简单的稻元素，里面还有各种各样的东西，那我们就不要一下子把它全拼起来了，对吧？所以我们就定义一个div这样的一个note，然后去怎么样呢？去不停的end我们想要的东西啊，那大家可以看到就是我们这里想要的啊，首先这个可以艾特plus了啊，就是这是CSS相关的一些东西样式怎么去显示，然后我们就可以APA，它是这个有这个图片对不对？然后后边PRODUCT1这个应该是什么呢？应该是它的name对吧？大还记得，呃，这个product信息里边零是ID，一是name，然后后边二，那就是应该它的种类category对吧？然后后边呃三四的话，我们忘记可以看一眼我们的合约里边怎么写的。

啊，三四是是这个就是图片和这个详情的，呃，这个哈希，那这个我们就不在这里去列，那后面五六它的竞拍时间我们是得写出来的，所以大家会看到后面有五六还有七是它的起拍价格都写出来对吧？好，我们就照着这个写一下就可以了啊，所以大家会想到我们在这里首先定义一个node叫做j query里边的j query里边的一个div，对吧？好，那接下来我们再去定义no的点啊，它是还加了那个class对吧？At class用这个方法，具体的这个class我就不写啊，直接复制过去。

这个CSS这一部分，大家如果要想要想做出一个完整的漂亮的一个项目的话，那肯定后期大家要把这个CS还要去慢慢的去调，对吧？啊，就是我们现在不会浪费时间跟大家说这个到时候页面不好看怎么去调，我们这几个项目大家会发现这个页面都很丑啊，都没有详细调过，呃，大家这个自己有需求的话，可以去详细的再去调一下，好，那接下来大家会想到我们直接可以去note.a了，对吧。Aend，呃，然后我们会想到首先去A一个什么东西呢？呃，去把那个图片先放在第一位对吧，那这个图片大家就会想到应该是image img打头，然后我们应该会有S对吧？S我们在这里诶。

S我们这里要跟这个外边的这个引号要分隔开，我们用单引号去显示好了，对吧？然后我们的S这里，我们看一下这里是写的，这里是写的IPFSIO点就是IPFS，那大家可能会想到就是我们如果平常用的时候访问IPFS.io还得去翻墙，这个可能访问很慢，对吧，那我们简单写的话也可以直接http local host也是一样的啊。Local host，比如说我这里定义的是9001端口，那大家定义的不一样的话，就去定义别的一些东西，对吧？然后后边IPFS，好，那么这一部分大家看这个双引号引起来的这一部分，就是我们前面的部分，然后后边是不是要跟上我们的哈希，所以是PRODUCT3对吧？好，然后这里得加一个这个杠啊，然后加上product。

然后再加上后面的部分，就是大家肯定想到，至少你还得把这个标签给完结对吧？呃，然后大家会看到这里还给了这个一个外就是。呃，首先还得有一个单引号，把前面我们这部分S完结掉，对吧？然后再给一个宽度，比方说这里直接给了150个PX，那我们就直接复制过来，就用这个就好了，好，这是我们这个，呃，图片这一部分，然后下边就比较简简单了，我们比如说接下来会去加一个div，那我们会想到可以去加一个product它的内容对吧。

一这就是内，然后把这个div给完结，那其实这这里我都可以，大家会发现其实都差不多的东西，对吧，直接在后面就可以了，我直接copy吧。大家就是希望去熟悉的话，还是建议大家全部手敲一下，大家会发现，呃，PRODUCT2的话就是我们的这个种类，对不对对吧，然后下边我们还可以三和四是我们的图片和详情，那五的话是我们的那个起拍的。呃，时间对吧，这个也是要写出来的，六是我们的那个结束竞拍的结束时间也应该写进来，那应该还有一个是七，应该是它的那个起拍价格，对吧？啊，这个时候大家可以看到，就是我们还可以整点画出来，就是呃，你可以加一个以太对吧，这是多少以太，那这个表示我们这里的这个竞拍价格，好这里我们就学着这个样子，在这里给一个eer。

然后后面可能要空一格对吧，这样的话后面不要紧贴着去写这样一个东西，所以这样的话我们就把想要渲染的这些节点内容就全写出来了，那当然了，最后我们就去把这个note去return了，对吧？所以这就是我们想要去呃，要的这样一个一个节点信息，好那么大家可以看到我们APA的时候，真正APA其实就是这样的一个div div有什么呢？有这么一串东西对吧？啊，加了这么一串元素的这个div，好，那么我们对应的大家就可以知道，我们前面已经有很多个这个元素了嘛，产品元素了，所以我们其实都可以用类似的方法把它一个一个展示出来，就添加在后边对吧？那当然这里边的话，我们就还是product list里面的东西点A。

那同样我们可以build product p，对吧？其实这就是完全一样的代码，大家直接copy一下就可以好，那么我们现在完成了这一部分JS的代码，我们就来启动一下看一看。它的这个效果怎么样？大家还记得怎么启动吧？对NPM上第一就可以，我们来看一眼啊。这个会稍微有点慢。呃，所以大家会看到就是一开始的这个状态呢，其实是非常简单的，我们其实呃，这里边我们没有配的话，大家会发现就还是访问8080对吧，如果要是自己配了呃外PE d d server端口的话，我们就还可以去别的访地方去访问，大家可以看到它起来之后是这个样子啊，那其实很丑，呃，也不能说很丑吧，反正就是这个页面布局明显就没有详细的去调，对吧？呃，所以其实这个页面布局是什么样的想法呢？其实就是上面去显示一下总共有多少个product，然后这边去把那个应该有的种类的选项去列出来，对吧？然后这里是product To Buy，这里是列出来的所有当前可以竞拍的产品，然后下边是当前已经结束竞拍需要去揭示报价的产品，对吧，呃，然后后边大家需要注意就是呃，我们自己在这个做所有的这个。

数据往上传的时候，最好是用自己真实的IPFS上上传以后的那个文件，哈希，这样的话大家在这个页面里面才能够看到真实的图片，对吧，要不然我们看到的都是空的，这个测试就不全面。