大陸省市區三級聯動資料庫 – 詳細地址選擇

一、概述

大陸省市區三級聯動資料庫是一個存儲了中國大陸所有省市區數據以及詳細地址信息的資料庫。

詳細地址選擇是指在表單中選擇地址時，能夠通過省市區三級聯動方式展現出所有可選地址選項，同時在最後一個選項中提供輸入框，用於輸入詳細地址。

可以通過使用該資料庫和詳細地址選擇組件，快速便捷地完成地址選擇功能的開發。

二、資料庫設計

資料庫中包含了三張表：省表、市表和區表。每張表中都有一個id和一個name欄位。其中，市表和區表都有一個pid欄位，作為父級省市的id。

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

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

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

三、數據填充

可以通過爬取國家統計局的數據，或者直接使用開源數據，來填充省市區數據。

以使用開源數據為例，以下是導入數據的代碼示例：

LOAD DATA LOCAL INFILE '/path/to/province.csv' INTO TABLE province CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';
LOAD DATA LOCAL INFILE '/path/to/city.csv' INTO TABLE city CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';
LOAD DATA LOCAL INFILE '/path/to/area.csv' INTO TABLE area CHARACTER SET utf8mb4 FIELDS TERMINATED BY ',' ENCLOSED BY '"' LINES TERMINATED BY '\r\n';

其中，/path/to/province.csv、/path/to/city.csv和/path/to/area.csv分別是包含省市區數據的CSV文件路徑。

四、詳細地址選擇組件

詳細地址選擇組件是一個基於省市區三級聯動選擇器的表單組件，其中最後一個選項為詳細地址輸入框。

以下是詳細地址選擇組件的代碼示例：

<div class="address-selector">
  <select name="province">
    <option value="">省份</option>
    <?php foreach ($provinceList as $province): ?>
      <option value="<?php echo $province['id']; ?>"><?php echo $province['name']; ?></option>
    <?php endforeach; ?>
  </select>
  <select name="city"></select>
  <select name="area"></select>
  <input type="text" name="detail" placeholder="詳細地址"/>
</div>

<script>
$(function() {
  // 省市區聯動選擇器
  $('select[name="province"]').change(function() {
    var pid = $(this).val();
    if (pid == '') {
      $('select[name="city"]').html('<option value="">城市</option>');
      $('select[name="area"]').html('<option value="">區縣</option>');
      return;
    }
    
    $.get('/api/city', {pid: pid}, function(data) {
      var options = '<option value="">城市</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('select[name="city"]').html(options);
      $('select[name="area"]').html('<option value="">區縣</option>');
    });
  });
  
  $('select[name="city"]').change(function() {
    var pid = $(this).val();
    if (pid == '') {
      $('select[name="area"]').html('<option value="">區縣</option>');
      return;
    }
    
    $.get('/api/area', {pid: pid}, function(data) {
      var options = '<option value="">區縣</option>';
      for (var i = 0; i < data.length; i++) {
        options += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
      }
      $('select[name="area"]').html(options);
    });
  });
});
</script>

該組件依賴jQuery。

五、地址數據介面

為了使詳細地址選擇組件能夠動態獲取省、市、區數據，需要提供地址數據介面。

以下是簡單的地址數據介面代碼示例：

<?php
$pdo = new PDO('mysql:host=localhost;dbname=test', 'root', 'password');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  switch ($_GET['action']) {
    case 'city':
      $stmt = $pdo->prepare('SELECT * FROM city WHERE pid = ?');
      $stmt->execute([$_GET['pid']]);
      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
      break;
    case 'area':
      $stmt = $pdo->prepare('SELECT * FROM area WHERE pid = ?');
      $stmt->execute([$_GET['pid']]);
      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
      break;
  }
  
  header('Content-Type: application/json');
  echo json_encode($result);
}

其中，上述代碼需要根據實際情況修改資料庫連接信息。

六、總結

大陸省市區三級聯動資料庫和詳細地址選擇組件可以快速地完成表單地址選擇功能的開發，同時也為後續有關地址相關開發提供了方便。

但需要注意的是，使用該組件前需要填充好資料庫中的省、市、區數據，並提供好數據介面。