vue - Vue中的ajax
只有在 ajax 才能找回一点点主场了，vue 中的 ajax 一天整完，内容还行，主要是对 axios 的运用。
明天按理说要开始 vuex 了，这个从来都是只耳闻没有眼见过，明天来看看看看是个什么神奇的东西。
一. 解决开发环境 ajax 跨域问题
1. 配置代理（方法一）
首先我们能发起 ajax 请求的，xhr 原生不推荐、jQuery 也不封装得有但是也不推荐，因为要操作 DOM，然后就是 axios，它的体积比 jQuery 而且他是专门处理数据请求的，他还是 promise 风格的，jq 和 axios 都是基于 xhr 来封装的，如果没有了 xhr 他们就没有了，但是这个 fetch 是跟 xhr 同级的也是原生的，不基于 xhr，而且也是 promise 风格的，他的问题是兼容性差
开启两个本地的 node 服务器，通过 axios 来获取数据，先下载 axios 并导入，注意一下，axios 的使用，调用 get、post 以及 ajax 综合请求等，还有后面 then 回调会有返回成功或者失败的函数
果不其然，当我们点击直接就跨域了，我们解决跨域一般三种方法，
cors 是配置在后端 node 里面的，但是它的缺点就是，不能随便使用响应头，要配置本公司内容能请求的响应头，不然用它默认的是个人都可以请求我们服务器的数据了
然后 jsonp 就不用说了，虽然可以配置在前端，但是只限于 get，局限性太大了
最后还剩下一种，以前没有学过的 -代理，它的原理是这样的，在前端和服务器之间来一个中间代理服务器，保持跟前端一样的协议端口号等，这样一来前端从代理服务器请求发起资源都没问题了，为什么代理服务器和服务器不一样却可以互相拿资源？因为同源策略使我们浏览器的策略，服务器之间没得这种协议，随便访问
我们这里通过 vue-cli 来开启代理服务器，通过配置 vue.config.js 也就是前面说过的，vue-cli 的配置文件，所以需要在 vue-cli 官网的配置参考找到 devServer.proxy, 直接拿过来配置即可，这里要注意，这个地址是写的你要请求的 api 服务器地址，而且不用写具体下面哪个路径，写到端口号就够了，因为它是自动代理服务器的端口号为我们 vue-cli 服务器的端口号
还有最后一步别忘记改了，在我们 axios 请求那里将请求的服务器改为代理服务器其实也相当于就是自己的 vue-cli 这个服务器，以为他们两个是一样的，同时你可以理解为代理服务器现在有了 api 服务器的资源，所以真正要请求的路径在这里填写
但是这个方法有两个问题
-
一个是我们转发的服务器只能设置一个，多个不行
-
一个这个代理服务器，如果本身服务器身上有会默认去拿自身服务器上的，什么叫做自身服务器上的，在我们 public 文件夹下面的都是 8080 服务器端口上挂载的文件
那么问题来了，我如果自己也有个 student 的文件
这个时候再去拿就是我们自己服务器上的这个 students 的资源了
2. 配置代理（方法二）
同样是参照官网 cli 的 devServer.proxy 第二段代码，他那里复制过来是这样的，后面会增删一些内容
首先 /api 相当于给你挂前缀了，但是只是拿来绕开 vue-cli 的本地服务器的查找机制，我有前缀就不是找你 public 下面的东西了，就算你也有 students，也不关我的事，然后 target 就为我们的服务器地址，下面 ws 表示支持 websocket，changeOrigin 表示控制请求头中的 host 值（其实就是要不要撒谎的意思，为 fasle，当我们代理服务器访问 api 服务器，代理服务器的端口号就为 8080，如果为 true，那么他就会跟着 api 服务器的端口号走，假装告诉你我也是 5000，以防有些 api 服务器开启限制，必须同端口号的服务器才能访问），后面这两个配置不写也默认为 true，当然这样还没完，还有一个关键配置，cli 官网没给我们写出来，要配置一个 pathRewrite 的属性，值为一个对象，里面内容表示把以什么前缀开头的这个字段转换为空字符串，为什么要这么做，因为我刚才说的，我们添加这个前缀只是为了绕过前端这一块，解决那个本地服务器和 api 服务器都有相同的资源，会先去找本地服务器的情况，如果进入 api 服务器还去找这么一个地址，那他下面根本没得我们的 heymar 前缀，所以就会报错，需要注意的是这里的正则并不需要字面量来包裹，直接引号包起就可以了
然后记得将我们的 axios 的请求添加前缀
这个时候就算我们 public 下面有同名的文件，也不会访问到他了
如果我们有多个服务器，直接接着配置在下面即可
二.github 用户搜索案例
搜索关键字可以把 github 的用户名字及头像显示出来
组件化编程先拆组件，搜索为一个组件 search，下面列表展示为一个组价 list, 我们这里引入了 bootstrap.css, 引入这些外部的文件有两种方式，一种是在我们 src 下面创建一个文件夹，assets 专门来放这些，通过 import 引入
可以看到用这种方式引入，页面编译报错了，找不到这些字体文件，因为我就单纯引入了一个 bootstrap.css 也用不到这些字体文件，这里就要说到 import 的规则了，import 导入是严格导入，他会去找你这个文件所有的依赖都要准备完毕才会给你编译成功，所以这里我们还有第二个方法，在 public 下面创建一个 css 文件夹，然后通过 index.html 我们 link 方式来导入，link 就不会给你检查这么多了，这里也要尊重他的一个语法规则，前面要添加上一些参数
依照前面的思想，静态页面创建完毕，组件划分好后，第二步应该开始创建动态数据了，在这个案例，input 输入的值是我们的数据，list 每一个展示出来的用户信息是我们的数据，先把 input 的值搞好，用 v-model 绑定数据
当我们点击就去发送请求，通过关键字回来的参数再通过全局事件总线将数据发给我们的 list
我们只要这三个数据，头像地址，用户 github 网址，用户名字
收到数据通过 v-for 渲染到页面
1. 完善案例
我们整个案例 list 界面其实要分为四个界面才完善，搜索出来的用户列表只是其中一个，还有刚开始进来的欢迎界面，点击搜索的 loading 界面，以及失败后的错误界面，很明显这里要用条件渲染，写上四个界面
主要是他们的条件是什么？结合前面的案例，一般条件渲染要控制几个页面的显示隐藏，至少都得有一个开关也就是变量，来判断他该显示还是隐藏，那么这里应该有四个开关，来表示四种不同的界面，首先 welcome 这个界面简单，一上来就为 true，当我们点击搜索就将 loading 改为 true，直到获取到请求，将它改为 false，将用户列表的页面改为 true 也可以，但为了保险起见最好改为 userInfo 的长度，要有长度才是真正的得到数据了，错误信息这里一直都是 false，知道进入错误的回调才为 true
由于我们要一点击就将 wel 改为 false，将 loading 改为 true，所以需要将数据传到 search 这个界面，一旦点击就会触发这个自定义时间，会发送过来一个对象数据
list 接受这边，为了能够直接赋值最好也将刚才定义的数据都装到一个对象里面去，接收到 search 传过来的对象就可以直接赋值，这样的好处不仅是方便，而且传过来的数据也语义化一点，不然就只能是传过来 true，false 等，我这边让每一个值等于这些值
一直到我们获取到数据，又传过来一个新的对象，重新赋值新的对象
这里有一个小注意点：因为我们的 wel 界面是一刷新就有，后面不可能再出现了，所以后面传过来的数据都不带 wel 这个参数的，你又以对象赋的值，所以只会导致一种情况
结构被改了，这里可以用到，es6 的扩展运算符，主要是把这个要用起来，用处还是蛮多的
三.vue 项目中常用的 2 个 Ajax 库
1.axios
2.vue-resource（了解）
是比较老的一个 ajax 请求库，除了 xhr、jq、axios、fetch 后有多出了一个，它是 vue 的一个 插件库，所以说要在入口文件导入并注册
前面也说过，只要插件一注册，那么下面的 vm、vc 都可以使用了，使用 $http 即可，使用方法跟 axios 一模一样，就连返回值都一样，也是 promise 风格
四.slot 插槽
可以让父组件向子组件指定位置插入 html 结构
1. 无插槽
要完成这样一个界面，是不是得把其中一个拿来作为组件后面的直接复用即可
这里传值有一个注意点，因为我们每个组件标签都是一个组件收到的数据也是不一样的，所以可以取一样的名字，到时候遍历出来各是各的
props 接收数据，渲染即可
2. 默认插槽
现在更新需求，我们有两个广告商美食这边只放他的图片，电影这边只放他的电影
这个时候就要用到插槽了，以前从没有在组件标签里面写过标签体吧，插槽就是要在这里面写
先不要管其他的，如果在组建标签里面写了标签体，还需要一个关键步骤，因为 vue 能够解析你的标签，但是他不知道放在哪里，也就是放在 list 这个组件的哪里，所以需要我们在组件模板里面用一个标签 slot来占位
这就是我们的 slot 插槽，但是由于组件里面的内容改动，后面也不能直接传数据进去了，也要把对应的位置内容提到组件标签这里来写
注意当我们 slot 部分没有内容传进来的时候，slot 标签里面的内容就是默认值
3. 具名插槽
就是具有名字的插槽，我们上面是一个插槽，可能不需要名字，但是如果有多个插槽，要插往不同的地方呢
首先给 slot 添加 name 属性
然后在我们标签体这边，谁要往哪个插槽添加信息，就把他的 slot 属性写为谁
注意
当我想把一大段代码加入到一个 slot 插槽，但是我又不能一个一个去写，就有点耗时间了，可以将他们都包在一个 div 里面然后给 div 洗衣歌 slot，但是这样就影响页面布局了，我们也可以写一个 template 标签包在这里面就不会影响布局了
如果用到了 template，那么 vue2.6 很新的的一个更新，template 可以这样来写 slot 名字，键值对，而且没有引号
这个写法只能应用于 template 标签
4. 作用域插槽
什么时候要用到这个作用域插槽
数据在组件的自身，但根据数据生成的数据结构需要组建的使用者来决定
就是数据没有在我们的插槽的使用者这里，什么叫做插槽的使用者，就是我们 slot 不是等着标签来填充吗，谁来填充这个插槽谁就是使用者，就比如说上面这个案例，这个 template 就是插槽的使用者
我把数据转移到 list 里面去，那么 app 里面定义的这些 games，这些 list 标签也就是插槽的使用者都用不到数据了，数据转移到 list 里面去了，现在的情况就很像作用域发生了变化，list 这个作用域里面可以使用 games，但是插槽使用者在 app 里面就用不到，这个时候就要用到作用域插槽了
怎么来用，首先要知道一句话，插槽的动态绑定，是把这个数据送到他的使用者，注意是使用者，并不是平时这样是送到下级
我们使用者这边怎么来接受这个参数呢？必须使用 template 标签，并且里面写一个属性 scope 没有 d，他的值随便取，就是一个对象，这里面包含了 slot 传过来的所有数据，如果就传过来了一个 data 那就是值.data 就可以取到
------------ 恢复内容开始 ------------
只有在 ajax 才能找回一点点主场了，vue 中的 ajax 一天整完，内容还行，主要是对 axios 的运用。
明天按理说要开始 vuex 了，这个从来都是只耳闻没有眼见过，明天来看看看看是个什么神奇的东西。
一. 解决开发环境 ajax 跨域问题
1. 配置代理（方法一）
首先我们能发起 ajax 请求的，xhr 原生不推荐、jQuery 也不封装得有但是也不推荐，因为要操作 DOM，然后就是 axios，它的体积比 jQuery 而且他是专门处理数据请求的，他还是 promise 风格的，jq 和 axios 都是基于 xhr 来封装的，如果没有了 xhr 他们就没有了，但是这个 fetch 是跟 xhr 同级的也是原生的，不基于 xhr，而且也是 promise 风格的，他的问题是兼容性差
开启两个本地的 node 服务器，通过 axios 来获取数据，先下载 axios 并导入，注意一下，axios 的使用，调用 get、post 以及 ajax 综合请求等，还有后面 then 回调会有返回成功或者失败的函数
果不其然，当我们点击直接就跨域了，我们解决跨域一般三种方法，
cors 是配置在后端 node 里面的，但是它的缺点就是，不能随便使用响应头，要配置本公司内容能请求的响应头，不然用它默认的是个人都可以请求我们服务器的数据了
然后 jsonp 就不用说了，虽然可以配置在前端，但是只限于 get，局限性太大了
最后还剩下一种，以前没有学过的 -代理，它的原理是这样的，在前端和服务器之间来一个中间代理服务器，保持跟前端一样的协议端口号等，这样一来前端从代理服务器请求发起资源都没问题了，为什么代理服务器和服务器不一样却可以互相拿资源？因为同源策略使我们浏览器的策略，服务器之间没得这种协议，随便访问
我们这里通过 vue-cli 来开启代理服务器，通过配置 vue.config.js 也就是前面说过的，vue-cli 的配置文件，所以需要在 vue-cli 官网的配置参考找到 devServer.proxy, 直接拿过来配置即可，这里要注意，这个地址是写的你要请求的 api 服务器地址，而且不用写具体下面哪个路径，写到端口号就够了，因为它是自动代理服务器的端口号为我们 vue-cli 服务器的端口号
还有最后一步别忘记改了，在我们 axios 请求那里将请求的服务器改为代理服务器其实也相当于就是自己的 vue-cli 这个服务器，以为他们两个是一样的，同时你可以理解为代理服务器现在有了 api 服务器的资源，所以真正要请求的路径在这里填写
但是这个方法有两个问题
-
一个是我们转发的服务器只能设置一个，多个不行
-
一个这个代理服务器，如果本身服务器身上有会默认去拿自身服务器上的，什么叫做自身服务器上的，在我们 public 文件夹下面的都是 8080 服务器端口上挂载的文件
那么问题来了，我如果自己也有个 student 的文件
这个时候再去拿就是我们自己服务器上的这个 students 的资源了
2. 配置代理（方法二）
同样是参照官网 cli 的 devServer.proxy 第二段代码，他那里复制过来是这样的，后面会增删一些内容
首先 /api 相当于给你挂前缀了，但是只是拿来绕开 vue-cli 的本地服务器的查找机制，我有前缀就不是找你 public 下面的东西了，就算你也有 students，也不关我的事，然后 target 就为我们的服务器地址，下面 ws 表示支持 websocket，changeOrigin 表示控制请求头中的 host 值（其实就是要不要撒谎的意思，为 fasle，当我们代理服务器访问 api 服务器，代理服务器的端口号就为 8080，如果为 true，那么他就会跟着 api 服务器的端口号走，假装告诉你我也是 5000，以防有些 api 服务器开启限制，必须同端口号的服务器才能访问），后面这两个配置不写也默认为 true，当然这样还没完，还有一个关键配置，cli 官网没给我们写出来，要配置一个 pathRewrite 的属性，值为一个对象，里面内容表示把以什么前缀开头的这个字段转换为空字符串，为什么要这么做，因为我刚才说的，我们添加这个前缀只是为了绕过前端这一块，解决那个本地服务器和 api 服务器都有相同的资源，会先去找本地服务器的情况，如果进入 api 服务器还去找这么一个地址，那他下面根本没得我们的 heymar 前缀，所以就会报错，需要注意的是这里的正则并不需要字面量来包裹，直接引号包起就可以了
然后记得将我们的 axios 的请求添加前缀
这个时候就算我们 public 下面有同名的文件，也不会访问到他了
如果我们有多个服务器，直接接着配置在下面即可
二.github 用户搜索案例
搜索关键字可以把 github 的用户名字及头像显示出来
组件化编程先拆组件，搜索为一个组件 search，下面列表展示为一个组价 list, 我们这里引入了 bootstrap.css, 引入这些外部的文件有两种方式，一种是在我们 src 下面创建一个文件夹，assets 专门来放这些，通过 import 引入
可以看到用这种方式引入，页面编译报错了，找不到这些字体文件，因为我就单纯引入了一个 bootstrap.css 也用不到这些字体文件，这里就要说到 import 的规则了，import 导入是严格导入，他会去找你这个文件所有的依赖都要准备完毕才会给你编译成功，所以这里我们还有第二个方法，在 public 下面创建一个 css 文件夹，然后通过 index.html 我们 link 方式来导入，link 就不会给你检查这么多了，这里也要尊重他的一个语法规则，前面要添加上一些参数
依照前面的思想，静态页面创建完毕，组件划分好后，第二步应该开始创建动态数据了，在这个案例，input 输入的值是我们的数据，list 每一个展示出来的用户信息是我们的数据，先把 input 的值搞好，用 v-model 绑定数据
当我们点击就去发送请求，通过关键字回来的参数再通过全局事件总线将数据发给我们的 list
我们只要这三个数据，头像地址，用户 github 网址，用户名字
收到数据通过 v-for 渲染到页面
1. 完善案例
我们整个案例 list 界面其实要分为四个界面才完善，搜索出来的用户列表只是其中一个，还有刚开始进来的欢迎界面，点击搜索的 loading 界面，以及失败后的错误界面，很明显这里要用条件渲染，写上四个界面
主要是他们的条件是什么？结合前面的案例，一般条件渲染要控制几个页面的显示隐藏，至少都得有一个开关也就是变量，来判断他该显示还是隐藏，那么这里应该有四个开关，来表示四种不同的界面，首先 welcome 这个界面简单，一上来就为 true，当我们点击搜索就将 loading 改为 true，直到获取到请求，将它改为 false，将用户列表的页面改为 true 也可以，但为了保险起见最好改为 userInfo 的长度，要有长度才是真正的得到数据了，错误信息这里一直都是 false，知道进入错误的回调才为 true
由于我们要一点击就将 wel 改为 false，将 loading 改为 true，所以需要将数据传到 search 这个界面，一旦点击就会触发这个自定义时间，会发送过来一个对象数据
list 接受这边，为了能够直接赋值最好也将刚才定义的数据都装到一个对象里面去，接收到 search 传过来的对象就可以直接赋值，这样的好处不仅是方便，而且传过来的数据也语义化一点，不然就只能是传过来 true，false 等，我这边让每一个值等于这些值
一直到我们获取到数据，又传过来一个新的对象，重新赋值新的对象
这里有一个小注意点：因为我们的 wel 界面是一刷新就有，后面不可能再出现了，所以后面传过来的数据都不带 wel 这个参数的，你又以对象赋的值，所以只会导致一种情况
结构被改了，这里可以用到，es6 的扩展运算符，主要是把这个要用起来，用处还是蛮多的
三.vue 项目中常用的 2 个 Ajax 库
1.axios
2.vue-resource（了解）
是比较老的一个 ajax 请求库，除了 xhr、jq、axios、fetch 后有多出了一个，它是 vue 的一个 插件库，所以说要在入口文件导入并注册
前面也说过，只要插件一注册，那么下面的 vm、vc 都可以使用了，使用 $http 即可，使用方法跟 axios 一模一样，就连返回值都一样，也是 promise 风格
四.slot 插槽
可以让父组件向子组件指定位置插入 html 结构
1. 无插槽
要完成这样一个界面，是不是得把其中一个拿来作为组件后面的直接复用即可
这里传值有一个注意点，因为我们每个组件标签都是一个组件收到的数据也是不一样的，所以可以取一样的名字，到时候遍历出来各是各的
props 接收数据，渲染即可
2. 默认插槽
现在更新需求，我们有两个广告商美食这边只放他的图片，电影这边只放他的电影
这个时候就要用到插槽了，以前从没有在组件标签里面写过标签体吧，插槽就是要在这里面写
先不要管其他的，如果在组建标签里面写了标签体，还需要一个关键步骤，因为 vue 能够解析你的标签，但是他不知道放在哪里，也就是放在 list 这个组件的哪里，所以需要我们在组件模板里面用一个标签 slot来占位
这就是我们的 slot 插槽，但是由于组件里面的内容改动，后面也不能直接传数据进去了，也要把对应的位置内容提到组件标签这里来写
注意当我们 slot 部分没有内容传进来的时候，slot 标签里面的内容就是默认值
3. 具名插槽
就是具有名字的插槽，我们上面是一个插槽，可能不需要名字，但是如果有多个插槽，要插往不同的地方呢
首先给 slot 添加 name 属性
然后在我们标签体这边，谁要往哪个插槽添加信息，就把他的 slot 属性写为谁
注意
当我想把一大段代码加入到一个 slot 插槽，但是我又不能一个一个去写，就有点耗时间了，可以将他们都包在一个 div 里面然后给 div 洗衣歌 slot，但是这样就影响页面布局了，我们也可以写一个 template 标签包在这里面就不会影响布局了
如果用到了 template，那么 vue2.6 很新的的一个更新，template 可以这样来写 slot 名字，键值对，而且没有引号
这个写法只能应用于 template 标签
4. 作用域插槽
什么时候要用到这个作用域插槽
数据在组件的自身，但根据数据生成的数据结构需要组建的使用者来决定
就是数据没有在我们的插槽的使用者这里，什么叫做插槽的使用者，就是我们 slot 不是等着标签来填充吗，谁来填充这个插槽谁就是使用者，就比如说上面这个案例，这个 template 就是插槽的使用者
我把数据转移到 list 里面去，那么 app 里面定义的这些 games，这些 list 标签也就是插槽的使用者都用不到数据了，数据转移到 list 里面去了，现在的情况就很像作用域发生了变化，list 这个作用域里面可以使用 games，但是插槽使用者在 app 里面就用不到，这个时候就要用到作用域插槽了
怎么来用，首先要知道一句话，插槽的动态绑定，是把这个数据送到他的使用者，注意是使用者，并不是平时这样是送到下级
我们使用者这边怎么来接受这个参数呢？必须使用 template 标签，并且里面写一个属性 scope 没有 d，他的值随便取，就是一个对象，这里面包含了 slot 传过来的所有数据，如果就传过来了一个 data 那就是值.data 就可以取到
------------ 恢复内容结束 ------------
__EOF__