121_尚硅谷_以太坊项目二_去中心化eBay_web前端基本功能（四）上架商品页面HTML

有一个地方可能在跟大家多说一句，就是我们的这个HTML，大家会发现我们这里其实是有一个小的按钮的，对吧，一个小的button，那它大家会看到这个h ref，这是这是什么？H reference，这是对，这就是他要点击的时候跳转的页面对吧。所以我们看到，呃，这里如果我去跳转的话，大家会发现上面直接就会跳到list item.html这里来，但是这里当然了，我们就是因为还没有写这个页面，所以说大家看到一跳转什么都没有，所以接下来我们其实就是要把这个页面写出来，那这个页面到底是要做什么事情呢？大家就会看到，就是我们接下来的这一部分，我们是要列出产品。List item对吧？那这个所谓的列出产品是什么呢？当然这个是一个直观的翻译了，事实上我觉得更适合的一个说法应该是说什么呢？我们其实是想通过这种方式把我们的产品真正上架。

或者就到时候我我可能把这个改一下啊，我们就直接说成上架产品好了，大家更容易理解一些，呃，因为我们想到我们前面已经有了主页面是把已经有的商品展示出来，那我们现在如果是一个商家，我现在要上传自己能够卖的一个产品，这个功能我们还没有，对吧？所以我们就会想到我们应该有单独的一个页面，因为大家发现我们在这个页面里面，其实尽管现在还比较空，但是如果我们完善之后，那应该是这边就全是我们当前陈列的产品对吧？可以去竞拍的产品，下边就是全部可以去揭示报价的产品，所以我们这个页面其实是满满当当的。呃，其实没有什么多余的空间去让我们去做操作，所以我们会想到我们需要再去写一个HTML来做发布产品，上架产品的这样一个功能，那么我们先来看一下这个添加上架一个产品它的这一部分功能，我们在前端页面里面应该怎么去做呢？

大概可以分成这么几步，首先大家看到我们需要有一个HTML。这个HTML我们主要就是要填写一些字段，然后提交一个表单。那这个表单里面大家肯定能就能够想到我们合约里面有一个函数叫ADD product to store，对吧？当时它传递的参数有各种各样的参数，它的name，它的种类，它的呃，竞拍开始时间，它的结束时间，它的图像的哈希对吧？还有它的详细描述的哈希，所有的这些东西我们当时都是要传到区块链后台去的，那么我们现在是不是这些信息就都应该在前台输入啊？所以我们会建立这样的一个表单，里边它所有要提交的字段。

跟我们在后台合约里边定义的应该是相符合的啊，这个大家能够想到对吧？好，那接下来我们就会想到这个表单肯定下边会有一个按钮，就是我输入输完了这个所有产品信息之后，我点一个提交，那应该是有一个按钮。点击这个的时候，我们就应该有对应的JS去触发一个函数，帮我们把这个产品的这些数据去进行处理，对吧？那处理的时候需要有哪几步呢？大家回想一下我们一开始给大家讲的那个整体架构，我们的图片还有详情描述，有可能有很大的文字，这个东西占的空间比较大，我们不准备把它直接存到区块链上去。我们要用IPFS对吧，所以第二步我们首先要做的是用户一点击这个提交表单的时候，要保存这个商品的时候，我们首先要做的是把图片和文本信息传到IPSIPFS上。

而这个过程当中，可能我们会分两步对吧，这里边大家看分成两步，首先传图片，然后再传那个产品介绍啊，这就是分成两步上传的，因为我们在代码里边肯定传图跟传文本是不一样的代码，对吧？所以我们肯定是要分开去做这件事情，然后我们传到IPFS上之后，大家会想到这就应该跟我们在这个命令命令行里边去传一个IPFS文件应该是一样的，我们传完了之后应该能拿到他的哈希，对不对。所以我们在前台调用IPFS的API一样，我们上传完文件之后也应该能够拿到一个哈希，那么接下来我们就把剩下的表单里面输入的那些简单的值再加上这个哈希。

连同产品介绍的哈希对吧，还有图片的哈希一起存到我们的区块链上去，所以整个这个逻辑还是比较清晰的，对吧？啊，大家看一下这个图的话，这就更明确，就是这里是我们这个要提交的表单，然后这里是IPFS。啊，这边是我们的区块链，那这个过程是怎么样做的呢？先把这个表单给用户显示出来，用户在上面填填各种各样的信息，然后把自己的图片选择上传上去，对吧？然后我们要做的是先把图片传到IPFS来。然后拿到他的哈希，然后再把那个我们的详细描述传到IPFS来，然后再拿到他的哈希，所以我们跟IPFS这边做两次交互，拿到两个哈希，再把我们其他填写的那些信息，连同这两个哈希一起全部调用我们的那个ADD product to store函数写到区块链系统来，写到一台上。

啊，这就是我们的这个架构，所以呃，从这个逻辑上来讲，应该还是很简单的对吧？那接下来我们就来具体来做了啊，首先我们就是要创建这个写这个表单的这个HHTML对吧？这个HTML之前我们已经定义好了，我们就叫list item HTML，呃，就是我们这里点击一下会会跳转的那个页面对吧？啊，这里就相当于是我要上传一个商品，我要上架一个商品的这个这个按钮，那大家可以想到就是首先这一个文件我们打包的时候是要把它添加到我们打包目录下的，对吧？所以大家看一下啊，大家还记得我们。上午的时候跟大家说过这个one pack，这里边我们有一个copy one plug in吧。对，这一个对象里边，它包含的是什么内容呢？它就是说从哪里。

找到这个文件，然后要copy到我们的build那个目录下面去。所以大家可以看之前我们的index HTML就是在这里定义了，从app.index htl下面copy到build下面的index，对吧？那大家就能想到我们现在是不是也应该有这样的一个写法，我们在这里加一句from。那同样我们的源码都放在APP这个目录下面，对吧，跟这个web相关的源码都放在APP下面，然后build的是我们每次生成的那个文件，所以我们源码不会直接放过去啊，我们这个叫list item.ht。ML，然后兔跟这里是一样的。放到附加路径的话，默认就是build下面，所以我们直接放到list item下面点HTM。

好啊，所以记得把这一句加到我们的one pack.jason里面，可点Jason里面。好，那接下来大家会看到我们把这样加进去之后呢，接下来是不是我们就应该要把这样一个HTML页面要真正的写进去了，List item HTML对吧？好，那么大家啊，这个就是大家看一下这个代码啊，这个代码还是。量还是挺大的，对吧，我先把它copy下来，我们到那个JS里边，呃，Vs code里面去跟大家做一个分析，呃，这个我就不详细敲了，因为这个重复性的东西太多，对吧？敲起来比较浪费时间，好，我们注意它这个目录应该放到哪里去呢？APP下边对吧？这里我们去艾一个文件。叫做，哎，我这里面其实已经有了，对吧，List item HTML。

好，我把这个全选好，大家可以看到就是这个文件啊，首先我们还是来梳理一下它这个文件结构，那首先title就是它，它的这个头里边head，上面这部分是head，下面是body，对吧？那头里边这个没有什么稀罕的，大家会发现跟我们之前的这个index.html其实它的头是一样的，对吧？上面的这个title，这是我们网页上面的那个标签，这个是一样的，标题是一样的，然后下面同样还要有CSS的引入，还要有j query的引入，然后还有这个点app.js。呃，所以大家会发现我们所有的JS引用其实是都在app.js里面的，所以也就是到目前为止，我们的HTML页面是有好几个，但是我们用到的JS全部打包在一起，全部放在一起了啊，这是这个头这一部分，然后我们看一下这个body body这里看起来好好大段呀，对吧？这一直写到下面都差不多100行了，呃，这么大段，但实际上里边的东西并不多，我们大概来看一下，梳理一下它的结构，大家就能看出来，首先上面一个H1H one list item，这肯定这就是一个大标题了，对吧？啊，这个我们不用考虑，然后下边就整个这是一个div，叫做container，大家应该能够想到是不是我们下边的整所有的东西都包含在这个container里面啊，对，然后下边div class等于肉，那这就是要定一些样式了，对吧，然后下。

变成div，这这其实这就是完全是这个样式方面的一些东西，当然这里是一个message对吧？啊，这是方便我们去受一些提示信息的地方，所以大家能够想到我们在JS里面肯定就是上传成功之后，有可能就会返回一个消息写到这里面，对不对啊，所以大家就会按照这个ID message去选好，这个我们就不说了，关键就下面。

大家会发现下边从这一行开始，它就定义了一个for，这就是定义了一个表单，对不对，我们看一下这个表单一直到哪里啊。这个表单一直到这里，其实相当于也就是到我们结束了，对吧？接下来所有的东西就是这个表单啊，所以这个HTML没有什么就是稀奇的东西，它里边就是一个表单，那表单大家都见过表单对吧？这个我们看一下它长什么样子，就是这样一个东西对不对？表单里边有一项一项的东西，那所以大家能够想到这个HTML里边接下来的东西，也就是一项一项往启列就可以了，对吧？这里大家注意一下，我们这个表单定义了样式，然后后面给了一个ID，叫做had item to store，所以这个地方肯定是在在我们的JS里面要去用的地方，对吧，ADD item to store，然后我们看下边它的分类，首先是一个div，对吧？这个div里边有什么东西呢？大家会看到有一个label，然后下边有一个input包在一个div里边，对吧。

所以大家就会想到，这肯定就是前面一个标签，后面一个输入框，这就是一个项，对吧，这个表单里面的一一项，这是哪个项呢？我们看一下label后边是不是name呀。所以大家能够想到这就是要输入我们产品的名称嘛，啊，所以不出意外，后面的这个input里面写的也是它的name，就叫做product name。然后这是它的样式，然后ID也叫做product内。大家注意啊，前面label里边还有一个for。叫product name label里面的for这个标签，这个属性表表示什么意思呢？大家知道吧。

呃，For这个标签的属性其实就是相当于指定了它的绑定关系，对吧，就相当于我当前的这个标签是绑定在这个input输入框上面的啊，所以他们互相之间在这个我们的鼠标啊，点击这些事件焦点上面是有共同的共同的绑定的，共绑定事件的啊，所以这个大家可以先看一下啊，然后大家继续往后看，其实这个我们这么看的话就很明确了，那接下来又一个div，那就是又一个项了，对不对？我们直接看它是什么description。所以这里就给的是product，呃，Description这样的一个ID，对不对啊，然后这里大家看到还有这个holderholder什么东西呢？就是对默认上面的那个提示的那个值对吧，是输入什么东西，让你去输入它的详细的一个信息，然后后面还有一个required。Required是什么意思？

啊，对，就是必须的对吧？所以这个required就是说我们这一项是你必须要填的，你如果不填的话，最后提交表单提交不了，而是这样的一个要求，大家可以看到前面name也是require的，对吧？诶大家要注意的一点是，我们上面这个是一个input，一个输入框，它的是text的，这是我们标准的文本输入框对吧？那下边这里就不是输入框了，这里是一个text area，对，这是一个文本区域对吧？所以这里面是能够输入很大段的文字的，对吧？呃，就能想象得到，在我们真正的显示的过程当中，就是这样一种显示，就不是上面一一小条的这种显示了，对吧？所以这是我们标准的这个文本输入区域的这种，呃，组件到吗？接下来我们继续看下一个，下一个我们还是把它一框一个div，我们看吧，哦，这个叫做product image，对吧？这里的名字前面给他提示叫upload的product photo啊，那肯定就是上传图片了，这个大家注意看，别的没有什么稀奇的，这里要注意它又是一个input input跟我们之前看到的都一样，那它的区别在哪里呢？Type等于five。

对，这是一个文本输入，呃，这是一个文件输入，所以是可以直接选择文件上传的，这是H5里边的特性，对吧？呃，大家之前是讲过H5的，是不是没讲过，呃，那那这个大家可能要稍微注意一下，就是如果我们用到这样特性的话，那浏览器一定得支持H5才可以啊，假如如果要用老版本的IE，那估计肯定是不成了，对吧？所以就是我们现在的话，应该默认绝大多数浏览器都支持H5啊，所以等一下大家就会看到，如果我们定义了这样一个input type file的话，我们上传文件非常非常容易，如果放在以前的话，就是在HHTML3 HTML4年代，我们要想专门去，对吧，还得专门做一个上传文件的一个组件，那个还挺复杂的，现在H5非常简单，所以为什么现在，呃，我们看到应该还有专门的班，就是讲H5对吧？呃，所以对于我们来说这些都是。

边边角角的一些东西，大家用到的时候把它学一学，掌握掌握就可以了，大家其实对大家的定位就是一个全站对吧，肯定不会专门去学这些东西，好，那么接下来我们再继续看，除了这个上传文件之外，上传这个图片之外，接下来我们再看，诶，这个div比较大啊，这个块比较大，我们看一下这个移植到哪。这个到这里对吧？到这里这是一个什么东西呢？大家其实你看下面啊，这是一个option，那所以它肯定就是前面是select，然后下面是option，对吧？所以这是我们的一个下拉选择框，对不对？所以这个尽管看着它比较占地方，一下子十几行，呃，但十几行代码好像出去了，是事实上这个就全是一些列举的选项，所以对于我们来说其实没有什么难度啊，前面我们定义的时候看到了这是一个种类，所以我们可以选择产品种类，对吧？那选择的产品种类呢，就是直接在这里面给定的这些选项，不能自已随便填，必须在下拉框里面去点，这个大家也可以看到product category啊，这是产品种类。

好，然后接下来大家看下面就就少很多了，对吧？在接下来的一项，这是什么东西呢？对，大家其实这个已经看到，这是我们的初始价格，对不对，That price对吧？然后这里的输入也是一个input，它是一个文本输入类型，那大家就会想到这个跟name一样，自己直接敲就可以了，对吧，这个就非常简单，然后接下来再看一个，又是一个div，这是一个什么东西呢？大家又看到了select option，对吧？所以又是一个下拉选择框。

所以来看它是一个什么东西呢？Product condition啊，我们看一个选项，New use，对吧，新品还是二手货，所以在这里只有两个选项。点一下把它选择就完了，接下来我们继续看啊，又是一个div啊，这个div大家会看到它是什么呢？它是。Options大菜，也就是我们的竞拍开始时间，这也是用户自己选择去输入的，对吧？那这里边大家注意，我们不是说让用户直接去输入，哎，几月几号，几点几分，这个就你没有办法规范用户怎么输入，对吧？那这里边我们给的也是一个input，这里的input是什么呢？大家看datetime local，所以这也是HTML5的一个特性，它的样子是什么样子的，那大家就能想想象得到，它就可以直接让我们去很方便的去选择时间了，对吧？

啊转H5确实是很强大，为什么现在还有人专门就就就学H5对吧？啊所以大家会看到就等一下我们把这个画出来之后，大家就就能看到这个datetime啊，那真的是非常方便，一看就直接把这个时间给选出来了，好这是我们的这个。竞拍的start time对吧？那接下来我们就会想到肯定还会有一个end time，对不对啊，这里我们给的不是直接的一个end time，因为大家在这个产品设计上会想象到我们一般你让用户设置的时候。开始竞拍的时间，你让他设一下这个还正常，然后你还跟他说你再去设置一个很精准的竞拍结束时间，好像经常有时候这个用户他就觉得很奇怪，对吧，你为什么还得让我设这个，我们看这里的设计是怎么设计的啊，这里给的一个设计，前面看这个label啊，给的是days to run the option。

直接就让你选择，你接下来几天之内结束对吧？啊，所以这个是比较常见，或者说用户用起来觉得比较正常的一种，那一般我就觉得你几天之后给我关了就完了嘛，我还考虑到几点几分几秒，这个太夸张了一点，对吧，所以是这样的一个状态，那么这个如果要让用户去选择的话，我们就看到这个实现又是一个select option，那你就去直接选择它是一天三天，五天，七天，十天，当然这个大家如果想多给一些选择的话，还可以再多一圈，对吧？啊，这个就是大家可以自己去完善，自己去设计的点，好那接下来我们再看啊，就剩下最后一个了，终于到最后一个了，最后一个又是一个div，然后我们会看到这里就没有别的东西了。只有一个button，它的type叫submit。那这就是要提交我们大家知道这个type等于submit的这个button，是不是就是要点击之后它的事件就是要获取到我们整个表单的所有的内容啊对，所以大家应该是对这个表单这个form HTML的form要有所了解，就是整个这个结构叫做一个for，那么它里边包含的这个submit type是submit类型的这个按钮它自动的就会绑定，就是点击它的时候，它自动的就可以获取到我们整个这个表单的内容。

所以什么叫submit就提交嘛，对吧，所以就相当于我们表单填好了，我现在要提交，当然这里有一个名字就叫做ADD product to store，我们点击这个就真正要提了，对吧？好，那么我们把这个已经存好之后。我们应该可以看得到这个东西才对，对吧。呃，我们在这里先去把这个停掉，我要确定一下。

大家知道我这边是有有一些这个特殊的情况对吧。List item确实是有的，好，这个也是它的文件属性是没有问题的，对吧，好我们n PM run d一下，那其实这个时候我们不需要啊，要要想要看这个文件的话，我们不需要去非得让D，对吧，我直接访问我本地的这个路径就可以，但是我这个路径有点有点深。所以我们还是让起来看一下吧。大家能够想到，其实这个东西长得不会有什么特别，就是我们这里列出来这个样子对吧，只不过就是这里面的有一些地方，我们点开给大家大概看一下，就是这个H5的一些特性。呃，那我们这个，我看一下我这里是不是有啊。

大家可以看到，我们真正把它。就是填出来之后，它其实显示出来就是这个样子，但大家知道这就是很简单的这个输入框，这里是一个text area，我们可以说很多很多内容，对吧，然后大家看到当我们的就是这个输入框input，它的type等于file的时候。它就会自动生成一个选择文件的按钮，我们的HTML里面根本没有写这个东西对吧？对，它自动就有这个东西，然后我们点击它自动就会弹出我们上传文件选择文件的这个窗口，对吧？给大家看这个是不是H5里面非常非常简单非常容易的一个操作是不是对吧？我直接选择这个就直接放在这里了，这就实现了这个文件的上传，所以非常简单啊，然后下拉框，这个没有什么区别对吧？大家这就是你把刚才列出来这些东西都下拉框显示就可以了，然后我们这里啊，这个也是一个下拉框，大家看我们input，它的type等于datetime local的时候，我们看一下它显示的直接就是这样一个年月日，然后后面有几十几分的类似于这样的一个状态，对吧，那么我们要写的时候怎么去写呢？可以直接在这里点上去去填对吧，可以在这里去填，另外也可以点击这个，大家会发现它自带一个日历。

功能对不对啊，直接默认我们现在是data local嘛，所以说默认就是今天的这个时间，所以你可以直接在这里去选，比方说我的开始时间是这个2018年11月14号，对吧，然后这个上下线就是什么呢？我当我的这个输入到这里的时候，这里就可以去选择它的这个时间。啊，所以大家会看到这个。H5自带的这个功能，其实已经实现了我们想要做的很多东西了，对吧，我们不用花时间浪费再去开发这些组件上面啊，所以就是H5相关的一些东西给大家，就是稍微的多说一句，好，那么我们看一下这边还没跑起来啊。

这个确实有点慢啊好，那我们就先不管了，这个其实我们也不需要一定要让它跑起来之后看这个HML页面对吧，对我们其实没有多大影响。