python Djiango 中template的一个Demo

1
2
3
4
5
6
7
8
9
10
11
# urls.py
from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),  # admin/admin
    path('index/', views.index),
    path('something/', views.something),
    # ...
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
from django.shortcuts import render, HttpResponse
import requests
import time


def index(request):
    name = "张三"
    role = ['管理员', '保安', '厨师']
    # 爱好
    hobby = ['篮球', '足球', '羽毛球']
    user_info = {
        "name": name,
        "role": role,
        "hobby": hobby
    }

    # 下属
    subordinate = [
        {"name": '李四', "salary": 10000, "role": '干事'},
        {"name": '王五', "salary": 20000, "role": '经理'},
        {"name": '赵六', "salary": 30000, "role": '总监'},
        {"name": '钱七', "salary": 40000, "role": '总监'}
    ]

    # 获取天气信息
    response = requests.get('http://t.weather.sojson.com/api/weather/city/101030100')

    res = response.json()

    city_info = res.get('cityInfo')

    data = res.get('data')
    today = {
        "shidu": data.get("shidu"),
        "pm25": data.get("pm25"),
        "pm10": data.get("pm10"),
        "quality": data.get("quality"),
        "wendu": data.get("wendu"),
        "ganmao": data.get("ganmao")
    }

    forecast = data.get("forecast")

    yesterday = data.get("yesterday")

    return render(
        request,
        "index.html",
        # 注意，第三个参数是个字典，键值必须加引号，否则报错
        {
            "name": name,
            "role": role,
            "hobby": hobby,
            "user_info": user_info,
            "subordinate": subordinate,
            "cityInfo": city_info,
            "today": today,
            "forecast": forecast,
            "yesterday": yesterday
        }
    )


def something(request):
    return HttpResponse("something")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!-- index.html -->
<!-- 加载静态资源文件 -->
{% load static %}

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Django Web</title>
    <link rel="stylesheet" href="{% static 'plugins/normalize.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Hello Word!</h1>
<h2>By app01</h2>

<!-- 模板字符串展位符 -->
<div class="container">
    <p>姓名：{{ name }}</p>
    <p>职务：{{ role }}</p>
    <p>爱好：</p>
    <div style="display: flex;gap: 50px;">
        <ol><!-- 注意这里的索引不是[index]的形式，而是使用 .index -->
            <li>{{hobby.0}}</li>
            <li>{{hobby.1}}</li>
            <li>{{hobby.2}}</li>
        </ol>
        <ol>
            {% for item in hobby %}
            <li>{{ item }}</li>
            {% endfor %}
        </ol>
    </div>
    <hr>
    <p>总览：</p>
    <ol>
        <!--
            for key,value in user_info.items：可以拿到[键]和[值]
            for key in user_info.keys()：可以拿到[键]
            for value in user_info.values()：可以拿到[值]
         -->
        {% for key,value in user_info.items %}
        <li>{{ key }} = {{value}}</li>
        {% endfor %}
    </ol>

    <hr>

    <p>下属：</p>
    <div style="display: flex;gap: 50px;">
        <ol><!-- 注意这里的索引不是[index]的形式，而是使用 .index -->
            <li>{{ subordinate.0.name }} —— {{ subordinate.0.salary }} —— {{ subordinate.0.role }}</li>
            <li>{{ subordinate.1.name }} —— {{ subordinate.1.salary }} —— {{ subordinate.1.role }}</li>
            <li>{{ subordinate.2.name }} —— {{ subordinate.2.salary }} —— {{ subordinate.2.role }}</li>
            <li>{{ subordinate.3.name }} —— {{ subordinate.3.salary }} —— {{ subordinate.3.role }}</li>
        </ol>

        <ol>
            {% for item in subordinate %}
            <li>{{ item.name }} —— {{ item.salary }} —— {{ item.role }}</li>
            {% endfor %}
        </ol>
    </div>

    <hr>
    <p>工资达到两万及两万以上员工：</p>
    <ol>
        {% for item in subordinate %}
        <!-- 使用if判断 -->
        {% if item.salary >= 20000 %}
        <li>{{ item.name }} —— {{ item.salary }} —— {{ item.role }}</li>
        {% endif %}<!-- 记得添加endif -->

        {% endfor %}
    </ol>

</div>

<!--天气-->
<div class="container" style="display: flex;flex-direction: column; gap: 10px;">
    <p>天气咋样？</p>
    <p>城市：{{ cityInfo.parent }} {{ cityInfo.city }}</p>
    <p>更新时间：{{ cityInfo.updateTime }}</p>
    <ul style="display: flex; justify-content: space-between;">
        <li>湿度：{{ today.shidu }}</li>
        <li>PM2.5：{{ today.pm25 }}</li>
        <li>PM1.0：{{ today.pm10 }}</li>
        <li>空气质量：{{ today.quality }}</li>
        <li>温度：{{ today.wendu }}</li>
        <li>建议：{{ today.ganmao }}</li>
    </ul>
    <p>未来天气：</p>
    <ul>
        <li style="display: flex; justify-content: space-between;">
            <span>日期</span>
            <span>星期</span>
            <span>天气</span>
            <span>温度</span>
            <span>风向</span>
            <span>日升日落</span>
            <span>笔记</span>
        </li>
        {% for item in forecast %}
        <li style="display: flex; justify-content: space-between;">
            <span>{{ item.ymd }}</span>
            <span>{{ item.week }}</span>
            <span>{{ item.type }}</span>
            <span>{{ item.low }} ~ {{ item.high }}</span>
            <span>{{ item.fx }} {{ item.fl }}</span>
            <span>{{ item.sunrise }} | {{ item.sunset }}</span>
            <span>{{ item.notice }}</span>
        </li>
        {% endfor %}
    </ul>

    <p>昨日天气：<span style="font-size: 12px;color: #b0c4de;">{{ yesterday.ymd }}</span></p>
    <ul style="display: flex; justify-content: space-between;">
        <li>日期：{{ yesterday.ymd }}</li>
        <li>星期：{{ yesterday.week }}</li>
        <li>天气：{{ yesterday.type }}</li>
        <li>温度：{{ yesterday.low }} ~ {{ yesterday.high }}</li>
        <li>风向：{{ yesterday.fx }} {{ yesterday.fl }}</li>
        <li>日升日落：{{ yesterday.sunrise }} | {{ yesterday.sunset }}</li>
        <li>笔记：{{ yesterday.notice }}</li>
    </ul>
</div>


<div>
    <img src="{% static 'image/1.jpg' %}" width="300" alt="">
</div>

<script src="{% static 'plugins/jquery/jquery.min.js' %}"></script>
<script>
    console.log('Hello World!');
</script>
</body>
</html>