Home  >  Article  >  Backend Development  >  How to achieve multi-level linkage of data through PHP and UniApp

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

WBOY
WBOYOriginal
2023-07-04 15:36:10817browse

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.

e76cb4e0ae020902b6251f85f2828f7fexec('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);

}
?>

  1. In the UniApp project, create a page named MultiLevelLinkage to display multi-level linkage selectors .

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn