有了上一节关于Django模板的基础，改造界面就很容易理解了。将界面设计师设计的页面中的内容根据复用程度分别放到基础模板base.html和专用模板productlist.html中。

depot/templates/base.html

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="description" content="a depot implement with Django"/>

    <meta name="keywords" content="django,depot" />

    <meta name="author" content="Holbrook(http://hi.csdn.net/space-2668.html)" />

    <title>{% block title %} 标题 {% endblock %}</title>

    <link rel="stylesheet" href="/static/css/bootstrap.min.css">

</head>

<body>

<div class="container">

    {% block content %}

    内容

    {% endblock %}

</div>

</body>

</html>

base作为整个网站的基础布局，包含了所有页面都需要的bootstrap.min.css。同时设置了两个内容块（title, content)。在productlist.html中替换这两个内容块：

depot/templates/depotapp/list_product.html

{% extends "base.html" %}

{% block title %} 产品清单 {% endblock %}

{% block content %}

<div class="container">

    <div class="page-header">

    <h2>产品清单</h2>

</div>

{% for item in list_items.object_list %}

<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="span-two-thirds">

        <h4>{{item.title}}</h4>

        {{item.description}}

    </div>

    <div class="span2" style="align:right">

        <p><a class="btn primary" href="{% url depotapp.views.view_product item.id %}">查看</a></a> </p>

        <p><a class="btn success" href="{% url depotapp.views.edit_product item.id %}">编辑</a> </p>

        <p><a class="btn danger" href="#">删除</a></p>

    </div>

</div>

{% endfor %}

{% if list_items.has_previous %}

    <a href="?page={{ list_items.previous_page_number }}">上一页</a>

{% endif %}

<span class="current">

    第{{ list_items.number }}页，共{{ list_items.paginator.num_pages }}页

</span>

{% if list_items.has_next %}

        <a href="?page={{ list_items.next_page_number }}">下一页</a>

{% endif %}

<p>

<a href="{% url depotapp.views.create_product %}">新增产品</a>

</p>

{% endblock %}

先是声明这个模板继承自base.html，然后是两个内容块的实现。

注意其中链接的写法：href="{% url depotapp.views.view_product item.id %}"。这样定义的href是关联到view函数，而不是硬编码的URL。在以后如果改变了URLconf的定义，不需要再更改模板。这个功能不是rails特有的！

关于分页的部分，无需关注，以后再说。

最后，认真填写一下表单，将真正的数据存到数据库，就可以在http://localhost:8000/depotapp/product/list/ 看到漂亮的界面了。

例子中使用的书籍信息和图片链接均来自豆瓣读书

Django实战（7）：改造ProductList界面的更多相关文章

  1. 编程实战——电影管理器之界面UI及动画切换

    编程实战——电影管理器之界面UI及动画切换 在前文“编程实战——电影管理器之利用MediaInfo获取高清视频文件的相关信息”中提到电影管理器的目的是方便播放影片,在想看影片时不需要在茫茫的文件夹下找 ...

  2. Django配置后台xadmin管理界面

    Django配置后台xadmin管理界面 python版本3.6.5 Django版本1.10.8(刚开始是2.1.5,由于各种错误,改成了低版本) 1.xadmin的安装,下载地址https://g ...

  3. Django实战（21）：使用内置的Amin管理用户

    到目前为止,我们开发的所有功能都是匿名访问的,这显然不够安全.通常我们会要求注册的用户通过用户名和密码登录,只有登录后的用户才可以管理产品.套用专业的说法就是:第一步是认证,验证用户是否是他所宣称的那 ...

  4. 从零开始部署Django生产环境（适用：《跟老齐学Python Django实战》）

    <跟老齐学Python Django实战>作为市面上少有的Django通俗实战书籍,给了我学习Django很大的帮助.作为一名新入门的菜鸟,全书我重复练习了至少三遍,每次都有新的收获. 前 ...

  5. Django实战(一)-----用户登录与注册系统6（session会话、注册视图）

    因为因特网HTTP协议的特性,每一次来自于用户浏览器的请求(request)都是无状态的.独立的. 通俗地说,就是无法保存用户状态,后台服务器根本就不知道当前请求和以前及以后请求是否来自同一用户.对于 ...

  6. Django实战（17）：ajax !

    现在让我们来通过ajax请求后台服务.当然首选要实现后台服务.关于“加入购物车”,我们需要的服务是这样定义的: url:    http://localhost:8000/depotapp/API/c ...

  7. Django实战（5）：引入bootstrap，设置静态资源

    之前生成了Product类的scaffold,但是如同rails的开发者David所讲的那样,scaffold几乎没什么用.所以按照<Agile Web Development with Rai ...

  8. django 实战 - eLeave Form

    需求: 实现请假单的电子审批 1. 支持国际化 2. 支持模型级别的访问记录 here we go: 这里会写一系列的文章,来记录我实战的过程,由于接触django没多久,难免有疏漏之处,望拍砖不要太 ...

  9. [Django实战] 第4篇 - 用户认证（用户登录）

    今天来实现用户登录模块 首先,我们创建一个表单(forms.py): from django import forms from django.contrib.auth.models import U ...

随机推荐

  1. Java并发编程原理与实战三十七：线程池的原理与使用

    一.简介 线程池在我们的高并发环境下,实际应用是非常多的!!适用频率非常高! 有过使用过Executors框架的朋友,可能不太知道底层的实现,这里就是讲Executors是由ThreadPoolExe ...

  2. 精心整理的十个必须要知道CSS+DIV技巧

    1.css font的简写规则  当我们写字体样式的时候,我们也许会这样子写 font-size: 1em; line-height: 1.5em; font-weight: bold; font-s ...

  3. HDU 2571 命运 (入门dp)

    题目链接 题意:二维矩阵,左上角为起点,右下角为终点,如果当前格子是(x,y),下一步可以是(x+1,y),(x,y+1)或者(x,y*k) ,其中k>1.问最大路径和. 题解:入门dp,注意负 ...

  4. Kafka消息系统基础知识索引

    一些观念的修正 从 0.9 版本开始,Kafka 的标语已经从“一个高吞吐量,分布式的消息系统”改为"一个分布式流平台". Kafka不仅仅是一个队列,而且是一个存储,有超强的堆积 ...

  5. Dynamic Rankings（动态第k大+树套树）

    题目链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1112 题目: 思路: 树套树板子题. 代码实现如下: #inclu ...

  6. HDU 1556 Color the ball （树状数组 区间更新+单点查询）

    题目链接 Problem Description N个气球排成一排,从左到右依次编号为1,2,3....N.每次给定2个整数a b(a <= b),lele便为骑上他的"小飞鸽&quo ...

  7. windebug分析高cpu问题

    分析高CPU的关键是找到哪个线程是持续运行,占用CPU时间. 可以隔上两分钟连续抓两个dump文件,使用 !runaway 查看线程运行的时间 通过对比两个dump文件的线程时间,看看哪个线程运行的时 ...

  8. hdu 确定比赛名次（拓扑排序）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1285 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others)    ...

  9. 深入理解KS

    一.概述 KS(Kolmogorov-Smirnov)评价指标,通过衡量好坏样本累计分布之间的差值,来评估模型的风险区分能力. KS.AUC.PR曲线对比: 1)ks和AUC一样,都是利用TPR.FP ...

  10. skb_pull skb_push skb_put

    unsigned char *skb_pull(struct sk_buff *skb, int len)该函数将 data 指针向数据区的末尾移动,减少了len 字段的长度.该函数可用于从接收到的数 ...