Vue 利用axios请求后台数据

说明：前后端代码不在同一个电脑上

后端接口地址：

http://ip:8888/Xqy/user/queryUser?name=xqy
1

一：准备工作

导包：

npm i axios
1

安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use()，但是 axios 并不能 use（axios并没有install 方法，所以是不能使用vue.use()方法的，只要没有install方法都不能使用Vue.use()），只能每个需要发送请求的组件中即时引入

import axios from 'axios'
1

二：具体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

开启代理服务请求后台数据过程：利用Axios获取数据方法 jing是代理是否发送的前缀 ,一般把后台端口后面的(jing)作为一个代理服务是否把请求发到服务器的标志，如果带有jing,代理服务器就利用pathRewrite: { '^/jing': '' },属性把

http://localhost:8080/jing/Xqy/user/queryUser?name=xqy
1

中

http://localhost:8080/jing
1

替换为'' 然后用真正服务器域名，ip,端口（http://192.168.0.104:8888）和 /Xqy/user/queryUser?name=xqy一块拼接成真正的地址：

http://192.168.0.104:8888/Xqy/user/queryUser?name=xqy
1

vue.config.js 中加入开启代理的代码（用于请求另一台电脑后端代码）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  //开启代理服务器(方式二)可以配置多种代理
  devServer: {
    proxy: {
      //jing 是个请求时的前缀，如果是则代理服务器发送给服务器(http://192.168.0.104:8888)与App.vue中的axous里面地址名称对应，如果不是则停止
      '/jing': {
        target: 'http://192.168.0.104:8888',
        //目的防止服务器拿到请求后带有atguigu,这样后台路径就错了，所以通过这个属性给去掉
        pathRewrite: {
          '^/jing': ''
        },
        //ws: true, //ws用于支持websocket的
        changeOrigin: true  //默认为true 用于控制请求头中的host值   代理服务器是否说谎，为false代理服务器端口实话实说axios中端口8080，为true说谎则马上把8080改为服务器的端口8888
      }
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

说明：只有vue-cli脚手架创建的项目(vue create demo)自带vue.config.js文件，这样写请求是可以请求到数据的，但是如果不是这样创建的，直接自己建一个vue.config.js 在写代码请求，这个我试了不行，不知到什么原因，求教前端大佬！！！

多种axios写法参考和公共的axios不用每次都导入包