Vue-50、Vue技术发送ajax请求。

一、使用axios发送ajax请求

1、在项目工程根目录中安装全局axios

npm i axios

2、引入axios

import  axios from 'axios'

3、在App.vue发送ajax请求。

<template>
  <div id="app">
       <button @click="getStudents">点击获取学生信息</button>
  </div>
</template>
<script>
import  axios from 'axios'
export default {
  name: 'App',
    data(){
      return{
      }
    },
    methods:{
        getStudents(){
            axios.get("http://localhost:5000/students").then(
                response=>{
                    console.log("请求成功了",response.data)
                },
                error=>{
                    console.log("请求失败了",error.message)
                }
            )
        }
    }
}
</script>

二、使用vue脚手架配置代理服务器解决【跨域问题】

1、配置【单个】proxy（方法一）

1. vue.config.js文件源码（如果vue项目根目录中没有就新建一个）

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  //开启代理服务器
  devServer:{
    proxy:'http://localhost:5000'
  }
});

2、App组件源码

<template>
  <div id="app">
       <button @click="getStudents">点击获取学生信息</button>
  </div>
</template>
<script>
import  axios from 'axios'
export default {
  name: 'App',
    data(){
      return{
      }
    },
    methods:{
        getStudents(){
            axios.get("http://localhost:8080/students").then(
                response=>{
                    console.log("请求成功了",response.data)
                },
                error=>{
                    console.log("请求失败了",error.message)
                }
            )
        }
    }
}
</script>

2、学生服务器源码

const express = require('express');
const app = express();

app.use((request,response,next)=>{
	console.log('有人请求服务器1了');
	console.log('请求来自于',request.get('Host'));
	console.log('请求的地址',request.url);
	next()
});

app.get('/students',(request,response)=>{
	const students = [
		{id:'001',name:'tom',age:18},
		{id:'002',name:'jerry',age:19},
		{id:'003',name:'tony',age:120},
	];
	response.send(students)
});

app.listen(5000,(err)=>{
	if(!err) console.log('服务器1启动成功了,请求学生信息地址为：http://localhost:5000/students');
});

单个代理服务器配置
优点：配置简单，请求资源时直接向前端（8080）发送请求即可。
缺点：不能配置多个代理，只能指定一个端口。
工作方式：向前端发送ajax请求，当本地静态资源（vue项目中的public文件）里不存在同名文件时，转向代理服务器。由代理服务器发送到目标服务器。

2、配置【多个】proxy（方法二）

1. vue.config.js文件源码

const { defineConfig } = require('@vue/cli-service');
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  //开启代理服务器(方式二)
  // devServer:{
  //   proxy:'http://localhost:5000'
  // }
  //方式二
  devServer: {
    proxy: {
      // 1、学生信息proxy
      '/studentInfo': {
        // 目标服务器
        target:'http://localhost:5000',
        // 路径重写，用正则表达式去除前缀
        pathRewrite:{'^/studentInfo':''},
        ws:true,//用于支持websocket
        /**
         * 当changeOrigin为true时，目标服务器收到的地址是localhost:5000。
         * 当changeOrigin为false时，目标服务器收到的地址是localhost:8080。
         * 本地端口当然是8080，为了跨域我们设置的代理服务器端口是5000。（不设置该option也默认为true）
         * 作用: 伪造一个端口号给目标服务器.
         */
        changeOrigin: true
      },
      // 2、汽车信息proxy
      '/carInfo': {
        target: 'http://localhost:5001',
        pathRewrite:{'^/carInfo':''},
      }
    }
  }
});

2. App组件源码

<template>
  <div id="app">
       <button @click="getStudents">点击获取学生信息</button>

      <button @click="getCarInfo">点击获取汽车信息</button>

  </div>
</template>
<script>
import  axios from 'axios'
export default {
  name: 'App',
    data(){
      return{
      }
    },
    methods:{
        getStudents(){
            axios.get(this.lujin+"studentInfo/students").then(
                response=>{
                    console.log("请求成功了",response.data)
                },
                error=>{
                    console.log("请求失败了",error.message)
                }
            )
        },
        getCarInfo(){
            axios.get(this.lujin+"carInfo/cars").then(
                response=>{
                    console.log("请求成功了",response.data);
                },
                error=>{
                    console.log("请求失败了",error.message);
                }
            )
        }
    }
}
</script>

多个代理服务器配置
优点: 可以灵活为本地请求匹配代理服务器.
缺点: 配置略微繁琐, 访问时还需要带上api前缀