118_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（一）主体架构

好，那么我们现在就开始想一下，我们整个的这个web前端应该长什么样子，我们已经有了后台，有了合约，那么我们前端肯定是先要有一个页面能够展示我们所有的商品，对不对啊，这是肯定的，对吧？然后大家应该还能想到，我们一开始是不是就建了一个在合约里边创建了一个函数叫做a product，对吧？那这个是我们是不是商家要先把商品的信息先要传到我们的商店里面，传到这个理太坊上对吧？那所以这两部分其实是我们的基本的功能，如果我们连商品都没有的话，那相当于我们这个就根本没法玩了，那至于说竞价揭示竞价这个竞拍，这个相当于是我们后边的这个功能了，所以我们今天主要的任务就是完成，大家看到就是我们的这个第五部分啊，第五部分也就是说web产品主要是什么呢？主。

主要包括了我们怎么样去展示我们的产品，然后怎么样让商家上传一个产品，而且我们还要做到把它能存在IPFS上。同时把拿到的那个哈希我们再存到区块链上去，我们今天完成这些的话，那基本上我们的呃代码任务应该也还是完成的不错，至于竞拍那部分，我们就留到后面再去完成那一部分的前台页面，好那么大家现在可以看一下，就是首先在这个过程当中，大家会想到别的应该都还好说，我们前端页面，那就是你要上传什么东西，我给你添一个组件，对吧，我给你弄一个form表单，然后到时候我一提交就完了。比较麻烦的一点，我们之前没有接触过的一点是IPFS，呃，这个我们到底是要怎么样从前端跟IPFS交互呢？那这里给大家有了一个，呃，就是IFS提供的一个API库，大家看到它就是叫做IPFSAPI。

这是一个JS的库，所以我们如果要想用IPFS的接口的话，那是需要安装这样一个库的，所以这里写的是大家直接把这个加到就是paia Jason里边，那大家想到加到这里边的话，你如果要去n PM in store的时候，其实就可以把它直接安装起来，对吧？大家如果要是不想这个，呃，N PM install整的这么复杂的话，也可以，也可以就是把我们这个单独的IPFSAPI这个库。做一个n PM install对吧，大家应该这个熟悉吧，我们还是敲一下啊。在之前安装的这个包其实已经够多了，在这样一个目录下面，我如果想要去安装这个IPFSAPI的话，大家肯定知道就是这样对吧？IIPFS。

API啊，然后当然大家会发现我们这里可能就刚刚save或者刚刚save div都可以啊，大家把它保存在本地的PE Jason里边的dependency里边啊，所以这个是我们可能要做的一个一个事情，大家可以先把这个安装一下，因为IPFSAPI这个它其实依赖的这个组件，依赖的包还挺大的，所以大家如果有时间的话，可以先敲一下，先装着，然后如果我们今天网络给力的话，应该都没什么问题，但是如果网络不给力，可能大家还得多装几次啊，呃，好，这是这部分，呃，如果装完之后，大家可以就是看一下我们现在的这个IPFSAPI是什么版本，对吧。呃，我看一下，我这里边应该装的是比较新的一个版本。

大家看到我这里装的是26.1.2这个版本啊，呃，大家如果装的话，应该也是二六点几的版本，我这个应该是非常行，因为前几天刚刚刚刚重新装了一下，呃，所以大家可以看到这就是我们依赖的一个一个库，呃，当然就是说昨天的时候，呃，我们有那个S3的那个库，对吧，我们我这里面直接试的是直接用WEB3自带的S3去做呃加密校验的，大家如果发现它这个加密有问题的话，想用这个我们课件里面提到的那个ESRIJSU想装那个库的话，那一样也是n PM store就可以了，然后我们要用到的时候在里边把它引入进来，大家可以看到在我们下面的这个示例代码里边，其实还是要引入这个库的，对吧？啊，所以大家如果要用的话，也是用这个课件里面的方法就可以。好，那接下来我们已经安装了相应的依赖之后呢，接下来我们就要把代码了，大家回顾一下这个程序结构，大家会想到我们首先这个程序跟之前的这个trouble项目一样，它是我们下载的是一个叫做one pack的一个trouble box，对吧？它里边本身是配置了onepa的，所以大家还记得我们当时跟大家说onepa在打包的时候，它是要把在APP scripts下边的index。

点JS作为输入，然后打包生成build下边的app.js对吧？所以我们要编辑的JS源文件是哪个呢？大家注意，我们这里要编辑的是这个index.js。啊，所以大家就会看到，另外在这里就是我们这个项目里边再给大家多说一句，就是大家看下面plug ins new copy comp plug in，它会把我们APP下边的index HTML去copy到build下边的index HTML，对吧？所以大家会在这个build目录下边能够看到啊，我这里是都删了啊，大家如果没删的话，应该能够看到index.html，还有app.js对不对，这两个文件就是我们真正发布和真正就是起服务器的时候要访访问的两个文件。

啊，所以大家应该还有印象，我们在index.html这个里边会写一个引入source是app.js对吧？但是我们实际上编辑的原文件是index.js，对，这里再给大家回顾一下，我们用wipad，因为用到了这个打包工具，大家可能有点不熟悉，所以有些同学可能就会有疑问，诶，我这里为什么写点app.js我为什么在这里编辑没有编辑app.js的，因为wepa给我们打包又包了一层对吧，转了一层，好，那么我们现在要编辑的其实就是这个index.js啊，我现在全删掉，我们重新来写一下，呃，那大家首先会想到我们在这样一个index.js里边，首先是不是先要引入一堆东西啊？

啊，首先我们import，呃，大家还记得我们之前的写法对吧？Default as，我们首先要引入WEB3，是不是我们引入这个WEB3FROM。WEB3，对吧，然后我们还要引入什么东西呢？我们还要引入窗口的那个contract组件，对不对，这都是我们常规操作啊，As contract from叫做tri contract对吧？这是我们首先要引入的两个东西，然后我们是不是还要引入我们的那个原文件啊，Import。

呃，这个我们应该直接引入就可以啊，就是比方说我们叫看一下这边叫什么名字啊，给一个一样的名字吧，啊挺复杂一个名字叫e commerce store artifacts，这是习惯性的这种引用方法，在插口里面一般把它都叫做artifacts，对吧，之前我们都是这么叫的，呃，引入它from，呃，这个我就得看一下这个路径了啊，这里我们要引入的是点。看一下这里要引入的是点Jason文件，所以这个文件的话应该是在我们的build目录下边，而当前的这个目录是在app.scripts下边，对吧？所以我们引入的时候大家注意一下，是要返回到它的上两层，然后到build的目录下面去找contract下边的这个Jason，稍微有点绕啊，这个我就不写了，我直接把它复制过来好了，大家最好还是手敲一下，搞清楚它为什么要这么写对吧？好，那接下来我们，呃，还是常规操作，我们定义我们的合约，合约变量合约的这个抽象的对象对吧？我们定义一个e commerce store，让它等于contract。

呃，然后我们会把这个emers store artifacts传进来，这样我们就拿到了这个合约的抽象抽象对象，然后我们下面就可以直接用这个store，就可以点deploy的，对吧，就可以直接用它的这个实例了。好，呃，这是我们前前面的这些啊，另外还有一部分大家会想到我们之后还会用到IPFS对不对，所以我们把IPFS也在这里直接就先引入进来，呃，Y ipfs AP等于require，这个我们就不用插的组件了，大家看上面这个inport这个写法，这是rle框架里边的写法对不对？大家搞清楚这个啊，下面我们这个require的写法就是。

就是正常的JS写法对不对？大家搞清楚这两种情况，Importt这种写法其实已经很像我们在node里边的写法了，对吧？大家如果还记得我们当时写noe脚本的时候，就是直接import什么什么，Import什么什么，所以穿这里的话，其实就是用node在底层给我们又包了一层，所以大家就是想清楚在这个过程当中是怎么样的一个过程，这是两种不同的引用方法，我们平常在前端的时候，其实一般情况就直接是require就可以了，对吧，Require这个对象。好，那么IPFS我们require的肯定就是对应的刚才装的那个东西啊IPFS这里有一杠API。所以上边的这个是用trouble框架里边的这种引入，那我们对应的就是WEB3，还有trouble，还有我们的编译利用利用T编译之后的，呃，合约的这个Jason文件，对吧，包括ABI1串东西，这个叫artifacts，然后呢，剩下的东西我们要引入别的一些包变量的时候，IPFS的时候，我们还用传统的JS的写法，Require进来就可以，好，那接下来。

我们还可以去，好大家注意啊，这里我们定义了那个IPFSAPI，然后我们再看一下，我们定义了IPFAPI之后，还要去定义，这只是一个IPFAPI的一个抽象对象，对不对，还要去定义IPFS实例，对吧。呃，这里我们是都用了这个cost用了常量，我们用Y肯定也是一样的，对吧？大家想用cost也可以用cost啊，大家会看到后边我们是要用IPFSAPI，然后实例化它的时候传入一个对象，这个对象包括了什么内容呢？包括local host，这是它的这个主机名名称对吧？然后POT5001，大家还记得我们当时启动IPFS的时候，是不是它会起一个5001端口，然后作为我们呃，Web UI的页面，这里就是它提供的API的接口，也是5001这个端口啊，当然了，就是我们如果本地直接访问的话，也可以用这个呃，8080去访问对吧？它默认还有一个8080端口去直接访问文件啊，那个是它定义的一个就是网关，那这里呢，大家会注意有三个参数，一个叫主机，一个叫端口，还有一个叫协议，我们这里如果访问本地的话，就是HTP协议，对吧。

啊，大家根据自己的需要来，如果说起的这个IPFS的这个，呃，这个服务器是起到了别墅的话，那大家对应的肯定要改这些IP和协议了，对吧？好，那么我们这里还是把这个写出来啊吧，我这里就直接写Y啊IPFS等于IPFSAPI我们要传入，大家还记得传入什么东西对吧，传入一个对象。

Host。呃，Local host对吧。只要给一个字符串。Localhot。Po。应该我们给的是5001。然后还有一个叫protoc对吧，怎么拼来着，PR这个不太好拼啊，Co都是O。HTTP好啊，大家注意，如果我们要是这里想要呃直接用这个远程的服务的话，那自己就是还要注意一些，就是端口开放啊，还有跨域一些的问题，对吧？啊，这个就来自己去解决，遇到问题自己解决就好了，好那么接下来我们已经定义了这个IPFS之后，大家就会想到呃，我们接下来是不是首先就应该去把我们那个三的那个实例对吧？那个创建出来，大家应该还记得我们之前的写法，这里我们相当于给大家换一种写法啊，这里我们的大家可以看到就是在呃，在我们这个课件里边给大家列出来了，这个写法跟我们之前好像有点不一样，对不对啊，先给大家先先照着这个先解释一下啊，它这个写法是什么意思呢？大家会看到定义的全是全局window这个浏览器对象。窗口对象的。

属性对吧？所以我们这里边是定义了一个叫做APP，叫做APP的一个属性，然后还给它加了一个事件监听器ADD even the listener对吧，这是一个全局的事件监听器，这个监听监听什么事件呢？监听的是load的事件啊，所以大家会看到之前我们是直接用j query对吧？呃，J query那个document.load我们这里就是直接把它加添加到这个全局变量，添加这个事件监听器了，所以这个load就相当于我们每次刷新页面的时候，每次加载页面的时候都会跑到这里来，对吧？大家可以简单的认为，就像我们之前，呃，就是用quiry的那个操作DOM的那种方法差不多，呃，之前我们是直接操作DOM了对吧？Dollar document.load对这这样去做操作，那我，呃，我们之前是点ready对吧，document.ready那现在我们要用这个load事件去做监听，那后面。

大家会看到也是要写入一个回调对吧，这个回调里面的东西是不是就跟我们之前写的差不多了啊，所以这个就大家觉得很像了，对吧？大家可能不太熟悉的是，后边它会调用到定义好的这个APP，然后点start。

呃，大家可以，如果要是大家熟悉这个node里边的这个启动服务器的这个写法的话，就会发现这个其实跟后台的这种这种启动服务器的这种写法就很像了，对吧？呃，它其实就是呃，有一个响应这个事件的这个handler或者说一个监听器的时候，然后在里边去启动我们的主程序，那我们的主程序是什么呢？大家会看到在APP里边定义了这是我们一个大对象，对吧？这个对象里面就包含了一个叫做start的一个方法，这个方法是什么呢？啊，它是一个函数，里边我们就可以定义我们。Start这个启动的主程序，大家就会想到我们在里边就可以啊，去刷新页面对吧，去渲染页面，我们画什么什么样的页面对不对，就可以把我们相应想要的东西就放在里面去了，包括我们可以添加一些事件的监听呀，包括我们有哪些这个比方说按了按键之后是不是会有on click方法对吧？都可以在这里面去实现，好，那么呃，这当然都是后话啊，我们这里就先把这个框架搭起来，大家看到这里就是一个非常简单的框架，我们先把这个在我们的GS代码里面先去实现，首先我们ADD event listener，对吧，这是一大家看到这是一个JS的关键字，所以直接是可以把它敲出来的，我们要添加的这个监听事件监听是什么呢？监听漏的这个事件，然后我们给它添加一个回调，呃，当然后边这里是可以打上括号的，对吧，这个回调里面我们看。

看一下这里我们就要去呃，检查我们的万三它的类型了，对不对，跟我们之前的那个判断应该是一样的，对吧？If type of web3。

不等于。On，那么我们就要用当前的这个WEB3，对不对？所以我们就把这个WEB3等于我看一下这边的写法啊，定义到这个window的全局对象里面了啊，这个就是方便，因为想到我们之后，就是之前的话，我们可能都是只是一个页面对吧，然后没有没有各种跳转啊，各种这种复杂的逻辑，现在的话，我们对于这种各个页面，各个逻辑里面都要用到的公共的部分，这里最简单粗暴的一个写法就是把它都当成。Window的一个全局对象，我们把它直接加到里边，那之后就到处都可以用了，所以前面这个cons点这个这个我就不管了啊，大家可以自己去添加一些这个报错的信息，或者说一些警示的信息，我们这里主要就是给大家写这个window.web3等于呃，这里就不是这个new了，对吧，我们就直接就是等于呃，应该也要new一下啊，New一个我们要用这个上面大写的WEB3的实例对象对不对，然后要把我们current的这个provider写进去对不对？

Provider，好，这是我们的这个，如果已经有。Ma mask，如果已经有这样注入到浏览器里边的WEB3对象的话，我们就直接用当前的这个WEB3实例，然后给到我们window的这个全局对象里面啊，是这样的啊。然后如果说要是当前没有的话，那大家肯定还记得，我们就直接再去拗一个对不对，拗一个呃，全局的自动加了一个this，当然大家也可以加this，对吧，全局的WEB3对象，我们就要new一个WEB3，这个大家就熟悉了啊，New web3点。

Providers.HTTP。然后我这里的话，默认肯定就还是http local host8545，然后作为我们的这个provider，呃，传进去对吧，就是这样的一个写法，大家跟之前的这个写法都一样，就回顾一下就可以了，好那么接下来大家注意，我们这里就要在这个load事件的时候去启动我们的主程序对不对。

app.start那我们这里APP没有定义，所以我们要在上面再把这个APP定义出来，对不对？我们还是定义一个window全局的APP对象，它等于什么呢？它是一个大对象。它里边我们在定义一个start方法。Start是一个函数，那么这个函数大家会想到，呃，这个后面可能还会还会有别的东西对吧？所以start只是它的一个元素，我们后面跟可以跟一个逗号，那么这个里边start里边我们要写什么样的东西呢？一开始初始化我们什么都不用写，大家可以看到我们课件里边是先定义了一个self，对吧？这是做什么呢？就是先保存一下上下文对吧？经常大家会看到有这样的写法，就是之后如果要用到这个上下文绑定的时候就可以直接用self了，当然其实我们后边呃也也还没有用到太多啊，就是如果要用到的话，大家都可以调用这里的self。

好，那么我们这样就把我们的这个index.js的框架就已经搭出来了。