050-直播间模块-直播带货后台系统2原创

好了，那位筋骨奇观，咱们书接上一回啊，咱们现在要点击确认之后呀，咱们不是让它隐藏掉，咱们要获取到我们输入框里面的值啊，然后我们再朝我们的后端发起一个POS的请求，最终把这个数据存储到我们数据库的故这张表中啊，因为将来方便我们再次获取列表，再次进行更新或者是删除的一个操作，但在写之前的话呢，客们要做一件事情，就是让我们这个输入框里面的字段的话呢，加好这个验证啊，我们商品的名字，商品的价格，你不能为空，你现在我为空的情况下，它就能够消失，他也能够完成接下来的业务，那是不对的啊，所以我想说就是来发挥一下咱们这个表格的一个强大之处，表格的话是可以做表单校验的，对吧？哎，说错了啊，刚才是说的表格表单啊，表单是能够做我们的表单校验的，那接下来咱们来找到我们的这个。

Form。表单咱们一起来看一下我们的一个form表单，如果想要做校验的话，来找一下表单校验这里OK，在这儿大家会发现，其实啊在这里它相关的东西的话呢，需要有一个褥字大是说我还有被子呢，你有褥字啊，有一个褥字，这个褥字的话呢，是咱们提前定义好了的，这个褥子里面的话有一个规则，你看这个很明显大家能看得明白，都我要对于name的话呢，必填项，而且呢，它触发的方式的话呢，是本乐失去焦点的时候去校验，然后这一块的话，有最小长度是三，最大长度是五，这个是不是region的一个校验必填项啊，这个日期的话呢，必填项啊，触发的方式是每次改变的时候，所大家就明白了，其实我们就需要把我们这个褥子的话呢，我们也给它复制一份来，另外来到咱们哪里呢？你看这样来说就很规矩了，你就不会觉得很乱啊，因为在我们的use and form中，咱们无非在这里来定义我们的规则，你说跟谁？

乱一点不乱，就是and的这个rule来把它将来也可以导出去，只不过在这里咱们来改成咱们自己的将来可要用的是name这个字段要进行限制吧，啊，这里的话咱们要写成什么呀，请输入名字啊，给他提示这样一个文字信息，万一它出错了，好，咱们再把这个的话给他一个哎，Name，好给他一个数组的一个闭合，那这样来说的话呢，我们对于name的字段的一个限制就完事了，那接下来还有什么price字段的一个限制，你看看就这么来的price字段的一个限制，然后这一块就是也一样的，请输入价格，请输入价格，最后的话，咱们再把这个的话进行一个啊给它来大括号合上去，大括号小括号，诶小括号怎么写错了呢？重新格式化一下列位，看一下我们这个reactive，把这样一个对象的话呢，做成了响应式的了，然后接下来你把按的给它导出去，然后在咱们的。

pp.view中，在我们的这个表单这个组件身上加上一个入字就可以了。褥等于我们这个an的褥，那大家说an褥从哪里来呀，是不是从咱这边导出来的呀，哎，好结构拿到了，所以我这个褥子就有的列位有了这个褥子入，入了的话，接下来咱们再来看一下哈，因为有人就着急去测试，你着急也没用啊，它也不好用啊，看一下在这里这个地方一二放这里的话呢，这每一项的话呢，你要加好这个什么对应的prop，加好这个prop，这样的话才能跟咱们的入的话呢，关联上，你看你加没加啊，大家说Q我能没加吗？我看一眼吧，我加没加在这里，没加e form这里的话，咱们再加上去，加上什么呀，加上prop，然后的话呢，这个是我们的name的，好拿到我们的name这一块，然后再接下来的话呢，在下面这个prop身上的话呢，加上咱们的这个什么price price再一保存之后来列外，咱们可以此时回过头来看看咱们自己的这个页面之好了。

接下来咱们测试一下，点击添加商品出现了小星星，好，接下来我们在这输入东西，要注意我们在失去焦点的时候，因为将来是我们点击确认的时候，咱们也失去了焦点，那们还要校验是不是为空嘛，那现在点击肯定是没有问题的，那在这里的话，假如说我们给它清空了，我再一点击的话呢，哎呦，让我输入名字这块清空了，我就一点击的话，输入价格，你看这就是咱们的必填啊，所以在这我们的这个褥字啊，它生效了啊，你看有了褥子之后啊，有了这个规则之后，我们就可以大胆的来去写这个功能了，点击确认我要触发这一个校验规则啊，这个校验规则啊是咱们用户行为输入的时候能够触发，但是咱们将来点击确认按钮的时候呢，咱们要主动的用代码来去触发这个校验，所以咱们来看一下他当时代码是怎么写的，我们参考一下在这里的话他是怎么写的，另外可以看一下他最后点完按钮之后，我们往下咕噜一下。

我看见了客们，他好像是这不submit吗，调用方法吗？好像用了一个叫的校验这一个方法，所以在这里他应该是通过我们的这个ref拿到了这个form表单的对象啊，调用的vali这个方法进行的一个验证，而在这客面再确认一下form e到底是个什么，我们看一眼，Form ER是我们这个传过来的这个行参，那submit form传过来这个食参是form ref，而form ref它其实是加在我们这个form表单的这一个ref这一个对象，那这一切就真相大白了，我现在就已经明白怎么回事了，列外对不对，我只需要在我的代码中来来来到我们这个里面，我也写一个什么呀，我自己写一个constant，我们这一个入啊ref对象。

我们来一个an的这一个form ref好，在这里ref的初始值放在这里，然后咱们先把这个ref咱们给它导出去，对吧，然后你把这个R的ref啊，在咱们这个函数中啊，也一样的结构出来，结构出来把它加在你的这个form身上，Ref等于诶拿到他身上之后，将来的话呢，咱们一点击这个确认按钮，是不是它呀，咱们在这里就不要直接让他隐藏了，咱们来一个and commit啊，Confirm啊，Confirm确认吧，Confirm好，这个方法也一样的，不要写在咱们什么呀，这里面咱们还是一样，将来呀，从use and的form中，咱们给它导出来就行了，所以我在这个按的form中的话呢，我就一样的哈，提前写好这样一个方法，等待它触发，然后咱们再把这个方法也一样导出去啊，所以你回过头来自己一看就是。将来咱们只要一。

点击我们这个确认按钮，咱们调呢，是我们从use and form中解构啊出来的这样一个方法，那最终就是这个方法被执行的呗，而且这个方法中我已经能够拿到这个什么and form ref了，因为他的一开始就绑上了嘛，就在这里他调了一个是一个date这一个方法，后面是一个是返回的是一个promise的一个对象，那位可以看一眼啊，在这里还给了一个提示，因为我这个按form ref，我是一个什么呀，这个对象我得用点value进行value校验，是不？我来我来看一下在这里的这个提示是不是也是这样跟我写的呀？嗯，在这个我们的表单校验代码中，我看一眼呀。是不是一样的呀，我们这个写法，嗯，看看在这里是吧，我们Y里的一个校验，所以我在这里给他进行一个复制过的这样代码，他这块没有用到完理完理话我给他拿过来啊好了，测试一下，咱们测一下不就行了吗？看好不好用啊，我们看一眼好运行之后来跟客户来校验一遍，如果这个时候我们出错了，他就应该走这个分值，如果对了，就应该是走这个分支，咱们确认一下看对不对，来来一遍，我们在这里刷新啊，走了啊，重新的刷新一遍，点击添加商品，然后客人在这里这个就没输，直接点击确认之后，你看看来重新刷一遍，就是这样的嘛，我们点击这个之后，我们没有输东西，我就点击确认，你会发现直接触发了我们的error sum的方法了，如果在输入完东西呢，我在输入完东西呢，点击确认，它就走的是咱们的S的方法，如果在这删了之后的话呢，我点击确认对吧，它就又走了这个方法，所以看咱们这里的写法是完全。

没有问题的，对吧，另外OK，这就是咱们这一个，那接下来就是我们点完这个之后啊，我们就调用我们这个valid的话呢，进行我们这个校验，校验之后拿到这个结果吧，我们这个结果在哪里列外，你你还用再再去拿吗？这个结果它已经同步到我们的and form中了，因为它是双向绑定，所以你在测一遍是不是这样的，点开之后我们在这里输入好点击确认，你看它实时的同步着我们这个and form，因为咱们这个view它是为盲导双向绑定的嘛，所以在这里实时同步了，所以我就拿到and form这一个对象的，拿到这个对象我能自己偷摸用吗？对吧，我要把这个东西啊提交给我的后端，我的后端要完成我的数据库的存储工作呀，另外，所以我在这里就要进行一次什么数据的一次提交了，好了咱们来看一眼，我就在这里通过我们的安点post进行提交呗，那在这里通过安点。

GS的，那对应大家想一想，咱们这个接口也没写啊，所以你在这先自己预估一下，想一想这个接口你准备怎么去写啊，这就想一想写的时候会不会遇到跨域问题呀，因为咱们现在是单独的运行在一台8080的服务器上，而我们的接口它的9000那个服务器上的连外对不对啊，所以我在引入了X了，那接下来在这里我们一会儿我肯定要配置反向代理的，对吧？咱们在这里x.post我将来朝API斜杠and good这一个接口来进行请求，如果请求成功的话呢，我就点赞调用，但是我要把我的东西给它返回出去，对不对，我在这里的话打印这个res。

我要把我的这些数据提交过去，我的这些数据就是按照form这些数据，我到时候把整个的按的form给他啊展开提交过去，所以这是我的一个想法吗？那接下来咱们就来看一下，我们再把我们后台接口啊给写好了来，A epi good，所以客人在我们的后台，在这里我们的RBG，咱们一直用的是它是吧？嗯，在这个API文件夹下的话，可在这里右建新建一个文件夹，哎，不是文件夹写错了，新建一个文件，咱们叫good.js，我希望在这个good.js中咱们分别写出了什么增删改查这么几个方法对不对，And good，对吧，将来还有什么delete good，还有什么get good，还有咱们的什么这个update good，是不是这几个方法咱们就能够写好，在这里面全都写在一起，这function咱们的and good这个方法一个对吧。

然后再就是function，咱们的这个delete good，然后在写的时候我也没必要去写，因为里面还得涉及到连接数据库，所以可能在这还是咱们偷点代码过来吧，好吧，咱们一会再去写，来把这个代码给复制过来，把这个点赞的代码复制过来呗，咱们以前不一直这么玩吗？来到这里之后。把它给是吧，删了提成咱们点赞的这段代码，来在这里点复制过来了，好了，在这里把它给改成这个什么呀，按good啊，这些都不要都不要，都不要，都不要对and good，最后把这个and good咱们给它导出去，在在这里咱们按照这种对象的方式导出去，因为将来会有好几个，我准备在这一个故字点GS中写好增删改查四个，哎，对应处理的方法啊，到时候在接口中再注册四个接口就行了，那列位可以看一眼是不是这样来说的话，就是我们在这个位置啊，按照good，这都不用变列位啊，在这里面都都都没有问题哈，啊，我们的考o log拿到这个纸，好，咱们这样先确保能够打通再说吧，把这些都注射掉。

我这个接口有没有写好了呀，And good啊这个接口返回值是这个的意思，OK，把它给导出去，然后接下来在我的点GS中，我准备进行一个导入啊，在这里导入一下是吧，在在导入了啊，我们在这里是导入我们的，嗯，这是咱们的。

后台系统啊，后台系统的接口好，我们导入一下我们这个good啊，咱们应该是从点C盖API文件夹下导入我们的鼓的好，导入完了，那接下来咱们在进行一个注册，另对在这里咱们注册的时候呢，要定要注意哈，我我故意要加个API这样一个路径，我为什么要加这个路径儿呢？是因为咱们将来啊，在前端我们去配置反向代理的时候，好通过API这个文字的话进行检索啊，咱们匹配啊，所以我在这就写了一个这个啊按的这一个什么呀，Good好，我们在这再把那个点and good注册过来，另外要注意哈，Good导出来了，咱们是一个对象，这个对象点and good，那咱们是这个回调函数的处理方法，所以在这里给它注册，在这个接口下，我可以认为我的后端啊，点post响应post。

的请求的一个API and good科已然已经写好了，那接下来的话呢，我也保存之后我们可以呀，在我们的前端发起请求来测一下，那很多人就想了，那哥们咱们在前端之间发请求能成功吗？啊落考后斯的9000想都不要想，8080到9000是有跨域的，所以我们接下来就是我们可以配置一个反向代理嘛啊，我们可以在我们的啊前端我们的这个V卡点GS中，咱们是不是配好反向代理就可以了啊，以前老版本的view这个view.gs在咱们自己创建，你现在都创建好了，我们直接就在上面开始写我们的第一位server这样一个字段，第一位server这个字段中的话呢，有一个什么per c这个字段啊per c字段的话呢，就是咱们的一个核心的过滤了，凡是API请求的，大家也知道，现在我没配置反向代理，我直接点咱们这个提交的话。

定会出现什么呀，404的错误了，对不对，他没有，那这样的话呢，我要改成那个直接要朝六靠后四的9000去请求的话呢，他就是跨域，我就不掩饰了，太小儿科了，如果朝这里去请求于404，那怎么办呢？就是凡代里拉说你一旦朝香杠API开头的请求，我们都在后端，我们在我们自己的V的D服务器上帮你转发到HTTP斜杠local host哎，9000这一个地方来，我们来去做目标地址，然后这个趁早认证必填项对不对，设置成true保存之后就可以了，那这样来说的话，就是咱们的vuee con.gs的一个写法配置我们的反向代里，凡是以API这种路径开头的，全都转到9000这台服务器上，固定字段保存之后一定别忘了一事重启我们的啊。

这个服务器重启完了之后，列位啊，你就可以来测试一下，看看这一次POS的请求啊，是不是顺利在他重启的时候呢，我看看我的这个POS的请当时我有没有打印啊，打印了啊，我打印了一下从前端传过来的这个词，那没事的，那咱们现在等着的话呢，就是一个测试过程了。这个编译的话呢，比较慢啊，马上就编译好了，对吧，你数个12345，科文老师会跳舞啊，好了，跳完舞了小们来测试一下吧，在这里可能输入一个A11，咱们价格给它111，点击这个确认之后，大家可以看一下大通的么？后端返回了COK了，而在咱们的这个来后端的控制台中，咱们看一眼接收到了前端传过的aee，诶，这条路咱们就打通了啊，其实打通了这条路之后就好办了，你看拿到了name和price之后，咱们就可以给它一样的解构出来，然后我就在这里的话进行一个什么呀，Name拿出来，Price拿出来。

然后我就还是一样的建立数据库连接，在这新建一个故这张表等我一会儿去建对吧，ID字段，然后name字段啊，Price这一个字段，还有创建时间这个字段，然后对应的这个这个是空自增长，然后name字段还有price字段，你看这里呀，就没有什么好说的了，都咱们已经写了多次了，已经，那这样来说，我这个创建的话呢，我认为啊就要成功了，列外好保存这里，那接下来咱们在我们的前端中啊，咱们也一样的，我们应该也得准备好哈，我前端APP点呃form中在这里对吧，我们应该是获取到将来这个我返回值是什么啊，应该是res点点这个res.data点这个，如果这个值的话，等于等于OK的情况下，列外啊，如果这个值它等于等于这个OK了。

这个情况下的话呢，我们在这里就应该哎控制它隐藏掉就行了呗，对不对，Is and visible的话呢，就设置这个值的话呢，这个点我看一下，这个当时是定义的是ref的写法，所以在这里咱们什么点value好，咱们给它设置成这个false就可以了，隐藏掉了就对吧，这样来说就可以了，好了，保存之后来回到你的云数据库中来建立一张表啊，叫固，这张表来到这里，咱们在这个current test的下面新建一张表，这张表的名字叫固兹，然后在这里我们的列信息中一样的新添加我们的ID啊，我们的类型是int类型的，然后在这里我们是主键勾选上自动增长，然后我们新增我们的name字段，Name字段是what差类型的NAME100长度啊，然后我们是不可控的，我们在这里再新建一个price price咱们传过来了是int类型的，对吧，OK，再接下来的。

一个我们的创建时间，Create time创建时间，创建时间的话是date time类型的了，这样来说我们这几个字段的话呢，就已经创建好了，列位这几个可控咱们给它取消掉，那最终的话呢，我们再把它，诶点击提交就可以了。那科们是不是成功的在我们科test的下面创建了一个故子了，那我现在想一想我自己呀，先走一遍云游一遍，梦游一遍，你如果点完之后啊，我们这个是经验成功的，那就会朝按good这个接口post过去，Posts到我们看一下代码中的话呢，就会连接我们的固字这张表啊，往里面插入我们的这个数据了，返回了，OK，那我们的前端在这里判断，如果等于就将我们这个is and visible这个值给它改成false，大家知道这个值咱们是在app.view中跟我们这个dialogue啊进行绑定的，那就值变成false的，它就会隐藏掉了，来一保存之后，咱们来看一眼这个小果吧，来到我的这个代码中，咱们重新的刷新一遍看看们点击商品，点击AAA，点击咱们111点击确认之后，咱们来看一下，很好像很平淡啊，最终。

好不好用，就看我们的数据库中有没有插入这条信息，点击字里面有没有我们的AA这个商品的名字，价格一一，还有我们的创建时间，你看这条通路咱们就完全的给它建立好了了呗，是吧，哎，就这样的。那接下来有了这条通路的话，那接下来就是咱们在这里，我们就可以让这个列表的话呢，就可以啊更新一下呢，就啊正巧我们要把这个渲染这个页面这个功能的话呢，给它做完，所以客人在这里就准备这么去做，怎么做呢？来来来来，在这里回到我们的代码区这里来到use and form中，可是如果将这个值隐藏掉之后啊，咱们还希望是更新咱们的列表，可是这么想的哈，我们这里有两种做法啊，咱们啊不吹不黑两种做法，第一种做法就是我们每次查增删改，查完事儿之后，咱们都让他去后端再取一遍这个我们数据库中这个列表的数据啊，再取一遍就行了，这个方法操作起来非常简单，因为咱们只要写一个获取我们数据库这张表的一个列表的方法，每次在增删改查完之后，就重新调用一下那个方法就可以了。第二种方法就是。

我们插入到数据库之后，我们自己控制我们此时的这个状态，加一或者是减一的，就是加上这条数据啊，往数据里面再push，再给他delete掉，再给他更新量，这样来说的话，他就不顺的跟后端的一个业务交互了，就能减少对于后端的一个频繁的请求啊，这第二种方法啊，两种方法都可以，客户在这采用一个比较简单的方法，就是我们将来期望的在这里会调用那个refresh啊table这个方法就是刷新我们的表格这个方法。

正巧啊，我们第一次进来之后，我们也希望把它给渲染出来啊，所以科在这里就直接啊，我们先把这个一进来之后给它渲染出来，咱们给它写好了，然后等我们添加完之后，咱们再利用那个方法再调一下就可以了，你说是不是呀，所以这个时候咱们可以把目光聚焦在我们的这个地方来写一个todo，这是我们一会要做的，那来到我们的use table中，Use table这个数据啊，再也不能糊弄了，这个数据咱们不要这样来去创建了，那可在这里建议大家的创建方法应该是ref，对吧？控数组，哎，给它改成这种方式，那在这咱们导导入啊，我们的这个ref from view，我们其实是希望一进来的时候就先获取一遍这个数据呀，对吧，一进来的时候，那就是走咱们的生命周期呗，那在这有什么生命周期，咱们的on mount的生命周期在这里咱们调用一下on mount的生命周期，注册一个回调函数，在这里发起你的阿贾克。

克斯请求导入我们的安和尔斯啊，所以在这里就是这样一些东西，你有没有感觉到会的view啊，这些工作就是一个体力活，咱们盖的请求API斜杠，咱们的get固这个接口在点Z中，咱们最终拿回来咱们后端返回的这个数据，res.data。API get good肯定不会遇到跨域问题，因为我统一已经处理了，那接下来就是课文在这里把这个get good这一个法的话来咱们复制一下，然后在这个我们找一下在我们的接口good这里面，是不是在这里面咱们把这个代码来复制一份啊，这是咱们当时写的and good的这一个接口，后台接口，咱们再写一个什么呀，来再写一个叫做get good的这样一个接口，再把这个接口将来也一样的给他导出去，好注册，那在这个导出去注册之前，客人在这里还是一样的流程啊，他也不需要什么IE克包获取了，对不对，因为它这里的话直接就是一个select星号对不对啊，所有的啊，From，好，剩下这些东西都可以不要了，对吧？这里来另外看一下，就这么一个简单的查询语句。

它的星号from，咱们固这一个数据库，然后最后咱们把这个东西给他拿回来勒死他。是不是在这里呀，诶list在这里，当然这个list我记得是不是咱们返回的是一个二维数组，咱们就直接在这里的话呢，进行一个解解构啊，这样的话把这个类似的给前端呀，给它返回出去就可以了，列外来看这个代码，我们后台写了一个获取我们商品的这样一个接口，连接数据库之后，直接调用select星号from固子这样一个的语句啊，这样的话拿回的数据是一个二维数组，可之间来了一个数组的结构，拿到类似的给前端返回出去，最终我们再在我们的app.gs中，咱们再注册好这一个接口，我们点get，我们这个是get good这个接口，另外这是咱们获取啊，我们这个get请求啊，获取我们数据库这张表里面的所有数据的一个方法，Get good，做好这个注册回调函数，那我可以认为我后端已经万事具备了，另外啊。

响应前端的get的请求，朝这个接口发的请求，我get good这个方法就会给你处理，那咱们前端的话呢，是不是早就准备好来发这个请求的亚拉列外，好，那这样咱们测试一下，到底能不能拿回来我们数据库表中的数据呢？重新的咱们来刷新一下页面来吧，列位看看成功了吗？我成功了对不对啊，拿到了，你看看就这样的。

你再测一下，再添加个商品bbb，然后来一个222，点击确认好，你再刷新一下页面有两条有没有呀，有两条就对了啊，果然是两条数据，那这样来说，咱们就直接的在这里对于我们table data.value就设置成为咱们的res.data就可以了，另外那这样的话呢，我们一进来之后啊，我们获取的这个数据，我们直接怼给了我们的table data，我们table data就更新了，是不是运行之后的话，咱们来看一眼，哎呀，我这里的话好像出了这个问题了，我这个table data这一块啊，我得把里面那个点类似的给他点出来列外，因为咱们刚才的话呢，再点这个类似哈，点一下这个类似的才是咱们的列表的这个数据呢，好，重新刷新一遍之后，咱们来检查一下，你看数据直接就上来了嘛，太轻松了吧，这也是不是啊，我们获取列表中的这一个。

的数据我成功了，另外啊好用了，好了，这就是咱们这一块，那接下来咱们再把这个点完添加之后扣CCC，然后在这里的话价格333点击确认，这确实成功了，但是这块应该显示出来吧，咱们最新的呀，这就是客人所说的吗？你写一个refresh方法，我在这里写一个refresh，咱们的table。对吧，写在这里，诶，我这个方法写错了哈，在这里我写一个这个方法啊，Cost，因为咱们这不是这个什么呀，类开发啊，是咱们的函数开发，Refresh table好，在这儿的话呢，我把这个核心代码写在这里，每次mount之后就调用这个方法呗，然后再把这个方法导出去，让别人也能调用，那这样的话，咱们在app.view中的话呢，来来到这里咱们来看table，这里咱们还要多导入一个什么呢？Reffresh table，哎，这样一个方法，你在这里的话，把这个方法传给咱们的这个use and form啊，等你添加成功了之后，你不是要回掉它吗？所以咱们在这利用思想，就是回调函数的思想，我从use table中写的一个refresh table给我自己第一次用，哎，我很满意，但是这个方法我也要无偿的给它贡献出来，导出来，导出来目的是什么呀，给予我们这个案。

And form这个自定义互去用给这个函数去用我们这个use and form，拿到这个方法之后，它怎么来用呢？它得接收这个方法是不是，哎，咱们在这把这个一复制接收它，注意这只是方法的名字呀，小括号才是回调呀，那什么时候回调呢？就在这里，如果我按的VALUE6成功了之后，我let一个小括号直接毁掉它，那这样来说的话，是不是就更新了呀？来咱们最终再来一次测试E刷新咱们的这个页面之后，诶，数据挺好啊，再添加一个商品ddd，然后咱们商品的价格是444，点击确认之后，另外有没有成功呀，很明白的话，我们成功了你知道吗？啊，就这样一个效果啊，这就是我们这一个啊刷新啊这一个功能啊，第一次刷新和我们添加完之后啊，都是没有问题的，好了两位，那接下来咱们在下一小节中再把更新和删除给完成，那你说。

说是不是我们这一个简单的增删改查功能，它就完事了呀，好了，咱们下一小节不要错过。