1. 前端界面
1.1 首页
templates/login/index.html
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>首页</title>
</head>
<body style="background-color: pink;padding-top: 20px">
<h1 style="float: left;padding-left: 20px">你好，{
{ request.session.username }} ！！</h1>
<div style="padding-top: 20px"><a href="/logout"><strong style="font-size: 20px">登出</strong></a></div>
<!-- JavaScript ：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV"
crossorigin="anonymous"></script>
</body>
</html>
1.2 登陆页
templates/login/login.html
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>用户登录</title>
</head>
<body>
<div class="container">
<div class="row" style="padding-top: 40px">
<div class="col-sm"></div>
<div class="col-sm">
<h3 style="text-align: center">用户登录</h3>
<!-- 错误返回 -->
{% if login_form.captcha.errors %}
<div calss="alert alert-warning" role="alert">
<strong>登录失败!</strong>验证码输入错误！
</div>
{% elif message %}
<div class="alert alert-warning" role="alert">
<strong>登录失败!</strong>{
{ message }}
</div>
{% endif %}
<!-- 当用户点击登录按钮时，执行的操作是以post方法访问/login路由 -->
<form action="/login/" method="post">
{% csrf_token %}
<!-- 用户名 -->
<div class="form-group">
<label>{
{ login_form.username.label }}</label>
<input type="text" class="form-control" name="username">
</div>
<!-- 密码 -->
<div class="form-group">
<label>{
{ login_form.password.label }}</label>
<input type="password" class="form-control" name="password">
<small class="form-text text-muted">密码必须是字母、数字或者特殊符号组成.</small>
</div>
<!-- 验证码 -->
<div class="form-group">
<label>{
{ login_form.captcha.label }}</label>
{
{ login_form.captcha }}
</div>
<!-- 注册链接 -->
<a href="/register/" class="text-success"><ins>新用户注册</ins></a>
<!-- 登录按钮 -->
<button type="submit" class="btn btn-primary float-right">登录</button>
</form>
</div>
<div class="col-sm"></div>
</div>
</div>
<!-- JavaScript ：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV"
crossorigin="anonymous"></script>
</body>
</html>
1.3 注册页
templates/login/register.html
<!doctype html>
<html lang="zh-CN">
<head>
<!-- 必须的 meta 标签 -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap 的 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>注册界面</title>
</head>
<body>
<div class="container">
<div class="row" style="padding-top: 20px">
<div class="col-sm"></div>
<div class="col-sm">
<h3 style="text-align: center">用户注册</h3>
<!-- 错误返回 -->
{% if register_form.captcha.errors %}
<div calss="alert alert-warning" role="alert">
<strong>注册失败!</strong>验证码输入错误！
</div>
{% elif message %}
<div class="alert alert-warning" role="alert">
<strong>注册失败!</strong>{
{ message }}
</div>
{% endif %}
<form action="/register/" method="POST">
{% csrf_token %}
<!-- 用户名 -->
<div class="form-group">
<label>{
{ register_form.username.label }}</label>
<input type="text" class="form-control" name="username">
</div>
<!-- 邮箱 -->
<div class="form-group">
<label>{
{ register_form.email.label }}</label>
<input type="email" class="form-control" name="email">
</div>
<!-- 密码 -->
<div class="form-group">
<label>{
{ register_form.password1.label }}</label>
<input type="password" class="form-control" name="password1">
<small class="form-text text-muted">密码必须是字母、数字或者特殊符号组成.</small>
</div>
<!-- 确认密码 -->
<div class="form-group">
<label>{
{ register_form.password2.label }}</label>
<input type="password" class="form-control" name="password2">
<small class="form-text text-muted">密码必须是字母、数字或者特殊符号组成.</small>
</div>
<!-- 验证码 -->
<div class="form-group">
<label>{
{ register_form.captcha.label }}</label>
{
{ register_form.captcha }}
</div>
<!-- 用户登录链接 -->
<a href="/login/" class="text-success"><ins>用户登录</ins></a>
<!-- 注册按钮 -->
<button type="submit" class="btn btn-primary float-right">注册</button>
</form>
</div>
<div class="col-sm"></div>
</div>
</div>
<!-- JavaScript：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-LCPyFKQyML7mqtS+4XytolfqyqSlcbB3bvDuH9vX2sdQMxRonb/M3b9EmhCNNNrV"
crossorigin="anonymous"></script>
</body>
</html>
1.4 确认请求页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<titlle></titlle>
</head>
<body>
<h1 style="margin-left: 100px;">{
{ message }}</h1>
</body>
<!-- 邮箱认证后，2秒后自动切换到登陆页面 -->
<script>window.setTimeout("window.location='/login/'", 2000);</script>
</html>