最新消息:关注【已取消】微信公众号,可以获取全套资料,【全套Java基础27天】【JavaEE就业视频4个月】【Android就业视频4个月】

django入门9:django extends模板扩展

扩展 admin 浏览 评论

 django extends模板扩展使用场景介绍:

我们在项目开发中,经常会将公共的网页部分抽取出来,比如网页中的header部分,header部分主要是放公共的js,css或者网站导航,而这部分几乎每页面有用到,因此我们可以把它抽取出来。

在javaweb或php中都可以用include来包含header部分,而在python django项目中,我们就会用到django的content内容包含标签,如下。

{% block content %}
{% endblock %}

然后在需要引入header部分的页面头部加入header所在的路径,标签如下。

{% extends 'user/header.html' %}
{% block content %}
    中间是每个页面的代码区
{% endblock %}

下面我们来做如下这个案例,如图所示,仔细看图,我们给页面加入了一个公共的header头部,header里面定义的是网站导航,user列表显示部分我们已经在:django入门8:django静态文件的引入 这篇文章中有写到一个user_list.html的文件,后面的代码我们将修改这个html文件。

QQ截图20170926201927.jpg

我们将把上节中的user_list.html文件代码内容拆分到两个文件中,一个是header.html,另外一个就是user_list.html,header部分只写导航部分的代码,用户table列表部分写在user_list.html中,先看看目录结构,如图所示。

QQ截图20170926202607.jpg

header.html部分的代码如下,{% block content %} {% endblock %}这两个标签之间就是将要包含<table>内容的。

{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户列表页</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static 'css/myCss.css'%}">
</head>
<body>
<ul class="nav nav-pills">
  <li role="presentation"><a href="#">首页</a></li>
  <li role="presentation"><a href="#">新闻</a></li>
  <li role="presentation"><a href="#">视频</a></li>
</ul>
{% block content %}

{% endblock %}
</body>
</html>

user_list.html文件则只显示table内容,table是用来展示后台数据的,目标页面这里也需要这个{% block content %} {% endblock %}标签,并且头部需要引入django模板扩展标签{% extends 'url' %},代码如下。

{% extends 'user/header.html' %}
{% block content %}
<table class="table" style="width: 500px;">
    <tr id="headcolor">
        <td>ID</td>
        <td>用户名</td>
        <td>密码</td>
        <td>电话</td>
        <td>住址</td>
        <td>操作</td>
    </tr>
    {% for user in users %}
        <tr>
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.password }}</td>
            <td>{{ user.phone }}</td>
            <td>{{ user.address }}</td>
            <td><a href="{% url 'user_detail' pk=user.id %}">查看</a>&nbsp;
                <a href="{% url 'user_edit' pk=user.id %}">修改</a></td>
        </tr>
    {% endfor %}
</table>
{% endblock %}

以后写代码就不用重复写公共部分了,只需要使用django extends扩展标签将共用的部分引入进来即可。

来源网站:太平洋学习网,转载请注明出处:http://www.tpyyes.com/a/kuozhan/243.html
"文章很值,打赏犒劳作者一下"
微信号: Javaweb_engineer

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

与本文相关的文章

发表我的评论
取消评论

表情

您的回复是我们的动力!

  • 昵称 (必填)

网友最新评论