概要
Django 是一个强大的 Python Web 框架，广泛用于后端开发。然而，它也支持直接使用 HTML, CSS, 和 JavaScript 来构建动态的前端界面。本文将详细介绍如何在 Django 项目中使用这些技术，包括设置静态文件、编写 HTML 模板以及集成 JavaScript 和 CSS。
Django 项目结构和设置
在开始之前，了解 Django 项目的基本结构和如何配置静态文件非常重要。
创建 Django 项目
首先，使用 Django 的命令行工具创建一个新项目和应用。
django-admin startproject myproject
cd myproject
python manage.py startapp myapp
配置静态文件
在 Django 的 settings.py 文件中，设置静态文件的路径。
# settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
编写 HTML 模板
Django 使用模板系统来生成 HTML 页面。
创建模板目录
在你的应用目录下创建一个 templates 文件夹，并在其中创建 HTML 文件。
myapp/
templates/
myapp/
index.html
示例 HTML 模板
{% load static %}
<!-- templates/myapp/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>My Django App</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
</head>
<body>
<h1>Welcome to My Django App</h1>
<script src="{% static 'js/script.js' %}"></script>
</body>
</html>
添加 CSS 样式
使用 CSS 来美化你的 Django 应用。
创建 CSS 文件
在 static 文件夹下创建一个 CSS 文件。
static/
css/
style.css
示例 CSS
/* static/css/style.css */
body {
font-family: Arial, sans-serif;
}
h1 {
color: blue;
}
集成 JavaScript
JavaScript 可用于增加页面的交互性。
创建 JavaScript 文件
在 static 文件夹下创建一个 JavaScript 文件。
static/
js/
script.js
示例 JavaScript
// static/js/script.js
document.addEventListener('DOMContentLoaded', function() {
alert("Welcome to My Django App!");
});
Django 视图和 URL 配置
将创建的模板连接到 Django 视图和 URL。
创建视图
在 views.py 中创建一个视图来渲染模板。
# myapp/views.py
from django.shortcuts import render
def index(request):
return render(request, 'myapp/index.html')
配置 URL
在 urls.py 中配置 URL 路径。
# myproject/urls.py
from django.urls import path
from myapp.views import index
urlpatterns = [
path('', index),
]
运行和测试
运行 Django 开发服务器并在浏览器中查看结果。
python manage.py runserver
访问 http://localhost:8000，应该能看到带有样式和 JavaScript 交互的页面。
总结
通过将 HTML, CSS, 和 JavaScript 直接集成到 Django 项目中，开发者可以创建丰富多彩且交互性强的 Web 应用。尽管 Django 主要用于后端开发，但它也提供了足够的灵活性和工具来构建完整的前端体验。
![[23] GaussianAvatars: Photorealistic Head Avatars with Rigged 3D Gaussians](https://img-blog.csdnimg.cn/direct/0cd54c3c7532448381a5b17485c6124b.png)
![[Application] The app delegate must implement the window property if ..... 错误](https://img-blog.csdnimg.cn/20200325154812193.jpg)
