Django实战（7）：改造ProductList界面

最新推荐文章于 2019-10-07 00:15:44 发布

ThinkInside

最新推荐文章于 2019-10-07 00:15:44 发布

阅读量6.5k

点赞数 3

分类专栏： django web Django专栏文章标签： django class list stylesheet url div

本文链接：https://blog.csdn.net/ThinkInside/article/details/7222803

版权

django 同时被 3 个专栏收录

32 篇文章 1 订阅

订阅专栏

Django专栏

32 篇文章 1 订阅

订阅专栏

web

14 篇文章 0 订阅

订阅专栏

有了上一节关于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/ 看到漂亮的界面了。

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

ThinkInside

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Django实战（7）：改造ProductList界面

有了上一节关于Django模板的基础，改造界面就很容易理解了。将界面设计师设计的页面中的内容根据复用程度分别放到基础模板base.html和专用模板productlist.html中。depot/templates/base.html {% block title %} 标题 {% endblock %} {%
复制链接

扫一扫