zoukankan      html  css  js  c++  java
  • python(Django之html模板继承)

    # coding=utf-8

    from django.shortcuts import render
    from django.http import HttpResponse
    from models import *


    def index(request):
    # hero=HeroInfo.objects.get(pk=1)
    # context={'hero':hero}

    list = HeroInfo.objects.filter(isDelete=False)
    context = {'list': list}
    return render(request, 'booktest/index.html', context)


    def show(request, id, id2):
    context = {'id': id}
    return render(request, 'booktest/show.html', context)


    # 用于练习模板的继承
    def index2(request):
    return render(request, 'booktest/index2.html')


    def user1(request):
    context = {'uname': '习总'}
    return render(request, 'booktest/user1.html', context)


    def user2(request):
    return render(request, 'booktest/user2.html')


    # html转义
    def htmlTest(request):
    context = {'t1': '<h1>123</h1>'}
    return render(request, 'booktest/htmlTest.html', context)


    # csrf
    def csrf1(request):
    return render(request, 'booktest/csrf1.html')


    def csrf2(request):
    uname = request.POST['uname']
    return HttpResponse(uname)


    # 验证码
    def verifyCode(request):
    from PIL import Image, ImageDraw, ImageFont
    import random
    # 创建背景色
    bgColor = (random.randrange(50, 100), random.randrange(50, 100), 0)
    # 规定宽高
    width = 100
    height = 25
    # 创建画布
    image = Image.new('RGB', (width, height), bgColor)
    # 构造字体对象
    font = ImageFont.truetype('FreeMono.ttf', 24)
    # 创建画笔
    draw = ImageDraw.Draw(image)
    # 创建文本内容
    text = '0123ABCD'
    # 逐个绘制字符
    textTemp = ''
    for i in range(4):
    textTemp1 = text[random.randrange(0, len(text))]
    textTemp += textTemp1
    draw.text((i * 25, 0),
    textTemp1,
    (255, 255, 255),
    font)
    request.session['code'] = textTemp
    # 保存到内存流中
    import cStringIO
    buf = cStringIO.StringIO()
    image.save(buf, 'png')
    # 将内存流中的内容输出到客户端
    return HttpResponse(buf.getvalue(), 'image/png')


    def verifyTest1(request):
    return render(request, 'booktest/verifyTest1.html')


    def verifyTest2(request):
    code1 = request.POST['code1']
    code2 = request.session['code']
    if code1 == code2:
    return HttpResponse("ok")
    else:
    return HttpResponse("no")

    在编程的过程中,我们经常会重复性的写了很多的代码,比如一个页面的框架部分,这样我又多少个页面就得写上多少次,这样既不好维护,也不够高效,所以我们引出了html的模板继承部分。

    1、写好一个html文件。

    2、下面有个新的html文件需要继承上面这个html。

      直接在这个新的html文件的最顶端,写上下面的内容

      

    
    
    #这个manger.html就是母版的文件名称,告诉这个html去哪里继承。
    {% extends 'manger.html' %}

    3、问题来了,我们既然是继承,总不能全部继承吧,我们肯定是需要写一些新的内容在新的html文件中展示,我们只是继承母版中的一部分,比如head之类的。

      比如我们要在html的一个位置更换新的内容。

      1、定义一个继承的块,叫index。

    {% block index %}{% endblock %}

      2、继承者在自己的文件中需要更换新的内容,需要这么写。

      注意:只需要在继承的任意位置写上{% block index %}内容区{% endblock  %}

    复制代码
    {% block index %}
        <div style="height: 45px;line-height: 45px;font-size: 15px;font-weight: bolder">
            <span>首页&nbsp;></span>
            <span>资产管理</span>
        </div>
    {% endblock %}
    复制代码

    4、问题由来了,如果我的html内容特别多,我看着特别乱,这样我可以把这些内容都写到一个新的html文件里面,然后在我的html文件中直接引用就OK。

    例如:我单独写了一个test.html文件。

    我想在html中引用直接写入地下的东西就OK了。

    {% include "test.html" %}

     5、写自己的CSS和JS样式或操作。

      

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
        <style>
            body{
                height: 38px;
                 300px;
            }
        </style>
        {% block css %}{% endblock %}
    <body>
        <div>
            
        </div>
        <script src="jquery-x.x.x"></script>
        {% block js %}{% endblock %}
    </body>
    </html>
    复制代码

       这样,我们就可以在自己的html文件中直接写自己的css样式或者js操作。

    复制代码
    {% block css %}
        <style>
    
        </style>
    {% endblock %}
    
    {% block js %}
        <script>
    
        </script>
    {% endblock %}
  • 相关阅读:
    Redis简介(数据结构,哨兵、集群和SpringDataRedis)
    FastDFS + Nginx
    Dubbo
    Ubuntu下Zookeeper的安装和基本使用
    RMI简介
    RPC
    各大技术团队的博客
    天了噜,为什么外链css要放在头部,js要放在尾部?
    月经帖 | 2019.11
    前端面试知识点
  • 原文地址:https://www.cnblogs.com/zhangxiaomeng1991/p/8251378.html
Copyright © 2011-2022 走看看