Django 了解模板你就理解了前后端交互

本是古典何须时尚 2022-11-28 15:15 140阅读 0赞

### Django 模板语言 ###

*  视图函数
 *  设置
 *  路由
 *  html目录
 *   *  templates/index.html
     *  templates/index2.html
     *  templates/index3.html
     *  继承
     *   *  templates/base.html
         *  templates/news.html

# 视图函数 #

views.py

from django.shortcuts import HttpResponse
    from django.shortcuts import render
    
    # Django的基本使用
    def hello(request):
        return HttpResponse("hello world")
    # Django中re_path基本使用
    def person_select_id(request):
        return HttpResponse("person_select_id.....")
    class Person:
        def __init__(self,name,age):
            self.name=name
            self.age=age
        def GetName(self):
            return self.name
        def GetAge(self):
            return self.age
    #django变量基本用法
    def index(request):
        name="张三"
        hobbys=["打篮球","看电视","分享小视频"]
        address={ "province":"广东省","city":"广州市"}
        person=Person(name,20)
        return render(request,"index.html",locals())
    #django循环体基本用法
    def index2(request):
        msg = "<h1 style='color:red'>我是隔壁的老王</h1>"
        msg2 = "i AM chinese"
    
        person_list = [
            { "id": 1234, "name": "老王1", "age": 33},
            { "id": 12, "name": "老王2", "age": 33},
            { "id": 333, "name": "老王3", "age": 33},
            { "id": 5555, "name": "老王4", "age": 33},
            { "id": 5, "name": "老王5", "age": 33}
        ]
        return render(request,"index2.html",locals())
    #Django过滤器
    def index3(request):
        name = "张三"
        hobbys = ["打篮球", "看电视", "分享小视频"]
        age=18
        js=""" <script> alert("你好啊") </script> """
        return render(request,"index3.html",locals())
    # 页面继承
    def news(request):
        return render(request,"news.html")

# 设置 #

settings.py

#新加
    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/3.0/howto/static-files/
    
    STATIC_URL = '/static/'
    STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
    )
    #设置上传文件的位置
    MEDIA_ROOT = os.path.join(BASE_DIR, "static/img")

# 路由 #

urls.py

"""Python_Django URL Configuration The `urlpatterns` list routes URLs to views. For more information please see: https://docs.djangoproject.com/en/3.0/topics/http/urls/ Examples: Function views 1. Add an import: from my_app import views 2. Add a URL to urlpatterns: path('', views.home, name='home') Class-based views 1. Add an import: from other_app.views import Home 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') Including another URLconf 1. Import the include() function: from django.urls import include, path 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) """
    from django.contrib import admin
    from django.urls import *
    
    from Python_Django.views import *
    
    urlpatterns = [
        path('admin/', admin.site.urls),
        path('Lg/',hello),
        re_path(r'person\w+/',person_select_id),
        path('index/',index),
        path('index2/',index2),
        path('index3/',index3),
        path('news/', news),
    ]

# html目录 #

## templates/index.html ##

{ % load static %}
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
    </head>
    <body>
    <p>我的名字是{ {  person.name }}</p>
    <p>我的年龄是{ {  person.age }}岁</p>
    <p>我的爱好:
    { % for hobby in hobbys %}
    { {  hobby }}
    { % endfor %}
    </p>
    <p>我的地址是:{ {  address.province }}{ {  address.city }}</p>
    <img src="{%static 'img/xiaocaiqi.jpg'%}">
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]

## templates/index2.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>django循环体基本用法</title>
    </head>
    <body>
    <table width="400" border="1">
        <tr><td>编号</td><td>姓名</td><td>年龄</td></tr>
        { % for person in person_list %}
            { #forloop表示for循环了几次,从1开始计数 forloop|divisibleby:2将奇数进行特别处理 #}
            { % if forloop.counter|divisibleby:2 %}
                <tr>
            { % else %}
                <tr style="background-color: red;color: white">
            { % endif %}
        <td>{ { forloop.counter }}</td>
        <td>{ { person.name }}</td>
        <td>{ { person.age }}</td>
        </tr>
        { % endfor %}
    </table>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]

## templates/index3.html ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>过滤器</title>
    </head>
    <body>
    <p>我的名字是{ {  person.name }}</p>
    <p>我的年龄是{ {  person.age }}岁</p>
    <p>我的爱好:
    { % for hobby in hobbys %}
    { {  hobby }}
    { % endfor %}
    </p>
    <h1>默认值</h1>
    { {  name|default:"不存在该变量" }}
    { {  name2|default:"不存在该变量" }}
    <h1>统计长度</h1>
    <p>名字的长度:{ {  name|length }}</p>
    <p>爱好的长度:{ {  hobbys|length }}</p>
    <h1>切片</h1>
    <p>{ {  name|slice:"0:1" }}</p>
    <p>{ {  hobbys|slice:"0:2" }}</p>
    <h1>执行js</h1>
    { {  js }}
    { {  js|safe }}
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]

## 继承 ##

### templates/base.html ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{ % block title %}{ % endblock %}</title>
    </head>
    <body>
        <div style="height: 100px;background-color: bisque">
            头部
        </div>
        <div style="height: 1000px;background-color: aliceblue">
            <div style="height: 1000px;width: 20%;float: left;background-color: beige">
                <ul>
                    <li><a href="#">链接1</a></li>
                    <li><a href="#">链接2</a></li>
                    <li><a href="#">链接3</a></li>
                    <li><a href="#">链接4</a></li>
                </ul>
            </div>
            <div style="height: 1000px;width: 80%;float: left">
                { % block right %}{ % endblock %}
            </div>
        </div>
    { # {% include "footer.html" %}#}
    </body>
    </html>

### templates/news.html ###

{ % extends "base.html" %}
    { % block title %}用户管理{ % endblock %}
    { % block right %}
        用户管理详情...
    { % endblock %}

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/061abe61ed454c8ba4379b9e3e4e6e4c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/251839067d0543b3a0110bd575a0532e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/7b49a743f35e4af49b1f3e4f8cbabf47.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExMzA5NTI1ODAy_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/6d6d471f8ebd4b4da4fd0ea4db042d05.png