Django省市区三级联动

1、模型创建

models.py 自关联，获取下级的名称为next

from django.db import modelsclass Area(models.Model):"""区域表"""name = models.CharField(max_length=100, verbose_name='名称')parent = models.ForeignKey('self',on_delete=models.SET_NULL,related_name='son', null=True, verbose_name='父级')class Meta:db_table = 'tb_areas'def __str__(self):return self.name

2、插入数据

利用MySQL工具以MySQL Workbench 8.0 CE为例插入数据

3、序列化器

serializer.py

class AreaSerializer(serializers.ModelSerializer):"""地址序列化器"""class Meta:model = Areafields = '__all__'

4、功能实现

views.py

from rest_framework.views import APIView
from rest_framework.response import Responsefrom .models import Area
from .serializer import AreaSerializerclass ObtailAreaView(APIView):def get(self, request):# 获取parent_id parent_id = request.GET.get('parent_id')# 如果获取到父级的id,则获取省级下面的信息（市、区、县）if parent_id:area = Area.objects.filter(pk=parent_id).first()areas = area.son# 如果没有参数，通过参数所有的省else:areas = Area.objects.filter(parent__isnull=True).all()area_ser = AreaSerializer(areas, many=True)# 返回结果return Response({'code': 200, 'areaList': area_ser.data})

5、配置路由

urls.py做了路由分发

"""
Including another URLconf1. Import the include() function: from django.urls import include, path2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.urls import path
from . import viewsurlpatterns = [path('area/', views.ObtailAreaView.as_view())
]

6、Vue页面功能（简单实现功能）

<template><div><h3>省市区三级联动演示</h3><div class="form_group"><label>所在地区：</label><select v-model='form.province' @change='getCity(form.province)'><option :value="i.id" v-for='i in province_list'>{{ i.name }}</option></select><select v-model='form.city' @change='getArea(form.city)'><option :value="i.id" v-for='i in city_list'>{{ i.name }}</option></select><select v-model='form.area'><option :value="i.id" v-for='i in area_list'>{{ i.name }}</option></select></div></div>
</template><script>export default {data() {return {form: {province: 110000,},province_list: [],city_list: [],area_list: []}},methods: {//获取省getProvice() {this.axios.get('address/area/').then(res => {console.log(res.data)this.province_list = res.data.areaList})},//获取市getCity(provice) {this.axios.get('address/area/?parent_id=' + provice).then(res => {this.city_list = res.data.areaList})},//获取区getArea(city) {this.axios.get('address/area/?parent_id=' + city).then(res => {this.area_list = res.data.areaList})},},mounted() {this.getProvice()}}
</script><style scoped>select {width: 125px;}
</style>

7、效果演示

8、总结

使用自关联，当省份改变的时候获取省份下面的区或市，当市改变的话获取市级下面的县、镇。

Django省市区三级联动相关推荐

微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
java封装省市区三级json格式,2016中国省市区三级联动json格式.pdf
2016中国省市区三级联动json格式 2016 年中国省市区三级联的JSON 格式 {"北京市":{"name":"北京市"," ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
省市区三级联动最新县及县以上行政区划代码来源：国家统计局
http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html jquery省市区三级联动(数据来源国家统计局官网)内附源码 ...
vue省市区三级联动mysql,js/json,html/jsp
大家好,我是烤鸭: 省市区三级联动数据及页面: 测试的时候,发现少了几个地区,现在补上了,也优化了下排版. 如果你懒得复制和看的话,这里是打包的下载地址. 之前的资源地址也改了,http://down ...
element-ui省市区三级联动：选择即改变
element-ui 省市区三级联动:选择即改变注意: 阅读本文,经验传授: vue.js单组件引入外部或自定义的 .js文件,并调用文件内三级联动的 json数据: 自定义设置默认地址,结合js ...

Django省市区三级联动

1、模型创建

2、插入数据

3、序列化器

4、功能实现

5、配置路由

6、Vue页面功能（简单实现功能）

7、效果演示

8、总结

Django省市区三级联动相关推荐

最新文章

热门文章