这是我参与11月更文挑战的第27天，活动详情查看：2021最后一次更文挑战」

这里是清安，每天学习一点点，今天依然不例外。V：qing_an_an

Django中的模板控制着前端的静态⻚⾯，⼀个完整的web应⽤是少不了前端静态数据的。

首先你得准备好自己的一个应用。这里就不再说准备的过程了。

创建一个模板文件用于管理模板。

templates：

可以放在应用里面，也可以放在应用外面，只要是项目中都可。

此文件名称是固定的，不能随意乱改。在这个文件中我们创建模板，模板是HTML5格式的。

这里因为我是提前写好了的，所以有五个HTML模板出来。但是右侧的body内容是可以添加进去的。

接下来我们在应用中的视图写入代码内容：

# 无论是创建模型还是模板都是通过视图来返回资源给路由

def hello(request):
    return render(request, "hello.html")
复制代码

这里仔细点的会问，前面用的是HttpResponse，这里用的是render，因为这里有模板了呀。

看仔细了我的注释，不论是模型还是模板都是通过视图来返回资源给路由的，接下来我们需要在路由中添加路径。

from testapp.views import *

urlpatterns = [
    path('hello/',hello),
]
复制代码

这里的导入*，默认导入视图中的全部，这个比较简便，不需要写一个导入一个了。

接下来跑Django代码即可，python manage.py runserver：

这里你就可以看到视图中的内容呈现在了浏览器中了。

字典传值

这里直接传的是模板中指定的默认值，如果传入字典，键值对形式的想要呈现上述的字样又应该怎么写呢。

视图写法：

def hello1(request):

    data = {'key1': 'Hello', 'key2': 'QingAn', 'key3': '!'}

    return render(request, "hello1.html", data)
复制代码

路由稍作改变：

from testapp.views import *

urlpatterns = [
    path('hello1/',hello1),
]
复制代码

模板写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<p>
    {{key1}}    {{key2}}    {{key3}}

</p>
</body>
</html>
复制代码

用两个花括号来接收传值，这样写就能得到上述的字样效果了。

字典列表传值

视图写法：

def hello2(request):
    data = {'key':['Hello', 'Qing', 'An', '!']}
    return render(request, "hello2.html", data)
复制代码

路由稍作改变：

from testapp.views import *

urlpatterns = [
    path('hello2/',hello2),
]
复制代码

模板写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<p>
   {{ key.0 }} {{ key.1 }} {{ key.2 }} {{ key.3 }}
</p>
</body>
</html>
复制代码

这里取值类似于列表中的下标取值。自行运行看效果哦，对比图如最开始的贴的图效果一致。

字典嵌入字典传值

视图写法：

def hello3(request):
    data = {'key': {'key1': 'Hello !', 'key2': 'Qing', 'key3': 'An'}}
    return render(request, "hello3.html", data)
复制代码

路由稍作改变：

from testapp.views import *

urlpatterns = [
    path('hello3/',hello3),
]
复制代码

模板写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<p>
    {{ key.key1 }} {{ key.key2 }} {{ key.key3 }}
</p>
</body>
</html>
复制代码

这里就类似于打点传值，点对点进行匹配。

是与否

我们在测试前端时候，偶尔会看到这样一个场景，点击下是就会变成否，再次点击就会从否变成是，这个怎么实现的呢。我们今天简单实现一下：

视图代码：

def hello4_if(request):

    num = random.randint(0, 1)  # 通过给定生成一个随机整数
    return render(request, "hello4.html", {'num': num})
复制代码

路由代码：

from testapp.views import *

urlpatterns = [
    path('hello4/',hello4),
]
复制代码

模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<p>
    {% if num > 0 %}
        是
    {% else %}
        否
    {% endif %}
</p>
</body>
</html>
复制代码

这里我们生成随机数字，用于判断，有视图返回结果给到模板，模板再自行进行判断，输出了是和否。效果自行浏览哦。

for循环

视图代码：

def hello5_for(request):
    list = ['Hello', 'World']
    # 只接收字典
    return render(request, "hello5.html", {'key': list})
复制代码

路由代码：

from testapp.views import *

urlpatterns = [
    path('hello5/',hello5),
]
复制代码

模板代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<p>
    {% for foo in key %}
        {{ foo }}
    {% endfor %}
    
</p>
</body>
</html>
复制代码

这样就能循环打印出列表中的值了。模板中的代码类似于python中的for循环，只是写代码的格式不一样。所以各位需要注意的点就是这了。

另外就是，我每次后面的值都是以字典形式的进行传值的，所以这也是一个注意点！

每日python，第二十七篇，Django模板

字典传值

字典列表传值

字典嵌入字典传值

是与否

for循环

猜你喜欢