inclusion_tag 重复页面加载显示模板

类似于上面的组件,只不过他需要从后端得到数据才能完成渲染成功。多用于返回html代码片段

代码示例:

  • 第一步:在app下创建一个名为templatetags(必须是这个名字)文件夹。
  • 第二步:在这个文件夹下创建一个py文件,名字没要求。
  • 第三步:在py文件中先导入,在注册,代码是固定死的。
from django import template
register = template.Library()
  • 第四步:写视图函数得到页面所需要的数据,将数据return回来,
  • 第五步:给这个视图函数加上@register.inclusion_tag(filename=‘left_menu.html‘),以指定html文件将数据传入。
  • 在需要用到自定义inclusion_tag的html文件中引入,引入固定规则为:

    通过使用{% load py文件名 %} {% 对应html文件名 py文件中的视图函数所需参数 %}的固定形式引用自定义的inclusion_tag。

l_menu.py文件示例:

from django import template
from blog import models
from datetime import datetime

register = template.Library()

@register.inclusion_tag(filename=‘left_menu.html‘)
def left_menu(username):
    # 通过用户信息找到当前用户的对象
    user_obj = models.UserInfo.objects.filter(username=username).first()
    # ORM操作查询当前用户对应的所有书籍
    article_list = models.Article.objects.filter(user=user_obj).order_by("create_time").reverse()
    # ORM操作查询当前用户对应的所有分类
    categorys = models.Category.objects.filter(blog=user_obj.blog)
    # ORM操作查询当前用户对应的blog的tags
    tags = models.Tag.objects.filter(blog=user_obj.blog)

    # 时间归档方式一
    #通过对所有对象的create_time字段的处理,通过列表的去重和计数得到对应的前端数据
    date_list = [datetime.strftime(obj.create_time, ‘%Y-%m‘) for obj in article_list]
    list2 = list(set(date_list))
    list2.sort(key=date_list.index)
    ret_date_list = [(i, date_list.count(i)) for i in list2]

    #时间归档方式二
    # 对当前blog的所有文章按照年月 分组 查询
    # 1. models.Article.objects.filter(user=user_obj)                   --> 查询出当前作者写的所有文章
    # 2. .extra(select={"y_m": "DATE_FORMAT(create_time, ‘%%Y-%%m‘)"}   --> 将所有文章的创建时间格式化成年-月的格式,方便后续分组
    # 3. .values("y_m").annotate(c=Count("id"))                         --> 用上一步时间格式化得到的y_m字段做分组,统计出每个分组对应的文章数
    # 4. .values("y_m", "c")                                            --> 把页面需要的日期归档和文章数字段取出来
    # archive_list = models.Article.objects.filter(user=user_obj).extra(
    #     select={"y_m": "DATE_FORMAT(create_time, ‘%%Y-%%m‘)"}
    # ).values("y_m").annotate(c=Count("id")).values("y_m", "c")

    return {
        ‘username‘: username,
        ‘categorys‘: categorys,
        ‘tags‘: tags,
        ‘ret_date_list‘: ret_date_list,
    }

left_menu.html示例:

<div class="panel panel-info">
    <div class="panel-heading">
        文章分类
    </div>
    <div class="panel-body">
        <ul class="list-group">
            {% for category in categorys %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/category/{{ category.title }}">
                        {{ category.title }}({{ category.article_set.all.count }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="panel panel-success">
    <div class="panel-heading">
        标签
    </div>
    <div class="panel-body">

        <ul class="list-group">
            {% for tag in tags %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/tag/{{ tag.title }}">
                        {{ tag }}({{ tag.article_set.all.count }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        日期归档
    </div>
    <div class="panel-body">
        <ul class="list-group">
            {% for date in ret_date_list %}
                <li class="list-group-item">
                    <a href="/blogcenter/{{ username }}/archive/{{ date.0 }}">
                        {{ date.0 }}({{ date.1 }})
                    </a>
                </li>
            {% endfor %}
        </ul>
    </div>
</div>

base.html文件示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <link rel="stylesheet" href="/static/bootstrap/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/mycss.css">
</head>
<body>
<div class="container-fluit">
    <div class="row">
        <!--左侧栏开始-->
        <div class="col-md-2">

      //通过使用{% load  py文件名 %}  {% 对应html文件名  py文件中的视图函数
      //所需参数 %}的固定形式引用自定义的inclusion_tag。
            {% load l_menu %}
            {% left_menu username %}
        </div>
        <!--左侧栏结束-->
        {% block page-main %}
        {% endblock page-main %}
    </div>
</div>
<script src="/static/js/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/bootstrap-3.3.7/js/bootstrap.js"></script>
{% block page-js %}
{% endblock page-js %}
</body>
</html>

原文地址:https://www.cnblogs.com/cjj-zyj/p/10185425.html

时间: 2024-10-13 07:41:02

inclusion_tag 重复页面加载显示模板的相关文章

js数据显示在文本框中(页面加载显示和按钮触动显示)

web代码如下: <!DOCTYPE html> <html> <head> <title>jsTest02.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

从输入 URL 到页面加载显示完成的过程

前言:"一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?" 这个问题我想大多数人都不会陌生,好像是前端面试题经常会出现的,在此我也好好梳理梳理了一番,总结成这篇文章,希望能对和我一样在前端道路上奋进的小白们有所帮助,一起学习,交流. 我把这个问题拆解成两个过程: 1. 用户输入 url ---> 客户端(浏览器)拿到服务端的数据 2. 浏览器拿到数据 ---> 呈现页面(也就是浏览器工作过程) 搞清楚这两个过程后,我们也算是完整的回答了前言部分所提的问题

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么?

一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了: 1.浏览器补全URL地址 在输入完URL之后,浏览器会自动检查该地址是否完整,例如是否有添加https协议,若发现不完整,会自动补全. 2.向DNS查询IP地址 每个域名都对应一个或多个提供相同服务服务器的 IP 地址,只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址. 3.得到IP地址后,建立连接,进行三次握手 即每次建立连接前,客户端和服务端都要先进行三次对话才开始正式传输内容,三次对

一个页面从输入URL 到页面加载显示完成的过程中都发生了什么

前端面试/笔试必考问题,越详细越好 先简单得讲: 浏览器根据请求的URL交给DNS域名解析,找到真实IP,向服务器发起请求: 服务器交给后台处理完成后返回数据,浏览器接收文件(HTML.JS.CSS.图象等): 浏览器对加载到的资源(HTML.JS.CSS等)进行语法解析,建立相应的内部数据结构(如HTML的DOM): 载入解析到的资源文件,渲染页面,完成. 详细得说: 1.当发送一个URL请求时,不管这个URL是Web页面的URL还是Web页面上每个资源的URL,浏览器会开启一个线程来处理这个

前端面试题_3.一个页面从输入URL到页面加载显示完成,这个过程发生了什么

1. 输入地址 2. 浏览器查找域名的 ip 地址 3. DNS 具体的查找ip地址过程,包括:浏览器缓存->系统缓存->路由器缓存 4. 得到ip地址后,建立连接,进行三次握手 5. 客户端通过IP地址向服务端发送一个GET请求,服务端会在80端口接收到这个请求并作出响应 6. 服务器在80端口接收请求,传送相应内容至浏览器 7. 浏览器解析内容,并继续搜索页面内是否有请求,有的话继续通过IP地址发送至服务器 8. 接受完从服务器发送至浏览器的内容之后,浏览器渲染网页,把网页内容呈献给用户

一个页面从输入url到页面加载显示完成,中间都经历了什么

第一种解释: 一般会经历以下几个过程: 1.首先,在浏览器地址栏中输入url 2.浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容.若没有,则跳到第三步操作. 3.在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址.),解析获取相应的IP地址. 4.浏览器向服务器发起tcp连接,

一个页面从输入URL到页面加载显示完成的详细过程

下面以访问baidu页面来做一个过程分析 输入 URL:http://www.baidu.com DNS 域名解析 计算机无法识别域名,计算机与计算机之间要想进行通信,必须通过ip地址用来定位该计算机所在的位置 在浏览器中,输入的ip地址或者域名,默认给你加了一个80端口号(对方的服务器监听的就是80端口) 158.12.25.652 域名就是为了好记 为了好记,所以我们的万维网提供了 一个 域名这样的概念 当你输入了 ip 地址后,浏览器会自动去 找DNS域名解析服务器, 建立 TCP 连接(

浏览器从输入URL到页面加载显示完成全过程解析

一 浏览器查找域名对应的 IP 地址(域名解析的过程,先进行缓存的查看): 1.在浏览器中输入www.qq.com域名,操作系统会先检查自己本地的hosts文件是否有这个网址映射关系,如果有,就先调用这个IP地址映射,完成域名解析. 2.如果hosts里没有这个域名的映射,则查找本地DNS解析器缓存,是否有这个网址映射关系,如果有,直接返回,完成域名解析. 3.如果hosts与本地DNS解析器缓存都没有相应的网址映射关系,首先会找TCP/ip参数中设置的首选DNS服务器,在此我们叫它本地DNS服

一个页面从输入URL到页面加载显示完成,这个过程中发生了什么?

1.浏览器通过DNS查找域名对应的IP地址(DNS查询:浏览器缓存-->系统缓存-->路由器缓存-->ISP DNS 缓存 -->根域名服务器) 2.浏览器向Web服务器发送一个HTTP请求(TCP三次握手) 3.服务器301重定向(从http://example.com重定向到http://www.example.com) 4.浏览器跟踪重定向地址,请求另一个带www的网址 5.服务器处理请求(通过路由读取资源) 6.服务器返回一个HTTP响应(报头中把Content-type设