이 문서에서는 vue3 프런트엔드 프로젝트에서 데이터를 얻기 위해 백엔드 인터페이스를 요청하는 방법을 공유합니다. 비교적 간단하며 내용은 다음과 같습니다.
1. axios를 사용하여 백엔드 인터페이스 요청
먼저 npm에서 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를 통해 데이터를 얻은 후 이를 데이터 데이터에 할당하면 페이지는 표시할 데이터 데이터를 참조합니다.
<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. 페이지 테이블 렌더링
마지막으로 요청한 데이터를 표시하기 위해 .vue를 작성합니다. 사용법은 이전 글과 동일합니다. 데이터가 있는 한 타사 컴포넌트를 통해 페이지 표시를 쉽게 표시할 수 있습니다. 여기서는 element-plus를 사용합니다. .
<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>
최종 효과는 다음과 같습니다.본 글을 참고하여 기대치와 불일치하는 부분이 있다면 이는 본 글의 오타임에 틀림없으며, 각 컴포넌트의 공식 문서도 참고하시기 바랍니다.
