Vue2学习之第四章——Vue中的ajax

Vue中的ajax

解决开发环境 Ajax 跨域问题

配置代理 方式一

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

// 开启代理服务器（方式一）
  devServer: {
    proxy: 'http://localhost:5000'
  }

说明：

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

方法二

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

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

说明：

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

vue 项目中常用的 2 个 Ajax 库

axios

安装

这里推荐使用的是VS Code，首先在VS里面打开终端，输入npm i axios安装即可

使用

1. 引入axios
   import axios from 'axios'
2. 请求数据

axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)

vue-resource

安装

这里推荐使用的是VS Code，首先在VS里面打开终端，输入npm i vue-resource安装即可

使用

1. 在main.js引入vue-resource

// 引入插件
import VueResource from 'vue-resource'
Vue.use(VueResource)

2. 请求数据

this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
	response => {
	// 请求成功后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:'',users:response.data.items})
	},
	error => {
	// 请求失败后更新List数据
	   this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})
	}
)

slot 插槽

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

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

3. 使用方式：

   1. 默认插槽：

      父组件中：
              <Category>
                 <div>html结构1div>
              Category>
      子组件中：
              <template>
                  <div>
                     
                     <slot>插槽默认内容...slot>
                  div>
              template>
      

   2. 具名插槽：

      父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1div>
                  template>
      
                  <template v-slot:footer>
                     <div>html结构2div>
                  template>
              Category>
      子组件中：
              <template>
                  <div>
                     
                     <slot name="center">插槽默认内容...slot>
                     <slot name="footer">插槽默认内容...slot>
                  div>
              template>
      

   3. 作用域插槽：

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

      2. 具体编码：

         父组件中：
         		<Category>
         			<template scope="scopeData">
         				
         				<ul>
         					<li v-for="g in scopeData.games" :key="g">{{g}}li>
         				ul>
         			template>
         		Category>
         
         		<Category>
         			<template slot-scope="scopeData">
         				
         				<h4 v-for="g in scopeData.games" :key="g">{{g}}h4>
         			template>
         		Category>
         子组件中：
                 <template>
                     <div>
                         <slot :games="games">slot>
                     div>
                 template>
         		
                 <script>
                     export default {
                         name:'Category',
                         props:['title'],
                         //数据在子组件自身
                         data() {
                             return {
                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                             }
                         },
                     }
                 script>