Implementing Data Merging with PHP Backend and Vue Frontend
This article demonstrates how to implement a data merging feature by creating MySQL tables, building a PHP API that retrieves and combines records from two tables, and developing a Vue.js front‑end that fetches and displays the merged data, complete with full code examples.
Data merging is a common development requirement; this guide shows how to achieve it using a PHP backend and a Vue.js frontend.
Preparation
Set up a server environment with PHP and MySQL, choose a code editor, and ensure Vue.js is available via npm or CDN.
Backend API Implementation
Database tables
Create two MySQL tables, tableA and tableB, with appropriate columns.
CREATE TABLE tableA (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
age INT
);
CREATE TABLE tableB (
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100),
gender VARCHAR(10)
);PHP endpoint
Write a PHP script that connects to the database, fetches data from both tables, merges the arrays, and returns JSON.
<?php
header('Content-Type: application/json');
// Database connection
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// Fetch data from tableA
$aData = [];
$sql = "SELECT * FROM tableA";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$aData[] = $row;
}
}
// Fetch data from tableB
$bData = [];
$sql = "SELECT * FROM tableB";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$bData[] = $row;
}
}
// Merge and output
$mergedData = array_merge($aData, $bData);
echo json_encode($mergedData);
$conn->close();
?>Frontend Page Implementation
Vue instance
In an HTML file, include Vue.js, create a Vue instance that fetches the API data on mount, and renders the merged list.
<!DOCTYPE html>
<html>
<head>
<title>数据合并功能示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in mergedData">{{ item.name }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
mergedData: []
},
mounted() {
this.fetchData();
},
methods: {
fetchData() {
fetch('api.php')
.then(response => response.json())
.then(data => {
this.mergedData = data;
});
}
}
})
</script>
</body>
</html>Testing
Deploy the PHP and HTML files on a running server, open the page in a browser, and verify that the merged data is displayed.
Conclusion
The tutorial provides a complete example of combining PHP and Vue to merge data from two MySQL tables, offering developers a practical pattern for similar requirements.
Signed-in readers can open the original source through BestHub's protected redirect.
This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.
php Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.