How to achieve multi-level linkage of data through PHP and UniApp

How to achieve multi-level linkage of data through PHP and UniApp

Introduction:
When developing web applications and mobile applications, we often encounter the need to achieve multi-level linkage, such as provinces and municipalities selection, product classification selection, etc. This article will introduce how to use PHP and UniApp to achieve multi-level linkage of data, and give corresponding code examples.

1. Data preparation
Before starting, we first need to prepare the data required for multi-level linkage. Suppose we want to implement a selector for three-level linkage of provinces and municipalities, we need to prepare a data table for provinces and municipalities.

Province table (provinces table):
id name
1 Province 1
2 Province 2
...

City table (cities table):
id province_id name
1 1 City 1
2 1 City 2
3 2 City 3
4 2 City 4
...

region table (areas table ):
id city_id name
1 1 area 1
2 1 area 2
3 2 area 3
4 2 area 4
...

II. PHP side implementation

1. Create a PHP file named getData.php to process front-end requests and return corresponding data.

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

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

// Get the corresponding city data based on the province 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);

}

// Get the corresponding regional data based on the city 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. In the UniApp project, create a page named MultiLevelLinkage to display multi-level linkage selectors .

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

<script></script>

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

.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;
}

3. Summary
Through the above examples, we can see that using PHP and UniApp to achieve multi-level linkage of data It's not complicated. Through data processing on the PHP side and page writing on the UniApp side, a simple and practical multi-level linkage selector can be implemented with only a few lines of code. I hope this article can be helpful to you in realizing your needs for multi-level data linkage.

The above is the detailed content of How to achieve multi-level linkage of data through PHP and UniApp. For more information, please follow other related articles on the PHP Chinese website!