如何透過PHP和UniApp實現資料的多重連結

如何透過PHP和UniApp實現資料的多級連動

導言：
在開發Web應用程式和行動應用程式時，經常會遇到需要實現多級連動的需求，例如省市區的選擇、商品分類的選擇等等。本文將介紹如何使用PHP和UniApp來實現資料的多級聯動，並給出對應的程式碼範例。

一、 資料準備
在開始之前，我們首先需要準備好多級聯反應所需的資料。假設我們要實作一個省市區三級連動的選擇器，我們需要準備一個省市區的資料表。

省表（provinces表）：
id ​​name
1 省1
2 省2
...

城市表（cities表）：
id ​​province_id name
1 1 城市1
2 1 城市2
3 2 城市3
4 2 城市4
...

區域表（areas表)：
id ​​city_id name
1 1 區域1
2 1 區域2
3 2 區域3
4 2 區域4
...

#二、 PHP端實作

1. 建立一個名為getData.php的PHP文件，用於處理前端請求並傳回對應的資料。

dbe50f688788511a25a8259b1b72b972exec('set names utf8');

#// 取得省數據
$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的頁面，用於展示多級聯動的選擇器。

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

#三、 總結
透過以上的實例，我們可以看到使用PHP和UniApp實作資料的多重連結並不復雜。透過PHP端的資料處理和UniApp端的頁面編寫，只需要幾行程式碼就能夠實現一個簡單而實用的多級連動選擇器。希望本文能對你在實現資料多級連動的需求時有所幫助。

以上是如何透過PHP和UniApp實現資料的多重連結的詳細內容。更多資訊請關注PHP中文網其他相關文章！