Techniques pour réaliser un affichage dynamique et une liaison de formulaires de données avec PHP et UniApp

Techniques pour PHP et UniApp pour réaliser un affichage et une liaison dynamiques de données dans des formulaires

Dans le développement Web, nous rencontrons souvent le besoin d'afficher dynamiquement le contenu d'un formulaire en fonction des données sélectionnées par l'utilisateur et d'obtenir des effets de liaison entre les éléments du formulaire. Cet article présentera comment utiliser PHP et UniApp pour implémenter cette fonction, dans le but d'aider les développeurs à mieux répondre à ce besoin.

1. Conception de la structure de la table de données

Tout d'abord, nous devons concevoir la structure de la table de la base de données pour stocker les données du formulaire. Supposons que notre formulaire contienne les champs suivants : nom, sexe, âge, profession. Nous pouvons créer une table de données nommée "form_data" et définir les champs correspondants.

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. Écrire du code back-end PHP

Ensuite, nous devons écrire du code back-end PHP pour traiter les données transmises par le front-end, ainsi qu'afficher et lier dynamiquement le contenu du formulaire. Tout d'abord, créez un fichier nommé "form.php" et écrivez le code suivant :

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

Le code ci-dessus se connecte d'abord à la base de données, puis récupère les données du formulaire transmises par le front-end et les insère dans la base de données. Enfin, la réponse JSON correspondante est renvoyée en fonction des résultats de l'insertion.

3. Écrire le code frontal d'UniApp

UniApp est un outil de développement multiplateforme basé sur Vue.js. Vous pouvez écrire du code une seule fois et générer des applications pour plusieurs plates-formes telles que iOS, Android et Web. Nous utilisons UniApp pour obtenir des effets d'affichage et de liaison de formulaires frontaux. Tout d'abord, créez un fichier nommé "form.vue" et écrivez le code suivant :

<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>

Le code ci-dessus définit un formulaire, utilise la directive v-model pour lier la valeur de l'entrée du formulaire et utilise la méthode uni.request pour envoyer les données du formulaire au backend. Mettez à jour le champ d'état en fonction de la réponse du backend pour afficher les résultats de soumission du formulaire.

4. Créez un projet UniApp et exécutez

Créez un projet UniApp via Vue CLI ou un outil de ligne de commande et placez le code front-end (form.vue) et le code back-end (form.php) dans le répertoire du projet. Ensuite, basculez vers le répertoire du projet UniApp dans le terminal et exécutez la commande suivante pour démarrer le projet :

npm run dev

À ce stade, vous pouvez accéder au projet UniApp en visitant http://localhost:8080, et compléter l'affichage du formulaire, les données liaison et soumission.

Pour résumer, cet article présente les techniques d'utilisation de PHP et UniApp pour obtenir un affichage et une liaison dynamiques des formulaires de données. En concevant correctement la structure des tables de la base de données, en écrivant le code back-end PHP et le code front-end UniApp, nous pouvons rapidement obtenir des effets d'interaction de formulaire conviviaux et stocker les données saisies par l'utilisateur dans la base de données. J'espère que cet article pourra aider les développeurs à mieux faire face à ces besoins et à appliquer les technologies correspondantes dans des projets réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!