Teknik untuk merealisasikan paparan dinamik dan kaitan borang data dengan PHP dan UniApp

Teknik PHP dan UniApp merealisasikan paparan bentuk dinamik dan kaitan data

Dalam pembangunan web, selalunya ditemui kandungan borang perlu dipaparkan secara dinamik berdasarkan data yang dipilih oleh pengguna, dan kesan kaitan antara borang item mesti dicapai. Artikel ini akan memperkenalkan cara menggunakan PHP dan UniApp untuk melaksanakan fungsi ini, bertujuan untuk membantu pembangun bertindak balas dengan lebih baik kepada keperluan ini.

1. Reka bentuk struktur jadual data

Pertama, kita perlu mereka bentuk struktur jadual pangkalan data untuk menyimpan data borang. Katakan borang kami mengandungi medan berikut: nama, jantina, umur, pekerjaan. Kita boleh membuat jadual data bernama "form_data" dan menetapkan medan yang sepadan.

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. Tulis kod back-end PHP

Seterusnya, kita perlu menulis kod back-end PHP untuk memproses data yang diluluskan oleh front-end, serta memaparkan dan memautkan kandungan borang secara dinamik. Mula-mula, buat fail bernama "form.php" dan tulis kod berikut:

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

Kod di atas mula-mula bersambung ke pangkalan data, kemudian mendapatkan data borang yang diluluskan oleh bahagian hadapan dan memasukkannya ke dalam pangkalan data. Akhir sekali, respons JSON yang sepadan dikembalikan berdasarkan hasil sisipan.

3. Tulis kod bahagian hadapan UniApp

UniApp ialah alat pembangunan merentas platform berdasarkan Vue.js Anda boleh menulis kod sekali dan menjana aplikasi untuk berbilang platform seperti iOS, Android dan Web. Kami menggunakan UniApp untuk mencapai paparan bentuk hadapan dan kesan pautan. Mula-mula, cipta fail bernama "form.vue" dan tulis kod berikut:

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

Kod di atas mentakrifkan borang, menggunakan arahan model v untuk mengikat nilai input borang dan menggunakan kaedah uni.request untuk hantar data borang ke bahagian belakang. Kemas kini medan status mengikut respons bahagian belakang untuk memaparkan keputusan penyerahan borang.

4. Buat Projek UniApp dan Jalankan

Buat projek UniApp melalui Vue CLI atau alat baris arahan dan letakkan kod bahagian hadapan (form.vue) dan kod hujung belakang (form.php) dalam direktori projek. Kemudian, tukar ke direktori projek UniApp di terminal dan jalankan arahan berikut untuk memulakan projek:

npm run dev

Pada masa ini, anda boleh mengakses projek UniApp dengan melawati http://localhost:8080, dan lengkapkan paparan borang, data kaitan dan penyerahan.

Ringkasnya, artikel ini memperkenalkan teknik menggunakan PHP dan UniApp untuk merealisasikan paparan dinamik dan pautan borang data. Dengan mereka bentuk struktur jadual pangkalan data dengan betul, menulis kod back-end PHP dan kod front-end UniApp, kami boleh mencapai kesan interaksi bentuk mesra pengguna dengan cepat dan menyimpan data yang dimasukkan pengguna ke dalam pangkalan data. Saya harap artikel ini dapat membantu pembangun menangani keperluan tersebut dengan lebih baik dan menggunakan teknologi yang sepadan dalam projek sebenar.

Atas ialah kandungan terperinci Teknik untuk merealisasikan paparan dinamik dan kaitan borang data dengan PHP dan UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!