Django 简单的模板使用

最新推荐文章于 2024-06-03 09:15:00 发布

longyinfengwu

最新推荐文章于 2024-06-03 09:15:00 发布

阅读量181

点赞数

分类专栏： Django

本文链接：https://blog.csdn.net/tenggeer0789/article/details/105924604

版权

Django 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

工程目录如下：
MySite 是创建的工程项目，QQ是创建的一个app，//不会的请查看Django基础教学创建工程和app，百度一堆。
在这里插入图片描述
然后添加组件文件夹 templstes ，其中的home.html是QQ这个app的主界面当然也可以多添加几个子界面，其中base.html 就是模板

使用模板的意义在于一个网页有很多个子页面，每个子页面都有相同的顶部，左侧导航栏或者相同的底部模块，这些全部用模板来做，就不用在每个子页面都写重复的顶部、导航栏、底部等等。
模板文件 base.html如下：

{% load static %}
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="{% static 'js/qqhomejs.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/jquery-3.5.0.min.js' %}"></script>
    </head>
    <body>
        <div>
            <h1>这里是顶部区域001所有子页面共用</h1> 
        </div>

        <div>
           <h1>这里是每个子页面的独立显示内容</h1> 
            {% block touyi %}

            {% endblock %}
        </div>

        <div>
         <h1>这里是每个子页面的独立显示内容</h1> 
            {% block content %}

            {% endblock %}
        </div>
        <div>
            <h1>这里是底部区域002所有子页面共用</h1>
        </div>
    </body>
    <script>
        $.ajaxSetup({
                data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
           })
          </script>
</html>

其中在项目目录下创建资源文件夹 static 其中包含js文件 css文件图片等静态资源。
为了避免引入这些资源时写死路径我们通过引用静态资源方式引入这些资源，所以在模板文件开始先写{% load static %}，前提是要在项目settings.py文件中修改成可引用静态文件代码如下：

STATIC_URL = '/static/'
HERE = os.path.dirname(os.path.abspath(__file__))
HERE = os.path.join(HERE, '../')
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(HERE, 'static/'),
)

然后静态资源就可以这样引用了如下：具体看base.html文件代码（上面贴出了）

<script type="text/javascript" src="{% static 'js/qqhomejs.js' %}"></script>

其中

  <div>
            <h1>这里是顶部区域001所有子页面共用</h1> 
        </div>

是所有子页面共用的部分我简单写了就写了一个h1标签具体情况自己增加就好，和下面的底部所有子页面共用部分，以及左侧导航栏等，都可以这样。具体看上面代码base.html。其中{% block touyi %}
是挖好的坑也就是各个子页面不同的地方你可以写多个 touyi只是这个坑的名字而已，随便起名，后续在子页面中有怎么用。

下面是子页面的用法：
home.html的代码先贴出来：

{% extends 'base.html' %}
{% block touyi %}
<div>
    <div>
        <p>{{string}}</p>
        <a href="/weixin/home">进入微信主页</a>
        <a href="/baidu/home">进入百度主页</a>
    </div>
    <div>
        <div>
            <p>姓名：</p>
            <input id="qqname" type="text">
        </div>
        <div>
            <p>QQ号码：</p>
            <input id = "qqnumber" type="text">
        </div>
        <div>
            <p>密码：</p>
            <input id= "qqpassword" type="text">
        </div>
        <div>
            <button onclick="laoding()">登录</button>
        </div>
    </div>
</div>
{% endblock %}
{% block content %}
<div>
        <p>{{string}}</p>
        <a href="/weixin/home">进入微信主页</a>
        <a href="/baidu/home">进入百度主页</a>
   
</div>
{% endblock %}

其中{% extends ‘base.html’ %} 是可以看成加载模板加载模板后这个子页面就已经有头部，底部等共用的模块了
然后就是根据每个子页面的展现数据，信息等不同往模板里填坑。
比如touyi 这个坑里我写了几个标签这个是这个子页面独有的，可能其他子页面就不需要这些标签了，根据需要自己写。
填坑的是要这么写：

{% block touyi %}
中间这里是子页面独有的内容，
{% endblock %}

如果子页面需要很多自己的内容那么就在模板中挖好坑就行了，也可以挖一个大坑，例如就一个坑，然后各个子页面添加自己的内容就行了。上面贴出的代码仔细分析下就会了。
然后运行服务端（python manage.py runserver 0.0.0.0:9001）这些是最基础的不详细说了，百度一堆，运行后网页输入127.0.0.1:9001/设置的路由/XXXXX/XXXXX/XXXX/ 然后就发现模板生效了，下面是我简单些的例子截图：
在这里插入图片描述

longyinfengwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Django 简单的模板使用

工程目录如下：MySite 是创建的工程项目，QQ是创建的一个app，//不会的请查看Django基础教学创建工程和app，百度一堆。然后添加组件文件夹 templstes ，其中的home.html是QQ这个app的主界面当然也可以多添加几个子界面，其中base.html 就是模板使用模板的意义在于一个网页有很多个子页面，每个子页面都有相同的顶部，左侧导航栏或者相同的底部模块，这些全...
复制链接

扫一扫

专栏目录