第 4 章：Vue 中的 ajax

学习资料来自尚硅谷VUE教学视频

csdn：课程代码、vue3笔记、课件

gitee：课件、代码、资料

其他：vscode插件推荐、第三方库网站、npmjs库

工具库推荐：
moment.js 时间处理工具，很强很大。还有个轻量的叫dayjs
生成全球唯一id工具：uuid，但是很大，有个精简版：nanoid

章节导航：

第 1 章：Vue 核心（上）

第 1 章：Vue 核心（下）

第 2 章：Vue 组件化编程

第 3 章：使用 Vue 脚手架

第 4 章：Vue 中的 ajax

第 5 章：vuex

第 6 章：vue-router（Vue路由）

第 7 章：Vue UI 组件库

第 7 章：Vue3

4.1. vue脚手架配置代理

跨域：
同源策略：所谓同源是指域名（127.0.0.1），协议（http），端口（8080）相同。

解决跨域：
1.cors
2.jsonp 巧妙的方式，借助script标签里的src属性在引入外部资源的时候不受同源策略限制的特点，且只能 get请求
3.配置代理服务器，代理服务器和前端请求同源，但是他是服务器，服务器和服务器之间通信不用ajax，ajax是前端技术，得有浏览器，有Window，才有xhr、fetch这些东西，在node.js里写new XMLHttpRequest()是会报错的，两台服务器之间打交道用的是最传统的http请求，所以同源策略管不到代理服务器，跨域问题就解决了。

怎么开启代理服务器：
1.Nginx
2.vue-cli

4.1.1 方法一

​ 在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

4.1.2 方法二

​ 编写vue.config.js配置具体代理规则：

module.exports = {
	devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,// 用于控制请求头中的host值
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,// 用于控制请求头中的host值
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

引入成型的第三方资源（样式等）：
1.可以放在：src/assets/css/下，在app组件里引入
import ‘./assets/css/bootstrap.css’
如果通过import形式引入样式，脚手架会做一个非常严格的检查，你这个.css里面只要用到了不存在的资源那就会报错
2.放在public/css/下，在index.html里引入

4.2. vue 项目中常用的 2 个 Ajax 库：axios

发送请求的几种方法：
1.xhr new XMLHttpRequest() xhr.open() xhr.send()
2.jQuery $.get $.post
3.axios 尤雨溪 推荐 是promise风格
4.fetch 是promise风格，和xhr一样是js内置的，但是ie不兼容

安装axios：npm i axios

使用：
发送方：

	import axios from 'axios'

	searchUsers(){
		//请求前更新List的数据
		this.$bus.$emit('updateListData',{isLoading:true,errMsg:'',users:[],isFirst:false})
		//ES6模板字符串，用``代替""，在${} 里面写表达式
		axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
			response => {
				console.log('请求成功了')
				//请求成功后更新List的数据
				this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
			},
			error => {
				//请求后更新List的数据
				this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
			}
		)
	}

接收方：

	this.$bus.$on('updateListData',(dataObj)=>{
		//es6的拷贝对象方法
		this.info = {...this.info,...dataObj}
	})

4.3. vue 项目中常用的 2 个 Ajax 库：vue-resource

vue 插件库, vue1.x 使用广泛，官方已不维护。交给别的团队维护了。

安装vue-resource：npm i vue-resource

//引入插件
import vueResource from 'vue-resource'
//使用插件，这样vm和vc身上都会有$http
Vue.use(vueResource)

具体使用方式和axios区别就是把上面的axios.get改成this.$http.get，其他都一样，也是promise风格的。

4.4. 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

2. 分类：默认插槽、具名插槽、作用域插槽

3. 使用方式：

   1. 默认插槽：

插槽中的元素是在父组件完成解析之后塞到子组件的，所以样式写在父组件或子组件都行，如果写在父组件会把样式带好传过去，如果写在子组件样式也能控制

父组件中：

      <Category>
         <html结构>xxxx</html结构>
      </Category>

子组件中：

         <template>
             <div>
				<!-- 定义一个插槽（挖个坑，等着组件的使用者进行填充） -->
				<slot>我是一些默认值，当使用者没有传递具体结构时，我会出现</slot>
             </div>
         </template>

2. 具名插槽：

vue2.6新提出了一个 slot="center" 新写法： v-slot:footer ，但只能在 template 用

父组件中：

        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>
            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>

子组件中：

        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>

3. 作用域插槽：

理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

父组件中：

<template>
  <div class="container">
    <Category title="游戏">
      <!-- 注意属性名叫scope，没有d，引号内的名字可以随意定 -->
      <template scope="atguigu">
        <ul>
          <!-- scopeData里是键值对的对象，键就是子组件的定义的名字，可以传多个 -->
          <li v-for="(g, index) in atguigu.games" :key="index">{{ g }}</li>
        </ul>
      </template>
    </Category>

    <Category title="游戏">
      <!-- {games} es6的结构赋值 -->
      <template scope="{games , msg}">
        <ol>
          <li style="color: red" v-for="(g, index) in games" :key="index">
            {{ g }}
          </li>
        </ol>
        <h4>{{ msg }}</h4>
      </template>
    </Category>

    <Category title="游戏">
      <template slot-scope="{ games }">
        <h4 v-for="(g, index) in games" :key="index">{{ g }}</h4>
      </template>
    </Category>
  </div>
</template>

子组件中：

<template>
	<div class="category">
		<h3>{{title}}分类</h3>
		<slot :games="games" msg="hello">我是默认的一些内容</slot>
	</div>
</template>

<script>
    export default {
        name:'Category',
        props:['title'],
        //数据在子组件自身
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽']
            }
        },
    }
</script>