MySQL三级联动实现教程详解（mysql三级联动）

MySQL三级联动实现教程详解

在前端开发中，三级联动是一种常用的交互方式，常见的应用场景如省市县选择、商品分类等。在本文中，我们将介绍如何使用MySQL实现一个简单的三级联动。

我们需要创建三个数据表，分别用于存储省、市、县的数据。每个表中需要包含三个字段：id、name和parent_id。其中，id为唯一的编号，name为名称，parent_id为该项所属的上一级项的编号。例如，城市表中每一行数据的parent_id就是省份表中对应省份的id。

省份表的创建语句如下：

CREATE TABLE `province` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

城市表的创建语句如下：

CREATE TABLE `city` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `parent_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

县区表的创建语句如下：

CREATE TABLE `county` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  `parent_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

接下来，我们需要往这些表中插入数据。省份表中的数据可以直接手动插入，例如：

INSERT INTO `province`(`id`,`name`) VALUES (110000,'北京市');
INSERT INTO `province`(`id`,`name`) VALUES (120000,'天津市');
INSERT INTO `province`(`id`,`name`) VALUES (130000,'河北省');
...

城市表和县区表中的数据则需要使用爬虫抓取一些公开数据，或者手动录入一些数据。在本文中，我们将使用爬虫来抓取县区数据。具体代码可以参考下面的示例：

import requests
from bs4 import BeautifulSoup

baseUrl = 'http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2020/'

def getHtml(url):
    try:
        r = requests.get(url)
        r.rse_for_status()
        r.encoding = r.apparent_encoding
        return r.text
    except:
        return ''
def getCountyData(url):
    html = getHtml(url)
    soup = BeautifulSoup(html, 'html.parser')
    tbody = soup.find_all('tbody')[1]
    countyData = []
    for tr in tbody.find_all('tr'):
        tds = tr.find_all('td')
        countyId = tds[0].get_text().strip()
        countyName = tds[1].get_text().strip()
        parentCode = tds[0].get_text()[:6]
        data = (countyId, countyName, parentCode)
        countyData.append(data)
    return countyData

def saveCountyData(countyData):
    for data in countyData:
        sql = f"INSERT INTO `county`(`id`,`name`,`parent_id`) VALUES ({data[0]},'{data[1]}',{data[2]})"
        cursor.execute(sql)
        conn.commit()

baseUrl = 'http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2020/'
provinceUrl = baseUrl + 'index.html'
provinceHtml = getHtml(provinceUrl)
soup = BeautifulSoup(provinceHtml, 'html.parser')
provinces = soup.find_all('a')

for province in provinces:
    href = province.get('href')
    if href[:3] == '01/':
        provinceName = province.get_text()
        provinceCode = href.split('.')[0]
        cityUrl = baseUrl + href
        cityHtml = getHtml(cityUrl)
        soup = BeautifulSoup(cityHtml, 'html.parser')
        cities = soup.find_all('a')
        for city in cities:
            href = city.get('href')
            if href[:9] == f'{provinceCode}/':
                cityName = city.get_text()
                cityCode = href.split('.')[0]
                countyUrl = baseUrl + f'{provinceCode}/{cityCode}.html'
                countyData = getCountyData(countyUrl)
                saveCountyData(countyData)

在前端页面中可以使用ajax来获取数据并实现三级联动。例如，下面是使用jQuery的示例代码：

$(document).ready(function() {
    $("#province").change(function() {
        var provinceId = $(this).val();
        $.ajax({
            url: "getCity.php",
            method: "POST",
            data: {province_id: provinceId},
            success: function(data) {
                $("#city").html(data);
                $("#county").html("请选择县区");
            }
        });
    });
    $("#city").change(function() {
        var cityId = $(this).val();
        $.ajax({
            url: "getCounty.php",
            method: "POST",
            data: {city_id: cityId},
            success: function(data) {
                $("#county").html(data);
            }
        });
    });
});

其中，getCity.php和getCounty.php分别是用于处理ajax请求的PHP文件。例如，getCity.php的代码如下：

    $province_id = $_POST["province_id"];
    $conn = mysqli_connect("localhost", "root", "", "test");
    $sql = "SELECT * FROM `city` WHERE `parent_id` = $province_id";
    $result = mysqli_query($conn, $sql);
    echo "请选择城市";
    while ($row = mysqli_fetch_assoc($result)) {
        echo "".$row["name"]."";
    }
    mysqli_close($conn);
?>

类似地，getCounty.php中的代码如下：

    $city_id = $_POST["city_id"];
    $conn = mysqli_connect("localhost", "root", "", "test");
    $sql = "SELECT * FROM `county` WHERE `parent_id` = $city_id";
    $result = mysqli_query($conn, $sql);
    echo "请选择县区";
    while ($row = mysqli_fetch_assoc($result)) {
        echo "".$row["name"]."";
    }
    mysqli_close($conn);
?>

通过以上步骤，我们就实现了一个简单的三级联动。当用户选择省份时，页面将异步获取该省份下所有城市的数据，并展示在下拉框中。当用户选择城市时，页面将异步获取该城市下所有县区的数据，并展示在下拉框中。

希望本文能够对你在开发三级联动应用时有所帮助。