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

后端接口地址:

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

一:准备工作

导包:

npm i axios

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

import axios from 'axios'

二:具体代码

<script>

import axios from 'axios'
import CountVuex from './components/vuex/CountVuex.vue'

export default {
  name: 'App',
  components: {
    CountVuex
  },
  methods:{
     getDataForAxios(){
      axios.get('http://localhost:8080/jing/Xqy/user/queryUser?name=xqy').then(
         reponse =>{
           console.log("请求数据成功了:",reponse.data)
         },
         error => {
          console.log("请求数据失败了:",error.message)
         }

      )
    }
  }
}
</script>

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

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

http://localhost:8080/jing

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

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

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
      }
    }
  }
})

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

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

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐