说明:前后端代码不在同一个电脑上
后端接口地址:
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 在写代码请求,这个我试了不行,不知到什么原因,求教前端大佬!!!