128_尚硅谷_以太坊项目二_去中心化eBay_web前端核心业务（四）竞价和揭示报价

我现在的样子大概是这样，还有一个问题不知道大家注意到没有，就是如果我们页面刷新的时候，大家看这页面刷新的过程当中有什么问题吗？对，好像总是先把那两部分都要出现，那那大家觉得这个是什么问题？诶大家还记得那两部分它是为什么之后会消失掉？我们回顾一下代码，在代码里边我们其实是。就是在这个window.app里边，然后去做渲染，对吧？在这个里边我们是有一个，假如说当前有这个product details这个元素的话，那么我们认为它是在详情页里面，然后就去做渲染。啊，我们调用的这个render product detail这一个方法对吧？那这个东西我们具体在做的时候呢，那就是先要拿到我们合约实例，然后去get到当前的这个详情，对吧？然后再把所有的详情挨个填进去，在这个过程当中，我们会注意到本身有一个B，还有一个reviewing，两个表单，我们本身在HTML里边是都定义好的，对吧？但是在这里边我们要求不同情况下显示不同的表单，所以我们写了一句点害把它隐藏了对不对？然后后面我们又根据当前它的这个时间。

那么决定哪一个显示出来。那所以大家会想到是不是在我们隐藏它之前，说明那两个就会显示出来对吧？好，我们可以在这里做一个调试啊，打开F12这个做一个调试。我们点到这个S这里，呃，这里是这个render对吧，比方说我们这里可以呃。这不是这个hide吗？我们直接打一个断点打在这里，或者我们可以打的更早一点啊，比方说我们直接在这个get product这里打一个断点，那大家可以想到我这里如果要去做刷新的话，不出意外的话，在前面就应该会断住，对吧？诶这个这么慢啊，诶大家可以看到我现在已经断住了，这个时候页面上其实已经有这两部分了，对不对。

那这个时候其实大家会发现我在这里断住的话，那这里其实是义务请求，所以我们正常执行到了这里的时候，我们的数据还没有回来，Product ID这个整个product的内容还没有拿回来，这个时候我们的页面其实就已经先刷新出来了，这两部分就已经先展示出来了，那这是为什么呢？大家其实看这个HTMHTML的话，可以直观的看到，那我们本来就是已经在这里边把这两部分这个form都已经写在里边了，对不对，这下边是这个reviewing，上边是我们的for，这个对吧。

大家可以看到这两部分我们定义的be和reviewing直接就在我们这里，就是后边这一个宽度为八的这个div里面，本身就在里面写着的，所以我们正常如果静态加载这个页面的时候，这两个就是应该加载出来，对不对？啊，那左边为什么没东西呢？那是因为左边定义的这个product image product name这些都还没有拿到，对吧，这是和产品相关的东西，我们现在还没拿到，但是后边的这些我们定义的这个form这些表单。输入的这些项目，这都是写死在HTML里面的，那这个不需要去拿对吧？呃，同步我们直接加载这个HTML页面的候，他直接就刷新出来了，所以我们这个时候就会发现，每一次执行到我在我们拿这个产品详情之前，他就会先刷出来，然后等到我们真正把这个产品详情拿到了啊，大家会发现，然后再往下走，对吧。

然后发现。到了这里再往下走，才会把这个隐藏掉，对不对？所以大家会发现每一次因为我们这里的这一个步骤是异步去请求数据的，所以说每一次我们同步加载页面的时候，都是先把那两个先刷出来，然后拿到的数据之后回过头来往里填数据的时候，才会掉到那个海，才把这两个部分隐藏掉，对吧？所以大家会发现我们每一次刷新的时候先刷出来，然后再变。

那这个有什么改变的方法吗？大家能想到吗？这个要做优化，怎么去优化。这这个产品的观感太差了，对不对？呃，这样每次看到好像都是有一个很奇怪的状态出现，呃，其实这个要改的话也非常简单啊，就是我们在JS里边是这里直接加了一句be revealing.hide就把它直接隐藏了，对吧？大大家可以想到我是不是可以直接把这一行放在别处把它隐藏掉，是不是也可以起到这样让它隐藏的效果呢？如果我要是在做这个异步调用之前就把它隐藏掉，那是不是就不会有这个问题了呢？啊，这其实是一个基本的想法，对吧？那那大家可以想象一下，假如说我要把这一局。换一个位置，大家觉得应该换到哪里会比较好，换到上面一些，但是其实这里还是一个异步在拿这个数据对吧，那可能还要再更上面对不对，那大家就会想到我们在什么地方调用的这个东西呢。

是在上边我们app.start这个里边这里调用对不对，那我们在调用它之前直接就把它隐藏掉，是不是效果就会好一些呢？哎，我们来尝试一下啊，在这里做一个这样的改变啊，我这边还是得重新去启动一下，等一下我们看看这个效果怎么样，好，那么我们现在已经把这个刷新出来了，现在我们看一下啊，它现在的效果是怎么样，首先我们退回到这个，呃，这不是这个页面啊。我们的原始页面还是8080这个页面对吧？啊，我们这里随便点击一下就可以进到这个页面来，那我们重新刷新一下，大家看到是不是就不会有之前我们出现那个样子了啊，就直接相当于是把它隐藏的对吧？不会再闪一下了啊，这就是大家从当然我们看到这个具体的数据好像还是会慢一点，因为它是异步加载的对吧？它是我们先去查查询，拿回来之后才会填到这里，所以说可能大家会看到这个RTH会稍微慢一点加载出来对吧？包括我们的图片也会加载的慢一点，这是正常的一个状态啊，这是大家可以就是用户从直观上也是可以接受的一个状态，所以这个是没有问题的，呃，所以就还有一些小的地方，大家其实遇到各种各样各样的问题，也可以去做一些思考，就是我们应该去怎么做，怎么样能把它处理的更符合这个用户习惯，让大家看着会更舒服一点，好，那接下来。

我们会发现我们现在呢，是做完了这个详情页的展示，那事实上我们还有一个核心功能，就真正的核心功能还没做呢，就是说你怎么样去出架，怎么样去揭示你的报价，对吧？这两部分还没做，那这两部分其实我们前面已经说了，这个架子都已经搭好了，在我们这里边product HTML里面就是两个表单，对不对，那其实就是我们到时候用户去填，填完了之后一点那个submit这个提交，提交到我们后台，那我们其实就是后台把这个传到这个区块链上面去，然后相当于提交到我们链上，就相当于完成这个这个动作了，对吧？所以这个过程我们怎么样去实现呢？现在我们就来看一下，那大家应该能够想到我们所有这个事件的处理，这相当于是我们定义在页面上的一些handler，对吧？

啊，就是一些事件的处理，处理处理器，处理机制是不是都应该在这个start这里直接去注册啊，对，所以大家应该记得我们前面的这个change事件就是在这里，我们前面的这个就是提交上架新产品的时候，这个sum也是在这里处理的，对吧？所以同样我们接下来的这个submit事件也应该在这里去处理，大家应该能够想到这query对吧。

这个我们叫逼对吧，拿到这个对应的form，它的ID是叫B，那么它有一个submit时件。好，那么当他submit提交上来的时候，大家会发现其实跟我我们跟上面的这个处理是相类似的，对吧？那其实就是里边也可以有一个event，上面我们是用传统的这个方式event写我这里就多多用用不同的风格来习惯用这个箭头函数的话，会觉得这个比较好使，对吧，也比较简单，呃，而且就是大家如果之前呃老师给大家讲JS应该都给大家专门讲过这个里边的this指针这个这个事情对吧？这个本来是很坑的，所以如果大家用箭头函数的话，其实也是避免了很多这个JS里面本来的一些坑，对吧？啊，所以就是在大家能用的时候，还是尽量用ES6ES7里边的一些新特性啊，就包括我们所说的这个promise呀，Wait think呀，就是能用的话，肯定比这个回调好用多了，对吧？好那么我们这里submit，然后去在这个回调里边拿到它的这个event事件。

那接下来在这个里面会做什么操作呢？我们看一下这个，首先这个这个表单，整个这个组件里边，它包括哪些东西啊，大家会发现，呃，在这个里边，其实我们其实就是要把这几项东西都拿出来传进去，对不对？另外这里边还有一个隐藏状态的一个product ID还要传进去，另外就是我们页面上还有一个messages有一个对吧。这里我们有一个message alert message，所以大家要注意我们页面上考虑的时候需要把这个message实时的提醒出来啊，那比方说我们这里要点击的时候，可能第一反应就应该是先把message清空对不对？

MSG点好就直接害好了，我们直接把它隐藏掉，然后接下来我们去做什么呢？是不是要先拿到我们这个表单里边，呃，提交的那些内容对吧？好，我们这里就let amount，等于Dollar那个叫叫什么amount。这个叫b amount对吧，就是我们本身要去竞价的那个报价，所以我们先把它拿出来，怎么拿呢？它的值就是后边value对吧，V就可以了，输入法好，同样，那么大家会想到我们是不是还应该把它真正发的这个值要拿出来啊，对吧？呃，这个三的amount等于Dollar。

这个我们还是过来直接抄一下啊，这个怕写错了B的三，同样他点三。那另外还有一个大家能想到，就是还有一个secret对吧，看一下这边它叫什么。还有一个叫secret tax，好，那么我们直接这边也叫secret tax吧，等于Dollar井号里边我们把这个拿过来，然后这里直接把它的值取出来，对吧？好呃，那么现在我们就把这个表单上真正要提交的信息都已经拿到了，对不对？

那接下来我们应该要去做一件什么事情呢？大家想一想。我们拿到了amount，拿到了secret tax，但是事实上我们最后我们是要提交到那个区块链上去，对吧？我们事实上区块链上我们的合约里面的函数参数并不是amount和secret tax。大家还记得我们的参数是product ID和这个B的对不对，这个B的是什么呢？是我们真正做过哈希计算的那个数数对吧，那个那个值，所以我们这里边是不是一方面是要拿到这个product ID对吧？那product ID从哪里拿呢？再回忆一下，是不是我们这里边是有这个一个hidden的这个input，它的name，它的ID就叫做product ID，那大家还记得我们给它赋过值吗？

我们前边在这个render这个方法里边的时候，大家会记得，对，我们是不是直接在这里Dollar里边的这个product ID把它的这个值给了，就是用P0的值给它赋了值啊。对，所以这样一负是不是这个元素里面它本身就有值了，那之后我们就可以用了，对吧？啊，当然这个就是前提是你前面必须得负过值，要这里没赋值的话，后面就拿不到了，所以所以大家看到这个一环一环都是相扣的，对吧？不是说我们前面这个写了就白写了，好那么接下来我们要做的就是把这个值拿到，那就是Dollar，它应该就叫product ID，对吧，同样我们还是拿到它的这个值，所以所以大家就会看到，就是我们这个直接赋值的时候，后面是直接写一个值进来，然后如果我们取它的值的时候，直接拿这个value就可以了，对吧，这就是这就是这query里边的这种写法，好那么接下来大家会想到我们还缺一个东西，就是我们真正要传进去的，加密之后的，密封之后的那个B的。

对吧？所以我们可以把它叫做C的BI，这个东西是什么呢？是我们要做哈希计算之后的那个东西，那我们这里就简单的直接用呃，这个WEB3的杀三方法了，大家可能看到这个我们课件里边应该是用了这个叫做E，呃，JS里边的这个方法，对吧？呃，这里是用了这个ETHU，这是从那个eri JS Su里边拿到的，对吧？这个这个对象大家如果想用这种方式的话，也可以用这种方式，因为这个类库它有一个什么好处呢？就是里边我们涉及到以太坊里边加密计算的各种各样的东西，它里面都有啊，所以就是说它的这个就是封装程度和这种就是使用的方便性上都会好很多，大家如果要是觉得在项目里边很多地方都会用到的话，那可能用这个还是会更好一点，我们这里只是一个简单的沙三。

所以说呃也就还好了，对吧，这个不用不用考虑那么多，好，那么接下来我们这个13需要做什么操作呢？大家想到了，就是我们要把那个数量和对应的后面的那个字符串要拼起来，对不对啊，这个这个地方大家稍微注意一下，就是我们是要把呃对应的这个尾这个数量。所以这里应该是amount对吧。然后我们这里to string，这样我们就可以拿到对应的，呃，就是我们这里需要的这个本，呃，本身我们这里拿到这个mount应该是一个以伪为单位的一个数量，然后我们要把它转成以态，对吧？然后我们用这个以态的数量去做哈希计算啊，当然后边这个to斯string，大家这个可能会发现，就是或许加不加都可以对吧？因为后边我们要加的是这个字符串对不对？那如果我们去加一个字符串的话，它默认就是一个字符串拼接，所以后边我们跟上这个c text，呃，这里呢，大家稍微注意一下，就是在这个WEB3的S3里边，它后边的这一个参数呢，是只有一个对吧？呃，大家如果要是给两个参数，大家会发现其实后边的那个参数是没有用的，呃，自己如果要是用逗号隔开的话，那可能就是加这个加密的结果就不一样了，这跟我们在合约里边调用的这个沙。

三方法不一样，大家还记得我们合约里边在解解码的时候，在给他做这个校验的时候，也用到了S3，那这个里边是用逗号分割的，对不对，所以大家稍微注意一下啊，就是solidliity里边和这个JS里边实现不一样，好所以现在我们已经拿到这个沙三之后的这个哈希的话，那大家就会想到现在我们终于准备工作完成，是不是接下来我们可以调用我们的1STORE，然后拿到他的合约实力去做操作了，所以他点deploy的点，呃，那当然了，就是常规操作对吧，拿到他的。

合约实例，然后I点我们要调一个方法B，对，那这个B的有两个参数，一个参数应该叫做是不是叫product ID对吧？这里边大家如果要注意啊，我们这里传的这个product ID的数据类型应该是一个UT啊，大家如果要是这个为了确保它没有问题的话，最好是做一下pass in对不对？因为前面我们从这个洞上面拿出来的值，它应该是一个string类型对不对？

呃，所以为了防止出现这种呃，不必要的这种数据类型转换，我们还是给它做显示的强制类型转换会好一点，所以这里我们把这个product ID传进去，然后passt转成一个int类型，后面一个参数就是我们前面已经处理过的这个的，对吧？这就是它本身就是一个字符字符串，那本身BASE32这个肯定没有问题对吧？它是一个16进制的字符串嘛。好，那接下来大家会想到有了两个参数之外，我们这个B的是不是还要发起一笔交易啊，我们在ma ma mask上，大家经常如果要是不指定那个from的话就会有问题啊，经常就会invalid ther什么的，对吧？所以这里大家注意一下我们呃，在这里的话，去把这个from指定WEB3点Eth.ACCOUNT0，然后这里我们还要注意一个，就是。

在我们的这一步操作里边，大家会不会发现，就是我们还少了一个什么东西没用，赛德旺牌没用呢，对吧，这个怎么传过去呢？这个其实很关键，是我们真正要发的以态对吧，所以它是不是我们在这里交易对象里面要传过去啊对，这里应该有一个value，所以这个value是什么呢？这个就应该是我们这里的这个amount对吧。呃，那这里边大家注意，我们让用户，呃，不是amount send amount对吧？我们让用户写的这个send amount肯定不可能让它以伪为单位，对不对，肯定是以态为，是以以态为单位的，所以我们这里注意交易里边的这个value，它默认的单位是尾，对吧？所以同样我们还是要来WEB3点突尾，这叫3AMOUNT。

然后把它转成仪态好，这就是我们这样的一个过程，那当然了，大家如果要是想要去指定gas的话，也是可以指定GA的，对吧，那如果要是说没有这个指定GA的需求的话，也可以不指定，那后边我们就可以交易完成之后我们点赞。然后呃，这个我们就可以点赞的时候，大家就会想到我们可以处理它对应的这个信息了，对吧，那这个就当成一个结果吧。然后我们定义一个回调，那大家会想到这个处理完成之后，我们处理什么信息呢？呃，其实好像不需要更新什么信息，对吧，但是你应该提示一下我提交成功了，所以我们其实就是把那个mess更新一下是不是就可以了，所以这个里边我们主要要更新的是这个message啊，那具体更新什么信息，我就直接从这边看一下吧，抄过去好了。

好，大家会看到我们之前不是把message.hide吗？所以接下来我们是不是更新了数据之后，更新了信息之后得把它再售出来啊，当然了，这里边的这个信息我们就自己随便定义一下，比方说这里就是说你已经成功的提交了一个，呃，就是这个竞价对吧，你的竞价已经成功提交，那所以我们在这里点HTML，然后把这个写进来就完了，接下来我们把他MSG点数。嗯，好，那么这样的话，大家就会发现整个的这个过程，我们这个竞价的环节就已经完成了啊，所以其实大家如果看的话，尽管是我们的核心业务业务逻辑对吧，但是事实上这么一做的话，其实也还是蛮简单的，对不对？好，那接下来还有一个逻辑我们没有实现，但其实大家会发现已经非常的类似了，对吧，还有一个reviewing的一个一个逻辑啊，我们快速的来实现一下，那同样它是有一个submit按钮，对不对，我们这里还是去定义这样的一个东西，其实这个event event我们也没有用到，但是我还是按照这个标准把它传进来吧。那接下来同样大家会想到我跟上面的处理几乎就完全一样，首先message把它害起来，对吧，然后之后就是在真正呃，交易成功返回的时候，拿到返回的时候，我们。

在回调里面再把它显示出来对吧，然后把对应的这个信息再写出来啊，那同样我们要拿到它的这个参数，那首先我们去揭示报价的时候，用户也得去输入参数，输什么参数呢？啊，那就没有你要这个真正押金发的以菜这个值了，那另外两个一个就是你的真正的报价的那个金额，还有一个你的secret text，这两个都少不了对吧？所以我们照着抄就完了啊，这其实就是无脑无脑创，呃，当然这里边的这一个ID应该不一样啊。

大家如果要还写这个ID的话，是不是又把之前的那个拿过来了，对吧？所以这个ID肯定是不一样的，我们看一下这边的reviewing里面它的ID是什么。好，大家可以看到我们这里的ID叫a extra amount，对吧？所以把这个拿过来，所以现在的amount是extra amount amount，它的value，然后我们同样可以定义一个secret secret tax，用一样的东西吧，然后同样我们会想到需要去找一个东西了，对吧？这个ID又叫做什么呢？这里叫做a review text。

比上次的那个多了一个review对吧，好他点value，好，我们现在已经拿到了对应的这两个值，我们现在。是不是可以调我们合约的方法了呢？啊，大家再回过头来想一下，要调之前我们看一下这个合约的参数，对吧？他需要什么东西？哦，我们还缺了一个东西，Product ID，你要揭示哪个商品的报价，这个肯定也得传，对不对？所以那这个还是一样的，大家应该记得我们在这个form里面，是不是下面也有一个hidden的input，叫做product ID啊，所以我们当时都留了一手，所以现在都派上用场了，对吧？好，这里同样的把上面这一部分抄下来，Product ID。

等于Dollar，当然这个就一样了，对吧，还是product id.value。所以大家可以看到我们在这个HTML里边，上边的这一个就是在我们表单里边的这个input，隐藏的input和下边的这个隐藏的input，它的ID都叫做product ID，对吧？所以他们这是联动的，我们当时写的时候是不是把这个都写进去了，所以找的这样的ID，所有的value都给的是一样的，所以我们这个时候再去拿也是没有问题的，对吧？好，这里我们进行到已经拿到了所有的参数，那接下来已经有了所有的参数，是不是接下来就是调用合约了，所以同样啊e store.deploy的点对不对，这就没有什么太稀罕的东西了，大家都很熟悉，那接下来我们要调的方法叫做review，看一眼吧，还是就叫做review b，对吧？

所以我们这里调这个方法，然后review be的，我们需要传什么参数呢？那大家肯定想到还是product ID，那我们跟着上面一样的写法，我们还是pass一下，因为拿到的应该是一个string类型的。数据对吧，一个变量，所以我们把它做一个这个转换，然后后边我们会想到接下来是不是应该有这个amount，呃，大家注意这个amount我们应该那个用户输入的肯定是一个以态数量对吧。而我们这里给的这个amount，我们这里呃，大家可以看到，诶，这里我们的这个amount直接去做这个处理的话，看起来这个应该也是一个。

我们这里应该也是直接就是以太对不对。大家看这里我们做S3的时候，直接就是这个amount和这里边的这个secret去做做这个转换了，对吧，然后这里的amount我们看下边啊。给到了这个amount之后，我们直接处理他的这个余额。然后我们最后直接就把这个余额就直接transfer了，所以如果要直接transfer的话，那这个数量其实不应该是以太对不对。因为这里没单位的对吧，没单位那默认应该是什么，应该是尾对吧，所以我们这里的这个应该是尾，那我们这里还得去去对照前面看一下啊，我们这里的加密是什么。

我们这里的加密是把它。从以态转换成了伪来做的加密，对不对啊，那这个就对上了，大家这里一定要，就是前面如果用伪去加密的话，后面也得用尾去解密，对不对，这两个一定得对上对吧？大家看前面我们做的这个上3web3.from尾，然后这个want输进来是以态对吧，我们要诶from轨是吧？这里是不是我们写错了，应该to轨，哎，我们看一下be这里啊。哦，这里我们应该是这个兔尾对吧？这里应该是兔尾对吧？这里写错了啊，所以大家稍微检查一下其实就可以看到，所以我们前面的这一个竞价这个环节应该其实是输进来的是一个以态，我们要把它转换成伪，对吧？这个没有道理，我们在前面让用户去输入那么多零，输入一个以伪为单位的一个数字，然后把它转成以态，这个没道理，所以说我们这里是要把它转成伪，所以我们这里做上三计算的时候，用的是以尾为单位的那个大的数字，所以我们这里在做揭示报价的时候，是不是要传进去的，也应该是以尾为单位的那个大的数字啊对，所以这个地方大家就是前后一定要一致，呃，那大家可以想象到我们这里边怎么去传呢，那肯定就还是WEB3对突尾了，对吧，那同样就是这个mount。

以态，所以用户输入的永远是以太，用户不可能输那么多零嘛，所以在我们实际做计算的时候呢，把它统一都转换成尾啊，这就是我们的一个思路，这个就是千万一定要前后一致，大家可以也可以试着改一下，就是我们前面加密直接用这个语态，直接用amount对吧，那我们后边这里也就得用amount去做哈希计算对不对？但是我们合约这里是不是就得改了，因为我们这里直接拿到了这个，如果做了哈西之后，你这里的这个amount是不是之后就不能直接当鬼来用了。

这这是以太对不对，所以大家做计算的时候，最后转的时候也就不能直接转，所以大家要跟这个合约这边相对应起来看啊呃，这就是一些一些坑，大家稍微要注意一下，好，那么我们呃把它突围了之后，我们最好再to string对吧，因为我们知道这里。这里我们要输入这个amount是一个来写，所以说我们把它做一个to string操作好，那最后面就还有一个，那没什么好说的，就是我们的secret text对吧，这就是我们前面定义好的，呃，也是用户传进来的这个参数，好那接下来大家想一想，我们这个是不是也是一个交易，所以大家不要忘记，因为在那个ma mask里边，它经常要去校验，这个一定要有from地址，对吧？所以我们Y3点Eth.ACCOUNT0，好，那大家想写盖的话，还可以加盖，这里要不要写Y联。

揭示报价就不用再转以太了，对吧？啊对，所以说只要把我们当时的那个那个报的那个数字能传过去，能揭示出来就可以，所以说这个地方我们就不要外流了，跟上面这个竞价不一样，竞价的时候我们得有押金的，所以当时就得把以太打过去，是这样的一个过程啊，好，所以那这个我们的这个调用参数就完了，对吧？那接下来就是点赞，好，那么这个我们同样可以拿到这个结果。

那这个结果怎么处理呢？跟上面非常类似，直接把mess改一下对不对？井号messger。这个我们还是直接抄一下吧，这个想就太麻烦了啊。Revealing里边啊是your be has been successfully revealed，这跟上面完全一样啊，当然这里大家看到他的这个写法是先售，然后再添加，其实也没什么区别对吧？当然如果要是大家觉得应该是让他不要出现那种，你先显示出来是个空的，然后又好像又很慢的又加载向上去，如果不想出现这种情况的话，我们最好还是把h.Y写前面对吧，然后后面再写点收，但是其实我们知道这个加载速度很快的，没有什么影响，Dollar message点受啊，当然就是大家如果想pencil log打印一些信息的话，那自己打出来就可以了，我们这里边就不需要去这样实现了，对吧？啊，所以大家可以看一下，其实代码很简单，就这么两部分，那这就实现了我们网页上面核心的提交竞价和这个揭示报价的这。

这个环节，这两个表单的提交就完成了。