在完成注册邮箱的操作之后, 我们还需要完成登录操作以及建一个全新的网站, 来让项目更好看一点
1. 在templates文件下在新建一个html, 用来作为登录界面, 起名为: enter.html
里面的代码逻辑和注册邮箱的基本一致, 不在过多描述
2. 为了使项目层次分明, 我们在新建一个app, 起名为:login
在views.py中我们写登录和注销的逻辑
from django.shortcuts import render, redirect
from .forms import LoginFrom
# Create your views here.
from app.models import UserProfile
# Q表示查询条件
from django.db.models import Q
from django.contrib.auth.hashers import make_password
from django.contrib.auth import authenticate
from django.contrib.auth import login, logout
from django.contrib.auth.backends import ModelBackend
# 登录
def enter(request):
if request.method == 'GET':
form = LoginFrom()
return render(request, 'enter.html', {'form': form})
elif request.method == 'POST':
# 创建表单对象
form = LoginFrom(request.POST)
rs=form.is_valid()
print(rs)
# 验证表单数据是否合法
if form.is_valid():
# 登录操作, cleaned_data 读取表单的值,返回的是一个字典
email = form.cleaned_data['email']
password = form.cleaned_data['password']
# 判断该用户密码是否正确
# 直接使用密码==密码是不行的, 需要对密码加密后再判断
# authenticate 会对password进行加密之后再对比
user = authenticate(request=request, username=email, password=password)
if user is not None:
# 执行django的login函数, 坐登录
login(request, user)
# 返回主页
# render 会重新渲染页面, 不会刷新url地址
# 这里需要, 刷新url, 并且渲染页面, redirect重定向
return redirect('/')
else:
return render(request, 'enter.html', {'form': form, 'errMsg': '账号或密码错误, 请检查后重新登录'})
else:
return render(request, 'enter.html', {'form': form})
# 自定义验证类
class CustomBackend(ModelBackend):
def authenticate(self, request, username=None, password=None, **kwargs):
try:
# 可以通过eamil\mobile...账号进行账号登录
# 这里需要将输入框设为char类型
user = UserProfile.objects.get(Q(email=username) | Q(mobile=username))
# check_password 验证用户的密码是否正确
if user.check_password(password):
return user
else:
return None
except Exception as e:
return None
# 注销
def log_out(request):
logout(request)
return redirect('/')
3. 在urls中配置登录和注销的url
扫描二维码关注公众号，回复：
753317 查看本文章
# -*- coding: utf-8 -*-
# __author__ = 'ZKL'
# __date__ = '2018/4/25 10:56'
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.enter, name='enter'),
url(r'^logout', views.log_out, name='logout'),
]
4. 新建forms.py文件, 我们需要对字段在做出一些修改
# -*- coding: utf-8 -*-
# __author__ = 'ZKL'
# __date__ = '2018/4/25 11:06'
from django import forms
from captcha.fields import CaptchaField
class LoginFrom(forms.Form):
# 这里修改为char类型, 用户输入手机号, 或者昵称也能匹配登录
email = forms.CharField(required=True)
password = forms.CharField(required=True, min_length=6)
# 验证码
captcha = CaptchaField()
5. 附上enter.html的代码
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>登陆</title>
<style>
.errorlist{
padding-left: 0;
}
.errorlist > li{
list-style: none;
color: red;
font-size: 19px;
}
.errborder{
border-color: red;
box-shadow: 0 0 5px red;
}
</style>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/singin.css' %}" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<form class="form-signin" action="{% url 'enter' %}" method="post">
{% csrf_token %}
<h2 class="form-signin-heading text-center">请登录</h2>
<label for="inputEmail" class="sr-only">邮箱地址</label>
<input name="email" type="text" id="inputEmail" class="form-control {% if form.email.errors %} errborder {% endif %}" placeholder="邮箱地址/手机号" required value="{% if form.email.value %}{{ form.email.value }}{% endif %}">
{{ form.email.errors }}
<label for="inputPassword" class="sr-only">密码</label>
<input name="password" type="password" id="inputPassword" class="form-control {% if form.password.errors %} errborder {% endif %}" placeholder="密码" required value="{% if form.password.value %}{{ form.password.value }}{% endif %}">
{{ form.password.errors }}
{# 验证码 #}
{{ form.captcha }}
{{ form.captcha.errors }}
{% if errMsg %}
<h3>{{ errMsg }}</h3>
{% endif %}
<button class="btn btn-lg btn-primary btn-block" type="submit">登陆</button>
</form>
<h3 class="text-center"><a href="{% url 'index' %}">没有账号？去注册</a></h3>
</div> <!-- /container -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</body>
</html>
6. 在templates中新建一个html, 作为你的主页, 起名为: homepage.html
7. 新建一个app, 起名为: page
在views.py文件中, 我们配置它的视图函数
from django.shortcuts import render
# Create your views here.
def index(request):
return render(request, 'index.html')
8. 在你的项目的主urls.py中配置它的路由, 让用户访问的时候首先访问这个页面
url(r'^$', views.index, name='page')
9. 附上homepage.html的代码
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
{% block title %}
<title>注册</title>
{% endblock %}
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<style>
.a_pad{
padding: 0px !important;
position: relative;
top: 10px;
margin-right:10px ;
}
</style>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">搜搜<span class="sr-only">(current)</span></a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="请输入搜索关键词">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
{# 未登录显示按钮 #}
{# 判断用户是否已经登录 #}
{% if request.user.is_authenticated %}
{# 登录后显示的按钮 #}
<li><a href="#"><img src="" alt=""></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user.email }}<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">个人中心</a></li>
<li><a href="#">登录后台</a></li>
<li><a href="#">历史记录</a></li>
<li role="separator" class="divider"></li>
<li><a href="{% url 'logout' %}">注销</a></li>
</ul>
</li>
{% else %}
<li><a class="a_pad" href="{% url 'enter' %}"><button class="btn btn-success">登录</button></a></li>
<li><a class="a_pad" href="{% url 'index' %}"><button class="btn btn-success">注册</button></a></li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
{% block main %}
{% endblock %}
<script src="{% static 'js/jquery.min.js' %}"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>
注: 里面的block是为了以后使用这个模板做准备
10. 这样在用户注册邮箱后, 就可以进行登录了.
在登录的时候, 你的数据库的users应该显示成如下界面:
