vue3.0使用axios访问后台接口
vue3.0:使用axios访问后台接口添加依赖:axios和vue-axios在package.json中显示为:"dependencies": {"axios": "^0.21.1","core-js": "^3.6.5","element-plus": "^1.0.2-beta.28","less": "^4.1.1","less-loader": "^10.0.1","vue": "^3.
·
vue3.0:使用axios访问后台接口
添加依赖:axios和vue-axios
在package.json中显示为:
"dependencies": {
"axios": "^0.21.1",
"core-js": "^3.6.5",
"element-plus": "^1.0.2-beta.28",
"less": "^4.1.1",
"less-loader": "^10.0.1",
"vue": "^3.0.0",
"vue-axios": "^3.2.4",
"vue-router": "^4.0.0-0"
},
配置main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import installElementPlus from './plugins/element'
import './assets/css/global.css'
import axios from 'axios'
const app = createApp(App)
app.config.globalProperties.$axios = axios
axios.defaults.baseURL = "http://localhost:8088" //后端地址
installElementPlus(app)
app.use(router).mount('#app')
后端接口为(springboot):
package com.example.backproject.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class TestController {
@RequestMapping("/test")
public String test(){
return "test my test controller";
}
}
在前端需要访问后端接口的地方写:
const {
data: res
} = await this.$axios.post("test");
console.log(res);
即可在控制台打印:
更多推荐
已为社区贡献1条内容
所有评论(0)