Implementing Data Merging with PHP Backend and Vue Frontend

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.

<code>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)
);</code>

PHP endpoint

Write a PHP script that connects to the database, fetches data from both tables, merges the arrays, and returns JSON.

<code><?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();
?>
</code>

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.

<code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;数据合并功能示例&lt;/title&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;div id="app"&gt;
        &lt;ul&gt;
            &lt;li v-for="item in mergedData"&gt;{{ item.name }}&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;script&gt;
        new Vue({
            el: '#app',
            data: {
                mergedData: []
            },
            mounted() {
                this.fetchData();
            },
            methods: {
                fetchData() {
                    fetch('api.php')
                        .then(response => response.json())
                        .then(data => {
                            this.mergedData = data;
                        });
                }
            }
        })
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>

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.