Django 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>
-
效果