Techniques for realizing dynamic display and linkage of data forms with PHP and UniApp

Techniques for PHP and UniApp to realize dynamic display and linkage of data forms

In web development, we often encounter the need to dynamically display the form content based on the data selected by the user, and realize the interaction between the form items. Linkage effect. This article will introduce how to use PHP and UniApp to implement this function, aiming to help developers better respond to this need.

1. Data table structure design

First, we need to design the structure of the database table to store form data. Suppose our form contains the following fields: name, gender, age, occupation. We can create a data table named "form_data" and set the corresponding fields.

CREATE TABLE `form_data` (
    `id` INT AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(50) NOT NULL,
    `gender` ENUM('male', 'female') NOT NULL,
    `age` INT NOT NULL,
    `occupation` VARCHAR(50) NOT NULL
);

2. Write PHP back-end code

Next, we need to write PHP back-end code to process the data passed by the front-end, as well as dynamically display and link the form content. First, create a file named "form.php" and write the following code:

<?php
header('Content-Type: application/json');

// 连接数据库
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 获取表单数据
$name = $_POST['name'];
$gender = $_POST['gender'];
$age = $_POST['age'];
$occupation = $_POST['occupation'];

// 插入记录
$sql = "INSERT INTO form_data (name, gender, age, occupation) VALUES ('$name', '$gender', $age, '$occupation')";
$result = $conn->query($sql);
if ($result === TRUE) {
    echo json_encode(['status' => 'success', 'message' => '表单提交成功']);
} else {
    echo json_encode(['status' => 'error', 'message' => '表单提交失败']);
}

$conn->close();
?>

The above code first connects to the database, then gets the form data passed by the front end and inserts it into the database. Finally, the corresponding JSON response is returned based on the insertion results.

3. Writing UniApp front-end code

UniApp is a cross-platform development tool based on Vue.js. It can write code once and generate multiple code for iOS, Android and Web. Platform applications. We use UniApp to achieve front-end form display and linkage effects. First, create a file named "form.vue" and write the following code:

<template>
    <div>
        <input type="text" v-model="name" placeholder="姓名">
        <select v-model="gender">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
        <input type="number" v-model="age" placeholder="年龄">
        <select v-model="occupation">
            <option value="doctor">医生</option>
            <option value="teacher">教师</option>
            <option value="engineer">工程师</option>
        </select>
        <button @click="submitForm">提交</button>
        <div v-if="status === 'success'">
            表单提交成功
        </div>
        <div v-if="status === 'error'">
            表单提交失败
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            gender: 'male',
            age: '',
            occupation: '',
            status: ''
        };
    },
    methods: {
        submitForm() {
            // 发送表单数据到后端
            uni.request({
                url: '/form.php',
                method: 'POST',
                data: {
                    name: this.name,
                    gender: this.gender,
                    age: this.age,
                    occupation: this.occupation
                },
                success: (res) => {
                    // 处理后端响应
                    const data = res.data;
                    this.status = data.status;
                },
                fail: () => {
                    this.status = 'error';
                }
            });
        }
    }
};
</script>

The above code defines a form, uses the v-model directive to bind the values ​​of the form input, and uses uni. The request method sends form data to the backend. Update the status field according to the backend response to display the form submission results.

4. Create UniApp project and run

Create a UniApp project through Vue CLI or command line tool, and combine the front-end code (form.vue) and back-end code (form .php) is placed in the project directory. Then, switch to the UniApp project directory in the terminal and run the following command to start the project:

npm run dev

At this time, you can access the UniApp project by accessing http://localhost:8080 and complete form display and data linkage. and submit.

To sum up, this article introduces the techniques of using PHP and UniApp to realize the dynamic display and linkage of data forms. By properly designing the database table structure, writing PHP back-end code and UniApp front-end code, we can quickly achieve user-friendly form interaction effects and store user-entered data into the database. I hope this article can help developers better cope with such needs and apply corresponding technologies in actual projects.

The above is the detailed content of Techniques for realizing dynamic display and linkage of data forms with PHP and UniApp. For more information, please follow other related articles on the PHP Chinese website!