125_尚硅谷_以太坊项目二_去中心化eBay_web前端核心业务（一）商品详情HTML

我们其实已经把这个项目产品的框架其实已经搭起来了，先是把我们的核心的合约写出来，对吧？我们定制定了确定了自己的这个业务逻辑，核心业务逻辑之后，我们要做一个维持拍卖，所以我们在合约里边就定出了基本的数据结构，然后我们实现了怎么样去提交一个产品，生上架一个新的商品，对吧？然后怎么样能够查询到商品的信息，这是基本功能。然后我们还要处理一个核心的业务逻辑是怎么样去出价，然后怎么样揭示报价，这是我们要求的两个阶段，对吧？就在我们的这个维持拍卖里边核心的两个阶段，这在我们的合约里边全部已经体现出来，大家还记得我们这个合约对吧？啊，在这个里边我们已经有a to store，这是我们上架产品的，对吧，Get product，这是我们查询产品信息，然后后面一个B1。

一个review就是我们一个是。报价竞价，一个是揭示竞价，揭示报价啊，这就是我们的两个阶段，后面还有一些，当然这些大家都是一些工具方法，或者是获取这个，呃，就是最高竞价人的那个信息啊，还有这个total壁子，这些都是一些简单的get函数，呃，这是我们核心的合约代码，然后另外呢，我们还做了这个web前端的一些应用性的代码，对吧？我们写了这个JS，我们的核心的JS都是放在这个index.js里面的，呃，当然了，我们对应的有一个index HTML，这个HTML主要是我们的进去之后的主页面，主页面它要做什么呢？展示所有的商品，那大家还记得就是我们在这里边会列出来这个所有的种类，Product list，就是所有的商品，对吧？下面还有一个是product review list，那大家能够想到这个，我们还没详细去做，但。

但是能想到之后在这儿列的是已经上架拍卖，而且已经过了竞拍时间，开始要揭示报价的这个，这些商品放在这里对吧？所以呃，这个大家是能够想到的，这个页面的布局，然后呢，我们还定义了一个HTML，这个HTML叫做list item，它是干什么的？主要是我们去上架一个新商品的时候用的，那这个里面其实就是各种商品的项目对吧，它的名称啊，它的详情啊，它的种类啊，而且我们还可以上传图片，呃，这个我们用到了H5里边的一些特性，就是input的，可以是fair，可以是local time，对吧，Time local，所以。呃，整个这个页面其实主要的内容就是一个大表单，那么我们提交submit这个表单的时候，大家就会想到我们肯定要触发对应的方法，对吧？所以这个就是我们ADD product store在JS里边会有体现，这两个页面对应在JS里边，我们现在已经完成了什么功能呢？大家看一下，我们的主入口是在这个window.app里边对吧？前面的这些配置都是常见的通用的，大家就是再回顾一下就可以了，是trouble里面的写法，我们的主要就是在app.start这个函数里边，那这个函数里边我们做什么呢？首先render store就是把我们的那个主页面画出来对吧？查到的那个商品信息放到里边，然后下边。

我们还定义了一个product image的change事件，这个主要是我们上传文件用的，对不对上呃，上传图片用的，呃，上传了图片之后，我们定一个reader，把它的二进制文件的这个a buffer放到这个read reader里面去存储啊，大家还记得对吧？然后我们还定义了一个关键的事件，那就是我们要去定一个submit事件，对吧？这个submit事件呢，他要做的是什么？其实就是说要把我们，呃，就是定义好的这个表单提交的时候，我们要触发哪些功能，我们要做什么动作？呃，大家会想到我们要做的其实就是两步，首先把对应的这个啊，这里我们直接定位一个c product对吧？C product这个函数它有什么？

具体的步骤呢，主要是两步，一步是把我们的这个图片和文本信息全传到IPFS上，然后第二步把拿回来的那个哈希，连同它其他的一些边边角角的那些基本信息存到区块链上去啊，所以这里边我们又调了这样一个函数去跟IPFS做交互，这里我们包装成了一个返回一个promise对吧？然后在这边做呃，点赞的这个链式调用，这个大家再回顾一下，如果不熟悉promise的同学可能要自己再看看这部分代码，然后自己再补一补这方面知识啊，当然了，下面同样的就是这个，呃，存这个详情文本的详情，最后是存到这个区块链上，我们获取到这个合约实例，然后调用了它的a product to store方法。

啊，这是这一部分，呃，下面这一部分，其实这一部分应该是大家还没实现的是吧。大家现在代码应该没有下面这一部分是吧，我先把这部分先删掉啊，这是我们今天要要加的这部分代码，大家现在代码应该是这个样子对吧？到目前为止应该是做到这儿了。然后上面我也把这个对应的这些先删掉啊呃，这个应该是大家到这个地方对吧，没有。好，我们现在应该是只有这么些对吧，就是前面定义了一个onri的事件，然后这里有一个submit事件，好，下边是这些函数实现，我们已经100多行的一个GS了，稍微已经有点，就是量已经有点上来了，对吧？但这个还远远不够，因为我们能想到就是。

现在的这个项目里边，大家会看到我们仅仅是能够上传商品，然后能够把它保存在IPFS上，然后把它存到区块链里边，对吧？我们的核心功能竞价和拍卖这一块还没有做，所以今天我们的一个主要的功能就是要真正的把这个拍卖这一部分在我们网页上，用户要能用起来，要有这个网页上的前端交互，好那么我们先来想一下，就是我们这个拍卖的这个页面。到底应该是怎么样去做呢？就是这个功能应该加在哪一部分呢？啊，首先大家其实应该能想到，就是说我们是不是应该。有一个产品详情页，因为呃，大家还记得我们之前的那个，就是产品首页是长什么样的吗？这是我们那个上传上架新新商品的那个页面，对吧？我们之前的那个产品首页，呃，就很简单，长长这个样子对不对？

那长这个样子，这个看起来就是一个展示，一个陈列而已，那这个地方我们直接去竞价，这个显然就有点不太合适对吧，所以我们就会想到，那我们一般情况是不是应该在一个网页上，我们应该是看到这些竞价之后，我对哪个感兴趣，应该是一点把它点进去。然后能够展示产品的详情啊，然后我就可以输入，应该有一个地方让我输入他当前如果可以竞价的话，我就输入我我的竞拍价格是多少对吧，然后我们可能还要不是还要加密嘛，所以说要把那个加密的那个密钥字符串输进去，然后点我要竞价，所以这样才是一个合理的一个用户流程，对吧？所以我们现在就会想到仅仅有。

这是点到哪里去了，仅仅有我们当前的这两个简单简单页面，一个展示页面和一个这个上架新产品的表单页面还不够，我们可能还要新增新的东西，那我们准备增加什么样的东西呢？啊，这里边我们就看到我们准备创建一个叫做product.html的文件，也就是说我们要用这样一个文件来。显示我们单独一个产品的详情啊，所以这就是一个产品详情页了，对吧，那它的这个内容是什么呢？大家会看到就是下面的。呃，这一坨东西啊，呃，其实看起来也不是太多，而且大家梳理一下的话，就会发现这个内容还是挺简单的，好，我就把这个先copy下来，直接放到这个Vs code里面来给大家一起看一下啊。

我们还是应该把它放在APP product.html放在APP下面对吧？好，我们把它直接copy过来，我们来解析一下这个文件，首先大家会看到，呃，首先就是上面还是这个头了，对吧？头这个都一样，就是样式啊，这query啊，然后引入点app.js所以大家看到我们现在所有的这三个HTML页面是不是都引用的是app.js啊，所以大家会发现我们呃这个页面HTML是做了三个，但是我们的JS其实是全部集中在一个文件里面的啊，那大家如果要是想要把一些功能拆分出来的话，当然也可以再从里面再去拆，对吧，那就可能呃，可能用一些别的一些框架可能会更更舒服一点，我们现在的话就是呃，把所有东西全集中在这个index.js里边。

它打包之后是app.js大家就会发现，可能我们最后完成的时候，这个inexx.JS会比较大啊，那当然这是我们的一个问题，因为我们没有用到框架嘛，所以我们就会把它全堆在一个JS文件里面，好接下来我们看一下这个body里边是什么东西，呃呃，当然这个Vs code里边比较好的一点是我们可以把它这个做展开和折叠，对吧，我们看到整个就是一个div，那这个是一个container对吧？那接下来大家会发现。HY一个标题，这个标题是什么呢？Product details，好，我们这一页主要展示的就是detail，对吧？然后下面又是一个container，这个container再展开我们看一下。好，这个container下面整个就是一个ID叫product detail的，然后整个class是一个肉，所以就是当成整个一整行对吧，一个样式当成一整行来去分配的，接下来我们再看这一整，这一整行怎么去具体分配啊。

好，呃，那么大家可以看到下边我们如果要是把它收起来的话，发现这发现这个肉这行它做了一个就像这个表格一样的格式的分配，对吧，布局，那这种简单的布局是什么呢？定义两个class，就是呃，Column sm12，然后下面也是一个SM12，所以相当于是把这一个空间是平均分配了，对吧？啊就是这边占12，这边占12这样来做，做了一个分配。那么我们先看一下上面这一部分啊，上面这部分还有点麻烦啊，我们把它收起来看一下，好，上面这一部分其实一收的话，发现其实就是两部分对不对，然后这两部分又是利用我们这个布局做了一个分配，这边是四，这边是八，所以是一边少小一点，一边大一点，对吧？呃，这样的一个一个定义，那大家可以想到，呃，我们上边的这一部分定义，它们其实都是，呃，这个就是在一个div下边的这个12这样的分配，那其实占满全屏的应该是对吧？那下边的这个分配的话，那其实就是对于这个空间而言，一部分占1/3，另外一部分占2/3，大家应该能想到对吧？字面意意思，尽管我们没有看这个CSS里面怎么写，字面意思就能看出来了，对吧，呃，大家大家如果想。

这个看他这个详细的情况的话，可以把我们那个CSS文件详细的去看一看啊，它里面定义的好，我们先看一下这个上面的这个1/3这一部分，它有哪些信息啊，这个信息其实很简单，就三三块三个div对吧，一个product image，一个product name，然后还有一个叫product option。

那大家其实能想到这三个ID定义的是什么呢？这里放图片，这里给一个name对吧，然后下面还有一个option and，那大家可能想到这里可能是个标志位，或者是一个提示信息之类的东西，对吧？是否结束了对不对，或者是倒计时或者怎么样，这样的一个提示信息，好那么后边现在都没有写死内容，那当然是我们在JS里面会动态的去添加这些内容，对吧？好，那么我们把这个看完了，我们把它收起来，接下来看这个2/3，剩下2/3这部分内容放什么？好，那么大家看展开之后，就这个内容就比较多了，对吧，它放什么呢？我们在。对，简单的把它收一下，看一下，大家会发现它这里面首先一个大标题，H3的一个标题对吧？Start price，那大家能想到这里边product price，这肯定就是起拍价格要在这儿显示一下，然后下面大家会发现是两个form，两个表单对吧。

呃，那所以这里就是一个是竞拍的那个表单，呃，大家会想到这里是要填一些东西之后点submit对吧，把我们的这个数据交互到这个后台区块链上去，所以这是一个表单竞拍，然后还有一个就是揭示报价也是一个表单，好，那大家可以想到这两个我们是都应该放在这里吗？都应该同时展，展示出来给用户看吗？我们这里是都都放在列在这里了，但是其实不应该同时展现给用户，对吧？你不应该同时既可以竞价又可以去揭示报价，那这个流程就不对了，对吧？因为我们是有时间节点的，你应该是在拍卖那个andtime对吧？结束时间之前是可以竞价的，结束时间之后那你就不能去报价了，但是可以去揭示报价，对吧？所以这个我们在GS里面也要去处理，他什么时候展示，什么时候给用户看。

好，那么我们具体展开一个这个form，看看这个竞价这个form是什么东西啊，这里面又一堆东西，我们再把它这个稍微收一下看一看。啊，收起来的话，大家会看到里边啊，首先一个一个标题就是你的竞价对吧，然后呃，大家自己做项目，可以把这些都改成中文的对吧，这这些肯定都是无所谓的啊呃，然后大家会看到就是下面其实就是三个div。所以就是这个竞价这个模块呢，里面就三三部分三个div，然后下边还有一个input一个框，还有一个button啊，大家能想到这个是submit对吧，这个表单要提交的这个button啊，它就叫做提交确认这个竞价，然后呢，大家可以看到前面的三个div，我们看一下啊，第一个div是什么啊，第一个div有一个labor，然后它叫做它for。

Be amount，然后下面就有一个输入框，Text格式的input对吧？输入框这个ID就叫be amount，那大家能想到这个地方要输入什么呢？后边是不是就是要输入一个我们竞价的那个金额啊，Amount嘛，对吧？所以上面这是一个标签，是一个提示，下边的话我们就是place holdd，这里会会提示一个能够啊，这里是一个提示，大家会看到这里写的还专门显示出来，就是你要写的这个amount应该大于start price对吧？所以上面会把start price显示出来，呃，这里也是有一个placeholder是提示作用的，然后后面required要求必须得填你才能提交，对吧，这个我们是必须的一个一个。选项啊呃，必须的一个参数，然后下面这一部分大家看一下，那大家想到你有了这个竞拍金额，然后是不是还应该确定用户他到底发多少个以太啊，就抵押的那个数量这个不一样，对吧。

大家回顾一下我们之前竞拍的那个过程啊，就是我要去把自己的以太先发出一部分去，但是呢，这部分不见得都是我竞拍的那个价格，我竞拍的那个价格是会跟我的那个加密的字符串合在一起做一个哈希，然后提交到后台的，对吧？但是我的那个以太数量呢，相当于是押金直接就扣掉了，所以这两个数都是用户给输入的。呃，前面是你要竞拍拍多少，然后下边这个是我这一次交易发拍发多少啊，所以大家会看到这里给了一个名字叫B的3AMOUNT，就是你发送多少对吧？所以这里也是同样的一个输入框，你也是输一个数就可以了，接下来再看第三部分，那第三部分大家能想到就还缺一个东西对吧？对，叫做secret text，就是你不是还要加密吗？所以你就输个密码吧，啊，当然这个地方大家会看到我们这里还是text类型，就是不是密码的那个输入框对吧？对，当然大家如果想要把它设成密码输入框的话，对，可以用password对吧？我们这里的话其实就是会发现这个其实对于用户来讲，其实不是一个真正密码性的东西，只是要做一个哈希计算对吧，只是不让别人在区块链上看到，所以说对于用户来讲，可能它的这个加密性质没那么强，大家可以自己再去做改进啊，好，这几部分都说完了，这是用户要输入的，那大家注意看。

下面还有一个东西，有一个input，这个input它type是黑的，所以这个输入是不显示的，对吧，那不显示你输入个什么东西呢？它这里边name和ID叫做product ID。

诶，大家能想到这个东西要做干什么用吗？大家是不是能想到，我们在提交这个表单要做竞价这个动作的时候，应该是要调到我们合约里边的B的那个函数，对吧？B的函数它有哪几个？它有哪几个参数呢？他要的我们的那个发送的以态直接就是messages value不用在参数里面提交对吧？然后我们的另外输入的两个东西，一个是竞拍的价格，一个是加密的那个字符串，我们是直接就应该我们帮他做了哈希，然后提交到后台对吧，那这个东西就是这个参数B的这个参数。那是不是还应该有一个，你竞拍哪一个产品对吧，哪个商品这个product的ID一定得给到后台，要不然我怎么知道你这个竞拍的是谁对吧，对应的是哪个商品呢？所以我们在。

前台这里是不是还应该把这个product ID传过去，那这个product ID当然就不应该是用户去手输了，对不对，所以也不应该显示出来，对吧，所以大家就想到我们这里给一个黑的类型的input，这里现在还没有值，那我们是不是应该在JS里边动态的，你点进来是哪个product，是哪个商品，我应该就把对应的那个ID要附到这个这个对应的这一个输入框这里来啊，然后我提交submit的时候，是不是这个表单里面就包含了这个值。所以大家想想象一下，就是我们为什么要把这个HTML这么设计啊，就是我在点submit的时候，上边所有的输入框是不是应该作为我submit的参数的一部分，所以我们这个input也是有用的，对吧？它的值也要传过去，但是我们这里边没有值，那那是因为这个ID你你在这里我们不确定是哪个product的时候，确实是不能定的，对吧？所以我们要用JS动态获取，然后给它附到这个input的值上。

那这个大家先有这样一个概念之后，我们会在JS里边把它实现出来对吧？好，那呃，上面这个表单就看完了，哎呀，这个这么一一看的话，其实还是稍微有点复杂的是吧？啊，但是下面这个revealing这个揭示报价，那大家就想到其实是类似的对吧，也是肯定是有个标题叫reveal bit，然后下面呢，有两个div，然后下面有一个input的黑点类型的input也要带着ID，对不对，你揭示报价也得知道揭示的是哪个商品，然后下面同样有一个三的这一个按钮，那上面的两部分这个div输入什么东西呢？一个。大家回忆一下我们揭时报价的时候要输入什么东西，那就是输入我当时竞拍的那个价价，呃，竞拍的那个数量对吧，那个价格，然后还有一个就是我当时的那个密码对吧？所以这里一个是这里给的这个ID叫做actual amount，就是你实际的那个金额对吧，实际竞拍价，然后后边还会有一个review test，就是你当时，呃，就是要做加密时候敲的那个密码，所以这两个是要穿进去的啊，这是大家能够想到我们这两个form是做什么用，然后我们看到上边的这两个form，就是我们第一个这个div。

里面的内容，那第二个div大家会看到它有一个ID叫product de sc是description的一个缩写，对吧？前面的几个字母description就是详情，对不对？呃，它详细描述对吧？那么大家就会想到我们这里是不是要把它的那个产品详情放到这个下边来啊，所以这里能够想到我们当时是应该是有一大段文字的，对吧？默认是有一大段文字的，所以说我们可能是把这一部分是从那个IPFS那里，要根据那个哈希，然后拿到它的详情，然后填到这里来，对吧？好，这就是我们整个的这个HTML啊，大家可以先把它先梳理一下，然后之后我们就要看这个JS这一部分，然后这里还有还有一个事情给大家要要说一下，就是大家还记得我们当时那个。

添加商品的那个list item是还要加到那个pad的配置里面，对吧？啊，这个大家不要忘记啊，所以我们先来做一下这个事情。来点开one pack.con.js对吧？然后大家会记得我们在copy one pack plug in，这里会定义从哪里考copy到哪里去，所以我们同样的在这里继续定义这样的一个copy的对象，From，那大家看到我们这个都一样，对吧，呃，Product。

点HTML，然后后面是to。呃，这里就直接也是to product.html就完了，我们先改一下这里的这个配置。