美文网首页我爱编程
Templates & Static 模板和静态文件夹

Templates & Static 模板和静态文件夹

作者: 十二右 | 来源:发表于2018-08-09 13:56 被阅读0次

模板(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>

  1. 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

  1. 过滤器
    {% 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即可

相关文章

网友评论

    本文标题:Templates & Static 模板和静态文件夹

    本文链接:https://www.haomeiwen.com/subject/eehqbftx.html