模板(template)
1. 创建模板包并配置路径:
1.1 创建模板
- 配置
settings.py中
TEMPLATES 变量中DIRS 指定templates的目录地址
'DIRS' : [os.path.join(BASE_DIR, 'templates')] -- 路径
os.path.dirname(文件的绝对路径)-->返回该路径的上一层 - 创建templates文件夹,和应用app / 工程项目是同一级
- 使用, 在views方法中返回页面
data = { 'stus' : stus }
render(request, '页面', data)-- 传值必须是字典形式
image.png
1.2 模板继承（挖坑 / 填坑）
a. 基础模板(挖坑)：base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
{% block title %}
{% endblock %}
</title>
{% block extCss%}
{% endblock %}
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
b. 中间模板 ·base_main.html·
继承基础模板，填写多个模板共有的代码块
c. 继承模板（填坑）'index.html'
**继承模块时注意路径 **:如 base_main.html在template文件夹里web文件下,则继承时写{% extends 'web/base_main.html' %}
{% extends 'base_main.html' %}
{% block title %}
我是首页
{% endblock %}
{% block content %}
{{block.super}} --> 继承既有功能 / 方法
{% endblock %}
2. 创建static文件夹存放css / js / emages :
2.1 静态(STATIC) css / js / images
settings.py 中STATIC_URL = '/static/', 后面添加
STATICFILES_DIRS = { os.path.join(BASE_DIR, 'static') }
2.2 应用css / js / images
第一中 : (路径已写死,不好)
<link rel='stylesheet' href='/static/css/xxx.css'>
第二种 : (推荐)
{% load static %}
<link rel='stylesheet' href='{% static 'css/xxx.css' %}>
image.png
配置路径
image.png
2. 创建userapp (配置路径 & 定义调用函数)
image.png
3. 导入数据
user/views.py
return render(request, 'index.html', {'stus':stus})
templates/index.html
{{stus}}
4. 在index.html中操作数据,写python代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
首页
</title>
<!--<link rel="stylesheet" href="/static/css/index.css">-->
{# 导入文件的标准写法 #}
{% load static %}
<link rel="stylesheet" href="{% static 'css/index.css' %}">
</head>
<body>
<p>I am the first page!</p>
{#两个大括号,解析QuerySet#}
{{stus}}
<br/>
{# 这是单行注解 #}
{% comment %}
这是多行注解
{% endcommet %}
{#编写python代码#}
{% for stu in stus %}
<!--按顺序对信息编号-->
编号: {{forloop.counter0}}
ID: {{stu.id}}
<!--counter0-从零开始计数 ; recounter-反向计数 -->
{%if forloop.revcounter == 1 %}
<span style="color:red"> 学生: {{stu.s_name}}</span>
{% else %}
<!-- upper / lower 大 / 小写字母-->
<span style="color:blue">姓名: {{stu.s_name|upper}}</span>
{% endif %}
{% ifequal forloop.revcounter 2 %}
<span style="font-weight: bold">年龄: {{stu.s_age}}</span>
{% endifequal %}
年龄: {{stu.s_age}}
<!--"|add:10" 用过滤添加操作; add 对值进行加减-->
语文: {{stu.yuwen|add:10}}
数学: {{stu.shuxue|add:-10}}
<!--可以直接写查询语句-->
班级: {{stu.g.g_name}}
{% for course in stu.course_set.all%}
课程: {{course.c_name}}
{% endfor %}
创建时间: {{stu.create_time|date:'Y-m-d h:m:s'}}
{% if stu.s_sex %}
性别: 男
{% else %}
性别: 女
{% endif %}
<br/>
<!--用endfor 结束for循环语句-->
{% endfor %}
</body>
</html>
- for循环 / if 分之语句
模板标签 : {%%} - 模板标签是一小段代码，生成要在网页中显示的信息。
模板变量 : {{ variable }} - 这些花括号不会出现在网页中，它们只是用于告诉Django我们使用了一个模板变量,并将变量variable的值显示在网页上
{% for stu in stus %}
{% endfor %}
{% ifequal stu.id 1%}
{% endifequal %}
{% if stu.id == 1 %}
{% endif %}
forloop.counter - 当前循环次数
{% if forloop.counter == 3 %}
alert('this is third forloop!')
{% endif %}
forloop,counter0
forloop.revcounter
forloop.revcounter0
forloop.first - 如果该循环是第一次,结果为True
forloop.last - 如果该循环是最后一次,结果为True
获取列表的某个元素 : stus.0 stus.3.name
- 过滤器
{% for stu in stus%}
{{ stu.s_name | lower / upper }}
{{ stu.s_age | add:10 / -10 }}
{{ stu.create_time |date: 'Y-m-d h:m:s' }}
{% endfor %}
{% widthratio 5 1 100 %}
上面的代码表示：5/1 100，返回500，widthratio需要三个参数，它会使用 参数1/参数2参数3，所以要进行乘法的话，就将参数2=1即可
网友评论