【Vue全家桶】--- 第四章：Vue中的ajax

🍅点击前往Vue开发知识总结总目录（建议收藏）

第四章：Vue中的ajax

vue脚手架配置代理

方法一

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

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

说明：

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

方法二

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

devServer: {
    proxy: {
      '/xiaowang': {
        target: 'http://localhost:5000',
        pathRewrite:{'^/xiaowang':''},
        ws: true,   //默认为true，用于支持websocket
        changeOrigin: true //默认为true,用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/demo':''},
        ws: true,   //默认为true，用于支持websocket
        changeOrigin: true //默认为true,用于控制请求头中的host值
      }
    }
  }
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

使用：

<template>
	<div id="root">
		<button @click="getStudents">获取学生信息</button><br>
		<button @click="getCars">获取汽车信息</button><br>
	</div>
</template>

<script>
    import axios from 'axios'
	export default {
		name:'App',
		methods:{
			getStudents(){
				axios.get('http://localhost:8080/xiaowang/students').then(
					response =>{
						console.log('请求成功了！！！',response.data)
					},
					error =>{
                        console.log('请求失败了！！！',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response =>{
						console.log('请求成功了！！！',response.data)
					},
					error =>{
                        console.log('请求失败了！！！',error.message)
					}
				)
			}
		}
		
	}
</script>

说明：

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

slot插槽

1、使用场景

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

2、作用

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

3、分类

默认插槽、具名插槽、作用域插槽

4、使用方式

1.默认插槽：

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

2.具名插槽：

父组件中：
        <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.作用域插槽（也可以有名字）：

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

2. 具体编码：

   父组件中：
   <template>
   	<div class="container">
   
   		<Category title="游戏">
   			<template scope="aaa">
   				<ul>
   					<li v-for="(item, index) in aaa.games" :key="index">{{ item }}</li>
   				</ul>
   			</template>
   
   		</Category>
   		<Category title="游戏">
   			<template scope="{games}">
   				<ol>
   					<li style="color:red" v-for="(item, index) in games" :key="index">{{ item }}</li>
   				</ol>
   			</template>
   		</Category>
   
   		<Category title="游戏">
   			<template scope="aaa">
   				<h4 v-for="(item, index) in aaa.games" :key="index">{{ item }}</h4>
   			</template>
   		</Category>
   
   
   
   	</div>
   </template>
   
   
   子组件中：
   <template>
   <div class="category">
       <h3>{{ title }}分类</h3>
   
       <slot :games ="games">默认内容</slot>
   
    </div>
   </template>
   		
           <script>
               export default {
                   name:'Category',
                   props:['title'],
                   //数据在子组件自身
                   data() {
                       return {
                           games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                       }
                   },
               }
           </script>