有了上一节关于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. 网络编程之python zeromq学习系列之一

    简介: zeromq中间件,他是一个轻量级的消息中间件,传说是世界上最快的消息中间件,为什么这么说呢? 因为一般的消息中间件都需要启动消息服务器,但是zeromq这厮尽然没有消息服务器,他压根没有消息 ...

  2. python笔记之psutil模块

    收集教程 http://www.cnblogs.com/xiao1/p/6164204.html 实战教程 安装psutil模块 pip2 install psutil 实战代码 #encoding= ...

  3. Android 5.0 最应该实现的8个期望

    毫无疑问,Android 5 将是令人兴奋的操作系统,因为 Android4.0 至 4.4 版本之间并没有显著的差异,显然谷歌会在 5.0 版本中进行一些较大幅度的革新.那么,代号为“柠檬芝士蛋糕” ...

  4. 可视化爬虫Portia安装和部署踩过的坑

    背景 Scrapy爬虫的确是好使好用,去过scrapinghub的官网浏览一下,更是赞叹可视化爬虫的犀利.scrapinghub有一系列的产品,开源了大部分项目,Portia负责可视化爬虫的编辑,Sp ...

  5. 手写简化版printf函数

    2019.02.01更新:经同学提醒,myprintf函数应有返回值为输出的字符数. 期末的大作业,手写一个myprintf函数,支持如下一些操作. 也就是  % -(负号控制左右对齐) 数(控制字段 ...

  6. Ubuntu 14.04 Nvidia显卡驱动安装及设置

    更换主板修复grub 引导后,无法从Nvidia进入系统(光标闪烁), 可能是显卡驱动出了问题. 1. 进入BIOS设置, 从集成显卡进入系统 将显示器连接到集显的VGI口, 并在BIOS中设置用集显 ...

  7. UNIX环境高级编程 第11章 线程

    使用C++调用pthread_cleanup_push( )时,下面的代码是无法编译通过的: pthread_cleanup_push(cleanup, "thread 1 first ha ...

  8. sleep允许休眠， delay不允许

    在Linux Driver开发中,经常要用到延迟函数:msleep,mdelay/udelay． 虽然msleep和mdelay都有延迟的作用,但他们是有区别的． 1.)对于模块本身 mdelay是忙 ...

  9. 众签demo

    众签demo using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  10. Android基于XMPP Smack Openfire下学习开发IM(一)实现用户注册、登录、修改密码和注销等

    http://blog.csdn.net/h7870181/article/details/8653865 以前学习过用Scoket 建立聊天,简单的建立聊天是没问题的,但如果要实现多人复杂的聊天,后 ...