Django 19购物商城项目（收货地址：添加、修改）

dDjango 19购物商城项目

1、新建axf_addr，收货地址表
2、路由
3、cart页面，添加默认收货地址
4、视图（主要修改了cart、新建了收货地址相关方法）
5、收货地址列表
6、收货地址编辑、新建页面（这部分重点在js上）
7、中间件
8、访问截图

1、新建axf_addr，收货地址表

（我的代码注释里面有时也称收货信息表）
模型：

# 收货信息（收货地址）
class Addr(models.Model):# 所属用户A_user = models.ForeignKey(AXFUser, on_delete=models.CASCADE)# 订单A_order_id = models.IntegerField(default=0)# A_order_id = models.ForeignKey(Order,on_delete=models.CASCADE,default=None)# 城市A_city_id = models.IntegerField(default=0)# A_city_iD = models.ForeignKey(City, on_delete=models.CASCADE)# 详细地址A_detail = models.CharField(max_length=125)# 收货人A_user_name = models.CharField(max_length=125)# 电话A_tell = models.IntegerField()# 收货时间（**小时内送达）A_time = models.IntegerField(default=1)# 是否为默认地址is_default = models.BooleanField(default=False)class Meta:db_table = 'axf_addr'

2、路由

所有路由，包括新加的收货地址：添加、修改的路由

from App import views
from django.urls import path, re_pathapp_name = 'axf01'
urlpatterns = [path('home/', views.home, name='home'),path('market/', views.market, name='market'),path('cart/', views.cart, name='cart'),path('mine/', views.mine, name='mine'),re_path(r'^markets/(?P<typeid>\d+)&(?P<childcid>\d+)&(?P<order_rule>\d+)/', views.markets, name='markets'),# 注册path('register/', views.register, name='register'),# 登录path('login/', views.login, name='login'),# 注册时预检测用户名是否可用path('checkuser/', views.check_user, name='check_user'),# 注册时预检测用邮箱是否可用path('checkemail/', views.check_email, name='check_email'),# 退出登录path('logout/', views.logout, name='logout'),# 激活path('activate/', views.activate, name='activate'),# 添加商品path('addtocart/', views.add_to_cart, name='add_to_cart'),# 删除商品path('subtocart/', views.sub_to_cart, name='sub_to_cart'),# 购物车里的物品选中状态改变path('changecart/', views.change_cart, name='change_cart'),# 购物车全选path('allselect/', views.all_select, name='all_select'),# 生成订单path('makeorder/', views.make_order, name='make_order'),# 订单详情与支付path('orderdetail/', views.order_detail, name='order_detail'),# 待付款订单列表path('ordernotpay/', views.order_not_pay, name='order_not_pay'),# 支付完成# path('payed/', views.payed, name='payed'),# 支付宝支付path('alipay/', views.alipay, name='alipay'),# 支付成功后接收,跳转页面path('payreturn/', views.pay_return, name='pay_return'),# 收货地址列表path('orderaddrlist/', views.order_addr_list, name='order_addr_list'),# 收货地址等信息编辑path('orderaddrPCA/', views.order_addrPCA, name='order_addrPCA'),# 收货地址等信息编辑时异步传回path('PCA/', views.PCA, name='PCA'),# 删除收货地址path('orderaddrdel/', views.order_addr_del, name='order_addr_del'),# 设置用户默认的收货地址path('orderaddrselect/', views.order_addr_select, name='order_addr_select'),
]

3、cart页面，添加默认收货地址

cart.html
修改内容比较多，下面是cart.html所有内容

{% extends 'base_main.html' %}
{% load static %}{% block ext_css %}{{ block.super }}<link rel="stylesheet" href="{% static 'axf/main/css/cart.css' %}">
{% endblock %}
{% block ext_js %}{{ block.super }}<script type="text/javascript" src="{% static 'axf/main/js/cart.js' %}"></script>
{% endblock %}
{% block content %}<div id="cart"><h3>购物车</h3><div class="full"><section>{% if user_addr %}<ul><li>收&nbsp;货&nbsp;人：&nbsp;{{ user_addr.A_user_name }}</li><li>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：&nbsp;{{ user_addr.A_tell }}</li><li>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：&nbsp;{{ user_addr.A_detail }}</li><a class="addr" href="{% url 'axf:order_addr_list' %}">修改收货信息</a></ul>{% else %}<ul><br><li>您还未填写收货信息</li><br><a class="addr" href="{% url 'axf:order_addrPCA' %}">填写收货信息</a></ul>{% endif %}<div class="bill"><p>闪送超市</p><p>0元起送，满30送10</p><a href="#">凑单专区</a></div><div class="delivery"><span>收货时间:</span>{% if user_addr %}<span><input id="time" value="{{ user_addr.A_time }}">小时送达</span>{% else %}<span><input id="time" value="1">小时送达</span>{% endif %}<span><a href="#">可预订&gt;</a></span></div><div class="delivery"><span>收货备注:</span><input type="text" placeholder="可输入100字"></div>{# 商品信息展示 #}<ul>{% for cart in carts %}<li class="menuList" cartid="{{ cart.id }}" goodsid="{{ cart.C_goods_id }}"><div class="confirm"><span>{% if cart.C_is_select %}<span>√</span>{% else %}<span></span>{% endif %}</span></div><a href="#"><img src="{{ cart.C_goods.productimg }}" alt="{{ cart.C_goods.productlongname }}"><p>{{ cart.C_goods.productlongname }}</p><p class="presenPrice">{{ cart.C_goods.price }}</p></a><section><button class="subShopping">-</button><span>{{ cart.C_goods_num }}</span><button class="addShopping">+</button></section></li>{% endfor %}</ul><div class="payTheBill"><div class="all_select"><span>{% if is_all_select %}<span>√</span>{% else %}<span></span>{% endif %}</span></div><p><span>全选</span><span>共计：</span><span id="total_price">{{ total_price }}</span></p><span id="make_order">下单</span></div></section></div></div>{% endblock %}

4、视图（主要修改了cart、新建了收货地址相关方法）

下面是视图里面的所有代码

import uuid
from AXF01.pay import pay, my_alipay
from AXF01.settings import MEDIA_KEY_PREFIX
from App.models import MainWheel, MainNav, MainMustBuy, MainShop, MainShow, FoodType, Goods, AXFUser, Cart, Order, \OrderGoods, City, Addr
from App.views_constant import ALL_TPYE, ORDER_TOTAL, ORDER_PRICE_UP, ORDER_PRICE_DOWN, ORDER_SALE_UP, ORDER_SALE_DOWN, \HTTP_USER_EXIST, HTTP_OK, ORDER_STATUS_NOT_PAY, ORDER_STATUS_NOT_RECEIVE, ORDER_STATUS_NOT_SEND
from App.views_heiper import send_email_activate, get_total_price
from django.contrib.auth.hashers import make_password, check_passwordfrom django.core.cache import cache
from django.http import HttpResponse, JsonResponse
from django.shortcuts import render, redirect
from django.urls import reversedef home(request):main_wheels = MainWheel.objects.all()main_navs = MainNav.objects.all()main_mustbuys = MainMustBuy.objects.all()main_shops = MainShop.objects.all()main_shop0_1 = main_shops[0:1]main_shop1_3 = main_shops[1:3]main_shop3_7 = main_shops[3:7]main_shop7_11 = main_shops[7:11]main_shows = MainShow.objects.all()data = {"title": "首页","main_wheels": main_wheels,"main_navs": main_navs,"main_mustbuys": main_mustbuys,"main_shop0_1": main_shop0_1,"main_shop1_3": main_shop1_3,"main_shop3_7": main_shop3_7,"main_shop7_11": main_shop7_11,"main_shows": main_shows,}return render(request, 'main/home.html', context=data)def market(request):return redirect(reverse('axf:markets', kwargs={"typeid": 1001,"childcid": 0,"order_rule": 0,}))# 访问market时 先传入各项 参数 的默认值，然后重定向到markets
# 重定向到markets后根据 传入的参数 获取数据 并传给 market.html 展示到前端
def markets(request, typeid, childcid, order_rule):foodtypes = FoodType.objects.all()goods_list = Goods.objects.filter(categoryid=typeid)if childcid == ALL_TPYE:passelse:goods_list = goods_list.filter(childcid=childcid)if order_rule == ORDER_TOTAL:passelif order_rule == ORDER_PRICE_UP:goods_list = goods_list.order_by("price")elif order_rule == ORDER_PRICE_DOWN:goods_list = goods_list.order_by("-price")elif order_rule == ORDER_SALE_UP:goods_list = goods_list.order_by("productnum")elif order_rule == ORDER_SALE_DOWN:goods_list = goods_list.order_by("-productnum")foodtype = foodtypes.get(typeid=typeid)"""全部分类：0#进口水果：1001#国产水果：1002切割#： [全部分类：0  ，进口水果：1001 ， 国产水果：1002]切割：。。。。。"""foodtype_childnames = foodtype.childtypenamesf_list = foodtype_childnames.split("#")f_list_list = []for f in f_list:f_list_list.append(f.split("："))order_rule_list = [['综合排序', ORDER_TOTAL],['价格升序', ORDER_PRICE_UP],['价格降序', ORDER_PRICE_DOWN],['销量升序', ORDER_SALE_UP],['销量降序', ORDER_SALE_DOWN],]data = {"title": "商城","foodtypes": foodtypes,"goods_list": goods_list,"typeid": int(typeid),"f_list_list": f_list_list,"childcid": childcid,"order_rule_list": order_rule_list,"order_rule_view": order_rule,}return render(request, 'main/market.html', context=data)def cart(request):# 传递购物车数据carts = Cart.objects.filter(C_user=request.user)# 查看购物车表里是否存在未选中状态的数据# 有未选中的，is_all_select为False，全部都是选中的，is_all_select为Trueis_all_select = not carts.filter(C_is_select=False).exists()data = {"title": '购物车','carts': carts,'is_all_select': is_all_select,"total_price": get_total_price(),}# 传递用户地址信息user_addrs = Addr.objects.filter(A_user=request.user)# 确认用户地址信息（如果有，选择默认地址）if user_addrs.exists():if user_addrs.filter(is_default=1).count() != 1:# 确保数据库里至少有一个是选中的for user_addr in user_addrs:user_addr.is_default = 0if user_addr == user_addrs[1]:user_addr.is_default = 1user_addr.save()user_addr = user_addrs.get(is_default=1)data["user_addr"] = user_addrreturn render(request, 'main/cart.html', context=data)def mine(request):user_id = request.session.get("user_id")data = {"title": "我的个人中心","is_login": False,}if user_id:user = AXFUser.objects.get(pk=user_id)if user.u_icon:data["icon"] = MEDIA_KEY_PREFIX + user.u_icon.urldata["username"] = user.u_namedata["is_login"] = Truedata['order_not_pay'] = Order.objects.filter(O_user=user).filter(O_status=ORDER_STATUS_NOT_PAY).count()# 已付款未发货和已发货都属于 待收货 里的data['order_not_receive'] = Order.objects.filter(O_user=user).filter(O_status__in=[ORDER_STATUS_NOT_RECEIVE, ORDER_STATUS_NOT_SEND]).count()return render(request, 'main/mine.html', context=data)def register(request):# 请求if request.method == "GET":data = {"title": "注册"}return render(request, 'user/register.html', context=data)# 提交elif request.method == "POST":username = request.POST.get("username")email = request.POST.get("email")password = request.POST.get("password")icon = request.FILES.get("icon")print(request.POST)print(password)# password=hash_str(password)password = make_password(password)user = AXFUser()user.u_name = usernameuser.u_password = passworduser.u_icon = iconuser.u_email = emailuser.save()# 用uuid得到唯一激活码，再哈希加密u_token = uuid.uuid4().hex# 缓存过期时间为1天cache.set(u_token, user.id, timeout=60 * 60 * 24)send_email_activate(username, email, u_token)return redirect(reverse("axf:login"))def login(request):if request.method == "GET":error_msg = request.session.get('error_msg')data = {"title": "登录"}if error_msg:# 如果session['error_msg']存在就删除，并将error_msg显示在页面上del request.session['error_msg']data['error_msg'] = error_msgreturn render(request, 'user/login.html', context=data)elif request.method == "POST":username = request.POST.get("username")password = request.POST.get("password")users = AXFUser.objects.filter(u_name=username)# exists()方法主要是判断查询的数据是否存在，存在时返回True，否则返回False# first() 返回queryset中匹配到的第一个对象，如果没有匹配到对象则为Noneif users.exists():user = users.first()if check_password(password, user.u_password):if user.is_active:request.session['user_id'] = user.idreturn redirect(reverse('axf:mine'))else:request.session['error_msg'] = '未激活'return redirect(reverse('axf:login'))else:# 密码错误request.session['error_msg'] = '密码错误'return redirect(reverse('axf:login'))# 用户名不存在request.session['error_msg'] = '用户不存在'return redirect(reverse('axf:login'))def check_user(request):username = request.GET.get("T_name")user = AXFUser.objects.filter(u_name=username)data = {"status": HTTP_OK,"msg": 'user can use',}# exists()判断路径是否存在if user.exists():data["status"] = HTTP_USER_EXISTdata["msg"] = 'user already exist'else:passreturn JsonResponse(data=data)def check_email(request):email = request.GET.get("T_name")e = AXFUser.objects.filter(u_email=email)data = {"status": HTTP_OK,"msg": 'email can use',}# exists()判断路径是否存在if e.exists():data["status"] = HTTP_USER_EXISTdata["msg"] = 'email already exist'else:passreturn JsonResponse(data=data)def logout(request):request.session.flush()return redirect(reverse("axf:mine"))def activate(request):# 获取从用户点击 激活 传过来的u_tokenu_token = request.GET.get("u_token")user_id = cache.get(u_token)if user_id:# 拿到激活码后就从cache里面把u_token删了，防止用户第二次点击激活cache.delete(u_token)user = AXFUser.objects.get(pk=user_id)user.is_active = Trueuser.save()request.session['error_msg'] = '成功激活，请登录'return redirect(reverse('axf:login'))return render(request, 'user/activate_fail.html')def add_to_cart(request):goodsid = request.GET.get('goodsid')# 获取购物车里的数据carts = Cart.objects.filter(C_user=request.user).filter(C_goods_id=goodsid)print(request.user)# 有数据+1if carts.exists():c_obj = carts.first()c_obj.C_goods_num = c_obj.C_goods_num + 1# 没有数据创建新的else:c_obj = Cart()c_obj.C_goods_id = goodsidc_obj.C_user = request.userc_obj.save()data = {'msg': 1,'status': 200,"C_goods_num": c_obj.C_goods_num,"total_price": get_total_price(),}return JsonResponse(data=data)def sub_to_cart(request):goodsid = request.GET.get('goodsid')carts = Cart.objects.filter(C_user=request.user).filter(C_goods_id=goodsid)data = {'msg': 0,}if carts.exists():c_obj = carts.first()if c_obj.C_goods_num >= 1:c_obj.C_goods_num = c_obj.C_goods_num - 1c_obj.save()data = {'msg': 1,'status': 200,"C_goods_num": c_obj.C_goods_num,"total_price": get_total_price(),}if c_obj.C_goods_num == 0:Cart.objects.filter(pk=c_obj.id).delete()return JsonResponse(data=data)def change_cart(request):cart_id = request.GET.get('cartid')cart_obj = Cart.objects.get(pk=cart_id)# 取反cart_obj.C_is_select = not cart_obj.C_is_selectcart_obj.save()is_all_select = not Cart.objects.filter(C_user=request.user).filter(C_is_select=False).exists()data = {'status': 200,'msg': '选中与否状态改变成功',"C_is_select": cart_obj.C_is_select,"is_all_select": is_all_select,"total_price": get_total_price(),}return JsonResponse(data=data)def all_select(request):cart_list = request.GET.get('cart_list')cart_list = cart_list.split("#")carts = Cart.objects.filter(id__in=cart_list)for cart in carts:cart.C_is_select = not cart.C_is_selectcart.save()print(cart_list)data = {"status": 200,"total_price": get_total_price(),}return JsonResponse(data=data)def make_order(request):# 获取选中状态的商品carts = Cart.objects.filter(C_user=request.user).filter(C_is_select=True)# 创建订单存入数据order = Order()order.O_user = request.userorder.O_price = get_total_price()order.save()# 循环 存入商品信息for cart_obj in carts:ordergoods = OrderGoods()# ordergoods.O_user里存的是订单号ordergoods.O_user = order# 商品数量ordergoods.O_goods_num = cart_obj.C_goods_num# 商品ordergoods.O_goods = cart_obj.C_goodsordergoods.save()cart_obj.delete()data = {"status": 200,# 把订单id传到前端"order_id": order.id}return JsonResponse(data=data)# 订单详情
def order_detail(request):# request:orderid（订单的id）、AXFUser（中间件传递）order_id = request.GET.get("orderid")order = Order.objects.get(pk=order_id)print(order)data = {"title": "订单详情",# 这里的order包含 单个订单的全部信息"order": order,}return render(request, "order/order_detail.html", context=data)# 待付款订单列表
def order_not_pay(request):orders = Order.objects.filter(O_user=request.user).filter(O_status=ORDER_STATUS_NOT_PAY)data = {'title': "待付款订单列表",'orders': orders,}return render(request, 'order/order_not_pay.html', context=data)# 跳转去支付页面
def alipay(request):if request.method == "POST":order_id = request.POST.get("orderid")print(order_id)order = Order.objects.get(pk=order_id)O_price = order.O_priceO_user = order.O_user.u_namereturn_url = 'http://127.0.0.1:8000/axf/payreturn'return redirect(pay(order_id, O_price, O_user, return_url=return_url))# 支付成功后执行
def pay_return(request):# 支付成功后的回调函数 -- 重定向自己的网站# 同时在重定向之前会校验此次支付信息是否正确params = request.GET.dict()# 获取字典里的'sign'的值，然后移除这个数据sign = params.pop('sign', None)alipay = my_alipay()status = alipay.verify(params, sign)  # 返回 True or Falseif status:order_id = params.get('out_trade_no')order = Order.objects.get(pk=order_id)order.O_status = ORDER_STATUS_NOT_SENDorder.save()data = {'status': 200,}# 支付成功return redirect(reverse('axf:mine'))return HttpResponse('支付失败')# p省级城市、c市级城市、a区县级城市
def order_addrPCA(request):data = {}# 编辑if request.method == "GET":# 如果是编辑把addr传过去if request.GET.get("addrid"):addr_id = request.GET.get("addrid")addr = Addr.objects.get(pk=addr_id)data["addr"] = addr# 如果是新添加直接进入页面return render(request, 'order/oder_addr.html', context=data)# 提交if request.method == "POST":user_addrs = Addr.objects.filter(A_user=request.user)if request.POST.get("addr_id"):addr_id = request.POST.get("addr_id")user_addr = user_addrs.get(pk=addr_id)user_addr.A_user_name = request.POST.get("order_name")user_addr.A_tell = request.POST.get("order_tell")user_addr.A_time = int(request.POST.get("order_time"))user_addr.A_detail = request.POST.get("order_detail")is_default = request.POST.get("is_default")if is_default == "on":# 设置这个地址为默认地址for addr in user_addrs:addr.is_default = 0addr.save()user_addr.is_default = 1user_addr.save()print("编辑")else:user_addr = Addr()user_addr.A_user = request.useruser_addr.A_user_name = request.POST.get("order_name")user_addr.A_tell = request.POST.get("order_tell")user_addr.A_time = int(request.POST.get("order_time"))user_addr.A_detail = request.POST.get("order_detail")is_default = request.POST.get("is_default")if is_default == "on":# 设置这个地址为默认地址for addr in user_addrs:addr.is_default = 0addr.save()user_addr.is_default = 1user_addr.save()print("新建")return redirect(reverse('axf:order_addr_list'))# oder_addr.html的异步请求
def PCA(request):data = {}if request.GET.get("p"):ps = City.objects.filter(pid=0)ps_all = []for p in ps:temp = []temp.append(p.id)temp.append(p.name)ps_all.append(temp)data['ps_all'] = ps_allelif request.GET.get("c_pid"):cs = City.objects.filter(pid=request.GET.get("c_pid"))cs_all = []for c in cs:temp1 = []temp1.append(c.id)temp1.append(c.name)cs_all.append(temp1)data['cs_all'] = cs_allelif request.GET.get("a_pid"):a_s = City.objects.filter(pid=request.GET.get("a_pid"))as_all = []for a in a_s:temp2 = []temp2.append(a.id)temp2.append(a.name)as_all.append(temp2)data['as_all'] = as_allreturn JsonResponse(data)def order_addr_list(request):user_addrs = Addr.objects.filter(A_user=request.user)if user_addrs.filter(is_default=1).count() > 1:for user_addr in user_addrs:user_addr.is_default = 0user_addr.save()data = {"user_addrs": user_addrs}return render(request, 'order/oder_addr_list.html', context=data)def order_addr_del(request):addr_id = request.GET.get("addrid")addr = Addr.objects.get(pk=addr_id)addr.delete()return redirect(reverse('axf:order_addr_list'))def order_addr_select(request):user = request.useraddr_select_id = request.GET.get("addr_select_id")user_addrs = Addr.objects.filter(A_user=user)print(addr_select_id)for user_addr in user_addrs:if user_addr.id == int(addr_select_id):user_addr.is_default = 1user_addr.save()else:user_addr.is_default = 0user_addr.save()data = {"status": 200,}return JsonResponse(data)

5、收货地址列表

order_addr_list.html

{% extends "bese_order.html" %}
{% load static %}{% block ext_css %}{{ block.super }}<link rel="stylesheet" href="{% static 'axf/order/css/order_order_list.css' %}">
{% endblock %}
{% block ext_js %}{{ block.super }}<script type="text/javascript" src="{% static 'axf/order/js/order_addr_list.js' %}"></script>
{% endblock %}
{% block header %}<div class="title"><a href="#" onclick="javascript:history.back(-1);"><div class="arrow-box nav-left">返回</div></a><a id="edi_new" href="{% url 'axf:order_addrPCA' %}"><div class="arrow-box nav-left">添加</div></a><p class="font">地址列表</p></div>{% endblock %}
{% block content %}<div id="order_addr_list" class="container"><ol>{% for user_addr in user_addrs %}<ul class="user_addr"><div class="is_select" addrid="{{ user_addr.id }}">{% if user_addr.is_default %}<span>√</span>{% else %}<span></span>{% endif %}</div><li class="menuList"><p><span id="name">{{ user_addr.A_user_name }}</span><span id="tell">{{ user_addr.A_tell }}</span></p><br><div id="detail">收货地址：{{ user_addr.A_detail }}</div><div id="toto"><a addrid="{{ user_addr.id }}" class="edi">编辑</a>&nbsp;&nbsp;|&nbsp;&nbsp;<aaddrid="{{ user_addr.id }}" class="del">删除</a></div></li></ul>{% endfor %}</ol><a id="back_button" href="{% url 'axf:cart' %}" class="btn btn-success btn-block">确定</a><br><br><br><br></div>
{% endblock %}

order_addr_list.js

$(function () {var $del = $(".del");$del.click(function () {var $del = $(this);var addr_id = $del.attr("addrid");window.open('/axf/orderaddrdel/?addrid=' + addr_id, target = "_self");});var $edi = $(".edi");$edi.click(function () {var $edi = $(this);var addr_id = $edi.attr("addrid");window.open('/axf/orderaddrPCA/?addrid=' + addr_id, target = "_self");});$(".is_select").click(function () {console.log("点到我了");$(".is_select").each(function () {var $other_select = $(this);$other_select.find("span").html('');});var $the_select = $(this);$the_select.find("span").html("√");var addr_select_id = $the_select.attr("addrid");$.get("/axf/orderaddrselect/", {"addr_select_id": addr_select_id}, function (data) {console.log('保存默认地址成功');console.log(data["status"])});});});

order_addr_list.css

.title {width: 100%;height: 50px;background-color: #009688;
}.font {color: #fff;line-height: 50px;font-size: 20px;text-indent: -2em;text-align: center
}.nav-left {float: left;
}.arrow-box {width: 50px;height: 26px;position: relative;border-radius: 10% 10%;background: #fff;text-align: center;line-height: 26px;top: 12px;font-size: 14px;left: 10px;
}.container {padding: 0.2rem 0.5rem 0.5rem 0.5rem;overflow: auto;height: 100%;width: 100%;position: fixed;
}.menuList {border-bottom: 0.04rem solid lightgray;margin-left: 1.1rem;
}#name {font-size: 0.4rem;}#tell {font-size: 0.3rem;color: gray;margin-left: 0.5rem;margin-right: 15%;
}#detail {font-size: 0.3rem;color: grey;}#toto {border: 0.05rem solid lightgray;position: absolute;border-radius: 0.3rem;padding: 0 0.3rem;font-size: 0.35rem;line-height: 0.65rem;top: 0;right: 0.5rem;
}#toto,#toto > a {color: #ababab;
}.user_addr {position: relative;margin-top: 1rem;
}
.is_select{box-sizing: border-box;border: 0.04rem solid orange;background: white;display: inline-block;width: 0.6rem;height: 0.6rem;overflow: hidden;border-radius: 50%;line-height: 0.6rem;position: absolute;margin-top: 0.5rem;
}
.is_select>span{background: yellow;font-size: 0.5rem;display: block;line-height: 0.6rem;margin-left: 0.1rem;
}
#back_button{margin-top: 1rem;background: #009688;
}
#edi_new{position: absolute;right: 0.5rem;
}
#edi_new>div{background: #009688;border: 0.05rem solid lightgray;color: white;
}

6、收货地址编辑、新建页面（这部分重点在js上）

{% extends "bese_order.html" %}
{% load static %}{% block ext_css %}{{ block.super }}<link rel="stylesheet" href="{% static 'axf/order/css/order_addr.css' %}">
{% endblock %}{% block ext_js %}{{ block.super }}<script type="text/javascript" src="{% static 'axf/order/js/order_addr.js' %}"></script>
{% endblock %}{% block footer %}<div class="title"><a href="#" onclick="javascript:history.back(-1);"><div class="arrow-box nav-left">返回</div></a><p class="font">编辑收货地址</p></div>
{% endblock %}
{% block content %}<div class="container"><form method="POST" action="{% url 'axf:order_addrPCA' %}" class="bs-example bs-example-form" role="form"onsubmit="return all_right();">{% csrf_token %}{% if addr %}<input name="addr_id" type="hidden" value="{{ addr.id }}" ><div class="input-group"><span class="input-group-addon">收货人:</span><input id="order_name" name="order_name" type="text" class="form-control"value="{{ addr.A_user_name }}"></div><span class="name_a"></span><br><div class="input-group"><span class="input-group-addon">电&nbsp;&nbsp;&nbsp;&nbsp;话:</span><input id="tell" name="order_tell" type="text" class="form-control" value="{{ addr.A_tell }}"></div><span class="tell_a"></span><br><div class="input-group"><span class="input-group-addon">收货时间:</span><input id="time" name="order_time" type="text" class="form-control" placeholder="1"value="{{ addr.A_time }}"><span class="input-group-addon">小时后收货</span></div><span class="time_a"></span><br><div class="input-group"><span class="input-group-addon">收货地址:</span><select id="p"><option value="1">请选择</option></select><select id="c"><option value="1">请选择</option></select><select id="a"><option value="1">请选择</option></select></div><br><div class="input-group"><span class="input-group-addon">详细地址:</span><input id="addr_dail" name="order_detail" type="text" class="form-control" placeholder=""value="{{ addr.A_detail }}"></div><span class="addr_dail_a"></span><br><br><div><span id="checkbox">默认地址<input name="is_default" type="checkbox""></span></div>{% else %}<div class="input-group"><span class="input-group-addon">收货人:</span><input id="order_name" name="order_name" type="text" class="form-control"value=""></div><span class="name_a"></span><br><div class="input-group"><span class="input-group-addon">电&nbsp;&nbsp;&nbsp;&nbsp;话:</span><input id="tell" name="order_tell" type="text" class="form-control" value=""></div><span class="tell_a"></span><br><div class="input-group"><span class="input-group-addon">收货时间:</span><input id="time" name="order_time" type="text" class="form-control" placeholder="1"value="1"><span class="input-group-addon">小时后收货</span></div><span class="time_a"></span><br><div class="input-group"><span class="input-group-addon">收货地址:</span><select id="p"><option value="1">请选择</option></select><select id="c"><option value="1">请选择</option></select><select id="a"><option value="1">请选择</option></select></div><br><div class="input-group"><span class="input-group-addon">详细地址:</span><input id="addr_dail" name="order_detail" type="text" class="form-control" placeholder=""value=""></div><span class="addr_dail_a"></span><br><br><div><span id="checkbox">默认地址<input id="is_default" name="is_default" type="checkbox"></span></div>{% endif %}<br><br><button type="submit" class="btn btn-success btn-block">保存</button></form></div>
{% endblock %}

order_addr.js

$(function () {the_changge(); // 当输入有变化时，执行var $p = $('#p');var $c = $('#c');var $a = $('#a');
// 点击p时获取省级城市名单$.get("/axf/PCA/", {"p": 0}, function (data) {console.log(data['ps_all']);var ps_all = data['ps_all'];var l = ps_all.length;for (var i = 0; i < l; i++) {$p.append('<option value="' + ps_all[i][0] + '">' + ps_all[i][1] + '</option>');$c.hide();$a.hide();}$p.append('<option value="' + "1" + '">' + "" + '</option>');$p.append('<option value="' + "1" + '">' + "" + '</option>');$p.append('<option value="' + "1" + '">' + "" + '</option>');});
// p发生变化就移除c、a中的值，并获取新的$p.change(function () {if ($("#p option:selected").val() == 1) {$c.hide();$a.hide();$("#addr_dail").val('');} else {p_dail = $("#p option:selected").text();$("#addr_dail").val(p_dail + ",");$(".addr_dail_a").html("").css("color", "green");$(".addr_dail_a").children().remove();$c.children().not(':eq(0)').remove();$c.show();$a.children().not(':eq(0)').remove();$a.hide();c_pid = $("#p option:selected").val();console.log(c_pid);// 返回选中数据$.get("/axf/PCA/", {"c_pid": c_pid}, function (data) {var cs_all = data['cs_all'];for (var i = 0; i < cs_all.length; i++) {$c.append('<option value="' + cs_all[i][0] + '">' + cs_all[i][1] + '</option>');}});}});
// c发生变化就移除a中的值，并获取新的$c.change(function () {if ($("#c option:selected").val() == 1) {$a.hide();$("#p option:selected").val();$("#addr_dail").val(p_dail);} else {p_dail = $("#p option:selected").text();c_dail = $("#c option:selected").text();$("#addr_dail").val(p_dail + c_dail + ",");$a.children().not(':eq(0)').remove();a_pid = $("#c option:selected").val();console.log(a_pid);// 返回选中数据$.get("/axf/PCA/", {"a_pid": a_pid}, function (data) {var as_all = data['as_all'];if (as_all.length > 0) {$a.show();for (var i = 0; i < as_all.length; i++) {$a.append('<option value="' + as_all[i][0] + '">' + as_all[i][1] + '</option>');}}});}});
// a发生变化时，将p\c\a中的城市地名设为详细地址的值$a.change(function () {// 如果a选中的是“请选择”，给详细地址复制的是p+cif ($("#a option:selected").val() == 1) {$("#p option:selected").val();$("#c option:selected").val();$("#addr_dail").val(p_dail + c_dail + ",");} else {p_dail = $("#p option:selected").text();c_dail = $("#c option:selected").text();a_dail = $("#a option:selected").text();$("#addr_dail").val(p_dail + c_dail + a_dail + ",");}});
})
;function the_changge() {// 姓名输入后，验证姓名var $order_name = $('#order_name');var order_name = $order_name.val().trim();var $name_a = $(".name_a");$order_name.change(function () {if (!order_name) {$name_a.html("").css("color", "green");$name_a.children().remove();}});// 地址输入后，验证地址var $addr_dail = $('#addr_dail');var addr_dail = $addr_dail.val().trim();var $addr_dail_a = $(".addr_dail_a");$addr_dail.change(function () {if (!addr_dail) {$addr_dail_a.html("").css("color", "green");$addr_dail_a.children().remove();}});// 电话输入后，验证电话var $tell = $('#tell');var $tell_a = $(".tell_a");$tell.change(function () {if ($tell.val().trim()) {var reg = /^[\d]{4,20}$/;if (!reg.test(jQuery($tell).val())) {jQuery($tell).focus();$tell_a.html("请输入正确的大于3位的手机号").css("color", "red");$tell_a.append('<br>');} else {$tell_a.html("").css("color", "green");$tell_a.children().remove();}}console.log($tell_a.css("color"));});console.log($tell_a.css("color"));// 时间输入后，验证输入时间var $time = $('#time');var $time_a = $(".time_a");$time.change(function () {var time_num = $time.val().trim();if (time_num) {var reg = /^\d{1,}$/;if (reg.test(time_num)) {if (time_num < 100) {jQuery($time).focus();$time_a.html("").css("color", "green");$time_a.children().remove();} else {$time_a.html("请输入正确的时间，1-99").css("color", "red");$time_a.append('<br>');}} else {$time_a.html("请输入正确的时间，1-99").css("color", "red");$time_a.append('<br>');}}console.log($time_a.css("color"));});console.log($time_a.css("color"));$("#is_default").change(function () {var is_default = $("#is_default").prop("checked");if (is_default === true) {var is_default = 1;console.log("选为当前用户的默认地址");} else {var is_default = 0;console.log("非默认地址")}});
}function all_right() {var not_null = 0;var $order_name = $("#order_name");var order_name = $order_name.val().trim();var $name_a = $(".name_a");var name_color = $name_a.css("color");var $tell = $("#tell");var tell = $tell.val().trim();var $tell_a = $(".tell_a");var tell_color = $tell_a.css("color");var $addr_dail = $("#addr_dail");var addr_dail = $addr_dail.val().trim();var $addr_dail_a = $(".addr_dail_a");var addr_dail_color = $addr_dail_a.css("color");if (!order_name) {$name_a.html("姓名不能为空").css("color", "red");$name_a.append('<br>');not_null = 1;} else if (name_color === 'rgb(255, 0, 0)') {console.log("有红");not_null = 1;}if (!tell) {$tell_a.html("电话不能为空").css("color", "red");$tell_a.append('<br>');not_null = 1;} else if (tell_color === 'rgb(255, 0, 0)') {console.log("有红");not_null = 1;}if (!addr_dail) {$addr_dail_a.html("地址不能为空").css("color", "red");$addr_dail_a.append('<br>');not_null = 1;} else if (addr_dail_color === 'rgb(255, 0, 0)') {console.log("有红");not_null = 1;}if (not_null === 0) {console.log("通过");return true}console.log("未通过");return false
}

order_addr.css

.title {width: 100%;height: 50px;background-color: #009688;
}.font {color: #fff;line-height: 50px;font-size: 20px;text-indent: -2em;text-align: center
}.nav-left {float: left;
}.arrow-box{width: 50px;height: 26px;position: relative;border-radius: 10% 10%;background: #fff;text-align: center;line-height: 26px;top: 12px;font-size: 14px;left: 10px;
}.container {padding: 2rem 0.5rem;overflow: auto;height: 100%;width: 100%;position: fixed;
}
.input-group-addon{font-size: 10px;
}
#p,#c,#a{width: 33.3%;padding: 6px 0px;font-size: 10px;font-weight: normal;line-height: 1;color: #555;text-align: center;background-color: #eee;border: 1px solid #000000;border-radius: 4px;
}
input[type="checkbox"]{margin-left: 0.2rem;margin-top: 0;height: 0.5rem;width: 0.5rem;
}
#checkbox{float: right;margin-right: 0.4rem;
}
.tell_a,.time_a,.name_a,.addr_dail_a{margin-left: 2rem;
}

7、中间件

记得在中间件里面添加上这几个路径，收货信息编辑和保存时需要获取的登录信息

    "/axf/orderaddrPCA/","/axf/orderaddrlist/","/axf/orderaddrselect/",

8、访问截图

Django 19购物商城项目（收货地址：添加、修改）相关推荐

39 Flutter仿京东商城项目收货地址列表、增加修改收货地址布局、弹出省市区选择器...
加群452892873 下载对应39课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml city_pickers: ^0.1.22 AddressAdd.dart import ...
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址
UNIAPP实战项目笔记43 购物车页面修改收货地址和修改默认地址实际案例图片修改收货地址和修改默认地址页面布局和功能具体内容图片自己替换哈,随便找了个图片的做示例用到了vuex的状态机,具体 ...
Vue3电商项目实战-结算支付 3【05-结算-收货地址-添加、06-结算-收货地址-修改、07-结算-提交订单】
文章目录 05-结算-收货地址-添加 06-结算-收货地址-修改 07-结算-提交订单 05-结算-收货地址-添加目的:实现收货地址的添加. 大致步骤: 独立组件,准备一个对话框完成表单布局完成 ...
Django 20购物商城项目（注册、登录页面：生成动态验证码）
dDjango 20购物商城项目 1.安装pillow 2.在注册页面加入验证码 2.1.register.html (增加内容) 2.2.register.js(增加内容) 2.2.路由.视图(增加 ...
ecshop收货地址货到付款修改
用户选择某些地址时,支付方式里则可以依据此地址来对货到付款选项进行显示或隐藏.目前仅与顺丰合作,以顺丰提供的数据为准. 使用到的数据库分别如下: ecs_region//地方数据,PRIMARY KE ...
收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址,当中有省.市.区等选择项,如下图: 在添加收货地址时我们会先选择省再选市最后选所在区,这些都是下拉列表式的选择,选择完成才会填写具体地 ...
收货地址 - 需求分析与表设计
用户在确认订单页面,可以针对收货地址做如下操作: 1. 查询用户的所有收货地址列表 2. 新增收货地址 3. 删除收货地址 4. 修改收货地址 5. 设置默认地址
Django项目实践（商城）：十一、收货地址
(根据居然老师直播课内容整理) 一.页面功能简介在"用户中心"的任一界面,点击左边"收货地址"后,显示下面界面此界面包括以下4个功能: 新增收货地址删除当 ...
设置默认收货地址【项目商城】
设置默认收货地址[项目商城] 设置默认收货地址 1. 持久层 1.1 规划SQL语句 1.2 设计抽象方法 1.3 配置SQL映射测试 2.业务层 2.1 异常规划 2.2 抽象方法 2.3 实现 ...