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.

4e17700ec0386cee7a83b226d86d6bc7exec('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.

d477f9ce7bf77f53fbcf36bec1b69b7a

<view class="container">
    <picker mode="selector" range-key="name" range="{{provinces}}" bind:change="onChangeProvince">
        <view class="picker">
            {{province}}
        </view>
    </picker>
    
    <picker mode="selector" range-key="name" range="{{cities}}" bind:change="onChangeCity">
        <view class="picker">
            {{city}}
        </view>
    </picker>
    
    <picker mode="selector" range-key="name" range="{{areas}}">
        <view class="picker">
            {{area}}
        </view>
    </picker>
</view>

21c97d3a051048b8e55e3c8f199a54b2

855348821b2e8f2cc4b633bf98f064df

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

713e1e4451c8393b8e637e129c6b7b12

c9ccee2e6ea535a969eb3f532ad9fe89

3. Rumusan

Lulus Daripada contoh di atas, kita dapat melihat bahawa tidak rumit untuk menggunakan PHP dan UniApp untuk mencapai pautan data berbilang peringkat. Melalui pemprosesan data pada bahagian PHP dan penulisan halaman di sebelah UniApp, pemilih pautan berbilang peringkat yang mudah dan praktikal boleh dilaksanakan dengan hanya beberapa baris kod. Saya harap artikel ini dapat membantu anda dalam merealisasikan keperluan anda untuk pautan data berbilang peringkat.

Atas ialah kandungan terperinci Bagaimana untuk mencapai pautan data berbilang peringkat melalui PHP dan UniApp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!