有了上一节关于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. printf与fprintf函数的区别

    printf是标准输出流的输出函数,用来向屏幕这样的标准输出设备输出,而fprintf则是向文件输出,将输出的内容输出到硬盘上的文件或是相当于文件的设备上 printf是有缓冲的输出,fprintf没 ...

  2. HDU 1564 简单博弈 水

    n*n棋盘,初始左上角有一个石头,每次放只能在相邻的四个位置之一,不能操作者输. 如果以初始石头编号为1作为后手,那么对于每次先手胜的情况其最后一步的四周的编号必定是奇数,且此时编号为偶数,而对于一个 ...

  3. Web API: Security: Basic Authentication

    原文地址: http://msdn.microsoft.com/en-us/magazine/dn201748.aspx Custom HttpModule code: using System; u ...

  4. [整理]标准C中的"布尔"类型

    C语言提供的基本数据类型:char , int ,float, double. 为什么没有其他语言中常见bool布尔数据类型呢? 1.在标准C语言(ANSI C)中并没有bool数据类型 标准C中,表 ...

  5. urllib2模块初体验———豆瓣读书页面下载小爬虫

    我也是根据:http://blog.csdn.net/pleasecallmewhy/article/details/8927832 ,来写出豆瓣读书的爬虫,废话不说直接上代码: #!/usr/bin ...

  6. Throwable、Error、Exception、RuntimeException 区别

    1.java将所有的错误封装为一个对象,其根本父类为Throwable, Throwable有两个子类:Error和Exception. 2.Error是Throwable 的子类,用于指示合理的应用 ...

  7. 判断html是否含有图片

    核心代码: $url="http://XXXXX/article/012.html"; $content=file_get_contents($url); //读取文章页面源代码 ...

  8. 对一道pwnhub的一点点记录

    一.通过ssh弱口令,建立socket5代理进内网. 1.修改proxychains配置文件vi /etc/proxychains.conf如下: 2.建立ssh隧道:ssh -qTfnN -D 70 ...

  9. Linux移植随笔：终于解决Tslib的问题了【转】

    转自:http://www.latelee.org/embedded-linux/porting-linux-tslib.html 前段时间让Tslib搞晕头了,原来一切都是版本惹的祸.本文只是一个随 ...

  10. Windows版Oracle重建EM---备注

    前提条件添加环境变量 ORACLE_HOSTNAME=<主机名:如:DESKTOP-P6J1a>ORACLE_SID=orclORACLE_UNQNAME=orcl 执行删除命令 C:\U ...