srcmini本文概述
在Web应用程序中, 除了业务逻辑和数据处理之外, 我们还需要处理和管理CSS, JavaScript, 图像等静态资源。
管理这些资源很重要, 这样它才不会影响我们的应用程序性能。
Django非常有效地处理它, 并提供了一种方便的方式来使用资源。
django.contrib.staticfiles模块有助于管理它们。
Django静态（CSS, JavaScript, 图像）配置
1.将django.contrib.static文件包含在INSTALLED_APPS中。
INSTALLED_APPS = [
'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myapp'
]2.如下所示, 在settings.py文件中定义STATIC_URL。
STATIC_URL = '/static/'3.使用以下表达式将静态文件加载到模板中。
{% load static %}4.将所有图像, JavaScript, CSS文件存储在应用程序的静态文件夹中。首先创建一个静态目录, 将文件存储在其中。
我们的项目结构如下所示。
Django图像加载示例
要将图像加载到模板文件中, 请使用以下代码。
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
{% load static %}
</head>
<body>
<img src="{% static '/wallpaper.jpeg' %}" alt="My image" height="300px" width="700px"/>
</body>
</html>//urls.py
from django.contrib import admin
from django.urls import path
from myapp import views
urlpatterns = [
path('admin/', admin.site.urls), path('index/', views.index), ]//views.py
def index(request):
return render(request, 'index.html')使用python manage.py runserver命令运行服务器。
之后, 通过localhost：8000 / index URL访问模板, 它将向浏览器产生以下输出。
Django加载JavaScript
要加载JavaScript文件, 只需在index.html文件中添加以下代码即可。
{% load static %}
<script src="{% static '/js/script.js' %}"// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
{% load static %}
<script src="{% static '/js/script.js' %}" type="text/javascript"></script>
</head>
<body>
</body>
</html>// script.js
alert("Hello, Welcome to srcmini");现在, 我们的项目结构如下所示：
使用python manage.py runserver命令运行服务器。
之后, 通过localhost：8000 / index URL访问模板, 它将向浏览器产生以下输出。
Django加载CSS示例
要加载CSS文件, 请在index.html文件中使用以下代码。
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">之后, 创建目录CSS和文件style.css, 其中包含以下代码。
// style.css
h1{
color:red;
}我们的项目结构如下所示：
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
{% load static %}
<link href="{% static 'css/style.css' %}" rel="stylesheet">
</head>
<body>
<h1>Welcome to srcmini</h1>
</body>
</html>使用python manage.py runserver命令运行服务器。
之后, 通过输入localhost：8000 / index URL访问模板, 它将向浏览器产生以下输出。
好了, 在本主题中, 我们学习了有效管理静态文件的过程。
评论前必须登录！
注册