Comment réaliser une liaison de données à plusieurs niveaux via PHP et UniApp

Comment réaliser une liaison de données à plusieurs niveaux via PHP et UniApp

Introduction :
Lors du développement d'applications Web et d'applications mobiles, nous rencontrons souvent le besoin de réaliser une liaison à plusieurs niveaux, comme la sélection des provinces et des villes, la sélection des catégories de produits, etc. attendez. Cet article expliquera comment utiliser PHP et UniApp pour réaliser une liaison de données à plusieurs niveaux et donnera des exemples de code correspondants.

1. Préparation des données
Avant de commencer, nous devons d'abord préparer les données requises pour la liaison à plusieurs niveaux. Supposons que nous souhaitions mettre en œuvre un sélecteur pour le couplage à trois niveaux des provinces et des municipalités, nous devons préparer un tableau de données pour les provinces et les municipalités.

Tableau des provinces (tableau des provinces) :
id name
1 province 1
2 province 2
...

tableau des villes (tableau des villes) :
id province_id name
1 1 city 1
2 1 city 2
3 2 Ville 3
4 2 Ville 4
...

Tableau des régions (tableau des zones) :
id city_id name
1 1 Zone 1
2 1 Zone 2
3 2 Zone 3
4 2 Zone 4
...

2. Implémentation côté PHP

1. Créez un fichier PHP nommé getData.php pour traiter les requêtes frontales et renvoyer les données correspondantes.

5376f4bdb3ffcf34837d961b29ee915fexec('set names utf8');

// Obtenir les données de la province
$provinces = $pdo->query('select * from provinces' ) ->fetchAll(PDO::FETCH_ASSOC);

// Obtenez les données de la ville correspondantes en fonction de l'ID de la province
if (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);

}

// Get les données de la ville correspondantes basées sur l'ID de la ville Données régionales correspondantes
if (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. Dans le projet UniApp, créez une page nommée MultiLevelLinkage pour afficher sélecteur de liaison multi-niveaux.

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

3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

2cacc6d41bbb37262a98f745aa00fbf0

c9ccee2e6ea535a969eb3f532ad9fe89

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

.picker {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background-color: #f5f5f5;
    margin-bottom: 20px;
}

531ac245ce3e4fe3d50054a55f265927

3.Résumé
Réussi À partir des exemples ci-dessus, nous pouvons voir qu'il n'est pas compliqué d'utiliser PHP et UniApp pour réaliser une liaison de données à plusieurs niveaux. Grâce au traitement des données côté PHP et à l'écriture de pages côté UniApp, un sélecteur de liens multi-niveaux simple et pratique peut être implémenté avec seulement quelques lignes de code. J'espère que cet article pourra vous être utile pour réaliser vos besoins en matière de liaison de données à plusieurs niveaux.

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!