Django Template 网页模板

  • 6. Template 网页模板
    • 6.1 Templeate 基础知识
    • 6.2 Templeate 小案例
    • 6.3 Template 标签

6. Template 网页模板

6.1 Templeate 基础知识

文件目录结构

│ db.sqlite3
│ manage.py
│
├─Django
│ asgi.py
│ settings.py
│ urls.py
│ wsgi.py
│ init.py
│
│ └─index
│ admin.py
│ apps.py
│ models.py
│ tests.py
│ urls.py
│ views.py
│ __ init .py
│
├─migrations
│ init __.py
└─templates
index.html

  • views.py
from django.shortcuts import render
from django.views import View


class Index(View):
    def get(self, request):
        user_json = {'name': '张三', 'age': 99}
        return render(request, 'index.html', user_json)
  • urls.py
from django.urls import path
from .views import Index

urlpatterns = [
    path('index/', Index.as_view())
]

6.2 Templeate 小案例

  • views.py
from django.shortcuts import render
from django.views import View


class Index(View):
    def get(self, request, name):
        return render(request, 'index.html', name)
  • urls.py
from django.urls import path
from .views import Index

urlpatterns = [
    path('index/<str:name>', Index.as_view())
]
  • templates
    • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1> 人生苦短 我用Python</h1>
    <h1> {{ name }} </h1>
</body>
</html>
  • 测试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nA8kzDKD-1653639870091)(C:/Users/Administrator/AppData/Roaming/Typora/typora-user-images/image-20220524150632299.png)]

6.3 Template 标签

  • 变量与标签

    变量是用 {{ }} 双大括号包裹。比如我们后端渲染过来的数据，用双大括号来包裹，例如 {{ name }}

    标签有内置标签类型用 {% %} 大括号里面开始结束各一个百分号包裹

  • 内置标签

{% for %} {{% endfor %}遍历输出内容
{% if %} {% elif %} {% endif %}条件判断
{% url name args %}引用路由配置名
{% load %}加载 Django 的标签库
{% load static %}加载 Django 的静态库
{% static static_path %}读取静态资源
{% extends base_template %}模板继承
{% block data %} {% endblock %}重写父模板的代码
{% csrf_token %}跨域密钥 一般在表单（from）中使用
  • for 标签模板
forloop.counter从1开始计算获取当前索引
forloop.counter0从0开始计算获取当前索引
forloop.revcounter索引从最大递减到1
forloop.revcounter0索引从最大递减到0
forloop.first当前元素是否为第一个
forloop.last当前元素是否为最后一个
empty为空的情况

  • 静态文件配置

    • 项目更目录创建 ‘static’ 与 ‘templates’ 文件同级

    • 在 settings 文件中配置 static 文件夹

      STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'))

  • 静态文件包括

    css 样式文件

    JavaScript 文件

    image 图片文件等

  • 小案例

    • views.py
    from django.shortcuts import render
from django.views import View


class Index(View):
    def get(self, request):
        user_json = [
            {'name': '张三', 'age': 99},
            {'name': '李四', 'age': 50},
            {'name': '王五', 'age': 10},
            {'name': '小钟', 'age': 21}
        ]
        return render(request, 'index.html', {'user_json': user_json})
    • urls.py
    from django.urls import path
from .views import Index

urlpatterns = [
    path('index/', Index.as_view())
]
    • settings.py
    # 添加配置

STATICFILES_DIRS = [
    BASE_DIR / "static",
]
    • templates
      • index.html
    {% load static %}  		{# load static 使用必须引入 #}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1> 人生苦短 我用Python</h1>
    <img src="{% static 'images/1.png' %}  "  style="height: 500px">
    <table style="border: 2px solid hotpink">
        <tr style="text-align: center">
            <th style="border: 2px solid hotpink">姓名</th>
            <th style="border: 2px solid hotpink">年龄</th>
            <th style="border: 2px solid hotpink">编号 counter </th>
            <th style="border: 2px solid hotpink">编号 counter0 </th>
            <th style="border: 2px solid hotpink">编号 revcounter </th>
            <th style="border: 2px solid hotpink">编号 revcounter0 </th>
            <th style="border: 2px solid hotpink">位置 </th>
        </tr>
        {% for i in user_json %}
            <tr style="text-align: center">
                <td style="border: 2px solid hotpink">{{ i.name }}</td>
                <td style="border: 2px solid hotpink">{{ i.age }}</td>
                <td style="border: 2px solid hotpink">{{ forloop.counter }}</td>
                <td style="border: 2px solid hotpink">{{ forloop.counter0 }}</td>
                <td style="border: 2px solid hotpink">{{ forloop.revcounter }}</td>
                <td style="border: 2px solid hotpink">{{ forloop.revcounter0 }}</td>
                {% if forloop.first%}
                    <td style="border: 2px solid hotpink"> this is first</td>
                {% elif forloop.last %}
                    <td style="border: 2px solid hotpink"> this is last</td>
                {% else %}
                    <td style="border: 2px solid hotpink"> </td>
                {% endif %}
            </tr>
        {% endfor %}
    </table>
</body>
</html>

  • 效果

更多推荐

Django Template 网页模板（五）