Django-6-Django模板层及静态文件

Neptuneyut

已于 2022-04-12 09:52:38 修改

阅读量184

点赞数

分类专栏： Django 文章标签： python

于 2021-07-06 21:01:40 首次发布

本文链接：https://blog.csdn.net/qq_42491125/article/details/118523023

版权

Django 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

文章目录

Django设计模式
模板层
- 如何在视图中加载模板
- 如何在模板中使用视图传递参数
静态文件
- 配置 settings.py
- 在模板中使用静态文件
参考

Django设计模式

相比于Java的springboot MVC模式，Django是基于MTV模式，使用更为简单便捷。
在这里插入图片描述

视图层是核心，控制着整个业务逻辑

模板层

模板可以根据视图函数传递的字典动态显示html页面
如何配置模板？
- 创建模板文件夹：<项目名>/templates
- 在settings.py的TEMPLATES配置：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates', # 模板引擎，默认使用django自带
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # 需要配置的模板目录
        'APP_DIRS': True, # 是否需要在应用的目录中搜索模板
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

这里只需要配置'DIRS': [os.path.join(BASE_DIR, 'templates')]，接收一个列表，接存储html文件的目录

如何在视图中加载模板

有两种方法可以加载：

def test_html(request):
    # 方法1：使用loader
    # from django.template import loader
    # t = loader.get_template('test.html')  # 加载html模板页面
    # html = t.render()  # 将页面转换成文本
    # return HttpResponse(html)

    # 方法2：使用render
    from django.shortcuts import render
    return render(request, 'test.html')  # 直接渲染页面，代码更简洁，推荐

实例：
1.首先在项目名同一级目录（或者manage.py同级目录）中创建templates目录

2.在setting.py中设置TEMPLATES目录'DIRS': [os.path.join(BASE_DIR, 'templates')]'
3.在templates目录中新建html测试文件test.html

4.urls.py配置路由

urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', views.test_html), # 配置测试路由
]

5.视图函数写好测试路由的函数

def test_html(request):
    # 方法1：使用loader
    # from django.template import loader
    # t = loader.get_template('test.html')  # 加载html模板页面
    # html = t.render()  # 将页面转换成文本
    # return HttpResponse(html)

    # 方法2：使用render
    from django.shortcuts import render
    return render(request, 'test.html')  # 直接渲染页面，代码更简洁，推荐

浏览器访问http://127.0.0.1:8000/home/即可
在这里插入图片描述
看似与前面的HttpResonse没有太大区别，其实这里是一个巨大的跨越，可以想象的到的是我们可以把任何的html/css/js都放到templates目录中，从而实现各种各样的网页。

如何在模板中使用视图传递参数

如何把视图函数的参数传递到模板中呢？其实非常简单，需要两步：

1.在视图函数中将要传递的数据包装在一个字典中，通过render(request, 'test.html', dic)形式即可
2.在模板中通过{{ 变量 }}的方式调用即可在，这里的变量是上一步字典中的key
请看示例
views.py

def test_html(request):
    from django.shortcuts import render
    # 定义一个字典，向模板传递name和language两个变量
    dic = {
        'name': 'Django',
        'language': 'python'
    }
    return render(request, 'test.html', dic)  # 最后一个即字典

test.html

<body>
    <h1>这是测试页面</h1>
    <h2>{{ name }} was written by {{language}}</h2>
</body>

访问可得：
在这里插入图片描述

静态文件

静态文件是支持网页最终显示效果的，例如css，js，图片，音频及视频
在这里插入图片描述
例如上述网页的图片以及右侧的音乐都属于静态文件
想要在网页中添加这些静态文件，必须要遵循Django的配置原则，大致可以分成两步，第一步在settings.py设置静态文件相关路径及url地址，并在静态文件路径中放入相应的图片、音乐视频，以及后续用的更多的css样式、js动态文件

配置 settings.py

想要使用静态文件，需要首先在settings.py中做一些配置

1.配置静态文件访问路径，表示从哪个url找到静态文件，该配置默认存在
说明：可以通过http://127.0.0.1:8000/static/访问资源

STATIC_URL = '/static/'

2.配置静态文件存储位置路径，资源（图片、音乐及视频等）存放的具体位置
需要注意STATICFILES_DIRS 是一个元组，所以如果只有一个元素，不要忘记末尾的,

# 一字不差，否则报错
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

静态文件配置：

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
# 配置静态文件访问路径，表示从哪个url找到静态文件，该配置默认存在
# 可以通过http://127.0.0.1:8000/static/访问资源
STATIC_URL = '/static/'

# 配置静态文件存储位置路径，资源（图片、音乐及视频等）存放的具体位置
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'), # 项目名称同级目录创建'static'目录，存储静态文件资源，为更好的分类管理可以，在’static‘目录下再创建'image', 'css', 'js'等子目录
)

在manage.py同级目录创建static目录(非常重要！！！，否则可能找不到这些静态文件)，存储静态文件资源，为更好的分类管理可以，在’static‘目录下再创建’image’, ‘css’, 'js’等子目录，相关资源直接拖进目录即可

在模板中使用静态文件

配置完成后，在有三种方法可以在模板中使用静态文件
- 相对地址：/static/image/300.jpg
- 绝对地址：http://127.0.0.1:8000/static/image/300.jpg
- static标签：需要首先载入标签{% load static %}，在模板中使用{% static '/image/300.jpg' %}，注意从/image写起而不是/static

<img src="/static/image/300.jpg" alt="zxy">相对地址
    <img src="http://127.0.0.1:8000/static/image/300.jpg" alt=""> 绝对地址
    <!-- 通过static标签 -->
    {% load static %}
    <img src="{% static 'image/300.jpg' %}" alt=""> 标签地址

完整示例：
urls.py:

from django.contrib import admin
from django.urls import path
from . import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', views.home),
]

views.py

from django.shortcuts import render


def home(request):

    return render(request, 'home.html')

home.html


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>Home</h2>
    <img src="/static/image/300.jpg" alt="zxy">相对地址
    <img src="http://127.0.0.1:8000/static/image/300.jpg" alt=""> 绝对地址
    <!-- 通过static标签 -->
    {% load static %}
    <img src="{% static '/image/300.jpg' %}" alt=""> 标签地址
</body>

</html>

最后访问home页面效果：
在这里插入图片描述

当然我们可以加入更多静态文件类型，例如音乐

<body>
    {% block body %}
    <img src="/static/image/300.jpg" alt="zxy"><br>
    <!-- 将音乐保存到/static/music下，并使用static标签引用，设置显示控制及自动播放 -->
    <audio src="{% static '/music/free.mp3' %}" controls autoplay></audio>
    {% endblock body %}

</body>

效果

参考

达内教育

Neptuneyut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Django-6-Django模板层及静态文件

文章目录Django设计模式模板层如何在视图中加载模板如何在模板中使用视图传递参数参考Django设计模式相比于Java的springboot MVC模式，Django是基于MTV模式，使用更为简单便捷。视图层是核心，控制着整个业务逻辑模板层模板可以根据视图函数传递的字典动态显示html页面如何配置模板？创建模板文件夹：<项目名>/templates在settings.py的TEMPLATES配置：TEMPLATES = [ { 'BA
复制链接

扫一扫

专栏目录