So erreichen Sie eine mehrstufige Verknüpfung von Daten durch PHP und UniApp

So erreichen Sie eine mehrstufige Verknüpfung von Daten über PHP und UniApp

Einführung:
Bei der Entwicklung von Webanwendungen und mobilen Anwendungen müssen wir häufig eine mehrstufige Verknüpfung erreichen, z. B. die Auswahl von Provinzen und Städten von Produktkategorien usw. warten. In diesem Artikel wird erläutert, wie Sie mit PHP und UniApp eine mehrstufige Verknüpfung von Daten erreichen, und entsprechende Codebeispiele geben.

1. Datenvorbereitung
Bevor wir beginnen, müssen wir zunächst die für die mehrstufige Verknüpfung erforderlichen Daten vorbereiten. Angenommen, wir möchten einen Selektor für die dreistufige Verknüpfung von Provinzen und Gemeinden implementieren, müssen wir eine Datentabelle für Provinzen und Gemeinden vorbereiten.

Provinztabelle (Provinztabelle):
ID-Name
1 Provinz 1
2 Provinz 2
...

Stadttabelle (Städtetabelle):
ID Provinz_ID-Name
1 1 Stadt 1
2 1 Stadt 2
3 2 Stadt 3
4 2 Stadt 4
...

Regionstabelle (Bereichstabelle):
id city_id name
1 1 Bereich 1
2 1 Bereich 2
3 2 Bereich 3
4 2 Bereich 4
...

2. PHP-seitige Implementierung

1. Erstellen Sie eine PHP-Datei mit dem Namen getData.php, um Front-End-Anfragen zu verarbeiten und entsprechende Daten zurückzugeben.

4a21cbf7f9b9094025e898259c0de210exec('set name utf8');

// Provinzdaten abrufen
$provinces = $pdo->query('select * from Provinces' ) ->fetchAll(PDO::FETCH_ASSOC);

// Holen Sie sich die entsprechenden Stadtdaten basierend auf der Provinz-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);

}

// Holen Sie sich die entsprechenden Stadtdaten basierend auf der Stadt-ID. Entsprechende regionale Daten
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. Erstellen Sie im UniApp-Projekt eine Seite mit dem Namen MultiLevelLinkage zur Anzeige mehrstufiger Verknüpfungswähler.

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. Zusammenfassung
Bestanden Aus den obigen Beispielen können wir ersehen, dass es nicht kompliziert ist, PHP und UniApp zu verwenden, um eine mehrstufige Verknüpfung von Daten zu erreichen. Durch die Datenverarbeitung auf der PHP-Seite und das Schreiben von Seiten auf der UniApp-Seite kann ein einfacher und praktischer mehrstufiger Linkage-Selektor mit nur wenigen Codezeilen implementiert werden. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, Ihren Bedarf an mehrstufiger Datenverknüpfung zu erkennen.

Das obige ist der detaillierte Inhalt vonSo erreichen Sie eine mehrstufige Verknüpfung von Daten durch PHP und UniApp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!