047-直播间模块-送礼榜原创

好的列位，那接下来啊，咱们就来看我们啊在线用户之后的送礼榜这个功能，我们送礼榜中的功能的难点在于哈，咱们再把这些数据啊，从咱们几张表中啊给联合啊查询出来啊，咱们再利用列表查询去查，因为你这个送礼榜列位可以看一下哈。送礼榜大家说不就从那个sendin gift张表去拿吗？大别问send gift那张表里面那有什么呀，他只有ID to ID，还有GI的ID，那就是什么玩意儿，几个ID值，但咱们要的页面的效果的话呢，是这样的，所以我得知道呀，到底是谁对吧？赠送的什么东西对不对，还有这个人的名字对吧？他赠送的什么样的内容，所以咱们再把这些信息啊在联表给查出来啊，所以这一块的话可能是一个难点，所以咱们在这里的话，就按照咱们的这样一个顺序，先把数据给弄回来，呃，布局这一块的话，咱们可以啊跟在线用户这里的布局啊，进行部分的一个复用不就行了吗？列位，好了，来，咱们在这儿可以继续来看一下，我们来到我们的代码中。

咱们一进来之后啊，在我们的小程序代码中哈，一进来GS之后，我们要获取这个member信息，那接下来咱们还要获取啥信息啊，获取我们的gift list对不对？Gift list信息好，这样的话呢，我打印gift list等一会儿好用，而这一块咱们就要get我们这个gift这个list啊get gift list好这里的话咱们需要把咱们的信息信息给他传过去，列位咱们在这里的话，Get gift的类似的这一块，咱们需要的是什么呀？是不是需要的是这个当前这个主播的这一个ID信息呀。咱们在用的是我们的主播的这一个ID信息，为什么要用主播这一个ID信息，因为咱们现在要是看是谁给主播刷的这些礼物，咱们再从数据库那张表中给他查询出来，给他select给出来，所以这里的话要传过去的就是一个owner ID这一个信息，那我看一下这里咱们没传这个owner ID啊，咱们这样，咱们把那个呃信息啊group in给拿回来啊，咱们来传一下这个owner这个信息好吗？

来到这里，在咱们使用online这个组件的时候，我给它传个字段过来哈，在咱们live w SM中，这样我把我这个group infer给它传过去啊，但你也可以只传owner ID是吧？Group infer啊，咱们在这里的一个group infer啊，Group infer这个字段没错吧，因为之前都传过，是不是group infer好了，这样的话呢，我就在我的online user这一个组件中，我按照咱们的什么传输啊，附传子的形式来接收到它，所以我就在这里啊property中拿到这个值，它是一个object的一个对象啊，所以我可以在这里的话传过去就行，来this.property. groupin.owner ID，另外是不是这个值咱们传给这个函数，这个就是咱们一会要写的这个模型了啊，我们呃接收我们这个owner ID啊，这样的话，我们朝我们自己的后端发过去之后，咱们的。

后端接口会利用这个owner ID获取咱们谁给这个主播谁给这个owner ID啊，刷礼物的这些数据，咱们给它聚合起来就可以了。好了，Get gift list这个函数咱们在model GS中，是不是我们都输了模型咱们都写在这里了，好吧，来来，在这里的话，我们先写一个get，呃，这gift list，然后同样的也在return啊，咱们请求这样一个接口叫get gift，类似post，咱们这次就是把这个to ID，因为咱们传过来这个owner ID列外在这里哈，你列位调用的时候传了这个OID。

对于我们实际上来说就是to ID嘛，咱们去数据库查的时候，甭管是关注啊，喜欢还是送礼物，这个to ID就是那个owner ID。咱们朝这个接口去发一个的球传过去啊，这样就行了，好了，那剩下的目光不就交给咱们的后端了嘛，来聚焦在后端，Cosplay一个后端角色，来到我们的后端中，咱们先写一个API的一个接口，Get list啊，Get gift list啊，点GS，咱们可以在这里抄一下之前的这些代码，我们这里要查的是这个gift send gift啊这个表，所以我在这抄一下代码吧，来复制一下，来到我的get gift list中，咱们来看一眼，来列位。这个是get gift list了哈get哈gift list好了，把它给复制一下导出了也是这一个模块，咱们来看一下这里，咱们这次只能获取到这个to ID的，从这个IEQ.body中啊，然后在这连接我们的数据库池啊，这块都没有问题啊，然后接下来的话就是咱们这个连表查询的这个功能的列位，咱们要查的是什么select的，把它删了吧，我觉得这块得改好多select他们要查的是什么呀？啊查了，因为我们这块的话呢，在这样去做列文，你看一下要到数据库这里面来。

嗯，这块的话已经过期了啊，重新登录一遍，点击之后哟，好了，咱们到时候查4GI的中列位ID to ID，还有GI的ID咱们也知道，你光知道from ID，你也不知道这个用户是谁呀，对吧？所以用户的昵称也不知道呀，对吧？所以我们应该是要利用这个from ID send give的下面的这一个from ID，等于我们use ID啊，我们user ID，然后再把它里面的内个信息，还有它里面的头像信息，咱们给它，哎聚合过来就可以了，对吧？而这个时候查的时候的话，这个条件是我们是to ID匹配于咱们传过来这个to ID的才可以是吧，这样的，那这样来说咱们就可以写这样一个查询语句的，所以这个语句的话写起来确实比较麻烦一点，来跟客们一块来写一下这个语句，我们就是什么呀，S的这个，哎呦，我这里的话，我得改成这个字符串模板，因为这块比较长，我写的一行。

上的话呢，可能会比较难看，对不对啊，Select select select，我们这个send gift，我们的点这个ID啊，我们要它是不是send gift，我们的这个点from_ID我们还要它，我们还要这个send。有人说坑啊，你这个gift的ID这一块你拿到手了之后也有点问题吧，Gift gift它下这个下划线ID下划线下划线ID_ID来在这里我们send gift它然后的点gift ID。

因为这个送的give来D拿回来之后，咱们也不知道这个到底是什么火箭还是鲜花的，按理来说咱们应该在咱们的数据库中还有一张什么gifts这张表，然后这张表再列表查啊，基于此这个gift的ID去匹配我们之前那个ID，然后咱们给他拿回来，对吧，按理说应该是这样的，但咱们当时不就是说没有这个GI的表，所以拿回来之后我可以跟数组去匹配也一样啊，这都没有关系，好吧，那这样的话咱们就select我们这个，呃，Send gift中的ID属性，Send gift这张表中的from ID和send gift中的gift的ID这些信息，还有我们接下来我们要要用的是吧，我们把user里面的这个user里面的这个AVA咱们给它拿出来，当此时咱们在这再通过我们的列表查询呢，是不是from GI的这张表，然后咱们要这么多字段啊，然后咱们是组连接呗，用life的中组连接我们的U。

这张表，然后当然这块有条件的就是我们的user user.id它正好等于咱们send这个gift，哎，这个点from ID，因为咱们说了嘛，From MD是谁发的，所以咱们在这里要这个from ID等于我们user ID，哎，这样的话，咱们用这样一个表连接，把这些数据的话呢，给取出来，但这样取出来之后，你说他会把所有的都会取出来，就是给杨佐发的，给铁锤发的，给钢带发的都会取出来，所以这块你得加一个条件，Where对不对，Where这个条件，要不然咱们传过来to外D是干嘛的呀，咱们得查这个条件，Send的GI的这张表中，对吧，这个to小划线ID啊，咱们在这块啊做一个判断嘛，我们再把这个东西的话呢，To ID匹配上去，也就是说我们传闻的to ID，咱们在这个条件中加上去啊，我们send give中的to ID跟我们传闻的to ID匹配，到了之后再查啊，咱们在这排个序吧，按照咱们的时间进行。

排个序，按照咱们send的下划线，Give的这个create time，咱们排个序，可之前就说了嘛，按照这个时时间排序，咱们让最新发的礼物在最上面对不对啊，所以来一个降序的这样一个排序啊，然后我们限制100个，因为万一将来太多了之后啊，咱们可能这个加载出来太慢了，所以可文只要最近的啊，100条这个数据是降序排列的啊，咱们按照的是什么呀，按照gift啊，咱们按照的是我们create time这样一个时间戳进行排序的，那这样的话，咱们这一个小的啊，这一个语句的话就完了，最终的话呢，来咱们再把这个数据的话呢给它啊，咱们也知道这个select中的话，拿到了这个数据的话呢，它一定的话呢，是一个什么呀，二维数组，所以咱们在这里直接解构二维数组，再把这个GI的类似的话，咱们给这个前端呀，给它传过去就可以了，另外大家来看一眼，只要你前端。

啊，在这个地方发一个posts的请求，把to ID你给我传过来之后，我就会在我的后端中，哎，我们利用一个表连接，查出来这些字段从send gift中哪有啊，哎，哪有这么多字的话，这两个字段从哪来的呀，是组连我们的user表中，哎，我们的ID等于userc ID给拿出来的，然后这就条件的话就是我们的兔ID是等于咱们正好传过来这个ID，因为我要的就是当前主播的这一个信息嘛，他到底有多少人给他刷礼物了啊，按照这个排序方式，最后拿出来这个数据了就好吧，最后咱们在app.gs中别忘了把这个接口进行一个注册，Get我们gift list，好了，把这个写好这个接口，那get gift list这个我们已经它引入进来了啊，这次是自动引入的啊，挺方便，好了，最后我们可以测试一下，看看这次返回的数据里面对不对，咱们重新的进行编。

忆一下啊，因为我的前端代码中啊，他们只要一进来啊，在这个online这个user GS中，咱们就会取这个接口返回来的数据看对不对，来那杨佐这一个页面中，咱们来点一下两人在看这一块，好，咱们看一下拿回来这个是12条这个数据，其实现在的话呢，都是给这个隐兵发的嘛，对吧，都都是给这个杨佐发的，那这样咱们故意的哈，就是我在这个send gift中啊，我把这个to ID中的一个吧，就我现在改的是第几个，到时候我好删那条数据等着啊，我就删第一条吧，对吧，第一条我故意的把这个to ID咱们看一下对不对哈，故意的把这个to ID我给他改成一个其他的，诶这样的话呢，我就给他搞定了，这个是啊，改成了这个其他的，那我们再给他提交好了，咱们测试一下，你看这一次的话呢，应该啊，咱们就能够查出来11条就对了，是吧，这样就保证咱们写的这个SQ的这段代码呀，是没有问题的，重新编译一遍。

哎呀，怎么就出错了呀，好，重新编译一遍，点击这个杨组之后，这次拿回来是几条数据啊，11条就对了吧？啊，果然是11条啊，所以咱们这个to ID传的是没有毛病的，而且里面这个表连接这个字段的话，列外可以看一眼，是不是也没问题吧，里面这个字段中呢，你看头像也有了，还有内ke咱们也拿回来了，诶所以这样的话，这些字段信息跟咱们当时预期的这个信息都是一样的，对吧？嗯，好，把这边没有用的数据咱们给它删掉了哈，好了，这样的话我们就可以再把这个数组的话呢给谁？诶给这个数组之前还有一个问题，本来啊，如果是有gift那张表的话，你可以把gift的ID啊也进行表连接查出来，但现在咱们没有嘛，这不是啊，所以坑呀，就只能把咱们当年的那段代码呀再给揪出来了啊，当时我在类务GS中啊，这里嘛，我当时弄的这一个数组，所以我要把。

这个数组给它拖的拿过来哈，放在这里一遍啊，拿到这来一遍啊，在这个data中拿过来，然后咱们要根据啊，这个数组的话呢，你这块是一个一呀，我就把这个name和URL呀，咱们给它放在咱们这个新的gift的类似的里面啊，所以客文在这里就做一个小的一个转换就可以了，咱们怎么转呀，是不是get类get类似的这个对象里面怎么还有一个get这个类似的呀，所以咱们在解构得了。是不是这样就行了，好了，放在这里之后，那它就是里面这11个数据，然后咱们在这来一个什么点map，一个映射item，如果科目直接写成这样，就表示没有什么任何的改变，但现在咱们要做的是什么呀？诶我们要把里面那个对吧，加上几个字段，所以我在这里先把老的这些都给它展开放在这里，哎，他们放在这里我加一个name字段，再加一个什么呀，我们这个URL字段，其实就是我们啊礼物的名字，还有礼物的这个UR地址啊，那这个内幕字段的话，咱们怎么加呀，咱们是不是得匹配出来呀，这点data.gift词这个数组里面咱们过滤出来，哎，它里面的这个我们写一个，我看一下，写一个当时的这个current吧，CT啊，Current他的一个ID等于等于咱们item里面那一个give ID，咱们进行一个过滤啊，把这个匹配出来，然后这是一个数组，只。

就一个元素，所以咱们在这里取出来就可以了，来列位看这个代码表示咱们利用这个原来这个数组的话呢，做一个过滤，把我们呃里面这个ID等于咱们GI，它类似中那个GI的那个ID，咱们给它匹配出来啊，这样的话只会有一个对不对啊，如果是一的话就匹配出来，这样的话我们gifts那个数组里面只有一个元素，因为只会有一个匹配到那取里面的D0个元素，然后咱们再找那个内幕就行了，所以同样的道理，再把这块给它拿过来就行了。另外来这次咱们要的这个是UR2这个属性啊，好了，来测试一下吧，来看一眼测试一下，那咱们看一眼运行之后，看此时这个这个console这个结果是不是我们想要的这个数据呢？来点一下杨组来来到两人在看，咱们看组合出来这个数据是不是我们想要的啊，是不是啊，你看下这个gift ID是一，那就是火箭，还有这个火箭的这个图片，咱们找一个gift ID。

这是二的来give这个也是一，Give这个是二，你看鲜花还有这张图片，所以这个啊，获取数据的方式的话呢，是没有问题的，看到了，那接下来的话，咱们就可以把这段代码的话呢，哎，咱们给它拿过来设置给我们自己的这个状态gift，它list我有没有提前定义好这个状态值啊，都没有，所以我在这里给它定义好啊，课文要写一个gift的list放在这里好了，咱们把这个状态的话呢，给它提前定义好，Data中加上这个状态，这里面是咱们的啊，这个礼物榜里面的一个数组，这个是在线用户的，所以说我们在这个touch吃的这个生命周期里面啊，获取的我们的在线用户，获取了我们的这个送礼，所有的送礼前100名对吧？嗯，把他们进行的一个数据的简单的处理，最后在set给我们的状态。所以此时gift。

Base的这个数组就更新了，那这个数组更新我们的页面的话呢，就要重新的渲染了，所以咱们又回到了我们的面的这个布局这个部分了，那这次布局的话，就是我们这一块被用了八列外啊，我们回到这里来，那在做这个布局的时候，我认为哈，我们可以部分的话能复用它呗，啊复制过来粘过来，诶应该是这一块粘过来。

粘过来放在这里列微可以看一眼，在这个地方，我们这次遍历的应该是我们的gift gift list，然后K值啊class名字，哎，这次这个头像是不是也是在这里面没问题吧，还有这个粉丝图标，还有这个昵称，一保存之后这个效果呀，是不是在至少跟之前的那个效果的话呢，也差不多呀，来运行点开来之后，咱们来看一眼在线用户送礼榜啊，都是引兵送的礼，也确实啊，咱们现在就是一个用户，那可不就是引兵在这里给他们啪啪啪送礼嘛，对不对啊好了，那这样的话，咱们这个完事之后，那我觉得这个界面中还有什么呀，还有啊，送了什么礼物是吧，所以咱们在这里就可以加点自己的一些样式啊，咱们在这再加一个什么新的view，这里的话就写一个什么赠送了，然后的话呢，当时我放在这个name字段里面了吧，Name。

然后我赠送的这个礼物啊好，前面这块我得加一个问号，我看一下这图里面好像有一个呃冒号哈，冒号好在这里加一个小的这一个冒号是吧，这样的话呢，赠送的这个鲜花，然后再就是我们这张图片呢，什么图片啊，Image啊，Src等于个咱们这个item.url这张图片，另外class等于啊，我们给它设置好一个class，因为这张图片的class的话呢，客们可能要单独的给它加一个宽高嘛，按E运行之后，哎呀，这这个火箭和花都已经对吧聚在一块了啊，太乱套了，这客们在这里复制一下之后我们在online w XS中，咱们可以在这里的话呢，给我们的鲜花，还有给我们的这个火箭的话呢，咱们加上一个宽高吧，宽高的话，比如说给他一个60RPX，然后在这里客人给他这个呃呃，高度的话呢，也是一个60。

啊，62PX运行之后是吧，那就这里的啊，那你你在这儿的话呢，你可以把我们这个，我看这块好像这个颜色的话有点不太一样哈，就是我们。这个隐冰这个颜色好像是一个灰色的哈，所以客文在这里可以单独的哈，给我们online user w SM在这里给它加上一个什么呀，Class，咱们这个是gift ni这一块，咱们给它加上一个颜色哈，好了，在这里的话点gift ni color的话呢，Green这样ay green这样一个颜色，那我们也可以让字体的话呢，可以小一点哈，Found杠哎，Size的话给它设置成14PX，好，字体的话呢，让它小01:12吧，12PX啊，赠送了这个鲜花对吧，你看这样的话跟咱们预期的这个效果就差不多，当然你在这里再加点其他的东西，我们这个图片让它跟左边有点距离，Marin life的这个10PX，嗯，赠送的鲜花，好吧，嗯，这就是咱们这一个列伟，你看从获取数据到页面布局啊，这个功能的话是不是也啊实现了呀，啊，你也可以在。

测一下，就是我们现在最上面的是一个鲜花，因为咱们是倒叙的对不对，好，接下来你看我再给他送一个礼物哈，比如说现在送个火箭走，送个火箭好了，哥们送出一个火箭去，咱们再点开看一下送礼榜里面来点击送礼榜中，你看最新的就是送的这个火箭的这个数据了吗？啊，所以你没必要啊，在这里监听着啊，你的这个实时通信啊，说来一个咱们就每次点开的时候获取在数据库最新的数据啊，倒序前100个排序出来，拿出来用就行了，对不对，好吧，就这一块。

啊，那最后了吧，咱们在这里，将来咱们有100个，你说这100个的话，将来这一块这个空间也不够显示了，所以我说呀，最后这一块你列位还得给他整一个什么scw view啊，就是我们的滚动啊，整一个scw view来去做，咱们在这里来加上一个scw view，在我们的online这个地方，把它就把这块给换了就行了吧，另外啊，把我们最外层这里给它换成一个sc view啊，写好sc view好套过来，来复制一份，给他复制一份，给他复制一份，再给这个复制一份吧，对吧，这个是没有问题的哈，OK，就给这里加上一个sc view，然后咱们再对应的允许它在Y轴上的话呢，进行一个滚动，所以说设置成这一个触啊这个sc view y轴上的话呢，支持一个滚动，设置成这一个true啊，最后的话呢，我们再加好我们的这个sc view，咱们。

可以给它设置好一个高度值，嗯，给这个view的话，咱们加上多少呀，来在WSS中view这一块的话，咱们给它加上一个什么呀，高度的话呢，比如说咱们就给它30啊，30VH这个宽度的话呢，是100%，再就是要注意哈，因为咱们将来这些组件都加在同一个页面中，他们的样式那是互相影响的，所以你最好最好的话呢，在这里的话呢，给他们做好这个选择器啊，我们这个class是我们的这个这是什么啊，Online的DEC好，在这里做好这个选择器啊，是在这个下面的SCU，它的高度的话呢，是35H，宽度是100%，那这样的话，你看滚动条就显示出来了，嗯，在线用户啊，我们的送礼榜啊就成功了，那另外咱们最后再重新的编一遍，你可以来感受一下这个功能，点进来之后养祖啊进来之后。

你看也不影响其他样式啊，你得确认一下是不是没有影响到我们其他的一些样式啊，这块都没有问题，点开之后啊，没有影响其他样式啊，再就是我们因为我记得用SC不就这个聊天区这用的嘛，其他地方没有用过哈，所以其他地方都是不受影响的哈，那最后在这里点开之后，对吧，我们的在线用户啊，咱们是通过I'm及时通讯的接口拿到的速林网是咱们自己啊，通过数据库里里边查询啊，咱们给他查出来的这样一个功能，好了位，你看这就是我们这一个送礼网以及在线用户的功能，好吧，大家把这一块一定要写一写好，这一小节咱们到这儿。