Django 静态多页面开发入门教程
2025年11月28日 19:03
一、前置环境准备
1.1 环境要求
操作系统：Windows/macOS/Linux 均可
Python 版本：3.8~3.11（推荐 3.9+，确保已配置系统环境变量）
网络环境：需联网完成 Django 安装
1.2 环境验证
打开终端（Windows 为命令提示符 cmd，macOS/Linux 为 Terminal）；
执行以下命令验证 Python 环境：
python --version # Windows 系统 # 或 python3 --version（macOS/Linux 系统，若 python 命令未关联） |
输出 Python 3.x.x（x 为具体版本号）即表示环境正常。
二、核心操作步骤
步骤 1：安装 Django 框架
操作目标：安装指定版本的 Django（长期支持版，稳定性优先）
操作步骤：
终端执行安装命令：
pip install django==4.2 # 4.2 为 LTS 版本，兼容最优 |
若 pip 命令未识别，替换为：python -m pip install django==4.2（强制使用当前 Python 环境的 pip）；
验证安装结果：
django-admin --version |
输出 4.2.x（x 为修订版本号）即安装成功。
步骤 2：创建 Django 项目
操作目标：初始化项目结构，指定项目名称为 mysite，避免冗余目录
操作步骤：
终端切换至工作目录（推荐桌面，路径清晰）：
cd Desktop # Windows/macOS 通用（桌面路径） |
执行项目创建命令（末尾需加英文句点 .）：
django-admin startproject mysite . |
句点作用：将项目文件直接生成在当前目录（Desktop），避免嵌套 mysite/mysite 目录；
项目结构验证：
执行命令后，Desktop 目录下生成以下文件 / 文件夹：
manage.py：项目管理核心脚本（执行启动、迁移等操作）；
mysite/：项目配置包（含核心配置文件）。
步骤 3：项目基础验证
操作目标：启动开发服务器，验证项目初始化正常
操作步骤：
终端执行启动命令：
python manage.py runserver |
服务器启动验证：
终端输出以下信息即成功：
Starting development server at http://127.0.0.1:8000/ Quit the server with CTRL-BREAK. |
浏览器验证：
打开浏览器访问 http://127.0.0.1:8000/，显示 Django 默认欢迎页（含火箭图标）；
停止服务器：终端按 Ctrl+C（Windows/macOS 通用）。
步骤 4：创建应用（App）
操作目标：创建功能模块 home，用于承载静态页面逻辑
操作步骤：
终端执行创建命令（确保当前目录为 Desktop）：
python manage.py startapp home |
应用结构验证：
Desktop 目录下新增 home/ 文件夹，核心文件包括：
views.py：视图逻辑文件（处理请求与响应）；
templates/（后续手动创建）：模板文件目录（存放 HTML）；
urls.py（后续手动创建）：应用路由配置文件。
步骤 5：注册应用
操作目标：在项目配置中注册 home 应用，使 Django 识别该模块
操作步骤：
打开配置文件：
路径：Desktop/mysite/settings.py（用 VS Code、记事本等编辑器打开）；
配置 INSTALLED_APPS：
找到 INSTALLED_APPS 列表，在末尾添加 'home',（逗号用于语法规范），修改后如下：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # 自定义应用注册 'home', ] |
保存文件：按 Ctrl+S（Windows）或 Command+S（macOS）保存。
步骤 6：创建模板文件（HTML）
操作目标：创建 index.html（首页）和 about.html（关于页），定义静态页面结构
操作步骤：
6.1 创建模板目录
路径：Desktop/home/ → 新建文件夹，命名为 templates（Django 默认模板目录名，不可自定义）；
目录结构：home/templates/（后续 HTML 文件存放于此）。
6.2 创建首页模板（index.html）
路径：home/templates/ → 新建文件，命名为 index.html；
写入以下代码（标准化 HTML5 结构，含基础样式）：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>首页 - Django 静态页面示例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h1>Django 静态多页面开发示例</h1> <div class="content"> <p>本示例基于 Django 4.2 构建，包含首页与关于页两个静态页面，无数据库依赖，纯 HTML/CSS 实现。</p> <p>核心特性：</p> <ul style="margin-left: 20px; margin-top: 10px;"> <li>路由分发机制（主路由 → 应用路由）；</li> <li>模板文件规范化管理；</li> <li>页面间跳转逻辑实现。</li> </ul> </div> <a href="/about" class="btn">查看关于页</a> </div> </body> </html> |
保存文件。
6.3 创建关于页模板（about.html）
路径：home/templates/ → 新建文件，命名为 about.html；
写入以下代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>关于页 - Django 静态页面示例</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <h1>关于本项目</h1> <div class="content"> <p>项目名称：Django 静态多页面示例</p> <p>技术栈：Django 4.2 + HTML5 + CSS3</p> <p>开发目的：演示 Django 框架下静态页面的创建、路由配置与页面跳转逻辑，适用于0基础开发者快速入门。</p> <p>核心文件说明：</p> <ul style="margin-left: 20px; margin-top: 10px;"> <li>views.py：视图函数，处理请求并返回模板；</li> <li>urls.py：路由配置，映射 URL 与视图函数；</li> <li>templates/：模板目录，存放 HTML 静态文件。</li> </ul> </div> <a href="/" class="btn">返回首页</a> </div> </body> </html> |
保存文件。
步骤 7：编写视图函数
操作目标：在 views.py 中定义视图函数，关联模板文件与请求响应
操作步骤：
打开视图文件：
路径：Desktop/home/views.py；
写入以下代码（替换原有内容）：
from django.shortcuts import render def index(request): """ 首页视图函数 :param request: 请求对象（Django 自动传入） :return: 渲染 index.html 模板 """ return render(request, 'index.html') def about(request): """ 关于页视图函数 :param request: 请求对象 :return: 渲染 about.html 模板 """ return render(request, 'about.html') |
保存文件。
步骤 8：配置应用路由
操作目标：在 home 应用中创建路由文件，映射 URL 与视图函数
操作步骤：
创建路由文件：
路径：Desktop/home/ → 新建文件，命名为 urls.py；
写入以下代码：
from django.urls import path from . import views # 导入当前应用的视图函数 # 路由列表：URL 路径 → 视图函数 映射关系 urlpatterns = [ # 首页路由：空路径（/）对应 index 视图 path('', views.index, name='home_index'), # 关于页路由：/about 对应 about 视图 path('about', views.about, name='home_about'), ] |
说明：name 参数为路由命名，便于后续模板中反向解析（当前静态页面暂用不到，保留规范）；
保存文件。
步骤 9：配置主路由
操作目标：在项目主路由中挂载 home 应用的路由，实现路由分发
操作步骤：
打开主路由文件：
路径：Desktop/mysite/urls.py；
写入以下代码（替换原有内容）：
from django.contrib import admin from django.urls import path, include urlpatterns = [ # 后台管理路由（Django 自带） path('admin/', admin.site.urls), # 主路由分发：将根路径（/）交给 home 应用的 urls.py 处理 path('', include('home.urls')), ] |
保存文件。
步骤 10：项目测试与验证
操作目标：启动服务器，验证页面访问与跳转功能
操作步骤：
终端执行启动命令（当前目录为 Desktop）：
python manage.py runserver |
功能验证：
首页访问：浏览器输入 http://127.0.0.1:8000/，验证页面样式与内容正常；
关于页访问：输入 http://127.0.0.1:8000/about，验证页面正常；
跳转验证：点击首页 “查看关于页” 按钮跳转至 about 页，点击 about 页 “返回首页” 按钮跳转至首页；
停止服务器：终端按 Ctrl+C。
三、技术说明与规范
3.1 目录结构规范（最终项目结构）
Desktop/ ├── manage.py # 项目管理脚本 ├── mysite/ # 项目配置包 │ ├── __init__.py │ ├── asgi.py │ ├── settings.py # 项目核心配置（应用注册、数据库等） │ ├── urls.py # 主路由配置 │ └── wsgi.py └── home/ # 自定义应用 ├── __init__.py ├── admin.py ├── apps.py ├── migrations/ # 数据库迁移文件目录（静态页面暂为空） ├── models.py # 数据模型（静态页面暂用不到） ├── templates/ # 模板目录 │ ├── index.html # 首页模板 │ └── about.html # 关于页模板 ├── tests.py # 测试文件 ├── urls.py # 应用路由配置 └── views.py # 视图函数 |