Django实战

现在我们有了一个使用json格式的RESTful API,可以实现这样的功能了:为了避免在产品列表和购物车之间来回切换,需要在产品列表界面显示购物车,并且通过ajax的方式不刷新界面就更新购物车的显示内容。

 

ajax框架的选择

关于ajax框架的选择,看图不说话:

Django实战_第1张图片


我不管你选的是什么,反正我是选了jquery。

在Django中使用jquery

这个实在是简单得不能在简单了,在depot/static下面创建js文件夹,放入jquery库,如jquery-1.7.1.min.js。然后在模板界面中引入即可。我们假定所有的界面都使用jquery,而且希望我们能够编写出Unobtrusive JavaScript,所以在base.html中,在</body>之后加入如下几行内容:

</body> 
<
script src="/static/js/jquery-1.7.1.min.js"></script>
{% block js %}
<!--这里插入具体页面引用的js库,或者js代码-->
{% endblock %}
<script>
$(
function () {
//这里编写base界面的on_ready代码

{
% block on_ready %}
//这里插入具体界面的on_ready代码
{% endblock %}
});
</script>

注:jquery的$(function(){...}) 是 $(document).ready(function(){...)) 的简写。

嵌入购物车界面

为了实现如下图所示的嵌入购物车的产品目录界面,我们需要做两件事情:

Django实战_第2张图片

1. 修改模板:

depot/templates/depotapp/store.html:

    {% extends "base.html" %}  

{% block title %} 产品目录 {% endblock %}
{% block pagename %} 产品目录 {% endblock %}

{% block content %}
<div class="row">
<div class="span10">
{% for item in products %}
<div class="row" style="padding-top:10">
<div class="span3 media-grid">
<a href="#">
<img class="thumbnail" src="{{item.image_url}}" alt="">
</a>
</div>
<div class="span6">
<h3>{{item.title}}</h3>
<br/>
{{item.description}}
<br/>
<br/>
<br/>
<div class="row">
<div class="span2"><h3>¥{{item.price|floatformat:"2"}}</h3></div>
<div class="span"><a class="btn primary" href="{% url depotapp.views.add_to_cart item.id %}">加入购物车</a></div>
</div>
</div>

</div>
<div class="page-header">
</div>
{% endfor %}
</div><!--span10-->
<div class="span4">
<h5>我的购物车</h5><br/>
<table class="condensed-table">
<tbody>
{% for item in cart.items %}
<tr>
<th>{{item.quantity}}x</th>
<td>{{item.product.title}}</td>
<td>¥{% widthratio item.quantity 1 item.unit_price %} </td>
</tr>
{% endfor %}
<tr>
<td></td>
<th>总计:</th>
<th>¥{{cart.total_price|floatformat:"2"}}</th>
</tr>
</tbody>
</table>

<a class="btn danger" href="{% url depotapp.views.clean_cart %}">清空</a>
<a class="btn success" href="#">结算</a>
</div><!--span4-->
{% endblock %}

2. 在depotapp/views.py中的store_view视图函数中增加一行:

cart = request.session.get("cart",None)

就可以显示出如上的界面了。

 

编写javascript实现ajax

最后一步就是通过javascript实现:点击“加入购物车”时,调用server端的RESTful API,同时更改界面上购物车里的内容。

这部分内容,留到下一节。

django

 
 
posted @  2012-02-19 23:03 Holbrook 阅读(22) |  评论 (1)  编辑

 

 
posted @  2012-02-19 23:02 Holbrook 阅读(12) |  评论 (0)  编辑

 

 
posted @  2012-02-19 23:00 Holbrook 阅读(20) |  评论 (0)  编辑

 

摘要: 上一节我们实现了一个”能看不能用“的购物车,现在我们来使用这个购物车。首先是产品目录界面中的”加入购物车“链接,我们希望点击这个按钮后,在购物车中添加该产品(添加的规则是如果购物车中已经有该产品就增加... 阅读全文
posted @  2012-02-19 22:58 Holbrook 阅读(10) |  评论 (0)  编辑

 

摘要: 现在,我们有了一个产品目录界面,用户如果看到满意的产品,就可以将其放入购物车。下面就让我们来实现购物车的功能。首先要做一下简单的分析和设计。购物车应该显示一系列产品的清单,其中列出了买方选中的产品。... 阅读全文
posted @  2012-02-19 22:53 Holbrook 阅读(12) |  评论 (0)  编辑

 

摘要: 针对上一节的新需求,界面设计师还为我们设计了一个新的界面,不仅仅是目录页,还包含了站点的整体风格,如下图:感谢界面设计师为我们提供的“又黑又硬”的工具条,这个看起来真的很酷。下面,让我们来享用她的工作... 阅读全文
posted @  2012-02-19 22:48 Holbrook 阅读(15) |  评论 (0)  编辑

 

摘要: 我们已经实现了卖方的产品维护界面,根据最初的需求,还要为买方实现一个目录页:买方通过这个界面浏览产品并可以加入购物车。通过进一步需求调研,了解到产品有一个“上架时间”,在这个时间之后的产品才能被买方看... 阅读全文
posted @  2012-02-19 22:44 Holbrook 阅读(11) |  评论 (0)  编辑

 

摘要: 尽早进行单元测试(UnitTest)是比较好的做法,极端的情况甚至强调“测试先行”。现在我们已经有了第一个model类和Form类,是时候开始写测试代码了。Django支持python的单元测试(un... 阅读全文
posted @  2012-02-19 22:42 Holbrook 阅读(8) |  评论 (0)  编辑

 

摘要: 让我们完成上一节中的任务:1.验证price>0:需要在Form中验证; 2. 验证title唯一:在Model中验证; 3. 验证image_url的扩展名:在Form中验证,还可以顺便在Model... 阅读全文
posted @  2012-02-19 22:39 Holbrook 阅读(12) |  评论 (0)  编辑

 

摘要: rails有一个”简洁、完美的验证机制,无比强大的表达式和验证框架“。在《Agile Web Development with Rails 4th》一书的7.1节向我们展示了如何验证Product:c... 阅读全文
posted @  2012-02-19 22:33 Holbrook 阅读(25) |  评论 (0)  编辑

 

 
posted @  2012-02-19 22:00 Holbrook 阅读(749) |  评论 (2)  编辑

 

 
posted @  2012-02-18 23:59 Holbrook 阅读(89) |  评论 (0)  编辑

 

 
posted @  2012-02-18 00:28 Holbrook 阅读(55) |  评论 (0)  编辑

 

 
posted @  2012-02-14 19:49 Holbrook 阅读(13) |  评论 (0)  编辑

 

 
posted @  2012-02-14 01:00 Holbrook 阅读(4) |  评论 (0)  编辑

 

 
posted @  2012-02-13 18:18 Holbrook 阅读(2) |  评论 (0)  编辑

 

摘要: 内容提要 1. 回顾Django的视图函数(view function) 2. 在视图函数中使用模板 3. 简化视图函数的两个工具 4. 使用通用视图函数 5. Django提供的通用视图 阅读全文
posted @  2012-02-12 00:57 Holbrook 阅读(48) |  评论 (0)  编辑

 

 
posted @  2012-02-10 16:58 Holbrook 阅读(27) |  评论 (0)  编辑

 

 
posted @  2012-02-10 15:50 Holbrook 阅读(6) |  评论 (0)  编辑

 

 
posted @  2012-02-10 10:29 Holbrook 阅读(6) |  评论 (0)  编辑

 

 
posted @  2012-02-09 23:44 Holbrook 阅读(5) |  评论 (0)  编辑

 

 
posted @  2012-02-09 20:33 Holbrook 阅读(3) |  评论 (0)  编辑

 

 
posted @  2012-02-09 15:30 Holbrook 阅读(4) |  评论 (0)  编辑

 

 
posted @  2012-01-31 19:02 Holbrook 阅读(5) |  评论 (0)  编辑

 

 
posted @  2012-01-31 18:07 Holbrook 阅读(5) |  评论 (0)  编辑

 

 
posted @  2012-01-31 11:58 Holbrook 阅读(5) |  评论 (0)  编辑

 

 
posted @  2012-01-30 23:25 Holbrook 阅读(5) |  评论 (0)  编辑

 

 
posted @  2012-01-30 14:34 Holbrook 阅读(7) |  评论 (0)  编辑

 

 
posted @  2012-01-29 19:56 Holbrook 阅读(12) |  评论 (0)  编辑

 

 
posted @  2012-01-29 18:31 Holbrook 阅读(17) |  评论 (0)  编辑

 

 
posted @  2012-01-29 15:29 Holbrook 阅读(9) |  评论 (0)  编辑

 

 
posted @  2012-01-29 14:39 Holbrook 阅读(20) |  评论 (0)  编辑
 

你可能感兴趣的:(django)