一、概述
大陆省市区三级联动数据库是一个存储了中国大陆所有省市区数据以及详细地址信息的数据库。
详细地址选择是指在表单中选择地址时,能够通过省市区三级联动方式展现出所有可选地址选项,同时在最后一个选项中提供输入框,用于输入详细地址。
可以通过使用该数据库和详细地址选择组件,快速便捷地完成地址选择功能的开发。
二、数据库设计
数据库中包含了三张表:省表、市表和区表。每张表中都有一个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);
}
其中,上述代码需要根据实际情况修改数据库连接信息。
六、总结
大陆省市区三级联动数据库和详细地址选择组件可以快速地完成表单地址选择功能的开发,同时也为后续有关地址相关开发提供了方便。
但需要注意的是,使用该组件前需要填充好数据库中的省、市、区数据,并提供好数据接口。