区县数据库
Ⅰ Mysql实现三级联动选择菜单轻松搭建树形菜单结构mysql三级联动
MySQL实现三级联动选择菜单,轻松搭建树形菜单结构!
随着互联网规模的不断扩大,网站的复杂度也在不断提高,树形菜单结构成为了网站设计中常见的一种形式。为了方便用户的选择,常常需要设计出多级菜单,以便用户快速找到自己需要的内容。本文将介绍如何使用MySQL实现三级联动选择菜单,并且轻松地搭建出树形菜单结构。
一、数据库设计
首先需要设计好数据库结构。在本案例中,我们将设计一个名为“region”的数据库,其中包含三个表:“province”、“city”和“district”,分别代表省份、城市和区/县。每一个表都包含以下字段:id、name和parent_id,其中id为主键,name为地区名,parent_id为该地区的上一级地区的id。
CREATE TABLE `province` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘省份id’,
`name` varchar(20) NOT NULL COMMENT ‘省份名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘上级行政区划id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’省份表’;
CREATE TABLE `city` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘城市id’,
`name` varchar(30) NOT NULL COMMENT ‘城市名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘省份id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’城市表’;
CREATE TABLE `district` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT ‘区县id’,
`name` varchar(50) NOT NULL COMMENT ‘区县名称’,
`parent_id` int(10) unsigned NOT NULL DEFAULT ‘0’ COMMENT ‘城市id’,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT=’区县表’;
二、插入数据
接下来需要插入一些数据。假设我们要插入北京市的信息,那么可以按照以下方式进行插入:
INSERT INTO `province` (`id`, `name`, `parent_id`) VALUES (1, ‘北京市’, 0);
INSERT INTO `city` (`id`, `name`, `parent_id`) VALUES (1, ‘北京市’, 1);
INSERT INTO `district` (`id`, `name`, `parent_id`) VALUES (1, ‘东城区’, 1);
在插入完数据后,可以通过SELECT语句来查看插入的结果:
SELECT * FROM `province` WHERE `name` = ‘北京市’;
SELECT * FROM `city` WHERE `name` = ‘北京市’;
SELECT * FROM `district` WHERE `name` = ‘东城区’;
三、实现页面
在完成数据库设计和数据插入之后,接下来需要在页面上实现三级联动选择菜单。在本案例中,我们选择使用HTML+JavaScript来实现这个功能。
在HTML文件中,我们需要先创建三个菜单框,代码如下:
请选择省份
请选择城市
请选择区县
然后,在JavaScript文件中,我们需要编写以下代码,来实现根据用户选择的省份,动态改变城市和区县的选项:
$(document).ready(function() {
$(“#province”).change(function() {
var provinceid = $(this).val();
if (provinceid != “”) {
$.ajax({
type: “POST”,
url: “getCity.php”,
data: “provinceid=”+provinceid,
cache: false,
success: function(html) {
$(“#city”).html(html);
$(“#district”).html(“请选择区县”);
}
});
} else {
$(“#city”).html(“请选择城市”);
$(“#district”).html(“请选择区县”);
}
});
$(“#city”).change(function() {
var cityid = $(this).val();
if (cityid != “”) {
$.ajax({
type: “POST”,
url: “getDistrict.php”,
data: “cityid=”+cityid,
cache: false,
success: function(html) {
$(“#district”).html(html);
}
});
} else {
$(“#district”).html(“请选择区县”);
}
});
});
这段JavaScript代码中,我们使用了jQuery来实现AJAX异步请求,并且根据用户选择的省份和城市,调用getCity.php和getDistrict.php来查询数据库中对应的城市和区县信息,然后将结果动态显示在相应的菜单框中。具体的php代码如下:
getCity.php
$provinceid = $_POST[‘provinceid’];
$sql = “SELECT * FROM `city` WHERE `parent_id` = ‘”.$provinceid.”‘”;
$result = mysql_query($sql);
echo “请选择城市”;
while ($row = mysql_fetch_array($result)) {
echo “”.$row[‘name’].””;
}
getDistrict.php
$cityid = $_POST[‘cityid’];
$sql = “SELECT * FROM `district` WHERE `parent_id` = ‘”.$cityid.”‘”;
$result = mysql_query($sql);
echo “请选择区县”;
while ($row = mysql_fetch_array($result)) {
echo “”.$row[‘name’].””;
}
四、测试
我们需要将HTML文件和JavaScript文件放到服务器上,并且测试其效果。在测试过程中,需要注意以下几点:
1. 需要在服务器上运行MySQL,并且创建好region数据库,并且插入了一些测试数据。
2. 需要在JavaScript文件中修改getCity.php和getDistrict.php文件的路径(如果不在同一目录下的话),以保证AJAX异步请求能够正确调用。
3. 在测试之前需要先引入jQuery库,并且保证能够正常访问。
下面是测试结果的示例图,可以看到三级联动菜单已经成功实现:
![MySQL实现三级联动选择菜单][1]
总结
通过本文的介绍,可以看到使用MySQL实现三级联动选择菜单并不是很难。只需要在数据库中设计好地区结构,并且编写一些简单的HTML和JavaScript代码,就可以轻松地搭建出树形菜单结构,帮助用户快速找到需要的内容。
参考资料:
1. jQuery官网:http://jquery.com/
2. W3Schools:http://www.w3schools.com/
3. MySQL官网:http://www.mysql.com/
[1]: https://img-blog.csdn.net/20170824103348579?watermark/2/text//font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/q/85/progressive/true
Ⅱ vue+Element UI实现省市区镇四级联动封装
在前端页面中,填写地址的级联选择器是常见的需求。过去,这种功能通常需要在数据库中存储省份、城市、区县的数据,这无疑增加了开发的复杂性。不过,现在我们可以通过一些库来简化这个过程。
一个实用的库叫做 Vue+Element UI,它能实现省市区的三级联动。然而,shigen 认为这样的方式仍存在一定的不便。于是,他决定自己封装一个组件,以更符合项目需求。
shigen在Gitee上找到了一个名为“中国省市区数据”的项目,该项目提供了一个完整的JSON文件,包含了所有省份、城市、区县的数据。他利用Element-ui的组件 el-cascader 实现了级联效果,成功封装了一个自定义的省市区联动选择器。
在代码中,shigen没有设置对应的传值绑定方法,这需要开发者根据自己的项目需求自行定义。经过一系列的开发和调试,最终得到了一个高效、灵活的省市区联动选择器。
用户在使用这个组件时,只需选择相应的省份、城市和区县,系统会自动将选择的结果存储到后端,存储方式只需简单处理所选的值即可。这样的设计大大简化了数据处理的步骤,提高了开发效率。
shigen分享了这个组件的实现过程和效果,旨在为其他开发者提供参考和灵感。在这个过程中,他不仅解决了实际问题,还通过实践学习到了更多关于前端开发的知识和技巧。
以上就是shigen今天分享的内容,如果您觉得有用或感兴趣,不妨点个赞、在看、关注,您的支持将是shigen持续分享的动力。同时,shigen在多个平台上都有文章更新,欢迎随时访问和订阅。
Ⅲ 数据库关系 1对N N对1
其实都是多对多:但也在数据库的关系设置,包含的数据。
一个学校有多名学生,一名学生只能在一个学校里。那么一个县里又是多个学校。
一个县有多个街道,同样的
如果从一个学校的学生创建关系,就是一对多。如果,从县级说,多个学校多名学生,就是多对多。