本文分享一下在vue3前端项目中请求后端接口获取数据。比较简单,内容如下:
1、使用axios请求后端接口
首先npm install axios,添加axios依赖,就靠它来请求后端接口了,基本等同于使用jquery发ajax。
# src/main.js
import axios from 'axios'
import vueAxios from 'vue-axios'
createApp(App).use(ElementPlus).use(vueAxios,axios).mount("#app");
axios是一个独立的库,方便调用,这里使用vue-axios,通过this.axios发起后端请求。后端接口如图所示:
通过axios获取到数据后赋值到data数据即可,页面引用data数据进行展示。
<script>
export default{
data(){
return {
signName: 'star',
users: []
}
},
methods:{
getUsers(){
this.axios.get('/api/getAllUsers')
.then((res)=>{
console.log(JSON.stringify(res.data.records))
this.users = res.data.records
})
.catch(function (error) {
console.log(error);
});
}
},
mounted () {
this.getUsers()
}
}
</script>
2、配置代理
直接向localhost:8787/getAllUsers发请求会产生跨域问题,通常前端和后端是分开部署的,即使部署在一台服务器端口也不同,所以存在跨域问题(不考虑将前端dist扔到后端服务器里半分离情况)。
在vue.config.js文件中配置代理(没有新建一个即可),将本地路径请求转发到目标地址,这样就可以规避掉浏览器同源策略。同源只是浏览器的限制,即便跨域后端还是可以收到请求数据的。
module.exports = {
devServer: {
port: 80,
proxy: {
'/api': {
target: 'http://localhost:8787',
secure: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}
},
},
}
3、页面table渲染
最后写一个.vue将请求数据展示一下,使用方式和上篇相同,只要有数据了页面展示可以通过第三方组件轻松展示,这里使用element-plus。文章来源:https://www.toymoban.com/news/detail-588302.html
<template>
<el-table :data="users" style="width: 100%">
<el-table-column prop="id" label="编号" width="120" />
<el-table-column prop="name" label="姓名" width="120" />
<el-table-column prop="age" label="年龄" width="120" />
<el-table-column prop="city" label="城市" />
</el-table>
</template>
最终效果如下,如果参照本文出现任何与预期不一致的地方,那一定是本文写错了,还请参见各个组件官方文档。
文章来源地址https://www.toymoban.com/news/detail-588302.html
到了这里,关于写给后端开发的『vue3』请求后端接口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!