前端怎么接收flux流式数据

给大家分享一下瀑布流失布局的时间，这个也是一个常考的前面的面试题啊，他是一个比较流行的这种网站的页面布局方式，建于一些图片为主的主站，比如说百度这个 图片主站所有的图片都是等高的，宽度不一样，然后我在缩放的时候，页数是会发生变化的，对吧？从三列到四列再到五列，对吧？ 还有一类是类似于电商的网站，电商网站他这种方式其实更简单，他其实就是等高等宽的，对吧？大家看，然后我在缩放的时候， 每一行显示的猎手也没有任何变化，他只是加了滚动，这种方式是练起来更加的简单。那么我们今天就举例这种等块的补补流的实线，那么等块的补补流的实现，他其实就是高度不固定，对吧？然后他内容其实从 左到右排列，一行排满之后，其余的框会按照顺序排在最短的一列，那么实现原理其实非常简单，就是我们首先要积攒出每一行能够 收纳几列元素，对吧？然后再计算比较出这一列当中元素高度之和的最小一列，计算出来之后，我们将下一行的第一个元素添加到高度之和最小列的下面，这样依次往下追加就完事了。比如说我们第一行宽度 固定了，对吧？第一行那么咱们相当于是排了六列，那我应该把下一场应该放到哪？应该放到他的后面，对吧？应该放到他的后面，因为对于他来说，他目前是 高度最小的嘛。那么我在下一行呢，应该是放到他的后面，对吧？就依次的往下追加，这样的话我们就实现了一个等快的 不留的布局。那么具体怎么实现呢？咱们直接上代码啊，嗯，这个是就是燕麦元帅啊，主要是 gs 的实现，给大家讲一下哈，比如说这个是咱们获取所有的这个图片啊，定一间隙是二十 ps， 这个间隙是啥呢？就是他们之间的这个间距 就是二十 ps。 然后呢我们首先要计算出来这个页面的总体的宽度，对吧？然后我们还要计算出来每一个元素的宽度，我们就能计算出来 他能显示最多能显示多少列吗？我们在塑料过程中，因为我们要时时的算出这个最小的高度嘛，下一个最小的高度其实就他了嘛，对吧？所以说我们还 需要定一个数主来存储元素的最小高度，肯定是要循环的嘛，循环，因为我要把所有的东西搞成一个流失布局嘛。那么对于这种情况来说，也就是说他只有一类的情况， 我们去相当于是把他的这个套谱设成零就完事了，每一个元素的最顶部的高度就是零嘛。这个 live 的也非常简单，就是这个元素的宽度加上概谱。 然后呢下一个，比如说我到了第二行了，对吧？我到了第二行，比如说因为我要假设一下，对吧？最小高度是第一个元素，我假设吧这最小高度，这是第一个元素，那么我要 计算出来找出最小高度嘛，就是这个，这个非常简单，就是比较就行了，他循环的时候就比较这个，这里面放了多少个元素嘛，对吧？如果是第一点的话，那么那么他最多也就放了 这五个嘛？五个元素嘛，那么我要找出最小的高度，最小高度的话那么就好办了。如果我现在是，比如我讲现在经过这个地方的计算，我已经找出最小高度了，对吧？我最小高度他的套谱其实就是当前的这个，对吧？ 当前的这个这个元素吗？当前这个数数他这个地方就是存在一个元素的高度吗？当前这个元素的高度加上盖铺 就是他距顶部的高度，也就是下面我要放第二行的时候，当前这个就就他嘛，就要高度加上概数嘛，就他距上上部的一个距离，对吧？然后，然后他的这个 let 呢？ 就是上一个最小高度他的 life 的值，然后呢？最后呢？我还要修改最小列的高度，对吧？我要存储最小的高度，那么就是当前的这个高度，当前的高度其实他就最小的，加上你循环的到的这个他的最顶部的高度就再加上间隙，也就是说我要存他的最小的高度 啊，也也就是这个吗？当前的这个，对吧？加上盖谱加上他，我要我要把它存到我我这个高度里面，嗯，这样依次的进行 往下处理，这样的话我们就实现了一个非常简单的等块的一个流失布局缩放的时候，他这个裂数也是变化的。嗯，如果你们有更好的方案，欢迎评论区留言讨论。

本期视频揭秘业务数据传递的神秘过程。首先，前端发起一个业务处理请求，数据最先由 controller 曾接收，然后依次被传到 service interface， service implements mapper interface， my bitters mapper， 最终由埋 bates mapper 调用相关的 sql 语句对数据库进行操作，数据保存到数据库就完成了。

而数据回传，我们将它分为前端数据和后端数据，前端数据也就是曝光、点击、下载安装这个 app， 它展示的广告在信息流的平台上产生了一次曝光，就是用户看到了，看到了之后点击或者是下载安装这四个数据，往往是在用户产生了这个行为，先将这四个数据的数值回传给媒体， 媒体在通过和我们广告组的 api 接口回传到我们自己的后台，所以说这样的一个前端数据，媒体主要是通过媒体回传在我们，而后端数据就不一样了。第一个，激活、注册、付费、次流，这四个数据是大多数广告组需要考核的一个指标， 从用户产生的一个，比如说产生了一个注册的一个行为，这个注册的行为会简称为一，这样一个人先去回传到广告主的后台，广告主再通过跟媒体的连接这个 a p i 接口再去回传给媒体。所以说他的一个 区别跟前端的数据区别主要在于是由我们去回传给媒体，而有的广告主他们的后台可能说激活数有五十五个，但是媒体回传只有五十个。第一个原因我们自己不想回传那么多的数据给媒体，我们故意减少一部分，可以通过技术的手段实现。第二个你 api 的接口有问题，所以导致数据回传不完整， 所以说前端数据和后端数据他们都是通过这样的一个 a p i 就回传，区别就在于前端是媒体回传给我们，后端数据是我们回传给媒体。

前端最广泛使用的四种请求数据的方法，你可一定要学会了，收藏起来慢慢学！前端请求数据的方式呢，一共就仅有四种，分别呢是凤表达、阿贾克斯 vip iphone 表单呢，是 html 的请求方式，只能发送数据，无法操作接收到数据。巴塞克斯呢，分别为 ie 六之后的 xrmlhtvp request 的对象和 ie 六的 xlt 的对象。 简单来说呢，就是阿姨六后对象进行了升级。而费时对象呢，是大幅度优化了阿贾克斯的使用，用起来呢更方便。 whetsok 的只能发送字不串，不过因为握手协议，数据交互起来非常快，是聊天室游戏数据交互的首选。 有同学会说爱心奥斯，不好意思，那只是个酷，封装了上面原声内容的一个 gs 酷而已。悄悄学会这四种请求方式经验你的面试观，关注我，学习更多前端干货知识！

好，今天呢，咱们来说一下路径传直，首先第一点呢，我先告诉大家，路径传直可能我们在什么地方会用，然后其次呢，咱们要知道该如何去传以及如何去接收。好了，首先呢咱们来先说一下在什么情况下我们会涉及到路径传直哈，那现在咱们来看一下小米上传这个网站哈， 那在这个我的里边他有一个设置，在设置里边呢，他有个地址管理，大家看这啊，这个地址管理呢，你看啊，这一共是有三个地址，对吧？我点击其中的某一个，比如说点击这张三吧，大家注意啊，点一下 是不是进入到了编辑地址这个页面了，对吧？说白了就是跳转到一个路由上，对不对？哎，这是编辑地址。好，那么你知道这个东西以后大家再来看哈，刚才我点击编辑的啊，到这个地方我结算时候是不是这也有一个地址，对吧？我点击以后是不是也进入了，哎，我注意我这词哈也 啊，刚才也是进入到这的，现在呢也是进入到这的，但是呢，现在我在点击账三，他是干嘛？他是选择，刚才是不是点进去他是编辑啊，现在点一下他是选择吧，然后把这个值呢放到这，哎，那么现在就有这么个问题了， 我在之前是编辑在这是选择，他其实怎么做的啊？正常来说呢，是点击进入到编辑那个路由上，那么在这呢，他做返回，是不是说白了就是类似 router， 然后一个返回就可以了，那你怎么知道这就是返回那个地方，就是跳转到编辑页面呢？ 我可以在这条点击的时候啊，你不是进入到这页面吗？我给你做一个判断，我先给你传个值吧，传一个太不值，比如说啊，太不值，为 a 冒号一，然后呢，这张页面，如果说我拿到这 a 了，就证明我是从这进来的，对吧？如果没有拿到这 a， 我就从我的里边进来，那么好，那如果说你是从这进来的啊， a 我能接受到，那么我要该执行什么？我在这该执行是返回，对吧？这就涉及到了路径穿针，你怎么判断的呀？我是从这跳转进去的，我知道你是从哪个地方跳转进去的，然后对应的下面是什么操作， 那你就要用到路径的传直了啊，包括这看到没有。好，那么所以说呢，咱们的场景是比较多的啊，那么具体该怎么去传啊？这样，咱们说一下啊，路径传直啊啊，第一就是传直，该怎么去传好，我们在这呢，可以写个八下柳， 我就给他跳转到这个关于这个页面上，因为他默认的是有这页面的，是吧？好，下面呢，咱们写一个 script， 写一个 mess esport 地方， mess 好，我就 this 的 roocher 点儿 护齿是吧，你跳转到这个路由上， pass 你这个路径好，然后呢？其次，哎，用快锐去传 a 码号一，比如说，好，这是传指 好，我们能不能看到呢？其实能的，大家看这啊，我把这个地方呢给它打印出来。看到啊，我先点按钮注意啊，走，你看，哎，冒号一是不是有了，哎，你传了，那么怎么接呢？好，到这到我们这个页面啊，我写个 s pro。 好，那我们就用这个 creative 啊，全部丢弃的键好，大家看啊，我在这打一个 this 的 root 啊， root 看到没有？这是 rooter 啊， r， 这没有带 r 的。好，我们现在来看一下， 来，点过去看 carry 啊， carry 是不是有 m 二一啊，也就说你要接触到这，直接简单按 carry 的 a 那么一就能接收到了， 大家看到了吗？哎，这就是他的一个路径的船只啊，路由船只好这么接， 传就这么传，哎，接收值，咱就这么接啊，接收就这么接，那么在这呢，还需要说一下啊，就是，哎，你看啊，咱们用两个东西，一个是 this 的 rooter 一，一个是我们的 this 的 root， 这两有啥区别呢？好，咱们来看分别他们承载什么，而 router 呢，是那个 new router 那个对象啊，说白了就是在这是这个对象，是他打印的，是这个。 嗯，咱这个，咱看这里边有什么？说白了就是这个 router 啊，他就是你的跳转路由的模式啊，你跳转路由页面，对吧，他里边有什么护士啊，购物啊，解方法啊，他是这个整个大队上的一个出水化，对吧？然后你这不有意思吗？他出水化，然后里边添加方法， 说白了他就是来负责跳转的啊，并且呢，知道你是什么模式跳转的，他是用来跳转这块啊，跳转这块他具备这样功能，而 rose 是什么呢？咱们打开 rose root 呢，是能判断你当前路径，这不是 pass 吗？当前路径是哪个？就是你当前路由也能接触到你的这个船过来值 啊，所以他俩不同点就是这个呢，是使用路由啊，跳转页面啊，查看模式等等这样一些内容，而这个呢，是可以接收到你的值传过来的值，他可以接收到，并且能判断你当前的路由， 好吧，你陆游，所以说呢，你要知道啊。呃，我们在接收指示及判断时候都要用 root。 好吧，这就是我们的路径传旨啊，就给大家呢，先说到这，然后呢大家一定要知道他的场景以及怎么去传接啊。好，本节课呢，咱们就先说这么多。

好，那这回呢，咱们就写一个什么呀，就按照这个，呃，写个 pose 的请求啊， post 的请求，咱这里这个。哎，注册和注册 和这个登录是不是都是 pos 机型？那这既然这样的话，咱就可以咱写个简单点的，咱写个登录啊，注册，到时候你自个去写啊。 好，那这样的话我们就来首先先写号 print 啊，那然后还是一个 button 啊，那这地方叫做我是一个按钮，对吧？啊， 好，然后在这里呢，我们取元素啊，获取元素 va 一个 b t n 等于 document 点 query selector， 然后是 button 啊，然后接着 b t n 等 on click， 就是当点击这个按钮的时候，我要去 登录，对吧？那好，这样的话我就要去登录啊，那登录的话咱得发请求吧，玩一个 f x r u 等于 new 叉 m l h t p p 瑞赛斯又写一遍是不是？那注意啊，我是这么说你，你想想看淘宝这个网站他一共有多少个？ 非常非常多，巨多是吧？啊？那么多，那咱们他每三个程序员每个字都写一遍啊， 不会，所以说一会啊，咱们讲完以后，咱们封装一下，就说把这么多的代码干嘛呀？放到一个函数里，然后以后我们每次发请求的时候调用一下这个函数就行了， 对吧？啊，好，那这个这个是一会再说啊，咱们现在先解决当前的问题，就是把这个 pos 机球 发出去啊，那来 x h r 的 on ready state change 等于 function 啊，然后判断如果 x h r 的 ready state 等等等于四啊，那么这个时候呢，我们就先输出吧啊， console log 啊， x h r 的 response text 好，然后这个就完事了啊。对，接下来在 f c 叉二的 open 但是这回 open 我得填 get a pose 的啊 pose 的然后接着是我要往哪儿发呀 我要往这里发对不对。拇指然后粘贴啊粘贴然后接下来我在这地方用竖吧啊用竖啊可以不写啊可以不写那就是你不想写没 关系啊啊默认的啊啊这个 x 点点分的啊但注意啊在这里我要说一下就是说 pose 的请求他携带数据并不写在一个 r 上对吧。啊那这样的话往哪写呢注意啊他往顺的边写 能理解吧那他往笨的这写那这个格式跟之前没有任何区别就说以前的时候咱们发概的几个是不是在这写啊 对吧。那是 a 等于 a 等于一按的 b 等于二按的 c 等于三啊 c 等于三哎以前你是这么写对不对现在怎么样呢注意啊你就把这个这一块直接往这放就行 啊这个时候这个问号是不是已经不需要了因为问号的作用是什么是分割这个参数和 u l 呃或或者是和那个路径对吧 那这回我本来就是分开的我是不是问号就不要了哎好那这样的话呢咱们这个 cos 请求来看一下能不能发的出去 啊。粘贴然后呢这个地方切换成 local hose 的冒号粘贴啊不是好 f 十二 啊然后咱们一点这个按钮说什么呀首先请求肯定是刮出去了不然他不会报错啊其次这个数据说什么呀说用户名未填写又又是什么呀又是参数不对因为他要 a b c 吗他不要他要什么 他要什么咱看这里哎咱看这里他要 user name 和盘扣的对不对啊，所以说这地方就得是 user 哎。 user name 等于啊等于，哈哈哈，对吧。 and and 哈和 word 等于一二三保存。那我们来看一下对不对啊。刷新以后一点按钮怎么样？哎，怎么还失败呀对吧哎怎么还失败呀。 啊在这个地方呢我就要说一下了，就说在发送啊，在发送 post 请求 的时候啊，我们必须啊，必须添加一条代码啊，什么代码呢？ s c 叉儿的 set request 快速的 tiger 啊，添加或者说设置请求头啊，设置请求头，这个请求头是什么呢？叫 content 杠 title， 然后后边这个比较长啊，叫 application 杠 x 杠三 w 杠 bomb 杠 u i l and coded 啊，这个比较长，但是没关系，你就不用记啊，不用记啊，到时候咱封装好了你还用记吗？对不对啊。来刷新以后你看一点怎么样 请求成功对吧。啊那这样的话咱们就有一个疑问，说，老师啊，你这个有这条代码和没有这条代码什么区别？哎那这就可以开始介绍请求图的作用了啊，来，我再来一个复制粘贴啊，那这个地方我我 我也是对吧。啊我也是一个按钮，哦对，然后给他一个什么呀？ 呃 id 吧啊 id 等于这个 b t n 一啊，那这样的话就是 y b t n 一等于井号 b t n 一 btne 可以吧啊，然后我把这个这里边的代码啊，我把这里边的代码复制然后粘贴，然后把这个改成 btne。 那么也就是说啊这对我再把这条去掉啊，那这样的话就是说我上面这个按钮 发出去的请求是有这条代码的对吧？我下边这个按钮发出去的请求是不是没有这条代码？哎，那这块咱们做个对比嘛，控制变量法对吧？啊？对我一点这个请求成功，来我们看一看这个请求的信息啊， 那这样的话咱们是设置了什么呀？设置了请求头对不对？请求头里边有一个， 有一个，呃， content type 啊， content type 是什么呀？是，就是咱写的那个 application 上什么，对吧？好，注意看，我再点第二个，点了一下，然后看他的请求投他的请求投请 content type 是什么？ 一个是 tax 杠 plan， 一个是 application 杠什么什么，对吧？啊？那这样的话有什么区别呢？都一样。 content type 这个是什么意思？这两个英文单词是什么意思？ content 是内容 啊，内容，然后 type 是类型，就说内容类型。那注意啊，咱们这个请求是发给后端的吧，也就是说在这个请求头上有一条信息 叫做康生的太子，对吧？那这个我问你，这个这个东西是给谁看的？给夫妻看的对吧？比如说当夫妻接收到这个请坐以后，一看这个请求头里边的这条信息就知道该怎么去处理了， 能明白吧？啊？然后这个地方啊，这个地方也是啊，只不过呢，服务器，他这回服务器就是因为你前端这回没有设置，所以说服务器知道怎么去处理吗？所以他也 就是你的每一个请求头里边的这个字段，他都知道该怎么去处理，但是处理的方式不对，就说这回咱发这个请求就应该把它做成这个，能理解吧？就是服务器 他他的估计的处理是没问题的，但是结果不对，这是哪的问题？这就是咱们发请求的时候就应该给告诉他的啊， 好了，那这样的话，咱们正好也可以看看另外一个区别啊，什么区别呢？就是这个 payload， 你看啊，不对的，这一次的 payload 它的这个地方叫什么呀？叫 request payload， 它的内容就是一个纯字母串儿吧，看见没？ 就这个东西，这是啥呀？这不就是咱们写字的这个东西吗？能看见吧？看这个 看到没？这是啥呀？ bomb data， 哎，有点印象了，是吧？ 啊？咱们这昨天演示那个 pos 表单发送 pos 进行的时候是不是说过这是 opt， 也就是说其实呀，这个 咱们这条代码的作用就是把阿贾克斯发送出去的这个数据的格式，哎，给他伪装成了表单发出去的内容，能理解吧？啊？ 行，那这样的话咱这个就算是说完了啊。啊，那就是 get 这个，这个 add， 根根发 get 的请求我，我会携带数据。 add 根根发 boss 请求，咱也会携带数据啊，就是无非就是放存放的位置不一样啊，那这样的话呢，我们 这个给行啊，咱们这节课就到这，然后接下来半个小时的时间啊，大家把这个练习一下啊，这半个小时就包含下课时间了啊。

好，我们来说一下这道题，就是前端使用 token 登录的流程是什么？前端使用 token 登录的流程一般就是以下这几点，第一个呢，就是用户提交登录信息，用户在前端界面输入用户密码、用户名和密码，然后点击登录按钮。 第二步呢，就是发送登录请求，前端呢，把用户输入的登录信息通过 pose 的请求发送给后端，那么请求的数据呢，一般使用 jason 格式或表单格式进行传递。第三步，被后端的验证登录信息。 后端接收到登录请求后呢，会对用户提交的用户名和密码进行验证，验证可以设计数据库查询密码、加密对比等操作。 第四步呢就是生成 token， 如果用户提交的登录信息验证通过，后端呢，会生成一个 token， 那么这个 token 呢，它一般就包含了用户的信息，过期时间、签名 等等，是用来标识用户身份的这样一些信息。第五步呢，就是返回 token， 那么后端呢，他会将生成的 token 通过响应的方式返回给前端，通常将 token 作为响应体的一部分，或者放在响应头部当中的 authorization 自断当中。 第六个呢，就是前端保存这个 tok， 前端接收到后端返回的 tok 后，一般会把 tok 保存到本地，通常使用浏览器的 web storage 来进行存储。第七个呢，就是发送 tok， 那么前端保存了 tok 之后之以后，每次与后端进行交互的时候，前端都会在请求中携带这个 tok， 通常他会把这个 token 放在请求的头部中 authorization 字端里边。第八个呢，就是后端验证这个 token 了，那么后端接收到带有 token 请求的时候呢，会进行 token 的验证验证可以包括解析 token、 教练签名、教练过 时间等等一系列的操作。第九个呢就是返回响应，如果 top 验证通过，那么后端呢，会根据请求的内容进行相应的处理，并且呢把处理结果以响应的方式返回给前端。最后一步就是前端呢来处理这个响应，前端他接收到后端返回的响应后，根据业务需要进行相应的处理， 如果需要展示用户信息或者维护登录状态，可以解析头肯中的用户信息，并根据信息进行逻辑处理。 那么上面这个流程呢，就是咱们常见的前段使用 token 登录的这样一个流程，那么根据具体的业务需求可能会有一些细微的差别，同时为了保证安全，可能需要注意对 token 进行合理的存储、传输和设置过期时间等一些操作。

目前我们做的网页只能展示图片和文字，如果需要展示视频，就需要用到一个新的元素，叫 v 丢元素，除此之外还有 o 丢元素，用来展示音频的 还有一个 fm 元素，用来嵌入第三方网页的。这三个元素有一个共同特点，和一面积元素一样，都是可替换元素。 还记得可替换元素吧，他显示的内容取决于元素属性，他们本身通常都是行和，但效果上类似于行快和，可以修改尺寸。现在看未丢，这里我们直接写一个未丢元素。 asrc， 和 emg 元素一样，表示资源地址，这里就是视频地址， 可以是我们自己的视频，也可以是别人网站上的视频，当然别人网站上的视频一般都是做了保护措施的，不容易拿到地址。这里我准备了一个王者荣耀的视频，打开来看一下，视频已经显示出来了，只不过尺寸有点大，我们来改一下他的尺寸。 yes， 一千像素，现在就差不多了，他默认是没有显示播放 按钮的，我们可以在它上面右键显示所有空间，按钮就出来了，点击它就可以播放。如果要这样播放视频的话，还是比较麻烦的，用户体验也不好。如果想直接显示播放空间的话，我们可以给他加一个属性，叫 comtros， 表示显示播放空间，不写它就是不显示空间，播放空间就有了。对于这种不尔属性，也就是它的纸质有两种，真和假，写了这个属性，它的值就是真，不写这个属性，它的值就是假。这种不尔属性在 e t m 五里面，我们可以不写属性值， 保存来看也是一样的效果，但现在这个视频不会自动播放，需要我们点击才可以播放。如果想让网页打开的时候自动播放视频，需要加一个属性 gutoplay， 他也是一个 burber 属性。设置完这个属性之后，你会发现还是不会自动播放，因为浏览器有一个自动播放策略。他认为对于用户来说， 如果是一个陌生的站点，你这里面的视频自动播放的话，可能会吓到用户或者让用户感到尴尬。所以默认情况下，有些浏览器就直接禁止了自动播放功能，当然也不是绝对禁止，在某些情况下还是可以自动播放的。比如我们把视频静音， 他一个 mute 的就是消音的意思，再来刷新视频就自动播放了。或者用户也可以在浏览器里面自行设置哪些网站可以自动播放声音。当然如果你细心的话，可能会发现有些网站里没有特殊设置，也可以带声音自动播放。原因是在浏览器自动播放策略里面有一个媒体参与度， 简单说就是你对这个站点是否熟悉，每当你访问这个站点和这个站点互动的数据，浏览器都会记录。当你对这个站点媒体参与度达到一定预制的时候，浏览器就会放开限制，允许这个站点的视频自动播放。总的来说，我们作为开发者是没办法直接让网页视频带声音自动播放的，只能静音自动 模仿，或者通过一些提示引导，让用户和页面进行交互，比如让用户点击播放，点击解除静音等等，不然就只能是用户频繁发往你的站点，导致用户的媒体参与度达到一定预制，浏览器会自动放开这个限制。 ok， 然后微丢还有一个属性叫 op， 表示循环播放。来看一下， 我们点到最后视频播放完之后，他就会回到开头重新播放视频元素。懂了之后音频就简单了，他的用法和微调是一模一样的。我们来个 ad 元素，我这里也准备了个音频文件，保存来看， 默认是看不到的。音频没有什么可以显示的，唯一能显示的就是播放空间。那我们给他加一个 controls， 再来看点一下就可以播放了。梦乡即是故乡，前路必为归途。