省市区三级联动下拉选择菜单查询对应地区信息的实现

开发环境：

• python：3.6.6

• Django: 2.2.4

• Django项目名称DjangoTest

1. 新建省市区三级联动行政区划模型和土地储备政策信息模型

新建应用landpolciy，在应用landpolicy中的models.py文件中新建省市区三级联动行政区划模型和土地储备政策信息模型

 # models.py from django.db import models ​ # Create your models here. ​ ​ class Areas(models.Model): """行政区划""" name = models.CharField(max_length=20, verbose_name='名称') pid = models.IntegerField(verbose_name='上级行政区划ID') aid = models.IntegerField(verbose_name='行政区划ID') sname = models.CharField(max_length=10, verbose_name='简称') level = models.IntegerField(verbose_name='行政级别') citycode = models.CharField(max_length=20, verbose_name='城市代码') yzcode = models.CharField(max_length=11, verbose_name='邮政编码') mername = models.CharField(max_length=50, verbose_name='全称') Lng = models.FloatField(verbose_name='经度') Lat = models.FloatField(verbose_name='纬度') pinyin = models.CharField(max_length=50, verbose_name='拼音') ​ class Meta: db_table = 'region' verbose_name = '行政区划' verbose_name_plural = verbose_name ​ def __str__(self): return self.name ​ ​ class LandPledgePolicy(models.Model): """土地抵质押政策""" province = models.CharField(max_length=20, verbose_name='省') city = models.CharField(max_length=20, verbose_name='市') district = models.CharField(max_length=20, verbose_name='区/县') yzcode = models.CharField(max_length=11, verbose_name='邮政编码') mername = models.CharField(max_length=50, verbose_name='全称') policy = models.TextField('土地抵质押政策', null=True, blank=True)

2. 迁移数据库

项目目录下，shell命令窗口中，输入下列命令：

 python manage.py makemigrations ​ python manage.py migrate

3. 在数据库中添加行政区划数据

通过Navicat连接项目数据库djangotest，在项目数据库djangotest中对应省市区三级联动行政区划模型的表格region添加行政区划数据，如下图所示：

在项目数据库djangotest中对应土地储备政策信息模型的表格landpolicy_landpledgepolicy中添加土地储备政策数据，如下图所示

在项目目录下的settings.py文件中配置数据库参数

4. 新建视图

在应用landpolicy文件夹下的views.py文件中创建视图函数：

 # landpolicy/views.py from django.shortcuts import render from django.http import HttpResponse, JsonResponse from django.views.generic import View ​ from rest_framework.viewsets import ReadOnlyModelViewSet ​ from .models import Areas, LandPledgePolicy from .serializers import AreaInfoSerializer, NextAreaInfoSerializer # Create your views here. ​ ​ # 级联菜单 def getAreas(request): return render(request, 'getAreas.html') ​ # 获得省份 def getProvince(request): provinces = Areas.objects.filter(pid=100000) res = [] for i in provinces: res.append([i.aid, i.name]) return JsonResponse({'provinces': res}) ​ # 获得城市 ​ def getCity(request): city_id = request.GET.get('city_id') cities = Areas.objects.filter(pid=city_id) res = [] for i in cities: res.append([i.aid, i.name]) return JsonResponse({'cities': res}) ​ ​ # 获得区/县 def getDistrict(request): district_id = request.GET.get('district_id') cities = Areas.objects.filter(pid=district_id) res = [] for i in cities: res.append([i.aid, i.name]) return JsonResponse({'district': res}) ​ ​ def getAreaDetail(request): district_id = request.GET.get('district_id') district = Areas.objects.get(aid=district_id) land_policy = LandPledgePolicy.objects.get(yzcode=district.yzcode) res = [land_policy.mername, land_policy.policy] return JsonResponse({'policy': res}) ​

5. 建立前端模板

在模板文件夹templates下，建立前端模板getAreas.html

 {% load staticfiles %} ​    省市县菜单 ​       

请选择省份请选择城市请选择区/县

土地储备政策

好啊

{# #} {% csrf_token %} ​ ​

注意：在项目目录下的settings.py文件中配置好模板路径

6. 配置路由

在app应用下新建urls.py，配置好应用landpolicy下的二级路由

 #!/usr/bin/env python 3.6.6 # -*- encoding: utf-8 -*- ​ from django.urls import path, include, re_path from django.conf.urls import url ​ from . import views ​ app_name = 'landpolicy' ​ ​ urlpatterns = [ url('getAreas/', views.getAreas), url('getProvince/', views.getProvince), url('getCity/', views.getCity), url('getDistrict/', views.getDistrict), url('getAreaDetail/', views.getAreaDetail), ​ ]

注意：在配置app应用下的二级路由前，需要在项目urls.py先配置好app路由

7. 联动下拉选择菜单查询效果

项目目录下，在shell命令行窗口中，运行Django应用

python mangage.py runserver 0.0.0.0:8000

在浏览器地址栏，输入土地储备政策查询url地址

http://127.0.0.1:8000/landpolicy/getAreas/

得到下图所示网页：

可以看到，最初默认的土地储备政策是“好啊”

【省份】-【城市】-【区/县】分别选择【北京】-【北京市】-【东城区】

在选择东城区后，可以看到网页中的土地储备政策变为了土地储备政策数据表landpolicy_landpledgepolicy中添加的土地储备政策数据，如下图所示至此，省市区三级联动拉下选择菜单信息查询功能实现。