This article shares how to request the backend interface to obtain data in the vue3 front-end project. Relatively simple, the content is as follows:
1. Use axios to request the backend interface
First, npm install axios, add axios dependency, and rely on it to request the backend interface. It is basically equivalent to using jquery to send ajax.
# src/main.js
import axios from 'axios'
import vueAxios from 'vue-axios'
createApp(App).use(ElementPlus).use(vueAxios,axios).mount("#app");
axios is an independent library for easy calling. Here we use vue-axios to initiate backend requests through this.axios. The backend interface is as shown in the figure:
after obtaining the data through axios, assign it to the data data, and the page references the data data for display.
<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. Configure proxy
Sending a request directly to localhost:8787/getAllUsers will cause cross-domain problems. Usually the front-end and back-end are deployed separately. Even if they are deployed on one server, the ports are different, so there are cross-domain problems (regardless of throwing the front-end dist into the back-end). Semi-detached situation in the server).
Configure the proxy in the vue.config.js file (you don't need to create a new one) and forward the local path request to the target address, so that you can circumvent the browser's same-origin policy. The same origin is only a limitation of the browser. Even cross-domain backends can still receive request data.
module.exports = {
devServer: {
port: 80,
proxy: {
'/api': {
target: 'http://localhost:8787',
secure: true,
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
}
},
},
}
3. Page table rendering
Finally, write a .vue to display the request data. The usage method is the same as the previous article. As long as there is data, the page display can be easily displayed through third-party components. Element-plus is used here.
<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>
The final effect is as follows. If there is any inconsistency with expectations when referring to this article, it must be that this article was written incorrectly. Please also refer to the official documentation of each component.
