有了上一节关于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. Dubbo学习笔记1：使用Zookeeper搭建服务治理中心

    Zookeeper是Apache Hadoop的子项目,是一个树形的目录服务,支持变更推送,适合作为Dubbo服务的注册中心,工业强度较高,推荐生成环境使用. , 下面结合上图介绍Zookeeper在 ...

  2. TPS低，CPU高--记一次storm压测问题排查过程

    一.业务背景+系统架构 本次场景为kafka+storm+redis+hbase,通过kafka的数据,进入storm的spout组件接收,转由storm的Bolt节点进行业务逻辑处理,最后再推送进k ...

  3. 打包python脚本为exe的坎坷经历, by pyinstaller方法

    打包python脚本为exe的坎坷经历, by pyinstaller方法 又应验了那句歌词. 不经历风雨, 怎么见得了彩虹. 安装过程略去不提, 仅提示: pip install pyinstall ...

  4. JDK各版本新特性总结

    序言 北风潜入悄无声,未品浓秋已立冬. JDK1.1--1996 JDK1.2--1998 JDK1.3--2000 JDK1.4--2002 JDK5.0--2004 JDK6.0--2006 JD ...

  5. Intellij IDEA 2017 控制台打印换行

    Intellij IDEA 2017 控制台打印的内容超过屏幕宽度了,请问怎么自动换行? 记得重启idea

  6. 你知道吗？undefined 与 null 的区别

    大多数计算机语言,有且仅有一个表示"无"的值,比如,C语言的NULL,Java语言的null,Python语言的none,Ruby语言的nil. 有点奇怪的是,JavaScript ...

  7. 【Loadrunner】LR参数化：利用mysql数据库里面的数据进行参数化

    很多同学都在自学loadrunner去做压力测试,但是如果要利用LR做压力测试,或者是其他工具,其中有一个环节是我们避开不了的,比如说:参数化 今天华华就给大家简要的介绍下,如果你要做的参数化的数据来 ...

  8. 手动刷入Android 4.4.1 KOT49E OTA更新包

    一.Android 4.4 KitKat Google前段时间发布了Android新版本Android 4.4 KitKat,由于我的Nexus 4也是托朋友从US带回来的,所以很快就收到了Googl ...

  9. Using KernelShark to analyze the real-time scheduler【转】

    转自:https://lwn.net/Articles/425583/ This article brought to you by LWN subscribers Subscribers to LW ...

  10. linux 进程内存解析【转】

    转自:http://blog.csdn.net/lile269/article/details/6460807 之前我所了解的linux下进程的地址空间的布局的知识,是从APUE第2版的P430得来的 ...