java mysql 省市二级联动查询

原创

mob64ca12da2d62 2024-08-30 06:23:17 ©著作权

文章标签 sql java MySQL 文章分类 Java 后端开发

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

Java MySQL 省市二级联动查询

在 Web 开发中，常常需要对地理位置进行选择，例如省份和城市的选择。在这种情况下，实现省市二级联动查询是一个常见的需求。本文将详细介绍如何使用 Java 和 MySQL 进行省市二级联动查询，并提供代码示例。

一、数据模型设计

在我们开始编码之前，需要先设计数据库的表结构。通常我们会有两个表：省份表和城市表。它们之间存在一对多的关系，即一个省包含多个城市。

数据库表结构

2023年10月的设计示例包括以下两个表：

Province 表：存储省份信息
City 表：存储城市信息

以下是数据模型关系图：

erDiagram
    Province {
        int id PK
        string name
    }
    
    City {
        int id PK
        string name
        int province_id FK
    }

    Province ||--o{ City : contains

创建表 SQL 语句

首先，我们需要在 MySQL 中创建这两张表。

CREATE TABLE Province (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL
);

CREATE TABLE City (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    province_id INT,
    FOREIGN KEY (province_id) REFERENCES Province(id)
);

二、添加数据

接下来，我们可以添加一些省和城市的数据。以下是插入数据的 SQL 语句示例：

INSERT INTO Province (name) VALUES ('广东省'), ('江苏省');

INSERT INTO City (name, province_id) VALUES 
    ('广州市', 1), 
    ('深圳市', 1), 
    ('南京市', 2), 
    ('苏州市', 2);

三、后端实现

1. Maven 依赖

在 Java 中，我们可以使用 JDBC 连接 MySQL 数据库。确保在 pom.xml 文件中添加 MySQL 驱动依赖：

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.32</version>
</dependency>

2. 数据库连接

接下来，我们需要创建一个数据库连接类：

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DatabaseConnection {
    private static final String URL = "jdbc:mysql://localhost:3306/your_database_name";
    private static final String USER = "your_username";
    private static final String PASSWORD = "your_password";

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(URL, USER, PASSWORD);
    }
}

3. 省市查询接口

然后，我们实现逻辑以获取省份和城市信息。以下是省份和城市查询的示例代码：

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class LocationService {
    
    public List<String> getProvinces() throws SQLException {
        List<String> provinces = new ArrayList<>();
        String sql = "SELECT * FROM Province";

        try (Connection conn = DatabaseConnection.getConnection(); 
             PreparedStatement stmt = conn.prepareStatement(sql);
             ResultSet rs = stmt.executeQuery()) {
            
            while (rs.next()) {
                provinces.add(rs.getString("name"));
            }
        }
        return provinces;
    }

    public List<String> getCities(int provinceId) throws SQLException {
        List<String> cities = new ArrayList<>();
        String sql = "SELECT * FROM City WHERE province_id = ?";

        try (Connection conn = DatabaseConnection.getConnection(); 
             PreparedStatement stmt = conn.prepareStatement(sql)) {
            stmt.setInt(1, provinceId);
            try (ResultSet rs = stmt.executeQuery()) {
                while (rs.next()) {
                    cities.add(rs.getString("name"));
                }
            }
        }
        return cities;
    }
}

4. 前端实现

最后，在前端使用 JavaScript 或 jQuery 调用这些接口实现省市的联动效果。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>省市联动</title>
    <script src="
</head>
<body>

<select id="province"></select>
<select id="city"></select>

<script>
    $(document).ready(function() {
        // 加载省份
        $.get('/api/provinces', function(data) {
            data.forEach(function(province) {
                $('#province').append(new Option(province, province.id));
            });
        });

        // 加载城市
        $('#province').change(function() {
            var provinceId = $(this).val();
            $.get(`/api/cities?provinceId=${provinceId}`, function(data) {
                $('#city').empty();
                data.forEach(function(city) {
                    $('#city').append(new Option(city.name, city.id));
                });
            });
        });
    });
</script>

</body>
</html>