PHPとUniAppでデータの多層連携を実現する方法

PHP と UniApp を使用してデータの多層連携を実現する方法

はじめに:
Web アプリケーションやモバイル アプリケーションを開発する場合、州などの多層連携を実現する必要があることがよくあります。市区町村選択、品目分類選択などこの記事では、PHP と UniApp を使用してデータの多層連携を実現する方法と、対応するコード例を紹介します。

1. データの準備
作業を始める前に、多階層連携に必要なデータを準備する必要があります。道州と市区町村を3段階で連携させるセレクタを実装したいとすると、道州と市区町村のデータテーブルを用意する必要があります。

県テーブル (県テーブル):
id ​​名
1 県 1
2 県 2
...

市テーブル (都市テーブル):
id ​​州 ID 名
1 1 市 1
2 1 市 2
3 2 市 3
4 2 市 4
...

地域テーブル (エリア テーブル) ):
id ​​city_id name
1 1 エリア 1
2 1 エリア 2
3 2 エリア 3
4 2 エリア 4
...

II. PHP 側の実装

1. フロントエンド要求を処理し、対応するデータを返す getData.php という名前の PHP ファイルを作成します。

ee74f2036fb166873d46563f0ca7ba83exec('set names utf8');

// Get州データ
$provinces = $pdo->query('select * from Provinces')->fetchAll(PDO::FETCH_ASSOC);

// 州に基づいて対応する都市データを取得しますID
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);

}

// 都市に基づいて対応する地域データを取得します ID
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. UniApp プロジェクトで、マルチレベルのリンケージを表示するために MultiLevelLinkage という名前のページを作成します。セレクター 。

7ab6b075cc6c7bcbe15d0b9685c6f1da

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

3399104e6938bdac11bae5f4688ce7ba

4e07eaec52b67b6abe4024604b22f1f1

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

fa53fefa8eafc7c836ea46f2cc284f0d

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. 概要
上記の例を通じて、PHP と UniApp を使用してマルチレベルの連携を実現できることがわかります。データの処理は複雑ではありません。 PHP側でのデータ処理とUniApp側でのページ書き込みにより、シンプルで実用的なマルチレベルリンケージセレクターをわずか数行のコードで実装できます。この記事が、多層データ連携のニーズを実現するのに役立つことを願っています。

以上がPHPとUniAppでデータの多層連携を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。