目录
1 代码编写顺序
针对每一个功能写代码的循环顺序：配置url（urls.py）→ 编写apps/user中的view类（apps/user/views.py）→（如果需要）编写新建的py文件 → 修改前端页面
2 urls.py文件
# urls.py
from django.urls import path, re_path, include
from django.views.generic import TemplateView
from apps.users.views import LoginView,LoginoutView # 自己创建的类
# TemplateView 可以省略view层，直接在url层返回页面
# 官方文档：https://docs.djangoproject.com/zh-hans/2.2/ref/class-based-views/base/#django.views.generic.base.TemplateView
# TemplateView.as_view(template_name="要渲染的模板文件"
# 可以使用get_context_data() 函数传一些额外内容到模板
# 参考文档：https://blog.csdn.net/mikezhou002/article/details/81293293
# context
# 可以利用context传递数据给Template对象。一个context是一系列变量和它们值的集合
# 参考文档：https://www.cnblogs.com/haiyan123/p/9771628.html
# https://docs.djangoproject.com/en/2.2/ref/urls/
urlpatterns = [
# path路径为空代表访问域名（http://127.0.0.1:8000）时展示的页面
# path('login/',TemplateView.as_view(template_name="login.html"),name="login"),
path('',LoginView.as_view(),name="login"),
# index.html 是登录之后跳转的页面
# 结尾一定要加/，这样既可以匹配index/，也可以匹配index。如果不加，则只能匹配index
path('index/',TemplateView.as_view(template_name="index.html"),name="index"),
# 登出url
path('logout/',LoginoutView.as_view(),name="logout"),
# 验证码相关
re_path('^captcha/', include('captcha.urls')),
# 验证码官方文档：https://django-simple-captcha.readthedocs.io/en/latest/usage.html#installation
]3 views.py文件
# apps/user/views.py
from django.shortcuts import render
from django.views.generic.base import View
from django.contrib.auth import authenticate,login,logout
from django.http import HttpResponseRedirect
from django.urls import reverse
from apps.users.forms import LoginForm, DynamicLoginForm # 自己创建的类
# Django提供的Form表单可以自动判断各种逻辑，例如：是否为空，长度是否符合, 输入是否正确 等等功能
# https://docs.djangoproject.com/zh-hans/2.2/ref/forms/api/
# 登录
class LoginView(View):
# 定义view类中的get请求
def get(self, request, *args, **kwargs):
# is_authenticated 在Django中用来判断是否是登录状态
# 如果是登录状态，则跳转到index页
if request.user.is_authenticated:
# HttpResponseRedirect 重定向
# reverse 根据urls.py中配置的路径名称（urlpatterns path中的name），找到相应的url
return HttpResponseRedirect(reverse("index"))
# 如果不是登录状态，则返回登录页面，同时显示图片验证码
dynamic_form = DynamicLoginForm()
# 将动态验证码传递到前端页面
return render(request,"login.html",{"login_form": dynamic_form})
# 定义view类中的post请求
def post(self,request,*args, **kwargs):
# request.POST 用来接收从前端表单中传过来的数据
login_form = LoginForm(request.POST)
# is_valid是Django内置的验证login_form的方法，判断是否符合LoginForm中定义的条件
# 如果验证通过
if login_form.is_valid():
# 获取前端填写的username、password字段的内容
user_name = login_form.cleaned_data["username"]
password = login_form.cleaned_data["password"]
# 也可以用如下方法。第二个参数是默认值
# user_name = request.POST.get("username","")
# password = request.POST.get("password","")
# 如果不为空，则通过用户名和密码查询用户是否存在
user = authenticate(username=user_name,password=password)
# 查询到用户存在
if user is not None:
# Django内置的登录操作，如session等
login(request,user)
# 登录成功之后，跳转到index页面
return HttpResponseRedirect(reverse("index"))
# 查询到用户不存在
else:
# 提示“用户名或密码错误”，同时在前端的表单中显示之前填写的内容
return render(request, "login.html", {"msg": "用户名或密码错误", "login_form": login_form})
# 如果验证不通过，在前端页面显示填写的内容
else:
return render(request, "login.html", {"login_form": login_form})
# 登出
class LoginoutView(View):
def get(self,request,*args, **kwargs):
# Django 内置的登出操作
logout(request)
# 返回登录页面
return HttpResponseRedirect(reverse("login"))
4 在用户目录下新建forms.py
# apps/user/forms.py
from django import forms
from captcha.fields import CaptchaField
# 登录表单验证
# https://docs.djangoproject.com/zh-hans/2.2/ref/forms/fields/
class LoginForm(forms.Form):
# 用户名不能为空，且至少3位
username = forms.CharField(required=True,min_length=3)
# 密码不能为空，且至少6位
password = forms.CharField(required=True,min_length=6)
# 动态验证码获取
class DynamicLoginForm(forms.Form):
captcha = CaptchaField()5 前端login.html注意事项
# {{ 变量 }}：变量代码
# {% 代码段落 %}：逻辑代码
# {% url 'login' %}
# Django 可根据urls.py中 path 的 name 来找到对应的url
# {% csrf_token %}
# 防范csrf攻击，Django自动处理的内部机制
# {{ dynamic_form.captcha }}
# 获取图片动态验证码。可参照后端froms.py、views.py中的相关代码
# {% if login_form.errors.username %}errorput{% endif %}
# 返回错误提示。可参照后端froms.py、views.py中的相关代码
# {{ login_form.password.value }}
# 值回填功能
# {% for key,error in login_form.errors.items %}{{ error }}{% endfor %}
# 遍历错误信息
<form class="tab-form" action="{% url 'login' %}" method="post" autocomplete="off" id="form">
<div class="form-group marb20 ">
<input name="username" id="account_l" type="text" placeholder="手机号" />
</div>
<div class="form-group marb20 {% if login_form.errors.password %} errorput {% endif %} ">
<input name="password" id="password_l" value="{{ login_form.password.value }}" type="password" placeholder="请输入您的密码" />
</div>
<div class="form-group marb20 blur" id="jsRefreshCode">
{{ dynamic_form.captcha }}
</div>
<div class="clearfix">
<div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>
<div class="error btns login-form-tips" id="jsLoginTips"></div>
<input class="btn btn-green" id="jsLoginBtn" type="submit" value="立即登录 > " />
{% csrf_token %}
</form>
# 首页前端代码用到的css、js、images等文件存放到了static目录下
# 所以，需要将首页前端代码中的../css等统一替换为/static/css等，需要注意的是前边有/
参考信息：
refer1: URL构成简析
http://www.example.com:80/path/to/myfile.html?key=value#SomewhereInTheDocument1【http://】 协议名Protocol。标明请求需要使用的协议，通常是HTTP协议或者HTTPS协议
2【www.example.com】域名Domain。也可替换为IP地址
域名是一个字符串形式的服务器地址，主要是方便人阅读和记忆
IP地址是机器语言形式的服务器地址，是网络底层实际使用的地址，主要有机器来处理的
用域名访问服务器的话，计算机先回向域名服务器（DNS）请求把域名翻译成IP地址，然后再去用IP地址访问服务器。
3【80】 端口号Port。用于区分服务的端口。如果省略端口部分，将采用默认端口
一台服务器可以提供许多服务，比如WEB服务，FTP服务等，如果把服务器比作房子，端口号可以看做通向不同服务的门
4【path/to/myfile.html】路径Path。表示服务器上资源的路径
5【?key=value】参数Paramy。也叫查询，或者搜索。参数以问号（?）开始，以（&）隔开
6【#SomewhereInTheDocument】锚点。可以理解为书签，前端来做页面定位的，后台一般不用管
refer2: 图形验证码（captcha）的安装
1 安装captcha包
pip install django-simple-captcha2 在 settings.py 注册captcha app
INSTALLED_APPS = [
'captcha',
]3 迁移和同步captcha 所以依赖的表
# 迁移
python manage.py makemigrations
# 同步
python manage.py migrate4 在 urls.py 中添加相应url
from django.urls import path, re_path, include
urlpatterns = [
re_path('^captcha/', include('captcha.urls')),
]官方文档：https://django-simple-captcha.readthedocs.io/en/latest/usage.html#installation
refer3: HTTP重定向（Redirect）技术
URL 重定向Redirect，是一种当实际资源，如单个页面、表单或者整个 Web 应用被迁移到新的 URL 下的时候，保持（原有）链接可用的技术。
参考链接1：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Redirections
参考链接2：https://blog.csdn.net/kiyoometal/article/details/90698761
refer4: HTML 属性
1 HTML 全局属性
1）class 属性：规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。
① class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
② class 属性不能在以下 HTML 元素中使用：base, head, html, meta, param, script, style 以及 title
③ 类名不能以数字开头！
2）id 属性：规定 HTML 元素的唯一的 id，id 在 HTML 文档中也必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
2 HTML <form>标签
① <form> 标签用于为用户输入创建 HTML 表单。
② 表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
③ 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
④ 表单用于向服务器传输数据。
| 属性 | 值 | 描述 |
| action | URL | 规定当提交表单时向何处发送表单数据 |
| method | post get |
规定用于发送 form-data 的 HTTP 方法 |
| autocomplete | on off |
规定是否启用表单的自动完成功能 |
| name | form_name | 规定表单的名称 |
3 HTML <input>标签
标签用于搜集用户信息
| 属性 | 值 | 描述 |
| type | button checkbox file hidden image password radio reset submit text |
规定 input 元素的类型 |
| value | value | 规定 input 元素的值 |
| placeholder | text | 规定帮助用户填写输入字段的提示 |
4 HTML<script> 标签
<script>标签既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件
通常放置在一个 HTML 网页的头部标签 <head> 标签内
| 属性 | 值 | 描述 | 备注 |
| type | MIME-type | 指示脚本的 MIME 类型。 | 如text/javascript等 |
| src | URL | 规定外部脚本文件的 URL。 |
参考链接1：https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
参考链接2：https://www.w3school.com.cn/tags/tag_form.asp
参考链接3：https://www.w3school.com.cn/tags/tag_input.asp
end
