Bagaimana untuk mencapai pautan data berbilang peringkat melalui PHP dan UniApp

Bagaimana untuk mencapai pautan berbilang peringkat data melalui PHP dan UniApp

Pengenalan:
Apabila membangunkan aplikasi web dan aplikasi mudah alih, kami sering menghadapi keperluan untuk mencapai hubungan berbilang peringkat, seperti pemilihan wilayah dan bandar, pemilihan kategori produk, dsb. tunggu. Artikel ini akan memperkenalkan cara menggunakan PHP dan UniApp untuk mencapai pautan data berbilang peringkat dan memberikan contoh kod yang sepadan.

1. Penyediaan data
Sebelum bermula, kami perlu menyediakan data yang diperlukan untuk pautan berbilang peringkat terlebih dahulu. Katakan kita ingin melaksanakan pemilih untuk hubungan tiga peringkat wilayah dan majlis perbandaran, kita perlu menyediakan jadual data untuk wilayah dan majlis perbandaran.

Meja wilayah (jadual wilayah):
nama id
1 wilayah 1
2 wilayah 2
...

meja bandar (jadual bandar):
nama id_provinsi
1 1 bandar 1
2 1 bandar 2
3 Bandar 3
4 2 Bandar 4
...

Jadual wilayah (jadual kawasan):
id nama_id kota
1 1 Kawasan 1
2 1 Kawasan 2
3 2 Kawasan 3
4 2 Kawasan 4
...

2. Pelaksanaan sebelah PHP

1. Buat fail PHP bernama getData.php untuk memproses permintaan bahagian hadapan dan mengembalikan data yang sepadan.

header('Content-Type: application/json;charset=utf-8');
// Sambung ke pangkalan data
$pdo = new PDO('mysql:host=localhost;dbname=test ' , 'root', 'password');
$pdo->exec('set names utf8');

// Dapatkan data wilayah
$provinces = $pdo->query('select * from provinces' ) ->fetchAll(PDO::FETCH_ASSOC);

// Dapatkan data bandar yang sepadan berdasarkan ID wilayah
jika (isset($_GET['province_id'])) {

$provinceId = $_GET['province_id'];
$cities = $pdo->query("select * from cities where province_id = $provinceId")->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($cities);

}

// Dapatkan data bandar yang sepadan berdasarkan ID bandar Data serantau yang sepadan
jika (isset($_GET['city_id'])) {

$cityId = $_GET['city_id'];
$areas = $pdo->query("select * from areas where city_id = $cityId")->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($areas);

}
?>

2. Dalam projek UniApp, buat halaman bernama MultiLevelLinkage untuk dipaparkan pemilih pautan berbilang peringkat.

export default {
    data() {
        return {
            province: '',   // 省份
            city: '',       // 城市
            area: '',       // 区域
            provinces: [],  // 省份数据
            cities: [],     // 城市数据
            areas: []       // 区域数据
        }
    },
    mounted() {
        this.getProvinces()
    },
    methods: {
        // 获取省份数据
        getProvinces() {
            uni.request({
                url: 'http://localhost/getData.php',
                success: (res) => {
                    this.provinces = res.data
                }
            })
        },
        // 根据省份ID获取对应的城市数据
        getCities(provinceId) {
            uni.request({
                url: 'http://localhost/getData.php?province_id=' + provinceId,
                success: (res) => {
                    this.cities = res.data
                }
            })
        },
        // 根据城市ID获取对应的区域数据
        getAreas(cityId) {
            uni.request({
                url: 'http://localhost/getData.php?city_id=' + cityId,
                success: (res) => {
                    this.areas = res.data
                }
            })
        },
        // 省份选择器变化时的事件
        onChangeProvince(event) {
            const index = event.detail.value
            this.province = this.provinces[index].name
            this.city = ''
            this.area = ''
            this.getCities(this.provinces[index].id)
        },
        // 城市选择器变化时的事件
        onChangeCity(event) {
            const index = event.detail.value
            this.city = this.cities[index].name
            this.area = ''
            this.getAreas(this.cities[index].id)
        }
    }
}