147_尚硅谷_以太坊项目二_去中心化eBay_链下产品（五）浏览商品

接下来我们。其实要做的事情就是这一部分，大家看到啊，这几乎就是最后一部分了，对吧？要做浏览商品，大家看这个标题啊，回过来看标题，这是存储商品对不对？首先要监听到区块链上那边已经存进商品了，然后我们把它同步监听事件之后同步存储到网购里面，这是存储，然后我们还要查询呢，还要能在页面上能够看到这个存进去的商品呢。之前我们直接写死，现在不要写死，我们要把它通过mango里边查询查出来，浏览出来，好，那么我们来看一下，呃，大家会看，就是接下来我们要改的，主要是不是就应该要改index.js里边的内容了啊，所以这个大家是能想到的啊，我们的前端页面，Web页面主要就是index。JS，那另外就是可能还牵扯到index.html，如果有涉及到的也要改，对吧，另外大家想到我们还可能要改哪个。

呃，Server对吧？呃，有同学已经想到了，因为为什么要改server呢？因为我们这里index.js这是前端对吧。呃，现在我们要做的其实就跟区块链没关系了，这就是一个传统web的前后端，那index.js就是前端浏览器上的页面，它是不是要给我们后端发请求啊，发请求那后端是不是得有相对应的这个路由去做处理啊，所以有前端发请求，那后台还得去处理，所以就是index.js和s.JS这两个都要改。好，那么我们接下来就把这一部分实现，呃，大家就可以看到我们要做的事情，基本上就可以就是整个就可以说完结了啊好，接下来我们把这一部分再来实现一下，嗯，好，首先我们呃，大家先看一下我们这个in de JS啊先先大概的先回顾一下，我们已经想到了我们所有的这些DOM上面的事件的触发，一些handler全部都在这个app.start里边定义，那下边呢，我们会看到是有各种各样的render函数，对吧，就是一开始我们把这个进入首页之后。

整个产品列表我们要去把它渲染出来，那这一部分都是在这里做的啊，所以大家会看到我们之前就已经说到了render store，你这里边直接就get product1 get product2，这个肯定靠谱。所以我们现在是不是要改这一部分啊，好，把这一部分大家就会发现我们可以直接删掉了，对吧，删掉之后我们就把。Render这一部分。来做一个改进，呃，那大家首先可以想到，呃，我们这里如果想要去更改的话，首先。

呃，大家是不是能够想到，我们先得定义，就是到时候我们要去从哪里去查数据，对吧，那要去查数据的这个东西是不是应该是作为我们。一个基本的配置应该写在上面啊，啊，这里面可以给大家写一个配置，就是比如说off，我们叫off chain对吧，链下的服务器offin server等于，呃，这个应该等于什么呢。它就应该等于http local host端口是多少，大家还记得吧，3000对前面已经定义过了，对吧？呃，然后这里边我看一下应该还有一个数据定义啊，这里还有一个categories，这里定义一个，呃，一个数组就是我们种类的数组常数对吧？这是要干什么呢？大家应该还记得我们一开始的那个页面，呃，大家如果还记得的话，我们页面是不是一开始这里是有一个。

有一个categories，对吧，这里一开始最最左边给了这个SM2这么宽度的一个一个，呃，空间就是categories，当时我们这里是空空如也，什么都没有，对不对，然后右边是我们的，就是产品的列表，对吧，Products To Buy，所以大家会想到我们要定义这样一个categoror，到时候也就把它也放在那儿了，对吧？好，那么我们接下来就把这个copy出来。我就直接copy了，因为这个太长了。我们同样把它定义在index JS里边啊，好，我们把它定义在这里，这个比较长的一串啊，这就是一个数组，所以到时候大家会想到我们往categoror那个到节点下面去插数的时候，是不是就是按照这个去查，对吧，一个一个把它添加上去，Ipad上去就可以了，好，那么接下来我们要改的是。

Rendersor，呃，那renderto这一部分大家首先就应该会想到我们。这里边。可能就要分各种各样不同的情况了，对吧？呃，大家是不是能想到，就是在不同的情况下，我们应该发布我我首先大家应该想到我们要render store的时候，首先要拿到我们对应的产品，产品列表的信息数据，对吧？那这个数据从哪来，是不是要发一个请求到我们的后台服务器那里去，就刚才定义好的那个option server。这个服务器对不对，朝这个服务器啊去发请求，那发请求的过程当中，我们要带什么样的参数呢。哎，这个时候大家就还得注意了，如果我们什么参数都不带，那应该就是要获取所有的产品的列表，对吧。

而如果说，或者说我们如果什么都不带，大家按照自己来定义，或者说有可能我们就是要筛选所有的当前还在拍卖状态下的列表，对吧？这是我们自己定义的，那么大家会想到这是不是应该跟我们这里边页面HTML上面要展示的内容有关啊？比如说这里大家会看到，我们定义了两个div，一个叫做products To Buy，一个叫products in。那大家会想到是不是对于这两种情况，他是不是朝后台发数据去查询的时候，应该是有不同的查询条件呀，对吧，明明这就是查的不同的类型对吧？呃，大家就会想到我们前面说。要按照不同的state来查，你如果当前的state是还在可以竞拍的状态下，那么我就把它放在这个products To Buy这里显示，如果是已经竞拍结束，到了揭示报价的环节的话，那我就放到这里来，对不对啊？当然了，大家可能想到我们其实不仅仅这几个，比如说我们是不是还应该有一个？

揭示报价结束之后，那应该是在什么状态呢？对，就进入到可以去把它结束对吧，Finalize的一个状态，然后可以生成一个托管账户那样一个状态，好，那么对应的我们还可以把这个再做一个更改啊，我看一下这个不要写错。Div。是这里对吧。我们可以把这个COPY1份。好，COPY1份，大家会想到比方说我们这里，呃，In review stage，我们再来一个in finalize，对吧？

Final。那最后这个ID我们可以product finalize list对吧？所以大家会想到我们有这样三个，呃，整个产品的列表，一个是在可以竞拍的状态，然后还有一个是在已经拍结束，可以揭示报价的状态，那还有一个就应该是已经结束了揭示报价可以去就是终结完完结然后进入到最后的呃，托管账户，然后去交交割这个账款的这个阶段的商品啊，都可以列在这里。那大家。通过这么一看的话，其实就可以想到，那我们在index这里啊，index.js这里是不是得分不同的情况啊。对吧，所以这三种情况应该朝后台发的是不同的请求有不同的类型，所以这里我们就加一个。

呃，我们加上一个另外的一个函数，比方说我们叫render products吧，那我们加一个这样的函数，传不同的，诶，传不同的参数，然后就可以返回不同的产品列表，那render products我们首先比方说给定的这个参数是什么呢？就是我们一开始的这个。来我们看一下啊。哦，一开始这个就叫product list对吧，我们就按这个ID来。然后对应的参数是什么呢？大家会想到我们这个就可以不传参对吧？不传参默认就是直接把当前还在竞拍状状态下的商品权拿出来，好，然后那么对应的大家会想到我们可以有一个product render products product review list对吧？好，我们把它列出来。

那这个大家会想到我们传参传一个什么样的参数呢。大家说这个应该传一个什么样的参数，是不是应该表示我们现在的产品状态啊，对，所以我们这里给一个产品状态，比如叫。Product status啊，大家注意我们这里的产品状态是不是应该跟这里相关啊？对吧，所以我们这里就叫product status。然后就可以在mango里面直接根据这个去查了，对不对啊。Product status，我们给一个字符串吧。Review吧。好，那么同样大家会想到。类似的，我们还可以定义一个product final list，对吧？

Final，然后我们给定的这个status叫做。Final。好。呃，所以这样的话，接下来我们要实现的就是一个叫做。Render products的一个函数了，对不对？所以我们把它再抽象了一层，放到了这里，好，那等一下我们再去实现这个函数，大家先想想，我们除了这个render这几这几种列表之外，Render这三个列表之外，还要render什么呢？我们在页面上再回顾一下，还有还有什么东西没render出来，这三个列表有了对吧？前面是不是还有一个categories还没塞进去啊啊，所以我们现在既然上面都已经定义出来了，那我们把这个也做一个。做一个渲染对吧？啊，怎么样渲染的，那这个其实很简单，就是把我前面定义的这个categories for each便利对不对，把它每一个都诶。

每一个都拿出来，然后要去做什么呢？首先我们拿到它的这个对应的value啊，这是一个数组for each去做一个便利每一个category的value。那么我们把它直接。Dollar用j query的方法直接把它end到对应的那个ID下面去，对不对？那对应的这个ID是什么呢？呃，开就叫categories对吧。好，那么我们井号categories，然后点A。把它加进来就可以了，对不对？那加进来的时候，呃不能直接就把这个value加进来的，大家最简单的写法也至少得加个div吧，对吧？呃，大家就是自己如果想调这个呃样式的话，那大家可以再去把它做一个细化啊，我们这里就不做详细的这个说明了，好，就是简单的加一个div，然后把这个VALUE6写进去，相当于就是列了一个列表列在那里，对吧？当然大家可以想到就是如果我们这边的category这个种类是还可以点击去做查询的话，那是不是这里还得加链接啊。

对吧，这里还得再加上链接，然后还得定义它的就是跳转事件，那点击之后我们还要去触发这边的重新render对不对，这个查询的这个，呃，就是本身的这个条件就又会变化，那这个就复杂一点，我们可以把这个作为大家的一个作业，大家下去可以去把它丰富起来啊，那接下来我们现在关键要实现的其实是这个render products这个函数对不对。

那这个函数大家就会发现，我们之前其实传进来的是应该是有一个有两个参数的，对吧，一个参数我们是不是应该叫。啊，应该就是它的那个div的那个ID对吧，我们就叫div好了，然后还有一个参数是后边的这个筛选条件，那我们直接叫一个filter吧，有了这两个参数，那大家会想到我们是不是就可以直接去向后台发请求了。这个在前台页面给后台发请求，基本的这个query的写法大家大家熟悉吗？这个dollar.as对吧？阿贾克斯请求我们发一个这样的请求，呃，那里边的话，我们就要传对应的这个阿贾克斯对象对不对？呃，首先你要去访问的这一个URL是什么样呢？访问的是一个什么样的URL呢？定义一个URL。

这是不是前面我们定义过的off server对吧？那后面是不是还应该带上它的那个路由router对吧？那我们这里要访问的是什么呢？大家会想到我们这里访问的应该是产品列表，所以我们把这个定路由，这个大家可以自己定义对吧？我们就定义成后面杠products好了，这就跟我们这里边的这个渲染的这个含义是一样的，对吧？我们定义成这样，那大家这里定义了这个路由，是不是到时候我们在server里边得去实现这个路由的处理啊，啊，所以这个大家能想到的，那接下来呃，基本的你这个URL是是访问这个URL，然后你的类型是一个get请求还是一个post请求呢？这是一个type对吧。我们这个应该就是一个get对吧，不需要按照post去提交一些表单数据，我们直接get就可以，好，那接下来大家会想到我们肯定还有表那个请求头，对吧。

呃，就是我们的内容Type Contact type，那这个里边我们就应该是application Jason，对吧。这个大家能想到，我们传递的数据类型就是application Jason。然后我们还应该去定义一个char set。等于UTF吧，啊，这都是常见的一些请求头的一些配置，对吧。好，那另外就是。我们既然定义了application Jason，那就肯定我们要带着数据过去的对不对，那这个数据其实是放在，呃，就是对于get请求而言，它是不是就会放在我们的这个link后边，以这个大家还记得吗？问号对不对？然后比方说ID等于什么以这样的形式带过去对吧？呃，Post的话，那就不是post，就是直接是单独的这个data传过去的，就不会附加在这个URL上面对吧？所以大家这里边如果要是get请求的话，我们定义的data。

大家想象我们这个要带过去的数据应该是什么东西呢？朝后台发请求，我们要去拿现在的这个产品数据。是不是状态标志啊，对，大家能够想到，其实就是我们这里的这个product status对吧，所以其实就是传进来的这个filter，所以我们这里的data是一个对象，它的内容其实就是filter的内容。好，那么这里我们就已经定义好了这个阿贾克斯请求，那当然了，就是这个阿贾克斯请求发出去之后怎么样处理呢？那我们就是还要拿到它的返回对不对？点到呃，这是链式调用对吧？呃，这query的链式调用，然后我们拿到它返回的data之后就可以做处理了这个data。

那大家应该能想到这个data如果返回的话，这是什么？这就应该是我们后台服务器把我们查出来的一组产品信息全返回对吧？那我们这里就要去判断了，那假如说我一判断你这里边就没有data的话，是不是我就应该是显示你当前没有可用的数据对吧？没有可用的信息就类似于这样的一个显示啊，所以大家做过这个前端页面渲染渲染的话，就会发现这都是一些常规的做法啊，就是你拿到数据之后，先判断它是不是为空，如果没空的话，我们就Dollar把对应的那个内容直接填进去，呃，这个大家就会想到我这不是，这时候是不是就是要判断你这个到底是往哪儿填啊。

往哪填，是不是就是我们进来的这个ID啊。所以大家看这个写法啊，我们就是井号加上div，这是不是就是它对应的那个ID的DOM节点，对吧？所以我们前面render product product list，这是不是就是要给我们前面这个product To Buy这里去渲染它下面的这些产品？然后下面传不同的这个ID的时候，是不是就是给不同的这个内容要去渲染产品啊。同样我们拿到产品之后，是不是塞也应该塞到不同的地方去啊，所以我们这里要把这一个div数据，它的这个ID要传进来，这个时候我们把它拼上就可以了，这里其实应该叫div ID对吧？啊，我这里就就简单写了啊，应该可能我们课件上也是这么写的，对吧。好，那么拿到这个之后，是不是就直接把它的内容写上就可以了，现在是没有数对吧，没有数的话，那我们就写一个，比方说，呃，现在没有没有产品对不对，呃，No products。

No fund吧。啊，这就是如果我们没有数据的情况，那同样大家就会想到那如果else的话。这里是不是就相当于我们应该去把这样的一个。就是对应我们拿到data里边所有的数据要渲染在这里啊啊，这里我们先简单的写一下，然后在后面大家会想到肯定我们要去便利这个data里面的数据，对不对啊，那我们这里可以先就照着上面简单的写一下，先给他一个空。大家想到这是什么意思呢？其实就是相当于先先占位把它填到这儿对吧，然后接下来才是我们真正要去。

把查询到的数据返回来的这个过程，那这个过程大家可能就想到了啊，我们肯定大家可以用一个呃for循环，可以用一个for each，那也可以用我们课件里面给大家推推荐的这种方法，大家会看到课件里面用的是用的是while对吧。呃，大家，呃，等一下我们把这个实现完了之后，再给大家解释为什么要用we，其实一实现完了，大家把这个代码读懂了，其实就知道它为什么用while了，我们看一下啊。呃，那么大家其实可以想象的到，就是我们拿到这个data之后，比较简单的一种想法是我直接写一个for循环，然后只要小于这个data lengths，我一个一个把它拿出来，然后一个一个就是APA到对应的这个div后面是不是就可以了啊，但是大家可以想象得到，我们这个过程当中还有一个问题。

什么问题呢？就是我是不是还得考虑这个布局啊。我们现在拿出来啊，我现在没有启动这个页面啊，这个页面可能看不到对吧，大家回忆一下我们当时的那个页面长什么样。本身一个产品应该只有一个很小的一个缩略图，然后还有一些信息，对吧，那我们一行应该是不止一个产品，对不对，是不是这样，如果我们每一个产品作为一个div往上看的话，那相当于一行就一个产品。那这个页面其实就很丑了，对吧，你这个图很小，然后又发现一行就那么小的一个产品，你要不放中间，要不放最前面，其实都不好看。那大家可以想到就是，那如果我们出于这个页面布局的考虑的话，是不是还应该一行多放几个产品啊。

那你要多放几个产品的话，问题就又来了，你放几个呢？放几个才能保证它放在一行没问题，然后就是不要，呃，经过这个挤压之后，让我们的页面变得很乱呢，这就相当于涉及到我们分行有点像分页这样的一个功能了，对吧，你一一行一页显示几个啊，大家看一下这里边我们怎么样去做。这里的做法是用一个while循环，当然了，这个while循环主要也就是要便利这个data里边的数据，对不对啊，大家看一下这个while怎么去做啊？呃，那当然了，首先就是里边的这个判断肯定就是要。让我们的这一个呃，就是判断的某一个指示数，要把这个data的长度要要指示完，对吧，但我们这里没有再去另外的定义一个I啊，或者怎么样一个自增的一个变量去指示它的长度，而是直接data.lengths大于零，那大家可以想到我这么去定义。

那这个data.length不是应该永远都大于零吗？那就假如说你前面等于零的时候，我这个状况不是已经处理完了对吧？那如果要是它就本来就大于零的话，你这儿不就成死循环了吗？诶大家肯定就想到了，那你既然这里要去判断它大于零的时候就一直循环，那是不是在里边的循环应该要不停的要减它的这个长度啊啊，所以它的处理思维是我们不停的把贝塔的长度缩小。也就是说我拿出一个数据来之后，就把贝塔的长度缩小对吧？啊，就相当于是把data当成一个堆栈一样，弹出一个一个元素来之后，那我把这个元素保留到另外一个地方，这个整个的堆栈就少了一部分对吧，长度它的高度就小了一部分啊，这是我们的这样的一个处理思路，好，那么大家可以看到接下来的处理方式是。

我们去定义一个trunks吧，就是一组东西对吧，一组这个data，然后我们的做法是什么呢把。Data做一个surprise操作。我写先把这个写出来啊，看一下应该是几个，这里定义的是。诶去哪了四对吧，SURPRISE4大家想象这一句是什么意思？Surprise是什么意思？大家大家还有印象吗？学JS的时候学过没有。学过的是吧？对，这个是相当于数组的这个经典操作就是，呃，这个PLA和PLA这两个肯定是要专门讲的啊，Place是是什么意思呢？它是一个很强大的一个命令，它可以可以增删改，对吧？什么样的操作都可以做，那这里大家会发现后边我们没有去加入新的元素，所以应该没有去插入对吧？那第一个元素它是代表第一个参数是代表什么呢？

代表增删改的那个位置对吧，所以是从零开始，然后后边的这个四表示什么呢。是表示要删除的截止到的位置对不对，如果这里跟前面一样的话，是表示不删除对吧？啊，大家如果要是还记得的话，忘记的话，大家再再去查一查啊，JS里边的PLA方法，数组的PLA方法，那所以这一句的意思是什么呢？是表示从零位置开始截止到四。的元素全部删除掉。那这个PLA方法它的作用的效果是什么呢？它会把data这个数组直接就改掉，对吧？所以就相当于data就把前四个元素就截取掉了，对吧？啊大家注意啊，这个零和四四可以认为是截止的那个元素的下标，也可以认为是删除的元素个数，对吧？所以要删除的是01234个四不删对吧？所以我们是要删四个，所以是不是这样的话，Data就相当于把前四个都删掉了。

哎，那大家就说你直接就删掉了，那这四个元素到哪去找呢？啊，大家回忆一下，对，就是Li这个方法返回的值是不是就是它删除掉的那那个元素啊，删除掉的元素是作为返回值返回的，所以大家看到就是用PLA这么一个，就是JS数组操作的一个神器啊，就是这么简单的一行代码，就把我们的data塔也也改掉了，然后把它的前四个数组还选取出来，放到我们的这个创S里边了，那大家可能就想到我这个几个这个四是不是可以变啊，我这里放四个是不是就是想要一行显示四个。

啊，所以是这样的一个思路，好，那么大家就会想到我这样每次都把data塔减四个，那是不是就可以每一次都减，每一次都减，然后等到点lengths小于等于零的时候，是不是就可以不减了，对吧？那剩下的东西，呃，就是我们就相当于这个循环就可以退出去了，所以是这样一个思路啊，好，我们既然已经拿到了这样的一个创死这个这个数组，那么我们就可以把它去真正的去end到我们的对应的这一个元素当中去了，对吧？那aend的时候怎么end呢？呃，比方说我们先定义一个肉吧。

呃，这个肉我们就定义的叫做这个，呃，J query的这个元素啊，我们把它。一个div。就是我们定义一个j query，这就相当于可以直接操作我们的DOM元素，对不对？我们定义一个肉，它就是是什么呢？就是一个稻米元素，就是一个div元素，好，那么我们有了这样一个肉之后，就可以调用这个div的一些方法了，对吧？那肉点比方说我们给它加上这个class，大家可以看到有有这个提示对不对，可以ADD class，这表示什么呢？是不是给他可以。把这个。Class参数可以加进去啊。诶，这这这个不要等于了，对吧，艾class是个方法，那么我们这里就可以比方说它的这个class教授，然后我们就可以应用样式了，对吧？啊，这是先给它定义一个样式，然后那么大家可以想象得到，我们是不是就应该在这个肉里边，要把截取出来的创S都添加到这个肉里面去啊。

是不是这样的一个操作，好，那接下来大家就会想到我们就可以遍历这个trumps，这个就可以直接用这个我们数组的便利for each了，对吧，For each，每一个创里边每一个value，我们就。把它拿出来，拿出来怎么去做呢？呃，大家会想到我们这里边的这个value应该是一个产品的一个对象，对不对，Product对象对吧。大家还还记得这个data是什么吗？Data是我们从那个mongo里边查出来返回的那个结果，所以它应该是一组product对象，对吧？对，所以这里我们拿到这个value，那那我们不要叫value了，我们叫叫P吧，对吧，Product嘛。

那我们拿到这个对象之后，我们应该怎么做操作呢？是不是我们就应该调用，大家还记得吗？我们有一个build product的这个方法，对不对，是不是得把它每一个元素都拼起来啊，啊，这是我们当时做过的这些事情，好，所以大家现在就想到我们要去build product p对吧？那build product p大家会想到这里是要return一个node的，所以我们这里let node等于build product b把这个node返回出来，然后是不是要把这么一坨这个node一个元素的信息是不是要添搭添加到这个肉里面去啊，一行是四个对吧？所以我们四个for each，每一个拼出来这个节点之后，把它添加到肉里面去。

啊，这是我们这样的这个想法对吧，所以后边就是肉点。因为肉已经是我们定义好的一个div到节点了，对吧，所以直接可以用它的这个点end，就不用在Dollar什么什么点end了。呃，大家发现我们这里还没有跟上面的这一个，就是我们要写入的那个div关联起来，对不对，这是我们新建的一个DOM节点，对吧，还没有真正添加上去呢，因为我们现在这一行还没拼起来，我们现在是在拼这一行啊，我这又写错了啊，应该是a pen的这个node对吧。好，那么现在我们就把这一行的元素，四个元素都已经放在里边了，那这一行都拼好之后要做什么操作呢？是不是这一下就可以把我们上边的这个节点里边的内容直接添加上去了呀，直接添加的是什么？是不是就是这个肉啊，就是一行一行添加对吧？啊，所以大家想一下我们这个思路啊，稍微有点绕，但是大家会发现这个代码的实现非常的简洁。

点append。肉啊，所以大家看看到就用这样很很简短的，这大概也就是20行代码吧，十几20行代码就把我们这个功能实现了，而且实现了一个简单的分行，或者说大家认为这是一个简单的分页也可以对吧？啊，大家可以想一下这个这个操作，大家如果要是已经忘记这个方法的话，回过头去好好再看一下。