한국어
한국어
소개:
현대 웹 개발에서 실시간 데이터로드 기능은 많은 응용 프로그램의 핵심 요구 사항 중 하나가되었습니다. 이 기사에서는 PHP 및 Vue.js 프레임 워크를 사용하여 데이터로드 기능을 구현하는 방법을 보여줍니다. 우리는 특정 코드 예제를 사용 하여이 기술을 신속하게 마스터하는 데 도움이됩니다.
시작하기 전에 PHP 및 VUE.JS가 설치되어 있는지 확인하십시오. 설치되지 않은 경우 공식 웹 사이트를 방문하여 다운로드하여 설치할 수 있습니다. 또한 사용자 데이터를 저장하기 위해 "사용자"라는 테이블이 포함 된 간단한 데이터베이스를 작성합니다.
먼저 "loaddata.php"라는 PHP 파일을 만듭니다. 이 파일은 데이터베이스에서 데이터를 쿼리하고 프론트 엔드로 반환하는 데 사용됩니다.
<?php
// 데이터베이스에 연결하십시오
$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
// 쿼리 데이터
$stmt = $db->query("SELECT * FROM users");
$users = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 반품JSON형식 데이터
header('Content-Type: application/json');
echo json_encode($users);
?>
위의 코드는 먼저 MySQL 데이터베이스에 연결되며 "사용자"라는 테이블의 모든 데이터를 쿼리합니다. 그런 다음 쿼리 결과를 JSON 형식의 프론트 엔드로 반환합니다.
다음으로 vue.js에서 인스턴스를 만들고 "마운트"라이프 사이클 후크를 사용하여 백엔드 API를 호출하고 데이터를로드하십시오.
new Vue({
el: '#app',
data: {
users: [] // 백엔드에서 얻은 데이터를 저장하는 데 사용됩니다
},
mounted() {
this.loadData(); // 페이지가로드되면 데이터로드 기능을 호출합니다.
},
methods: {
loadData() {
// 사용Axios라이브러리 보내기HTTP묻다
axios.get('loadData.php')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
}
}
});
이 코드에서는 vue 인스턴스를 생성하고 "mounted"라이프 사이클 후크에서 "loaddata"함수를 호출합니다. 이 기능은 Axios를 사용하여 HTTP 요청을 백엔드 인터페이스로 보내고 JSON 형식의 사용자 데이터를 얻고 VUE 인스턴스의 "사용자"배열을 업데이트합니다.
VUE의 "V-FOR"지침을 통해 HTML의 "사용자"배열을 가로 지르고 각 사용자의 정보를 표시 할 수 있습니다.
<div id="app">
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }}
</li>
</ul>
</div>
위의 코드에서는 "v-for"지시문을 통해 "사용자"배열을 통과하고 페이지에 각 사용자의 이름과 사서함을 표시합니다.
위의 단계를 완료 한 후 브라우저를 열고 HTML 파일에 액세스하려면 데이터베이스에서로드 된 모든 사용자 정보를 볼 수 있어야합니다. 모든 것이 잘 작동하면 페이지에 "사용자"테이블에 내용이 표시됩니다.
이 기사의 도입을 통해 PHP 및 Vue.js 프레임 워크를 사용하여 데이터 로딩 기능을 구현하는 방법을 배웠습니다. 백엔드 PHP 파일은 데이터베이스에서 데이터를 얻고 JSON 형식으로 돌아갑니다. Frontend vue 인스턴스는 Axios 라이브러리를 통해 데이터를 얻고 페이지에 표시합니다. 이 기사가 PHP 및 VUE를 더 잘 이해하고 사용하여 데이터로드 기능을 구현하는 데 도움이되기를 바랍니다.
