有了上一节关于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. HashMap源码分析-基于JDK1.8

    hashMap数据结构 类注释 HashMap的几个重要的字段 hash和tableSizeFor方法 HashMap的数据结构 由上图可知,HashMap的基本数据结构是数组和单向链表或红黑树. 以 ...

  2. Codeforces Round #476 (Div. 2) [Thanks, Telegram!] C

    http://codeforces.com/contest/965/problem/C 题目大意:n个糖,k个人,每次最多只能拿M个糖,从第一个人开始拿,可以循环D次.问Arkady最多可以拿几块糖? ...

  3. Windows系统环境下Solr之Java实战（二）配置从MySQL数据库批量导入索引

    1.将D:\JavaWeb\Solr\solr-6.2.0\dist下面的solr-dataimporthandler-6.2.0.jar和solr-dataimporthandler-extras- ...

  4. 牛市必备的三个条件，A股现在还差几个

    1.国家政策 2.中美贸易 3.资金支持 A股变化如神! 自本月10日受美股大跌的影响后,A股先是随之震荡跳水,千股跌停:随后因高层力挺和政策支持而V型反转,集体涨停:接着上演过山车走势,有时涨得令人 ...

  5. 《设计模式》-原则二：里氏代换原则（LSP）

    回顾一下上一节说的“开闭原则” 说的是 一个软件要遵循对修改关闭 对新功能扩展的原则. 这一次来说说 “里氏代换原则” 意思是说:子类型必须能代替他们的基类. 看了半天的例子 好像 是懂非懂啊...相 ...

  6. 说说JavaScript中的事件模型

    1.javascript中为元素添加事件处理程序的方法有以下几种方式,可以为javascript元素添加事件处理程序 (1) 直接将事件处理代码写在html中(2) 定义一个函数,赋值给html元素的 ...

  7. Java容器Set接口

    Set接口的实现,可以方便地将指定的类型以集合类型保存在一个变量中.Set是一个不包含重复元素的Collection,更确切地讲,Set 不包含满足 e1.equals(e2) 的元素对,并且最多包含 ...

  8. Java：数值-字符串转换（String转Double）

    String ss = "3.141592653"; double value = Double.valueOf(ss.toString());

  9. hdu 1253 胜利大逃亡 (广搜)

    题目链接 Problem Description Ignatius被魔王抓走了,有一天魔王出差去了,这可是Ignatius逃亡的好机会. 魔王住在一个城堡里,城堡是一个ABC的立方体,可以被表示成A个 ...

  10. 关于onConfigurationChanged

    这两天测试app时,发现一个奇怪问题,app在启动后,Activity会onCreate两次,起初以为是横屏设置导致,随即在Activity中添加了android:configChanges=&quo ...