用Django框架完成一个相对完善的一个手机商城
前边我们展示了views中的代码，来我们来展示后台的界面，代码我就不全部展示了
- 这里给大家介绍一下一个列表分页的写法
from django import template
register = template.Library()
from django.utils.html import format_html
from myadmin.models import Cates
from django.core.urlresolvers import reverse
# 自定义过滤器
# @register.filter
# def py11_upper(val):
# # print ('val from template:',val)
# return val.upper()
# 自定义乘法运算标签
@register.simple_tag
def cheng(var1,var2):
res = float(var1) * float(var2)
return '%.2f'%res
# 自定义模板导航数据 标签
@register.simple_tag
def showNav():
# 获取一级分类
CatesList = Cates.objects.filter(pid=0)
# print(CatesList)
s = ''
for x in CatesList:
s += '''
<li class="layout-header-nav-item">
<a href="{url}" class="layout-header-nav-link">{name}</a>
</li>
'''.format(name=x.name,url=reverse('myhome_list',args=(x.id,)))
return format_html(s)
# 自定义分页标签
@register.simple_tag
def showpage(count,request):
'''
count 总页数
request 请求对象
'''
# 接受当前的页码数
p = int(request.GET.get('page',1))
# 获取当前请求中所有参数
data = request.GET.dict()
args = ''
for k,v in data.items():
print(k,v)
if k != 'page':
args += '&'+k+'='+v
# {'types': 'all', 'keywords': 'wu','page':2}
# &types=all&keywords=wu
# types=allkeywords=wu
# &types=all&keywords=wu
start = p-5
end = p+4
# 判断 如果当前页 小于 5
if p <= 5:
start = 1
end = 10
# 判断 如果当前页 大于 总页数-5
if p > count-5:
start = count-9
end = count
# 判断 如果总页数 小于 10
if count < 10:
start = 1
end = count
pagehtml = ''
# 首页
pagehtml += '<li><a href="?page=1{args}">首页</a></li>'.format(args=args)
# 上一页
if p > 1:
pagehtml += '<li><a href="?page={p}{args}">上一页</a></li>'.format(p=p-1,args=args)
for x in range(start,end+1):
# 判断是否为当前页
if p == x:
pagehtml += '<li class="am-active"><a href="?page={p}{args}">{p}</a></li>'.format(p=x,args=args)
else:
pagehtml += '<li><a href="?page={p}{args}">{p}</a></li>'.format(p=x,args=args)
# 下一页
if p < count:
pagehtml += '<li><a href="?page={p}{args}">下一页</a></li>'.format(p=p+1,args=args)
# 尾页
pagehtml += '<li><a href="?page={p}{args}">尾页</a></li>'.format(p=count,args=args)
return format_html(pagehtml)
# return pagehtml
商品分类管理界面
网站首页
购物车界面
{% extends 'myhome/index.html' %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart-app.css">
{% endblock %}
{% block con %}
<div class="mainbody cart" style="padding-top: 70px;">
<div class="container">
<!-- 购物车详情头 -->
<table class="cart-header">
<tbody>
<tr>
<td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
<div class="cart-select-all JSelectAll">
<span class="cart-select-title">全选</span>
</div>
</td>
<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
<td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">操作</td>
</tr>
</tbody>
</table><!-- 购物车详情头 E-->
<!-- 购物清单信息列表 -->
<div class="cart-merchant-list">
<div class="cart-merchant">
<table class="cart-merchant-body">
<tbody>
{% for v in cartdata %}
<tr class="cart-product">
<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
<div class="mz-checkbox " cartid="{{ v.id }}"></div>
<a href="meilanx.html" class="cart-product-link" target="_blank">
<img src="{{ v.goodsid.pic_url }}" class="cart-product-img" alt="魅蓝 X">
</a>
</td>
<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
<a href="meilanx.html" class="cart-product-link" target="_blank">
<p>{{ v.goodsid.goodsname }}</p>
<span class="cart-product-desc">{{ v.goodsid.title }}</span>
</a>
</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
<p>
<span class="cart-product-price">{{ v.goodsid.price }}</span>
</p>
</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
<div class="cart-product-number-adder">
<p class="cart-product-number-max show"></p>
<div class="mz-adder">
<button class="mz-adder-subtract"></button>
<div class="mz-adder-num"><input price="{{ v.goodsid.price }}" cartid="{{ v.id }}" class="mz-adder-input" value="{{ v.num }}" type="text"></div>
<button class="mz-adder-add"></button>
</div>
</div>
</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
{% load pagetag %}
<span class="cart-product-price total">{% cheng v.num v.goodsid.price %}</span>
</td>
<td class="cart-col-ctrl col-md-1 hidden-xs hidden-sm">
<div class="cart-product-remove" cartid="{{ v.id }}">
<span class="glyphicon glyphicon-remove"></span>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!-- 购物清单信息列表 E-->
</div>
<!-- 结算详情 -->
<div class="cart-footer" id="cartFooter">
<div class="container">
<div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
<div class="cart-select-all JSelectAll" data-mdesc="全选按钮" data-mtype="store_cart_all">
<div class="mz-checkbox"></div>
<span class="cart-select-title">全选</span>
</div>
<!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
<span class="cart-footer-count">
共
<span class="cart-footer-num" id="totalCount"></span>
件商品
</span>
</div>
<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
<span class="cart-footer-sum">
<span class="cart-footer-text">已优惠</span>
<span class="cart-footer-num red" id="totalDiscount">0.00</span>
<span class="cart-footer-text">元， 合计(不含运费)：</span>
<span class="cart-footer-total" id="totalPrice">0.00</span>
</span>
<div class="mz-btn success" id="cartSubmit">去结算</div>
</div>
</div>
</div><!-- 结算详情 E-->
</div>
<!-- 主内容区域 E-->
{% endblock %}
{% block js %}
<script type="text/javascript">
//回顶部
backTop();
//全选
allSelect();
// 点击结算
$('#cartSubmit').click(function(){
// 是否选择了购买的商品
var cartids = TotalNum()
if(cartids.length == 0){
alert('请先选择要购买的商品')
return;
}
location.href="{% url 'myhome_order_confirm'%}?cartids="+cartids
})
//选择框操作
function allSelect(){
var aee = false;
var see = false;
// 全选
$('.JSelectAll .mz-checkbox').click(function(){
if(aee==false){
$(this).addClass('checked');
$('.cart-col-select .mz-checkbox').addClass('checked');
aee = true;
}else if(aee==true){
$(this).removeClass('checked');
$('.cart-col-select .mz-checkbox').removeClass('checked');
aee = false;
}
TotalNum()
})
//单选
$('.cart-col-select .mz-checkbox').click(function(){
if(see==false){
$(this).addClass('checked');
see = true;
}else if(see==true){
$(this).removeClass('checked');
see = false;
}
TotalNum()
})
}
// 计算总价和购买总数的方法
function TotalNum(){
var cartids = []
var TotalPrice = 0
var CountNum = 0
// 获取页面中所有的选框
$('table').find('.checked').each(function(){
// 获取当前选中的元素的 小计价格 和数量
TotalPrice += Number($(this).parents('tr').find('.total').text())
CountNum += Number($(this).parents('tr').find('.mz-adder-input').val())
cartids.push( $(this).attr('cartid'))
})
// console.log(TotalPrice,CountNum)
$('#totalCount').text(CountNum)
$('#totalPrice').text(toDecimal2(TotalPrice))
return cartids
}
// 购物车商品的删除
$('.cart-product-remove').click(function(){
// 获取当前要删除的购物车的id
var cartid = $(this).attr('cartid')
// 发送ajax请求,删除数据
$.get('{% url 'myhome_cart_del' %}',{'cartid':cartid},function(data){
alert(data.msg)
TotalNum()
},'json')
})
// 数量更新
$('.mz-adder-subtract').click(function(){
// 数量减少
var inp = $(this).parents('.mz-adder').find('.mz-adder-input')
var cartid = inp.attr('cartid')
var num = Number(inp.val())
if(num <= 1){
num = 1
return;
}
num --
// 调用函数,修改数据
RequestCartNum(cartid,num)
inp.val(num)
inp.val(num)
var price = inp.attr('price')
var total = toDecimal2(num * price)
$(this).parents('tr').find('.total').text(total)
TotalNum()
})
$('.mz-adder-add').click(function(){
// 数量增加
var inp = $(this).parents('.mz-adder').find('.mz-adder-input')
var cartid = inp.attr('cartid')
var num = Number(inp.val())
num ++
// 调用函数,修改数据
RequestCartNum(cartid,num)
inp.val(num)
var price = inp.attr('price')
var total = toDecimal2(num * price)
$(this).parents('tr').find('.total').text(total)
TotalNum()
})
// 封装函数,发送ajax请求,修改购物车商品的购买数量
function RequestCartNum(cartid,num){
$.get('{% url 'myhome_cart_edit' %}',{'cartid':cartid,'num':num},function(data){
alert(data.msg)
},'json')
}
</script>
{% endblock %}
8
订单支付界面，这个只写了个支付宝的，感兴趣的朋友可以添加个其他的，这里的地址用的是自己填写的，修改地址可以在个人中心自己修改。
{% extends 'myhome/index.html' %}
{% block title %}
<title>订单确认页</title>
{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/cart-app.css">
{% endblock %}
{% block con %}
<form class="form-inline" action="{% url 'myhome_order_create' %}" method="POST">
{% csrf_token %}
<div class="mainbody cart" style="padding-top: 70px;">
<div class="container">
<div class="row">
<br>
<div class="col-md-12">
<div style="height: 160px;background: #fff;">
<div class="col-md-8">
<h4>填写收货信息</h4>
</div>
<div class="col-md-4">
<h4>选择支付方式</h4>
</div>
<div class="col-md-8">
<div class="form-group">
<label for="exampleInputName2">收货人</label>
<input type="text" name="username" class="form-control" placeholder="收货人">
</div>
<div class="form-group">
<label for="exampleInputEmail2">联系电话</label>
<input type="email" name="phone" class="form-control" placeholder="联系电话">
</div>
<div class="form-group" style="margin-top: 20px;">
<label for="exampleInputEmail2">收货地址</label>
<input type="text" name="address" class="form-control" size="50" placeholder="收货地址">
</div>
<!-- 隐藏域 传递当前的购物车id -->
<input type="hidden" name="cartids" value="{{ request.GET.cartids }}">
</div>
<div class="col-md-2" style="height: 40px;border:1px solid red;margin: 10px;text-align: center;line-height: 40px;">
支付宝
</div>
<div class="col-md-2" style="height: 40px;border:1px solid #ccc;margin: 10px;text-align: center;line-height: 40px;">
货到付款
</div>
</div>
</div>
</div>
<!-- 购物车详情头 -->
<table class="cart-header">
<tbody>
<tr>
<td class="cart-col-select col-md-3 col-xs-3 col-sm-3">
<div class="cart-select-all JSelectAll">
<h4>购物清单</h4>
</div>
</td>
<td class="cart-col-name col-md-3 hidden-xs hidden-sm">商品</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">单价(元)</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">数量</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">小计(元)</td>
</tr>
</tbody>
</table><!-- 购物车详情头 E-->
<!-- 购物清单信息列表 -->
<div class="cart-merchant-list">
<div class="cart-merchant">
<table class="cart-merchant-body">
<tbody>
{% for v in cartdata %}
<tr class="cart-product">
<td class="cart-col-select col-md-3 col-xs-4 col-sm-4">
<a href="meilanx.html" class="cart-product-link" target="_blank">
<img src="{{ v.goodsid.pic_url }}" class="cart-product-img" alt="魅蓝 X">
</a>
</td>
<td class="cart-col-name col-md-3 col-xs-8 col-sm-8">
<a href="meilanx.html" class="cart-product-link" target="_blank">
<p>{{ v.goodsid.goodsname }}</p>
<span class="cart-product-desc">{{ v.goodsid.title }}</span>
</a>
</td>
<td class="cart-col-price col-md-2 hidden-xs hidden-sm">
<p>
<span class="cart-product-price">{{ v.goodsid.price }}</span>
</p>
</td>
<td class="cart-col-number col-md-2 hidden-xs hidden-sm">
<div class="cart-product-number-adder">
<p class="cart-product-number-max show"></p>
<div class="mz-adder" style="text-align: center;line-height: 40px;">
<h5>{{ v.num }}</h5>
</div>
</div>
</td>
<td class="cart-col-total col-md-1 hidden-xs hidden-sm">
{% load pagetag %}
<span class="cart-product-price total">{% cheng v.num v.goodsid.price %}</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div><!-- 购物清单信息列表 E-->
</div>
<!-- 结算详情 -->
<div class="cart-footer" id="cartFooter">
<div class="container">
<div class="cart-footer-left col-md-6 col-xs-4 col-sm-4">
<!-- <span class="cart-remove-selected" id="removeSelected">删除选中的商品</span> -->
<span class="cart-footer-count">
共
<span class="cart-footer-num" id="totalCount"></span>
件商品
</span>
</div>
<div class="cart-footer-right col-md-5 col-md-offset-1 col-sm-offset-2 col-xs-8 col-sm-6">
<span class="cart-footer-sum">
<span class="cart-footer-text">已优惠</span>
<span class="cart-footer-num red" id="totalDiscount">0.00</span>
<span class="cart-footer-text">元， 合计(不含运费)：</span>
<span class="cart-footer-total" id="totalPrice">0.00</span>
</span>
<div class="mz-btn success" id="cartSubmit">提交订单</div>
</div>
</div>
</div><!-- 结算详情 E-->
</div>
<!-- 主内容区域 E-->
</form>
{% endblock %}
{% block js %}
<script type="text/javascript">
//回顶部
backTop();
var totalPrice = 0
// 订单提交事件
$('#cartSubmit').click(function(){
// 检测是否填写了收货信息
$('form').submit()
})
// 计算总价
$('.total').each(function(){
totalPrice += Number($(this).text())
})
$('#totalPrice').text(toDecimal2(totalPrice))
// 计算总数
var totalCount = 0
$('.mz-adder').each(function(){
totalCount+= Number($(this).find('h5').text())
})
$('#totalCount').text(totalCount)
</script>
{% endblock %}
个人中心展示
{% extends 'myhome/index.html' %}
{% block title %}
<title>我的订单</title>
{% endblock %}
{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/order.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/public/css/order-app.css">
{% endblock %}
{% block con %}
<div class="mainbody order">
<div class="container">
<!-- 面包屑导航 -->
<div class="crumbs col-xs-12 col-sm-12">
<ol class="breadcrumb">
<li class="hidden-xs hidden-sm"><a href="index.html">首页</a></li>
<li class="hidden-xs hidden-sm"><a href="member.html">我的商城</a></li>
<li class="active">我的订单</li>
</ol>
</div><!-- 面包屑导航 E-->
<div class="main clearfix">
<!-- 左侧导航 -->
<div class="left-nav f-fl col-md-4 hidden-xs hidden-sm">
<div class="nav-main">
<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>订单中心</a>
<a href="order.html" class="ml active" >我的订单</a>
<a href="javascript:;" class="type-title"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>个人中心</a>
</div>
</div><!-- 左侧导航 E-->
<!-- 右侧内容展示 -->
<div class="right-content f-fr col-md-8 col-xs-12 col-sm-12">
<div class="order-main">
<div class="type-tab-btn">
<a href="javascript:;" class="allOrder active col-20" data-type="-1">订单</a><i class="line hidden-xs hidden-sm">|</i>
<!-- <a class="waitPay col-20" href="javascript:;" data-type="0">待付款<span class="amount _actAmount"></span></a><i class="line hidden-xs hidden-sm">|</i>
<a class="waitDeliver col-20" href="javascript:;" data-type="1">待发货</a><i class="line hidden-xs hidden-sm">|</i>
<a class="hasDeliver col-20" href="javascript:;" data-type="2">已发货</a><i class="line hidden-xs hidden-sm">|</i>
<a class="other col-20" href="javascript:;" data-type="99">其他</a> -->
</div>
<div class="list-head hidden-xs hidden-sm">
<ul class="clearfix">
<li class="w125" style="width: 250px;">
订单明细
</li>
<li class="w125">地址</li>
<li class="w125">收货人</li>
<li class="w125">联系电话</li>
<li class="w125">金额</li>
<li class="w125">状态</li>
<li class="w">操作</li>
</ul>
</div>
<div id="tableList" class="type-contain ui-load-container">
<div class="ui-load-content"><input id="unPayNum" value="0" type="hidden">
<table class="orderItem">
<tbody>
{% for v in orderdata %}
<tr class="trHead hidden-xs hidden-sm">
<td colspan="4" class="title clearfix">
<div class="f-fl">
下单时间：<span class="time">{{ v.addtime|date:'Y-m-d H:i:s' }}</span>
订单号：<span class="orderNumber">{{ v.id }}</span>
</div>
</td>
</tr>
<tr class="list-box b-l b-r b-b">
<td class="list b-r j-iamCart">
<div class="cart-wrap j-CartWrap">
<div class="shop j-shop j-amLight">
{% for vv in v.orderinfo_set.all %}
<div class="item b-t clearfix j-item j-iamMain" style="width: 250px;">
<a class="productDetail nameWidth col-xs-4 col-sm-4" href="#" target="_blank">
<img src="{{ vv.goodsid.pic_url }}" class="f-fl">
</a>
<div class="describe f-fl col-xs-8 col-sm-8">
<div class="vertic clearfix">
<span class="clearfix">
<a class="productDetail nameWidth" href="#" target="_blank">
<i>{{ vv.goodsid.title}}</i> </a>
<p>
￥{{ vv.goodsid.price }}×{{ vv.num }}
</p>
</span>
</div>
</div>
<input class="orderSn" value="51090244361541573081" type="hidden">
<input class="isCart" value="1" type="hidden">
<input class="orderSnSon" value="21090244361541575081" type="hidden">
</div>
{% endfor %}
</div>
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="addressDiv">
{{ v.address }}
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="addressDiv">
{{ v.username }}
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="addressDiv">
{{ v.phone }}
</div>
</td>
<td class="b-r w125 center price b-t hidden-xs hidden-sm">
<div class="priceDiv">
￥ {{ v.totalprice }}
</div>
</td>
<td class="b-r w125 center state b-t hidden-xs hidden-sm">
<div class="stateDiv">
{% if v.status == 0%}
<div>未支付<br></div>
{% elif v.status == 1%}
<div>已支付<br></div>
{% endif %}
</div>
</td>
<td class="w125 center opreat b-t hidden-xs hidden-sm">
<ul>
<li class="more">
<!-- <a href="{% url 'myhome_center_edit' %}?uid={{ v.orderid.goodsid }}" target="_blank">
<button>编辑</button>
</a> -->
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal{{ v.id }}">
编辑
</button>
<!-- Modal -->
<div class="modal fade" id="myModal{{ v.id }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form action="{% url 'myhome_center_edit' %}?orderid={{v.id}}" method="POST">
{% csrf_token %}
<div class="form-group">
<label >收货人</label>
<input type="text" class="form-control" name="username" value="{{ v.username }}">
</div>
<div class="form-group">
<label >电话</label>
<input type="text" class="form-control" name="phone" value="{{ v.phone }}">
</div>
<div class="form-group">
<label >地址</label>
<input type="text" class="form-control" name="address" value="{{ v.address }}">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">更新收货信息</button>
</div>
</form>
</div>
</div>
</div>
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
好了，到这里基本就展示完了，当然这里的代码不是很全，这里主要跟大家交流一下思路，分享一些经验
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
