Vue是一種流行的JavaScript框架，可以通過(guò)它輕松地構(gòu)建交互式Web應(yīng)用程序。在Vue中，我們可以使用HTTP庫(kù)來(lái)從后端API獲取數(shù)據(jù)。在本文中，我們將學(xué)習(xí)如何使用Vue和PHP的配合來(lái)獲取數(shù)據(jù)。

首先，讓我們創(chuàng)建一個(gè)名為“getData”的Vue實(shí)例，并在該實(shí)例的數(shù)據(jù)中定義一個(gè)空數(shù)組“dataArr”來(lái)存儲(chǔ)我們從服務(wù)器端獲取的數(shù)據(jù)。我們將使用axios庫(kù)發(fā)起HTTP請(qǐng)求，具體代碼如下：

new Vue({
el: '#app',
data: {
dataArr: []
},
methods: {
fetchData: function() {
axios.get('http://localhost/api.php')
.then(response => {
this.dataArr = response.data;
})
.catch(error => {
console.log(error);
});
}
},
mounted() {
this.fetchData();
}
});

在上面的代碼中，我們定義了一個(gè)名為“fetchData”的方法來(lái)發(fā)起HTTP請(qǐng)求。在Vue的生命周期中，我們使用“mounted”方法來(lái)調(diào)用這個(gè)方法，當(dāng)Vue實(shí)例創(chuàng)建后，它會(huì)被自動(dòng)調(diào)用。在此方法中，我們使用axios庫(kù)的“get”方法來(lái)獲取我們PHP API端點(diǎn)URL的數(shù)據(jù)，然后將它保存在我們先前定義的“dataArr”數(shù)組中。

現(xiàn)在，讓我們來(lái)看一下我們的服務(wù)器端代碼。在我們的PHP文件中，我們需要讀取數(shù)據(jù)庫(kù)中的數(shù)據(jù)并將其編碼為JSON格式，以便我們的Vue應(yīng)用程序可以使用。假設(shè)我們已經(jīng)連接到我們的數(shù)據(jù)庫(kù)并選擇了一個(gè)名為“employees”的表格。我們可以使用以下代碼來(lái)讀取和編碼數(shù)據(jù)：

$query = "SELECT * FROM employees";
$result = $conn->query($query);
$employees = array();
while ($row = $result->fetch_assoc()) {
array_push($employees, $row);
}
echo json_encode($employees, JSON_NUMERIC_CHECK);

在上面的PHP代碼中，我們首先使用SQL查詢從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，然后使用一個(gè)while循環(huán)來(lái)將每一行數(shù)據(jù)添加到一個(gè)名為“employees”的數(shù)組中。最后，我們使用PHP的“json_encode”函數(shù)將數(shù)組編碼為JSON格式并發(fā)送回Vue應(yīng)用程序。

現(xiàn)在，我們已經(jīng)準(zhǔn)備好使用Vue和PHP的組合來(lái)獲取數(shù)據(jù)了。我們啟動(dòng)我們的Vue應(yīng)用程序并訪問(wèn)它，我們應(yīng)該能夠看到從我們的PHP API端點(diǎn)獲取的數(shù)據(jù)。我們可以使用Vue的“v-for”指令來(lái)迭代我們的數(shù)據(jù)并在我們的頁(yè)面中顯示它。