一、创建数据库

表结构为：
id：主键
name：省市名称
parent_id:自关联主键id

二、后端处理逻辑代码

class AreasView(View):def get(self,request):# parent_id = request.GET.get('parent_id')parent_id = request.GET.get('area_id')if parent_id is None:# 先获取缓存provience_list = cache.get('pro')if provience_list is None:# 查询 省的信息proviences = Area.objects.filter(parent_id=None)provience_list = []for item in proviences:provience_list.append({'id':item.id,'name':item.name})# 把转换的数据保存到缓存中# cache.set(key,value,expire)cache.set('pro',provience_list,24*3600)return http.JsonResponse({'code':RETCODE.OK,'errmsg':'ok','province_list':provience_list})else:# 查询 市/区县信息sub_list = cache.get('sub_%s'%parent_id)if sub_list is None:sub_areas = Area.objects.filter(parent_id=parent_id)# [Area,Area,Area]sub_list = []for sub in sub_areas:sub_list.append({'id':sub.id,'name':sub.name})cache.set('sub_%s'%parent_id,sub_list,24*3600)return http.JsonResponse({'code':RETCODE.OK,'errmsg':'ok','sub_data':sub_list})

三、前端相关代码和页面设计

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>小徐商城-用户中心</title><link rel="stylesheet" type="text/css" href="{{ static('css/reset.css') }}" /><link rel="stylesheet" type="text/css" href="{{ static('css/main.css') }}" /><script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script><script type="text/javascript">let addresses = {{ addresses | safe }};let default_address_id = "{{ default_address_id }}";</script>
</head>
<body><div id="app" v-cloak><div class="header_con"><div class="header"><div class="welcome fl">欢迎来到小徐商城!</div><div class="fr"><div v-if="username" class="login_btn fl">欢迎您：<em>[[ username ]]</em><span>|</span>{#                    url 本质是 reverse#}<a href="{{ url('users:logout') }}">退出</a></div><div v-else=v-else class="login_btn fl"><a href="{{ url('users:login') }}">登录</a><span>|</span><a href="{{ url('users:register') }}">注册</a></div><div class="user_link fl"><span>|</span><a href="{{ url('users:center') }}">用户中心</a><span>|</span><a href="../static/cart.html">我的购物车</a><span>|</span><a href="../static/user_center_order.html">我的订单</a></div></div></div></div><div class="search_bar clearfix"><a href="index.html" class="logo fl"><img src="{{ static('images/logo.png') }}" /></a><div class="search_wrap fl"><form method="get" action="/search/" class="search_con"><input type="text" class="input_text fl" name="q" placeholder="搜索商品"><input type="submit" class="input_btn fr" name="" value="搜索"></form><ul class="search_suggest fl"><li><a href="#">索尼微单</a></li><li><a href="#">优惠15元</a></li><li><a href="#">美妆个护</a></li><li><a href="#">买2免1</a></li></ul></div></div><div class="main_con clearfix"><div class="left_menu_con clearfix"><h3>用户中心</h3><ul><li><a href="{{ url('users:center') }}">· 个人信息</a></li><li><a href="../static/user_center_order.html">· 全部订单</a></li><li><a href="{{ url('users:showaddress') }}" class="active">· 收货地址</a></li><li><a href="../static/user_center_pass.html">· 修改密码</a></li></ul></div><div class="right_content clearfix" v-cloak><div class="site_top_con"><a @click="show_add_site">新增收货地址</a><span>你已创建了<b>[[ addresses.length ]]</b>个收货地址，最多可创建<b>20</b>个</span></div><div class="site_con" v-for="(address, index) in addresses"><div class="site_title"><h3>[[ address.title ]]</h3><a href="javascript:;" class="edit_icon"></a><em v-if="address.id===default_address_id">默认地址</em><span class="del_site" @click="delete_address(index)">×</span></div><ul class="site_list"><li><span>收货人：</span><b>[[ address.receiver ]]</b></li><li><span>所在地区：</span><b>[[ address.province ]] [[address.city]] [[ address.district ]]</b></li><li><span>地址：</span><b>[[ address.place ]]</b></li><li><span>手机：</span><b>[[ address.mobile ]]</b></li><li><span>固定电话：</span><b>[[ address.tel ]]</b></li><li><span>电子邮箱：</span><b>[[ address.email ]]</b></li></ul><div class="down_btn"><a v-if="address.id!=default_address_id">设为默认</a><a href="javascript:;" class="edit_icon" @click="show_edit_site(index)">编辑</a></div></div></div></div><div class="footer"><div class="foot_link"><a href="#">关于我们</a><span>|</span><a href="#">联系我们</a><span>|</span><a href="#">招聘人才</a><span>|</span><a href="#">友情链接</a></div><p>CopyRight © 2022 福建小徐网络科技有限公司 All Rights Reserved</p><p>电话：13960699696    闽ICP备*******8号</p></div><div class="pop_con" v-show="is_show_edit" v-cloak><div class="site_con site_pop"><div class="site_pop_title"><h3 v-if="editing_address_index">编辑收货地址</h3><h3 v-else>新增收货地址</h3><a @click="is_show_edit=false">×</a></div><form><div class="form_group"><label>*收货人：</label><input v-model="form_address.receiver" @blur="check_receiver" type="text" class="receiver"><span v-show="error_receiver" class="receiver_error">请填写收件人</span></div><div class="form_group"><label>*所在地区：</label><select v-model="form_address.province_id"><option v-for="province in provinces" :value="province.id">[[ province.name ]]</option></select><select v-model="form_address.city_id"><option v-for="city in cities" :value="city.id">[[ city.name ]]</option></select><select v-model="form_address.district_id"><option v-for="district in districts" :value="district.id">[[ district.name ]]</option></select></div><div class="form_group"><label>*详细地址：</label><input v-model="form_address.place" @blur="check_place" type="text" class="place"><span v-show="error_place" class="place_error">请填写地址信息</span></div><div class="form_group"><label>*手机：</label><input v-model="form_address.mobile" @blur="check_mobile" type="text" class="mobile"><span v-show="error_mobile" class="mobile_error">手机信息有误</span></div><div class="form_group"><label>固定电话：</label><input v-model="form_address.tel" @blur="check_tel" type="text" class="tel"><span v-show="error_tel" class="tel_error">固定电话有误</span></div><div class="form_group"><label>邮箱：</label><input v-model="form_address.email" @blur="check_email" type="text" class="email"><span v-show="error_email" class="email_error">邮箱信息有误</span></div><input @click="save_address" type="button" name="" value="新 增" class="info_submit"><input @click="is_show_edit=false" type="reset" name="" value="取 消" class="info_submit info_reset"></form></div></div><div class="pop_con2"><div class="confirm_pop"><div class="confirm_pop_title"><h3>确认删除</h3><a href="javascript:;">×</a></div><p>您确认删除当前地址吗？</p><input type="button" value="确 定" class="confirm_submit" /><input type="button" value="取 消" class="confirm_submit confirm_cancel" /></div><div class="mask"></div></div></div><script type="text/javascript" src="{{ static('js/host.js') }}"></script><script type="text/javascript" src="{{ static('js/common.js') }}"></script><script type="text/javascript" src="{{ static('js/user_center_site.js') }}"></script>
</body>
</html>

四、页面效果

总结

省市三联动，注意的逻辑点：
1.事先获取省级数据，在根据省级数据的选择触发vue在watch方法，获取其他地市和区县数据。
2.数据库设计采用一张树形表自关联。

【愚公系列】2022年01月 Django商城项目16-用户中心-地址管理之省市三联动功能实现相关推荐

【愚公系列】2022年01月 Django商城项目13-登录界面-QQ登录功能实现
文章目录前言 1.QQ互联开发者申请 2.QQ互联应用申请 3.网站对接QQ登录一.django实际对接流程 1.创建抽象模型类 2.创建QQ用户模型类 3.注册应用 4.配置QQ登录信息 5.登 ...
【愚公系列】2022年01月 Django商城项目 24-商品列表页功能实现
文章目录一.商品列表页功能实现 1.后台查询代码二.面包屑信息展示 1.前台html代码 2.实际效果三.列表页信息展示 1.前台html代码 2.实际效果一.商品列表页功能实现 1.后台查询 ...
【愚公系列】2022年02月 Django商城项目 34-订单支付功能实现(支付宝)
文章目录前言一.回调逻辑处理 1.安装SDK 2.生成私钥公钥 3.setting中支付宝配置信息 4.生成支付URL 5.接收支付成功信息前言具体支付宝支付流程可参考这篇文章:https:/ ...
【愚公系列】2022年01月华为鸿蒙OS-03-四种模式开发实操
文章目录前言一.使用JS语言开发(传统代码方式) 1.index页面源码 2.details页面源码二.使用JS语言开发(低代码方式) 1.新建工程:注意选择 2.选择低代码新建页面 3.页面分 ...
2022年01月世界编程语言排行
2022年01月世界编程语言排行 2022年1月TIOBE指数一月标题:2021年度Python编程语言 Python赢得了久负盛名的TIOBE编程语言奖.祝贺!这是连续第二次.该奖项授予一年内获得 ...
2022最新Emlog新版导航源码带用户中心
正文: 2022最新Emlog新版导航源码+带用户中心,环境要求:PHP + MYSQL PHP版本7.0+ 下载方式: lanzou.com/iVJxC01kl12b
【愚公系列】回顾2022年技术博客的总结与展望
文章目录前言一.回顾2022年的活动和成就 1.2022年所做的事 2.2022年收获和成就二.分析2022年的表现 1.过去一年优缺点分析 2.过去一年表现认同度三.展望2023年的计划 1 ...
【愚公系列】（HDC.Cloud）华为开发者大会游记
文章目录前言一.(HDC.Cloud)华为开发者大会游记 1.受邀参加 2.开发者大会首页 3.第一天 4.第二天 5.第三天总结前言 HDC.Cloud华为开发者大会是由华为举办的一年一度的 ...
【愚公系列】华为产品测评官－开发者之声（CodeArts产品流程体验）
文章目录前言一.华为云CodeArts产品体验 1.软件开发生产线使用流程 1.1 配置项目 1.2 配置代码仓库 1.3 配置流水线 2.使用软件开发生产线快速搭建项目(ECS篇) 2.1 前提 ...
虎啸龙吟之国产数据库风云榜-2022年01月
绝壁刻字自古华山一条路,奇险天下第一山. 太阳初升,只见墨老大(墨天轮)一身白衣,潇洒飘逸,萧疏轩举,湛然若神,忽见身体瞬间横移,不见腿下脚下有任何动作,身体却出现在几十丈之外,使用的正是移形换位之 ...

【愚公系列】2022年01月 Django商城项目16-用户中心-地址管理之省市三联动功能实现

文章目录

一、创建数据库

二、后端处理逻辑代码

三、前端相关代码和页面设计

四、页面效果

总结

【愚公系列】2022年01月 Django商城项目16-用户中心-地址管理之省市三联动功能实现相关推荐

最新文章

热门文章