| 本渣渣不专注技术，只专注使用技术，不是一个资深的coder，是一个不折不扣的copier |
1、前言
前面我们已经创建好数据模型了，并且在admin后台中添加了一些测试用户。下面我们就要设计好站点的url路由、对应的处理视图函数以及使用的前端模板了。这个登录注册使用的是 Bootstrap 虽然 崔庆才 的博客是 Wordpress 主题也是使用的 Bootstrap 但是，抓取网页源码时把所有的样式都变成 style.css 文件了，懒得整理，所有这里注册登录页面没有继承基础模板 base.html
这里我并未采用：即方便有好用用户管理包django-allauth
因为之前写过一个网站，有现成的注册登录代码，直接就拷贝过来用了
如果想用django-allauth
推荐阅读：使用django-allauth实现第三方账号登录 django-allauth官方文档 推荐参考源码
2、配置路由
虽然登录系统属于站点的一级功能，采用一级路由更直观和更易于接受，但是这里采用二级路由的方式，同样使用反向解析名（name参数），便于以后维护升级用户中心
一级路由
blog -> blog -> urls.py
from django.conf.urls import url, include from django.contrib import admin urlpatterns = [ url(r'^admin/', admin.site.urls), # 用户 url(r'^accounts/', include('user.urls', namespace='accounts')), # storm url('', include('storm.urls', namespace='blog')), # blog ]
二级路由
blog -> user -> urls.py
from django.conf.urls import url from .views import login_view, logout_view, register_view, profile_view, change_profile_view urlpatterns = [ url(r'^login/$', login_view, name='login'), url(r'^logout', logout_view, name='logout'), url(r'^register/$', register_view, name='register'), url(r'^profile/$', profile_view, name='profile'), url(r'^profile/change/$', change_profile_view, name='change_profile'), ]
3、编写视图
from django.contrib import auth from .models import Ouser from django.contrib.auth import authenticate from django.contrib.auth.decorators import login_required from django.contrib import messages # 第四个是 auth中用户权限有关的类。auth可以设置每个用户的权限。 from django.views.decorators.csrf import csrf_exempt from django.shortcuts import render, redirect, HttpResponseRedirect from .forms import UserForm, loginForm, ProfileForm import re # 注册 @csrf_exempt def register_view(request): context = {} if request.method == 'POST': form = UserForm(request.POST) next_to = request.POST.get('next', 0) if form.is_valid(): # 获得表单数据 username = form.cleaned_data['username'] password = form.cleaned_data['password'] password2 = form.cleaned_data['password2'] email = form.cleaned_data['email'] context = {'username': username, 'pwd': password, 'email': email} if password.isdigit(): context['pwd_error'] = 'nums' return render(request, 'account/signup.html', context) if password != password2: context['pwd_error'] = 'unequal' return render(request, 'account/signup.html', context) # 判断用户是否存在 user = Ouser.objects.filter(username=username) Email = Ouser.objects.filter(email=email) pwd_length = len(password) if pwd_length < 8 or pwd_length > 20: context['pwd_error'] = 'length' return render(request, 'account/signup.html', context) user_length = len(username) if user_length < 5 or user_length > 20: context['user_error'] = 'length' return render(request, 'account/signup.html', context) if user: context['user_error']='exit' return render(request, 'account/signup.html', context) if not re.match('^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$', email): context['email_error'] = 'format' return render(request, 'account/signup.html', context) if Email: context['email_error'] = 'exit' return render(request, 'account/signup.html', context) # 添加到数据库（还可以加一些字段的处理） user = Ouser.objects.create_user(username=username, password=password, email=email) user.save() user = auth.authenticate(username=username, password=password) # 添加到session request.session['username'] = username request.session['uid'] = user.id request.session['nick'] = '' # 调用auth登录 auth.login(request, user) # 重定向到首页 if next_to == '': next_to = '/' return redirect(next_to) else: next_to = request.GET.get('next', '/') context = {'isLogin': False} context['next_to'] = next_to # 将req 、页面 、以及context{}（要传入html文件中的内容包含在字典里）返回 return render(request, 'account/signup.html', context) # 登陆 @csrf_exempt def login_view(req): context = {} if req.method == 'POST': form = loginForm(req.POST) next_to=req.POST.get('next','/') remember = req.POST.get('remember', 0) if form.is_valid(): # 获取表单用户密码 username = form.cleaned_data['username'] password = form.cleaned_data['password'] context={'username':username,'pwd':password} # 获取的表单数据与数据库进行比较 user = authenticate(username = username,password = password) if next_to=='': next_to='/' if user: if user.is_active: # 比较成功，跳转index auth.login(req,user) req.session['username'] = username req.session['uid'] = user.id req.session['nick'] = None req.session['tid'] = None reqs = HttpResponseRedirect(next_to) if remember != 0: reqs.set_cookie('username',username) else: reqs.set_cookie('username', '', max_age=-1) return reqs else: context['inactive'] = True return render(req, 'account/login.html', context) else: # 比较失败，还在login context['error'] = True return render(req, 'account/login.html', context) else: next_to = req.GET.get('next', '/') context['next_to'] = next_to return render(req, 'account/login.html', context) # 登出 def logout_view(req): # 清理cookie里保存username next_to = req.GET.get('next', '/') if next_to == '': next_to = '/' auth.logout(req) return redirect(next_to) @login_required def profile_view(request): return render(request, 'oauth/profile.html') @login_required @csrf_exempt def change_profile_view(request): if request.method == 'POST': # 上传文件需要使用request.FILES form = ProfileForm(request.POST, request.FILES, instance=request.user) if form.is_valid(): form.save() # 添加一条信息,表单验证成功就重定向到个人信息页面 messages.add_message(request, messages.SUCCESS, '个人信息更新成功！') return redirect('accounts:profile') else: # 不是POST请求就返回空表单 form = ProfileForm(instance=request.user) return render(request, 'oauth/change_profile.html', context={'form': form})
注意一个点，在视图里使用next_to实现注册登录后跳转到注册登录前浏览页面
4、前端模板
在templates文件中添加登录注册页面文件，方便管理页面account、oauth
blog -> templates -> account -> base.html
{% load staticfiles %}
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="origin">
<!-- TDK and ICO -->
{% block title %}{% endblock %}
<meta name="description" content="用户账号管理，使用django-allauth社交用户系统，支持微博、Github等社交账号登录，加入TendCode，查看更多信息。">
<meta name="keywords" content="django-allauth,社交用户系统,OAuth 2.0">
<!-- Bootstrap and font-awesome CSS -->
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type='text/css'>
<link href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}" rel="stylesheet">
</head>
<body>
<!--主要内容块-->
{% block main %}
{% endblock %}
<footer class="container-fluid mt-4">
<div class="card-body text-center px-0 f-16">
<p class="card-text mb-1">Copyright © 2017-<span id="year-info"></span>
<script>function getnewYear(){var d = new Date();var x = document.getElementById("year-info");
x.innerHTML=d.getFullYear();}getnewYear()</script>
<a href="https://github.com/Hopetree" target="_blank" title="博客作者的Github">Hopetree</a>. Powered by Django.
</p>
<p class="mb-0">
<a href="http://www.miibeian.gov.cn/" target="_blank">粤ICP备17114114号-3</a> |
<a href="/sitemap.xml" target="_blank">Sitemap</a>
| <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? "https://" : "http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1275912930'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s96.cnzz.com/z_stat.php%3Fid%3D1275912930' type='text/javascript'%3E%3C/script%3E"));</script>
</p>
</div>
</footer>
</body>
</html>
blog -> templates -> account -> login.html
{% extends 'account/base.html' %}
{% block title %}
<title>注册</title>
{% endblock %}
<!--主要内容块-->
{% block main %}
<main>
<div class="container">
<div class="row">
<div class="col-12 col-sm-8 col-md-6 offset-sm-2 offset-md-3 px-xl-5">
<div class="card rounded-0 px-3 px-lg-4">
<div class="card-header text-center bg-white py-2">
<h3 class="my-1 text-info">注册</h3>
</div>
<div class="card-body card-login">
<form class="signup" id="signup_form" method="post" action="{% url 'accounts:register' %}">
<div id="div_id_email" class="form-group">
<label for="id_email" class="form-control-label requiredField">E-mail
<span class="asteriskField">*</span>
</label>
<div class="">
<input type="email" name="email" value="{{ email }}" placeholder="E-mail地址" autofocus="autofocus" class="textinput textInput form-control" required id="id_email" />
<p id="error_1_id_email" class="help-block">
<strong>
{% if email_error == 'exit' %}此e-mail地址已被其他用户注册
{% elif email_error == 'format' %}请输入的有效邮箱地址
{% endif %}
</strong>
</p>
</div>
</div>
<div id="div_id_username" class="form-group has-danger">
<label for="id_username" class="form-control-label requiredField">用户名
<span class="asteriskField">*</span>
</label>
<div class="">
<input type="text" name="username" value="{{ username }}" placeholder="用户名" minlength="1" maxlength="150" class="textinput textInput form-control form-control-danger" required id="id_username" />
<p id="error_1_id_username" class="help-block">
<strong>{% if user_error == 'exit' %}已存在一位使用该名字的用户
{% elif user_error == 'length' %}用户名限制5~20个字符
{% endif %}</strong>
</p>
</div>
</div>
<div id="div_id_password1" class="form-group has-danger">
<label for="id_password1" class="form-control-label requiredField">
密码<span class="asteriskField">*</span>
</label>
<div class="">
<input type="password" name="password" value="{{ pwd }}" placeholder="密码" class="textinput textInput form-control form-control-danger" required id="id_password1" />
<p id="error_1_id_password1" class="help-block">
<strong>{% if pwd_error == 'nums' %}密码不能使用纯数字
{% elif pwd_error == 'length' %}密码限制8~20个字符
{% endif %}
</strong>
</p>
</div>
</div>
<div id="div_id_password2" class="form-group">
<label for="id_password2" class="form-control-label requiredField">
密码(重复)<span class="asteriskField">*</span>
</label>
<div class="">
<input type="password" name="password2" placeholder="密码(重复)" class="textinput textInput form-control" required id="id_password2" />
<p id="error_1_id_password2" class="help-block">
<strong>{% if pwd_error == 'unequal' %}两次输入的密码必须相同{% endif %}</strong>
</p>
</div>
</div>
<input type="hidden" name="next" value="{{ next_to }}"/>
<a class="secondaryAction" href="/accounts/login?next=%2Faccounts%2Flogin%2F">已有账号登录</a>
<button class="pull-right btn btn-info btn-sm rounded-0" type="submit">注册</button>
</form>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}
blog -> templates -> index.html
<!--登录--> <!--目前登录功能只有注册登录其它没必要没做--> <div class="pull-right"> {% if request.session.username|default:'' == '' %} <i class="fa fa-power-off"></i> <a href="{% url 'accounts:login' %}?next={{ request.path }}">登录</a> <i class="fa fa-user-plus"></i> <a href="{% url 'accounts:register' %}?next={{ request.path }}">注册</a> {% else %} <i class="fa fa-user"></i> <a href="/">投稿</a> <i class="fa fa-user-circle-o" aria-hidden="true"></i> <a href="{% url 'accounts:profile' %}?next={{ request.path }}">{{ request.session.username }}</a> <i class="fa fa-sign-out" aria-hidden="true"></i> <a href="{% url 'accounts:logout' %}?next={{ request.path }}">退出</a> {% endif %} </div> <!--登录注册结束-->
其余页面不再展示，可以去拷贝源码研究 blog
【注意】——由于新增的页面使用了bootstrap所以需要在从源码里拷贝bootstrap.min.css到
blog -> static -> css 文件下
【提示】——用户中心，可以上传用户头像需要创建一个存储用户上传的文件的文件夹 media
# 媒体文件收集 MEDIA_URL = "/media/" # 媒体文件别名(相对路径) 和 绝对路径 MEDIA_ROOT = ( os.path.join(BASE_DIR, 'media') )
5、目前项目结构
. |-- blog | |-- storm # 博客应用 | | |-- migrations # 数据库映射文件 | | |-- templatetags # 自定义模板标签文件 | | | |-- __init__.py # 声明模块，内容默认为空 | | | |-- blog_tags.py # 自定义数据筛选函数 | | |-- __init__.py # 声明模块，内容默认为空 | | |-- admin.py # 该应用的后台管理系统 | | |-- apps.py # 应用配置，Django-1.9以后自动生成 | | |-- models.py # 数据模块，使用ORM框架 | | |-- tests.py # 自动化测试的模块 | | |-- urls.py | | |-- views.py # 执行响应的代码所在模块，是代码逻辑处理的主要地点，项目中大部分代码在这里编写 | |-- user # 用户应用 | | |-- migrations | | |-- templatetags # 自定义模板标签文件 | | | |-- __init__.py # 声明模块，内容默认为空 | | | |-- oauth_tags.py # 自定义数据筛选函数 | | |-- __init__.py | | |-- admin.py | | |-- apps.py | | |-- forms.py | | |-- models.py | | |-- tests.py | | |-- urls.py | | |-- views.py | |-- blog # 项目的容器 | | |-- __init__.py # 声明模块，内容默认为空 | | |-- settings.py # 该 Django 项目的设置/配置。 | | |-- urls.py # 该 Django 项目的 URL 声明; 一份由 Django 驱动的网站"目录"。 | `-- wsgi.py # 一个 WSGI 兼容的 Web 服务器的入口，以便运行你的项目 | |-- static # 静态文件 | | |-- css | | |-- fonts | | |-- images | | |-- js | |-- media # 用户上传的文件 | | |-- avatar # 用户头头像 | |-- templates # 模板文件 | | |-- account # 登录注册页面文件 | | | |-- base.html # 登录注册基础模板 | | | |-- login.html # 登陆页面 | | | |-- signup.html # 注册页面 | | |-- oauth # 用户中心页面文件夹 | | | |-- tags # 用户 | | | | |-- user_avatar.html | | | |-- change_profile.html # 修改个人信息页面 | | | |-- profile.html # 个人中心 | | |-- about.html | | |-- donate.html | | |-- exchange.html | | |-- index.html | | |-- message.html | | |-- project.html | | |-- question.html | | |-- resources.html | | |-- technique.html | | |-- wp-login.html `-- manage.py
6、运行效果
【友情提示】——如果发现有表达错误，或者知识点错误，或者搞不懂的地方，请及时留言，可以在评论区互相帮助，让后来者少走弯路是我的初衷。我也是一步步摸着石头走过来的， 深知网络上只言片语的图文教程，给初学者带来的深深困扰。 【建议】——在对项目结构不太熟悉时，参照完整源码少走弯路
转载请注明： StormSha » Django个人博客开发十三 | 注册登录
