mysql数据库省市县三级联动数据

原创

mob64ca12d0371b 2024-11-01 08:49:11 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12d0371b的原创作品，请联系作者获取转载授权，否则将追究法律责任

实现MySQL数据库的省市县三级联动数据

在很多前端应用中，我们常常需要处理区域信息，其中最常见的就是省、市、县三级联动的数据展示。这种联动能够让用户选择地区时的操作更加便捷。接下来，我将向你介绍实现这一功能的流程、代码以及注意事项，使你能够轻松掌握这个知识点。

整体流程

实现省市县三级联动的流程如下表格所示：

步骤	任务说明
1. 建立数据库	创建数据库并添加省市县数据表
2. 连接数据库	在应用程序中连接MySQL数据库
3. 获取省数据	从数据库中获取省的数据并展示
4. 获取市数据	根据用户选择的省，获取该省下的市数据
5. 获取县数据	根据用户选择的市，获取该市下的县数据
6. 前端界面实现	将数据展示在前端并实现联动效果

步骤详解

步骤1：建立数据库

首先，我们需要在MySQL中创建相应的数据库及数据表，以存储省市县的数据。假设我们的数据库名称为geography。

CREATE DATABASE geography;  -- 创建数据库
USE geography;  -- 使用该数据库

-- 创建省表
CREATE TABLE provinces (
    id INT PRIMARY KEY AUTO_INCREMENT,  -- 省份ID
    name VARCHAR(50) NOT NULL  -- 省份名称
);

-- 创建市表
CREATE TABLE cities (
    id INT PRIMARY KEY AUTO_INCREMENT,  -- 市ID
    name VARCHAR(50) NOT NULL,  -- 市名称
    province_id INT,  -- 所属省份ID
    FOREIGN KEY (province_id) REFERENCES provinces(id)  -- 与省表建立外键关系
);

-- 创建县表
CREATE TABLE districts (
    id INT PRIMARY KEY AUTO_INCREMENT,  -- 区/县ID
    name VARCHAR(50) NOT NULL,  -- 区/县名称
    city_id INT,  -- 所属市ID
    FOREIGN KEY (city_id) REFERENCES cities(id)  -- 与市表建立外键关系
);

步骤2：连接数据库

在你的应用程序中，需要连接到MySQL数据库。这里以使用Python的Flask框架为例。

from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql+pymysql://username:password@localhost/geography'
db = SQLAlchemy(app)  # 创建数据库连接

步骤3：获取省数据

我们需要从数据库中提取省的数据以便在前端展示。

@app.route('/provinces', methods=['GET'])
def get_provinces():
    provinces = db.session.execute('SELECT * FROM provinces').fetchall()  # 查询所有省份
    return {'provinces': [dict(row) for row in provinces]}  # 将结果以字典形式返回

步骤4：获取市数据

用户选择省份后，前端会发送请求以获取该省阴下的城市列表。

@app.route('/cities/<int:province_id>', methods=['GET'])
def get_cities(province_id):
    cities = db.session.execute('SELECT * FROM cities WHERE province_id = :province_id', {'province_id': province_id}).fetchall()
    return {'cities': [dict(row) for row in cities]}  # 返回该省的城市数据

步骤5：获取县数据

同样，当用户选择市后，我们也需要根据所选市的ID获取县的数据。

@app.route('/districts/<int:city_id>', methods=['GET'])
def get_districts(city_id):
    districts = db.session.execute('SELECT * FROM districts WHERE city_id = :city_id', {'city_id': city_id}).fetchall()
    return {'districts': [dict(row) for row in districts]}  # 返回该市的县数据

步骤6：前端界面实现

在前端，我们使用JavaScript和AJAX来实现三级联动效果。

<select id="province" onchange="getCities(this.value)">
    <option value="">选择省</option>
</select>

<select id="city" onchange="getDistricts(this.value)">
    <option value="">选择市</option>
</select>

<select id="district">
    <option value="">选择县</option>
</select>

<script>
function getProvinces() {
    fetch('/provinces')
        .then(response => response.json())
        .then(data => {
            const provinceSelect = document.getElementById('province');
            data.provinces.forEach(province => {
                let option = new Option(province.name, province.id);
                provinceSelect.add(option);
            });
        });
}

function getCities(provinceId) {
    if (!provinceId) return;
    
    fetch(`/cities/${provinceId}`)
        .then(response => response.json())
        .then(data => {
            const citySelect = document.getElementById('city');
            citySelect.options.length = 0;  // 清空市下拉框
            data.cities.forEach(city => {
                let option = new Option(city.name, city.id);
                citySelect.add(option);
            });
        });
}

function getDistricts(cityId) {
    if (!cityId) return;

    fetch(`/districts/${cityId}`)
        .then(response => response.json())
        .then(data => {
            const districtSelect = document.getElementById('district');
            districtSelect.options.length = 0;  // 清空县下拉框
            data.districts.forEach(district => {
                let option = new Option(district.name, district.id);
                districtSelect.add(option);
            });
        });
}

window.onload = getProvinces;  // 页面加载时获取省数据
</script>

系统交互序列图

接下来，我们通过 sequenceDiagram 描述各个组件间的交互过程：

sequenceDiagram
    participant User
    participant Frontend
    participant Backend
    participant Database

    User->>Frontend: 选择省
    Frontend->>Backend: 请求城市数据
    Backend->>Database: 查询城市
    Database-->>Backend: 返回城市
    Backend-->>Frontend: 返回城市数据
    Frontend->>User: 更新城市下拉框

    User->>Frontend: 选择市
    Frontend->>Backend: 请求县数据
    Backend->>Database: 查询县
    Database-->>Backend: 返回县
    Backend-->>Frontend: 返回县数据
    Frontend->>User: 更新县下拉框