一、前言
通过上次的学习我们已经顺利的搭建了一个私人博客框架，接下来我们开始写页面。
本章节代码打包上传，资源下载链接：
注意：本系列文章旨在使小白在尽可能短的时间内利用Django搭建一个较为完整的项目，因此页面功能将会非常简单，美工==几乎没有，见谅。
二、创建应用
1.创建accounts应用：
cd myblog
python manage.py startapp accounts
2.注册accounts应用：
打开 myblog/settings.py 文件，找到 INSTALLED_APPS 列表，并添加accounts应用：
INSTALLED_APPS = [
...
'accounts',
]三、迁移数据库
1.创建迁移文件：
python manage.py makemigrations2.应用迁移：
python manage.py migrate四、实现注册、登录功能
1.Views文件编写：
路径：accounts/views.py
1.导入Django模块：
导入用于处理用户认证、注册、密码重置等功能：
from django.shortcuts import render, redirect # 导入渲染和重定向的函数
from django.contrib.auth import login, authenticate # 导入用户登录和身份验证功能
from django.contrib.auth.forms import UserCreationForm # 导入用户创建表单
from django.contrib.auth.models import User # 导入用户模型
from django.contrib import messages # 导入消息框架以显示信息
from django.contrib.auth.views import PasswordResetView, PasswordResetConfirmView # 导入密码重置视图
from django.urls import reverse_lazy # 导入用于反向解析URL的工具
2.注册
# 用户注册
def register(request):
if request.method == 'POST': # 检查请求方法是否为 POST
form = UserCreationForm(request.POST) # 创建用户注册表单实例，传入 POST 数据
if form.is_valid(): # 检查表单数据是否有效
form.save() # 保存用户注册信息到数据库
username = form.cleaned_data.get('username') # 获取注册用户的用户名
raw_password = form.cleaned_data.get('password1') # 获取用户输入的原始密码
user = authenticate(username=username, password=raw_password) # 验证用户身份
login(request, user) # 登录用户
return redirect('homepage') # 重定向到主页视图
else:
form = UserCreationForm() # 如果不是 POST 请求，创建一个空的用户注册表单实例
return render(request, 'accounts/register.html', {'form': form}) # 渲染注册页面，并传递表单对象
3.登录
# 用户登录
def user_login(request): # 定义用户登录的视图函数，接收请求参数
if request.method == 'POST': # 检查请求方法是否为 POST
username = request.POST['username'] # 从请求中获取用户名
password = request.POST['password'] # 从请求中获取密码
user = authenticate(request, username=username, password=password) # 验证用户凭据
if user is not None: # 如果用户存在（凭据正确）
login(request, user) # 登录用户
return redirect('homepage') # 重定向到主页视图
else: # 如果用户不存在（凭据错误）
messages.error(request, '用户名或密码错误') # 添加错误消息
return render(request, 'accounts/login.html') # 渲染登录页面
2.HTML文件编写：
路径：accounts/templates/accounts
1. homepage.html（主页）
首先在accounts/views.py路径下定义homepage：
def homepage(request):
return render(request, 'accounts/homepage.html') # 渲染主页模板然后在accounts/templates/accounts路径下创建homepage.html文件并写入代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head>
<body>
<h1>这里是网站主页</h1>
</body>
</html>2.register.html（注册页面）
在accounts/templates/accounts路径下创建register.html文件并写入代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<div class="container">
<h2>注册</h2>
<form method="POST">
{% csrf_token %}
<input type="text" name="username" placeholder="用户名" required>
<input type="email" name="email" placeholder="邮箱" required>
<input type="password" name="password" placeholder="密码" required>
<button type="submit">注册</button>
<p>已有账户？<a href="{% url 'login' %}">登录</a></p>
{% if form.errors %}
<div class="error">{{ form.errors }}</div>
{% endif %}
</form>
</div>
</body>
</html>
3.login.html（登录页面）
在accounts/templates/accounts路径下创建login.html文件并写入代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
</head>
<body>
<div class="container">
<h2>用户登录</h2>
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
<p>还没有帐户？ <a href="{% url 'register' %}">注册</a></p> <!-- 假设你有一个注册页面 -->
</div>
</body>
</html>
3.css文件编写
如果你想美化页面，可以在上述html文件中链接css文件。
css文件路径为：myblog/static/css/你的css文件。
以login.html文件为例，在此页面中添加代码： <link rel="stylesheet" href="{% static 'css/login.css' %}"> 链接此页面的css文件。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link rel="stylesheet" href="{% static 'css/login.css' %}"> <!-- 添加你的样式文件 -->
</head>
<body>
<div class="container">
<h2>用户登录</h2>
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<form method="post">
{% csrf_token %}
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录</button>
</form>
<p>还没有帐户？ <a href="{% url 'register' %}">注册</a></p> <!-- 假设你有一个注册页面 -->
</div>
</body>
</html>
示例css文件如下：
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 40px;
width: 300px;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
transition: border-color 0.3s;
}
.input-group input:focus {
border-color: #007bff;
outline: none;
}
.btn {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
.footer {
text-align: center;
margin-top: 20px;
font-size: 14px;
}
.footer a {
color: #007bff;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
4. 配置 URL
1.应用级别 (accounts/urls.py)：
在accounts应用中创建一个 urls.py 文件，配置 上述三个页面的URL，代码如下:
from django.urls import path # 从Django的urls模块导入path函数
from .views import register, user_login, homepage # 从当前目录的views模块导入register、user_login和homepage视图函数
urlpatterns = [ # 定义URL模式列表
path('register/', register, name='register'), # 匹配/register/路径，调用register视图，命名为'register'
path('login/', user_login, name='login'), # 匹配/login/路径，调用user_login视图，命名为'login'（重定向至登录视图）
path('homepage/', homepage, name='homepage'), # 匹配/homepage/路径，调用homepage视图，命名为'homepage'
]
2.项目级别(myblog/urls.py)：
在项目的 urls.py 文件中写入包含 accounts 应用的 URL，代码如下:
from django.contrib import admin # 导入Django的admin模块
from django.urls import path, include # 导入path和include用于URL路由
from django.views.generic import RedirectView # 导入重定向视图
urlpatterns = [
path('admin/', admin.site.urls), # 管理后台的URL路由
path('', RedirectView.as_view(url='/accounts/login/')), # 重定向到登录页面
path('blog/', include('blog.urls')), # 包含blog应用的URL路由
path('accounts/', include('accounts.urls')), # 包含accounts应用的URL路由
]
五、查看页面
运行开发服务器，在终端 输入以下代码，查看写好的页面。
cd myblog
python manage.py runserver