Vue | Vue中的Ajax【vue脚手架配置代理服务器 + github案例 + slot插槽 】

解决开发环境Ajax跨域问题

前后端交互通常需要跨域，常用的跨域方法有cors、jsonp、代理服务器

vue脚手架可以通过 devServer.proxy 配置一个代理服务器

说明文档：https://cli.vuejs.org/zh/config/#devserver-proxy

引起跨域问题

1. 启动服务器获取请求的地址
   
2. 下载并引入axios
   下载：npm i axios
   引入：import axios from 'axios'
3. 为了获取学生信息，对 http://localhost:5000 发起Ajax请求
   
4. 报错，CORS ‘Access-Control-Allow-Origin’ 跨域 违背了同源策略
   
   

目前所处的是 http://localhost:8081/，而发请求联系的是 http://localhost:5000/，引起了跨域问题

• 什么是代理服务器？
  代理服务器跟我们前端所处的端口号一置，它会把自己伪装与网站同源的地址，所以当它请求完数据返回给前端的时候浏览器就不会拦截
  
• 如何用脚手架去配置代理服务器

配置代理服务器 方法一

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

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

   

2. 然后把脚手架给停掉，然后重新启动
   

3. 然后再把原先请求的地址改一下，就可以请求到跨域的数据了
   

说明：

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

注意：不能灵活的控制请求是否走代理
当你请求的资源8081本身就有，他就不会把请求转发给5000

配置代理服务器 方法二

编写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.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 关闭语法检查
  // 开启代理服务器 (方式一)
  /* devServer: {  
    proxy: 'http://localhost:5000'
    // 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:5000
  }, */

  // 开启代理服务器 (方式二)
  devServer: {
    proxy: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:5000',
        pathRewrite: { '^/api': '' }, // 匹配所有以/api开头的路径，然后把/api变为空字符串
        ws: true,  // 用于支持websocket 
        changeOrigin: true  // 用于控制请求头中的host值
      },
      '/foo': {
        target: 'http://localhost:5001',
        pathRewrite: { '^/foo': '' }, // 匹配所有以/foo开头的路径，然后把/foo变为空字符串

      }
    }
  }
})

App.vue

<template>
  <div>
    <button @click="getStudent">获取学生信息</button>
    <button @click="getCars">获取汽车信息</button>
  </div>
</template>

<script>
// 下载并引入axios
import axios from "axios";
export default {
  name: "App",
  methods: {
    getStudent() {
      axios.get("http://localhost:8081/api/students").then(
        (response) => {
          // 成功的形参是response
          console.log("请求成功了", response.data); // response是响应对象
          // response.data 是服务器给你的东西
        },
        (error) => {
          // 失败的形参是error
          console.log("请求失败了", error.message); // error.message失败的原因
        }
      );
    },
    getCars() {
      axios.get("http://localhost:8081/foo/cars").then(
        (response) => {
          // 成功的形参是response
          console.log("请求成功了", response.data); // response是响应对象
          // response.data 是服务器给你的东西
        },
        (error) => {
          // 失败的形参是error
          console.log("请求失败了", error.message); // error.message失败的原因
        }
      );
    },
  },
};
</script>

github用户搜索案例

静态组件

• 正常的引入html结构和css样式
• 这里需要引入bootstrap第三方样式，我们可以把bootstrap.css放入public/css文件夹，然后在public/index.html中link引入
  
• 把结构和样式放到对应的组件里面
• 注册和引入组件

动态组件

• 数据该给谁保管？
• List。List需要这些数据去遍历生成一个列表，把一堆用户的数据交给List去保管

接口地址：https://api.github.com/search/users?q=xxx

• 根据input框里的内容动态搜索，所以给input 框动态绑定v-model=“keyWord”，里面的keyWord就是输入的关键字，把这个关键词存放到Search.vue的数据里面

• 给Search按钮添加点击searchUsers事件

• 点击事件以后就开始请求数据，这里请求数据的链接可以用ES6中的模板字符串来写，可以把关键字传过去进行搜索

  

• 返回的数据，我们需要的是data.items
  

• 数据在Search.vue拿到，但是List.vue要用，开始组件间通信

• 组件间通信后，List.vue把收到的数据存放在他的数据里面

• 看我们需要哪些用户数据
  

• 在html结构里面开始渲染数据

• 要用v-for进行循环渲染每一个小li，然后对数据进行动态渲染，用户名用插值语法

完善案例

List不只呈现用户列表，还有：

1. welcome to use
2. Loading…
3. users
4. error
   

• 用dataObj对象来存储传过来的数据，list里面的数据用info对象来存储收过来的数据
  

• Search.vue 传的数据也用成对象形式
  

• 每当传过来的数据更新时，可以用扩展运算符来替换对象里面的同名属性
  

代码

List.vue

<template>
  <div class="row">
    <!-- 展示用户列表 -->
    <div
      class="card"
      v-for="user in info.users"
      :key="user.login"
      v-show="info.users.length"
    >
      <a :href="user.html_url" target="_blank">
        <img :src="user.avatar_url" style="width: 100px" />
      </a>
      <p class="card-text">{{ user.login }}</p>
    </div>
    <!-- 展示欢迎词 -->
    <h1 v-show="info.isFirst">Welcome to use</h1>
    <!-- 展示加载中 -->
    <h1 v-show="info.isLoading">Loading</h1>
    <!-- 展示错误信息 -->
    <h1 v-show="info.errMsg">请求出错了{{ info.errMsg }}</h1>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
      info: {
        isFirst: true, // 是否为初次展示
        isLoading: false, // 是否为正在等待中
        errMsg: "", // 如果错误，错误信息是?
        users: [],
      },
    };
  },
  mounted() {
    this.$bus.$on("updateListData", (dataObj) => {
      console.log("我是List组件收到了数据:", dataObj);
      // 将数据存进去
      this.info={...this.info,...dataObj} // 扩展运算符可以合并两个对象,有重复的话,后面会替换掉前面的
    });
  },
};
</script>

Search.vue

<script>
import axios from "axios";
export default {
  name: "Search",
  data() {
    return {
      keyWord: "",
    };
  },
  methods: {
    searchUsers() {
      // 请求前更新List的数据
      this.$bus.$emit("updateListData", {
        isFirst: false,
        isLoading: true,
        errMsg: "",
        users: [],
      });
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
        (response) => {
          // console.log('请求成功了',response.data.items);
          // 请求成功后更新List的数据
          this.$bus.$emit("updateListData", {
            isLoading: false,
            errMsg: "",
            users: response.data.items,
          });
        },
        (error) => {
          // 请求失败后List的数据
          console.log("请求失败了", error.nessage);
          this.$bus.$emit("updateListData", {
            isLoading: false,
            errMsg: error.nessage,
            users: [],
          });
        }
      );
    },
  },
};
</script>

vue-resource(了解)

常用发送ajax请求的方式有xhr、jQuery、axios、fetch，

还有一个就是vue-resource，它是一个vue插件，用法和axios一样，返回值也是Promise对象

以前1.0用得很多，只是官方不再维护了，现在官方推荐使用axios

1. 下载vue-resource 终端输入 npm i vue-resource
2. 引入插件和使用插件
   
3. 调用（使用方法和axios一样）
   

slot插槽

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

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

默认插槽

父组件中：
        
           
html结构1
        
子组件中：
        

为了实现该页面

具名插槽

如果有多个插槽…

父组件中：
        <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>

为了实现该页面：

多个同名插槽的话可以用template标签包含，解析的时候template不用解析，html结构变少

作用域插槽

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>

为了实现该页面：

不使用插槽