Vue2脚手架配置代理--第4节

一、vue脚手架配置代理

服务器代理

用的最多的是axios，promise风格，封装xhr；

fetch致命问题：IE浏览器兼容问题；

vue推荐用axios；

用jquery发请求，其中多半是dom，而不是请求，冗余问题

1、方法一

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

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

说明：

*1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

*2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

*3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

getStudents(){
// 请求发给代理服务器，端口号和源端口号一致，遵循同源策略；
//axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){

问题：跨域；

违背同源策略：必须一致，【协议名、主机名、端口号】

http://localhost:8080

跨域问题：请求已经发出去了，而且服务器返回了数据，但是浏览器拿不到数据

解决跨域问题：

1.cors 【后端配置，使得所有人都可以跟服务器要数据】

2.jsonp script src get 【用得少，只能处理get请求】

3.代理服务器 【服务器之间传数据，不用ajax前端技术，而是传统的http请求

粉色是代理服务器，开启方法：

• nginx，要熟悉后端技术；

• vue-cli脚手架配置 很简单
  
  

public中的内容是8080源服务器自身的内容，代理服务器

http://localhost:8080/favicon.ico 可以直接发请求获取资源

http://localhost:8080/index.html http://localhost:8080 默认将index.html文件返回

缺点：

• 不能配置多个代理，中间的代理服务器只能将请求发给一个服务器，不能发给多个服务器
• 自身的东西发不了请求，不走代理

2、方法二

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

module.exports = {
  devServer: {
   proxy: {
   '/api1': {// 匹配所有以 '/api1'开头的请求路径
   target: 'http://localhost:5000',// 代理目标的基础路径
   changeOrigin: true,
	// 正则表达式匹配，将api1开头的字符串，替换成空串
    pathRewrite: {'^/api1': ''}
   },
   '/api2': {// 匹配所有以 '/api2'开头的请求路径
    target: 'http://localhost:5001',// 代理目标的基础路径
    changeOrigin: true,
    pathRewrite: {'^/api2': ''}
   }
  }
 }
}

/*
  changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
  changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
  changeOrigin默认值为true
*/
axios.get('http://localhost:8080/demo/cars').then(
	response => {
	console.log('请求成功了',response.data)},
	error => {
	console.log('请求失败了',error.message)})
			}


//开启代理服务器（方式二）
	devServer: {
    proxy: {
      // 判断请求前缀，走代理
      '/atguigu': {
        target: 'http://localhost:5000',
		pathRewrite:{'^/atguigu':''},
     // ws: true, //用于支持websocket，用于代理服务器说谎，true则跟目的服务器说是5000端口，否则自称是8000端口，默认是true，react中是false
     // changeOrigin: true //用于控制请求头中的host值
      },
      '/demo': {
        target: 'http://localhost:5001',
				pathRewrite:{'^/demo':''},
        // ws: true, //用于支持websocket
        // changeOrigin: true //用于控制请求头中的host值
      }
    }
  }            

说明：

*1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

*2. 缺点：配置略微繁琐，请求资源时必须加前缀。

将前缀错误的传给了服务器

二、GitHub案例

1.静态页面

2.动态页面

总共数据由81977，返回的是不完整的数据，返回的数据有30条

3.完善案例

list的四种情况，

三、插槽

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

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

*3. 使用方式：
（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. 具体编码：

父组件中：
<Category>
​   <template scope="scopeData">
​      <!-- 生成的是ul列表 -->
​      <ul>
​         <li v-for="g in scopeData.games" :key="g">{{g}}</li>
​      </ul>
​   </template>
</Category>


<Category>
​   <template slot-scope="scopeData">
​         <!-- 生成的是h4标题 -->
​         <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>

整理不易🚀🚀，关注和收藏后拿走📌📌欢迎留言🧐👋📣
欢迎专注我的公众号AdaCoding 和 Github：AdaCoding123