[toc]

django教程day02

《Django 教程》

Django的框架模式

MVC 设计模式
- MVC 代表 Model-View-Controller（模型-视图-控制器）模式。
- 作用: 降低模块间的耦合度(解耦)
- MVC
  - M 模型层(Model), 主要用于对数据库层的封装
  - V 视图层(View), 用于向用户展示结果
  - C 控制(Controller ，用于处理请求、获取数据、返回结果(重要)
- 如图:
MTV 模式 MTV 代表 Model-Template-View（模型-模板-视图）模式。这种模式用于应用程序的分层开发
- 作用:
  - 降低模块商的耦合度(解耦)
- MTV
  - M — 模型层(Model) 负责与数据库交互
  - T — 模板层(Template) 负责呈现内容到浏览器
  - V — 视图层(View) 是核心，负责接收请求、获取数据、返回结果
- 如图:

模板 Templates

什么是模板
1. 模板是html页面，可以根据视图中传递的数据填充值相应的页面元素。
2. 模板层提供了一个对设计者友好的语法用于渲染向用户呈现的信息。
模板的配置
- 创建模板文件夹<项目名>/templates
- 在 settings.py 中有一个 TEMPLATES 变量
  1. BACKEND : 指定模板的引擎
  2. DIRS : 指定保存模板的目录们
  3. APP_DIRS : 是否要在应用中搜索模板本
  4. OPTIONS : 有关模板的选项们
默认的模块文件夹templates
修改settings.py文件，设置TEMPLATES的DIRS值为'DIRS': [os.path.join(BASE_DIR, 'templates')],


xxxxxxxxxx
10
1
# file: settings.py
2
TEMPLATES = [
3
    {
4
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
5
        # 'DIRS': [],
6
        'DIRS': [os.path.join(BASE_DIR, 'templates')],  # 添加模板路径
7
        'APP_DIRS': True,  # 是否索引各app里的templates目录
8
        ...
9
    },
10
]

模板的加载方式

通过 loader 获取模板,通过HttpResponse进行响应


xxxxxxxxxx
7
1
from django.template import loader
2
# 1.通过loader加载模板
3
t = loader.get_template("模板名称")
4
# 2.将t转换成字符串
5
html = t.render()
6
# 3.响应
7
return HttpResponse(html)

示例:


xxxxxxxxxx
9
1
from django.template import loader
2
3
def render_page1(request):
4
    # 1.通过loader加载模板
5
    t = loader.get_template("page1.html")
6
    # 2.将t转换成字符串
7
    html = t.render()
8
    # 3.响应
9
    return HttpResponse(html)

使用 render() 直接加载并响应模板

示例:


xxxxxxxxxx
2
1
from django.shortcuts import render
2
return render(request,'模板的名称')

示例


xxxxxxxxxx
3
1
def render_page2(request):
2
    from django.shortcuts import render
3
    return render(requese, 'page1.html')

Django 模板语言: (The Django template language)

模板的传参

模板传参是指把数据形成字典，传参给模板，由模板渲染来填充数据

使用 loader 加载模板


3
1
t = loader.get_template('xxx.html')
2
html = t.render(字典数据)
3
return HttpResponse(html)

使用render加载模板


1
1
return render(request,'xx.html',字典数据)

模板的变量

在模板中使用变量语法
- {{ 变量名 }}
1. 后端中必须将变量封装到字典中才允许传递到模板上 dic = { "变量1":"值1", "变量2":"值2", }

模板的标签

作用将一些服务器端的功能嵌入到模板中
标签语法 {% 标签 %} {% 结束标签 %}
if 标签 {% if 条件表达式 %} {% elif 条件表达式 %} … {% else %} {% endif %}
if 标签里的布尔运算符
- if 条件表达式里可以用的运算符 ==, !=, <, >, <=, >=, in, not in, is,is not, not、and、or
- 在if标记中使用实际括号是无效的语法。如果您需要它们指示优先级，则应使用嵌套的if标记。

for 标签

语法 {% for 变量 in 可迭代对象 %} {% endfor %}

内置变量 – forloop

变量	描述
forloop.counter	循环的当前迭代（从1开始索引）
forloop.counter0	循环的当前迭代（从0开始索引）
forloop.revcounter	循环结束的迭代次数（从1开始索引）
forloop.revcounter0	循环结束的迭代次数（从0开始索引）
forloop.first	如果这是第一次通过循环，则为真
forloop.last	如果这是最后一次循环，则为真
forloop.parentloop	对于嵌套循环，这是围绕当前循环的循环

for … empty 标签
1. 语法 {% for 变量 in 可迭代对象 %} {% empty %} {% endfor %}

cycle 标签

循环从cycle 列表后的参数中进行取值,每次调用进行一次更换
这个标签经常用于循环中，如处理表格的隔行变色

语法:


xxxxxxxxxx
5
1
{% for o in some_list %}
2
    <tr class="{% cycle 'row1' 'row2' %}">
3
        ...
4
    </tr>
5
{% endfor %}

示例:


xxxxxxxxxx
35
1
<table>
2
    <tr>
3
        <th>姓名</th>
4
        <th>年龄</th>
5
        <th>成绩</th>
6
    </tr>
7
    <tr style="background:red;">
8
        <td>小张</td>
9
        <td>20</td>
10
        <td>100</td>
11
    </tr>
12
    <tr style="background:blue;">
13
        <td>小张</td>
14
        <td>20</td>
15
        <td>100</td>
16
    </tr>
17
    <tr style="background:red;">
18
        <td>小张</td>
19
        <td>20</td>
20
        <td>100</td>
21
    </tr>
22
    <tr style="background:blue;">
23
        <td>小张</td>
24
        <td>20</td>
25
        <td>100</td>
26
    </tr>
27
<!-- 以下可以用cycle 标签完成 -->
28
{% for s in students %}
29
    <tr style="background: {% cycle 'red' 'yellow' %};">
30
        <td>{{ s.name }}</td>
31
        <td>{{ s.age }}</td>
32
        <td>{{ s.score }}</td>
33
    </tr>
34
{% endfor %}
35
</table>

注释和 comment标签

以{# 开头, 以 #}结束范围内的文字信息将会被模板的渲染系统忽略掉
如: {# <h1>此处的文字不会被生成html文档</h1> #}

comment 标签

在 {% comment %}和 {% endcomment %}，之间的内容会被忽略，
作用: 用于注释，可以用此来记录代码被注释掉的原因。
注: comment 标签不能嵌套使用

例如：


5
1
<p>Rendered text with {{ pub_date|date:"c" }}</p>
2
{% comment "Optional note" %}
3
    <p>Commented out text with {{ create_date|date:"c" }}</p>
4
{% endcomment %}
5
comment标签不能嵌套使用。

过滤器

作用
- 在变量输出前对变量的值进行处理
- 您可以通过使用过滤器来改变变量的显示。
语法
- {{变量|过滤器1:参数值1|过滤器2:参数值2 …}}

有用的过滤器

过滤器	说明
default	如果value的计算结果为False，则使用给定的默认值。否则，使用该value。
default_if_none	如果（且仅当）value为None，则使用给定的默认值。否则，使用该value。
floatformat	当不使用参数时，将浮点数舍入到小数点后一位，但前提是要显示小数部分。
truncatechars	如果字符串字符多于指定的字符数量，那么会被截断。截断的字符串将以可翻译的省略号序列（“…”）结尾。
truncatewords	在一定数量的字后截断字符串。
lower	将字符串转换为全部小写。
upper	将字符串转换为大写形式
…

escape 示例:

escape 转义字符串的HTML。具体来说，它使这些替换：


xxxxxxxxxx
5
1
< 转换为 &lt;
2
> 转换为 &gt;
3
'（单引号）转换为 &#39;
4
"（双引号）转换为 &quot;
5
& 转换为 &amp;

文档参见:
- https://yiyibooks.cn/xx/Django_1.11.6/ref/templates/builtins.html
- https://docs.djangoproject.com/zh-hans/2.2/ref/templates/builtins/

模板的继承

模板继承可以使父模板的内容重用,子模板直接继承父模板的全部内容并可以覆盖父模板中相应的块

定义父模板中的块 block标签

标识出哪些在子模块中是允许被修改的
block标签：在父模板中定义，可以在子模板中覆盖


3
1
{% block block_name %}
2
定义模板块，此模板块可以被子模板重新定义的同名块覆盖
3
{% endblock block_name %}

继承模板 extends标签(写在模板文件的第一行)
- 子模板继承语法标签
  - {% extends '父模板名称' %}
  - 如:
    - {% extends 'base.html' %}
- 子模板重写父模板中的内容块
```
3
1
{% block block_name %}
2
子模板块用来覆盖父模板中 block_name 块的内容
3
{% endblock block_name %}
```
- 重写的覆盖规则
  - 不重写,将按照父模板的效果显示
  - 重写,则按照重写效果显示
- 注意
  - 模板继承时,服务器端的动态内容无法继承
参考文档
https://docs.djangoproject.com/en/1.11/ref/templates/

模板的继承示例:


26
1
# file : url.py
2
from django.conf.urls import url
3
from . import views
4
urlpatterns = [
5
    ...
6
    url(r'^index', views.index),
7
    url(r'^goods_list1', views.goods_list),
8
    url(r'^goods_list2', views.goods_list2),
9
    url(r'^user_info1', views.user_info1),
10
    url(r'^user_info2', views.user_info2),
11
]
12
# file: views.py
13
def index(request):
14
    return render(request, 'index.html')
15
16
def goods_list(request):
17
    return render(request, 'goods_list.html')
18
19
def goods_list2(request):
20
    return render(request, 'goods_list2.html')
21
22
def user_info1(request):
23
    return render(request, 'user_info_page1.html')
24
25
def user_info2(request):
26
    return render(request, 'user_info_page2.html')

基类模板


64
1
<!-- file : base.html -->
2
<!DOCTYPE html>
3
<html>
4
<head>
5
    <meta charset="utf-8">
6
    <title>{% block title %}我的达内{% endblock %}</title>
7
    <style>
8
        /* 基础样式设置 */
9
        body, h1, h2, h3, h4, h5, h6, p, ul, ol {
10
            margin: 0;
11
            padding: 0;
12
            border: 0;
13
            list-style: none;
14
        }
15
16
        /* 整体 */
17
        #container {
18
            width: 1000px;
19
            margin: 0 auto;
20
        }
21
22
        /* 顶部 */
23
        #top {
24
            width: 1000px;
25
            height: 100px;
26
            background: gray;
27
        }
28
29
        /* 主体 */
30
        #main {
31
            display: flex;
32
            justify-content: space-between;
33
        }
34
35
        {% block head_style %}
36
        {% endblock %}
37
38
        /* 底部 */
39
        #foot {
40
            width: 1000px;
41
            height: 100px;
42
            background: orange;
43
        }
44
    </style>
45
</head>
46
<body>
47
<!-- 整体 -->
48
<div id="container">
49
    <!-- 1.顶部 -->
50
    <div id="top">
51
        标题
52
    </div>
53
    <!-- 2.中间主体部分 -->
54
    <div id="main">
55
        {% block body_info %}
56
        {% endblock %}
57
    </div>
58
    <!-- 3.底部 -->
59
    <div id="foot">
60
        底部
61
    </div>
62
</div>
63
</body>
64
</html>

子类主页模板


19
1
{% extends "base.html" %}
2
3
{% block title %}首页{% endblock %}
4
{% block head_style %}
5
/* 主体左侧 */
6
#main #main_index {
7
    width: 1000px;
8
    height: 500px;
9
    background: pink;
10
}
11
{% endblock %}
12
13
{% block body_info %}
14
<!-- 2.1 主面中间的信息 -->
15
<div id="main_index">
16
    主页
17
</div>
18
{% endblock %}
19

子类商品列表模板


35
1
{% extends "base.html" %}
2
3
{% block title %}商品列表{% endblock %}
4
{% block head_style %}
5
    /* 主体左侧 */
6
    #main #left-type{
7
        width:300px;
8
        height:500px;
9
        background:pink;
10
    }
11
    /* 主体右侧 */
12
    #main #right-goods{
13
        width:700px;
14
        height:500px;
15
        background:blue;
16
    }
17
{% endblock %}
18
19
{% block body_info %}
20
<!-- 2.1 主面中间的信息 -->
21
    <!-- 2.1主体左边 -->
22
    <div id="left-type">
23
        <ul>
24
            <li>手机</li>
25
            <li>电脑</li>
26
            <li>户车</li>
27
        </ul>
28
    </div>
29
30
    {% block goods_info %}
31
    <div id="right-goods">
32
        手机列表
33
    </div>
34
    {% endblock %}
35
{% endblock %}


7
1
{% extends "goods_list.html" %}
2
3
{% block goods_info %}
4
<div id="right-goods">
5
    电脑列表
6
</div>
7
{% endblock %}


38
1
{# 此模板继承自base.html #}
2
{% extends "base.html" %}
3
4
{% block title %}用户信息{% endblock %}
5
{% block head_style %}
6
    /* 主体左侧 */
7
    #main #left-list{
8
        width:300px;
9
        height:500px;
10
        background:pink;
11
    }
12
    /* 主体右侧 */
13
    #main #right-info{
14
        width:700px;
15
        height:500px;
16
        background:yellow;
17
    }
18
{% endblock %}
19
20
{% block body_info %}
21
<!-- 2.1 主面中间的信息 -->
22
    <!-- 2.1主体左边 -->
23
    <div id="left-list">
24
        <ul>
25
            <li>修改密码</li>
26
            <li>修改头像</li>
27
            <li>修改联系方式</li>
28
        </ul>
29
    </div>
30
31
    {% block user_detail %}
32
    <div id="right-info">
33
        <p>原密码<input type="password"></p>
34
        <p>新密码<input type="password"></p>
35
        <p>新密码<input type="password"></p>
36
    </div>
37
    {% endblock %}
38
{% endblock %}


2
1
{# 此模板继承自user_info_page1.html #}
2
{% extends "user_info_page1.html" %}


6
1
{% block user_detail %}
2
<div id="right-info">
3
    <p>手机号<input type="text"></p>
4
    <p>家庭住址<input type="text"></p>
5
</div>
6
{% endblock %}

url 反向解析

url()的name关键字参数

作用:
- 根据url 列表中的name=关键字传参给 url确定了个唯一确定的名字，在模板中，可以通过这个名字反向推断出此url信息
语法
- url(regex, views, kwargs=None, name="别名")
- ex:
  - url(r'^user_login/$', views.login, name="login")
通过别名实现地址的反向解析在模板中: {% url 'some-url-name' %} {% url '别名' %} {% url '别名' '参数值1' '参数值2' %}
示例:


15
1
# file: url.py
2
from django.conf.urls import url
3
from . import views
4
urlpatterns = [
5
    ...
6
    url(r'^fav_list', views.fav_list, name="fav_list"),
7
    url(r'^fav_list/page/(\d+)', views.fav_list_page, name="fav_list_page"),
8
9
]
10
# file: views.py
11
def fav_list(request):
12
    return render(request, 'fav_list.html')
13
14
def fav_list_page(request, page):
15
    return render(request, 'fav_list.html')


xxxxxxxxxx
12
1
<html>
2
<head></head>
3
<body>
4
    <p><a href="/fav_list">我的收藏</a></p>
5
    <p><a href="{% url "fav_list" %}">我的收藏</a></p>
6
7
    <a href="/fav_list/page/1">我的收藏第1页</a>
8
    <a href="/fav_list/page/2">我的收藏第2页</a>
9
    <a href="/fav_list/page/3">我的收藏第3页</a>
10
    <a href="{% url 'fav_list_page' '200' %}">我的收藏第4页</a>
11
</body>
12
</html>

静态文件

什么是静态文件
- 不能与服务器端做动态交互的文件都是静态文件
- 如:图片,css,js,音频,视频,html文件(部分)
静态文件配置
- 在 settings.py 中配置一下两项内容:
1. 配置静态文件的访问路径
  - 通过哪个url地址找静态文件
  - STATIC_URL = '/static/'
  - 说明:
    - 指定访问静态文件时是需要通过 /static/xxx或 127.0.0.1:8000/static/xxx
    - xxx 表示具体的静态资源位置
2. 配置静态文件的存储路径
  - 静态文件在服务器端的保存位置
  - STATICFILES_DIRS=(os.path.join(BASE_DIR,'static'),)
3. 示例:
```
4
1
# file: setting.py
2
STATICFILES_DIRS = [
3
    os.path.join(BASE_DIR, "static")
4
]
```

访问静态文件

使用静态文件的访问路径进行访问

访问路径: STATIC_URL=/static/

示例:


x
1
<img src="/static/images/lena.jpg">
2
<img src="http://127.0.0.1:8000/static/images/lena.jpg">

通过 {% static %}标签访问静态文件 {% static %}表示的就是静态文件访问路径
1. 加载 static {% load static %}
2. 使用静态资源时语法:{% static '静态资源路径' %} <img src="{% static 'images/lena.jpg' %}">

示例:


x
1
# file: url.py
2
from . import views
3
4
urlpatterns = [
5
    url(r'^admin/', admin.site.urls),
6
    url(r'^show_image', views.show_image)
7
]
8
# file: views.py
9
from django.shortcuts import render
10
11
def show_image(request):
12
    return render(request, "show_image.html")


x
1
<html>
2
<head></head>
3
<body>
4
<h1>this is lena!</h1>
5
<img src="/static/images/lena.jpg">
6
<h1>this is templates lena!</h1>
7
{% load static %}
8
<img src="{% static 'images/lena.jpg' %}">
9
</body>
10
</html>

练习:


xxxxxxxxxx
5
1
将之前课程阶段中的首页,登录页,购物车页
2
1. 127.0.0.1:8000 : 显示首页效果
3
2. 127.0.0.1:8000/login : 显示登录页
4
3. 127.0.0.1:8000/cart : 显示购物车页
5
处理好所有的静态文件