在注册之前需要配置url
把注册的html页面拷贝到templates下面
然后在urls中做register的配置
C:\Users\hlg\PycharmProjects\MxOnline\templates\register.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>慕学在线注册</title>
{# <link rel="stylesheet" type="text/css" href="../css/reset.css">#}
{# <link rel="stylesheet" type="text/css" href="../css/login.css">#}
<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
<div class="loginbox dialogbox">
<h1>账号登录</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="cont">
<form id="jsLoginForm" autocomplete="off">
<div class="box">
<span class="word3">用户名</span>
<input type="text" name="account_l" id="account_l" placeholder="手机号/邮箱" />
</div>
<div class="box">
<span class="word2">密 码</span>
<input type="password" name="password_l" id="password_l" placeholder="请输入您的密码"/>
</div>
<div class="error btns login-form-tips" id="jsLoginTips"></div> <!--登录错误提示-->
<div class="btns">
<span><input type="checkbox" id="jsAutoLogin" /> 自动登录</span>
<span class="forget btn fr">忘记密码</span>
</div>
<div class="button">
<input type="button" value="登录" id="jsLoginBtn" />
</div>
<div class="btns">
<span class="fr">没有账号？<span class="regist btn">立即注册</span></span>
</div>
</form>
</div>
</div>
<div class="dialog" id="jsDialog">
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
<h1>成功提交</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="cont">
<h2>您的需求提交成功！</h2>
<p></p>
</div>
</div>
<div class="noactivebox dialogbox" id="jsUnactiveForm" >
<h1>邮件验证提示</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="center">
<img src="../images/send.png"/>
<p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">[email protected]</span>发送了邮件，<br/>为保证您的账号安全，请及时验证邮箱</p>
<p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
<p class="zy_success upmove"></p>
<p style="display: none;" class="sendE2">没收到，您可以查看您的垃圾邮件和被过滤邮件，也可以再次发送验证邮件（<span class="c5c">60s</span>）</p>
<p class="sendE">没收到，您可以查看您的垃圾邮件和被过滤邮件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次发送验证邮件</span></p>
</div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
<div class="c-box fff-box">
<div class="wp header-box">
<p class="fl hd-tips">慕学在线，在线学习平台！</p>
<ul class="fr hd-bar">
<li>服务电话：<span>4001008031</span></li>
<li><a href="login.html">[登录]</a></li>
<li class="active"><a href="register.html">[注册]</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="c-box bg-box">
<div class="login-box clearfix">
<div class="hd-login clearfix">
<a class="index-logo" href="index.html"></a>
<h1>用户注册</h1>
<a class="index-font" href="index.html">回到首页</a>
</div>
<div class="fl slide">
<div class="imgslide">
<ul class="imgs">
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
<div class="fl form-box">
<div class="tab">
<!--<h2 class="active">手机注册</h2>-->
<h2>邮箱注册</h2>
</div>
<!--<div class="tab-form">-->
<!--<form id="mobile_register_form" autocomplete="off">-->
<!--<input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />-->
<!--<div class="form-group marb20">-->
<!--<label>手 机 号</label>-->
<!--<input id="jsRegMobile" name="account" type="text" placeholder="请输入您的手机号码" />-->
<!--</div>-->
<!--<div class="form-group marb20" id="jsRefreshCode">-->
<!--<label>验 证 码</label>-->
<!--<input autocomplete="off" class="form-control-captcha mobile-register-captcha" id="mobile-register-captcha_1" name="captcha_m_1" placeholder="请输入验证码" type="text" /> <input class="form-control-captcha mobile-register-captcha" id="mobile-register-captcha_0" name="captcha_m_0" placeholder="请输入验证码" type="hidden" value="29953bacf7005e8469388b449d97d00d523c1706" /> <img src="/captcha/image/29953bacf7005e8469388b449d97d00d523c1706/" alt="captcha" class="captcha" />-->
<!--</div>-->
<!--<div class="clearfix">-->
<!--<div class="form-group marb8 verify-code">-->
<!--<label>短信验证码</label>-->
<!--<input id="jsPhoneRegCaptcha" name="mobile_code" type="text" placeholder="输入手机验证码" />-->
<!--</div>-->
<!--<input class="verify-code-btn sendcode" id="jsSendCode" value="发送验证码">-->
<!--</div>-->
<!--<div class="form-group marb8">-->
<!--<label>密 码</label>-->
<!--<input id="jsPhoneRegPwd" name="password_m" type="password" placeholder="请输入6-20位非中文字符密码" />-->
<!--</div>-->
<!--<div class="error btns" id="jsMobileTips"></div>-->
<!--<div class="auto-box marb8">-->
<!--</div>-->
<!--<input class="btn btn-green" id="jsMobileRegBtn" type="button" value="注册并登录" />-->
<!--</form>-->
<!--</div>-->
<div class="tab-form">
<form id="email_register_form" method="post" action="register.html" autocomplete="off">
<input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />
<div class="form-group marb20 ">
<label>邮 箱</label>
<input type="text" id="id_email" name="email" value="None" placeholder="请输入您的邮箱地址" />
</div>
<div class="form-group marb8 ">
<label>密 码</label>
<input type="password" id="id_password" name="password" value="None" placeholder="请输入6-20位非中文字符密码" />
</div>
<div class="form-group marb8 captcha1 ">
<label>验 证 码</label>
<img src="/captcha/image/2f3f82e5f7a054bf5caa93b9b0bb6cc308fb7011/" alt="captcha" class="captcha" /> <input id="id_captcha_0" name="captcha_0" type="hidden" value="2f3f82e5f7a054bf5caa93b9b0bb6cc308fb7011" /> <input autocomplete="off" id="id_captcha_1" name="captcha_1" type="text" />
</div>
<div class="error btns" id="jsEmailTips"></div>
<div class="auto-box marb8">
</div>
<input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册并登录" />
<input type='hidden' name='csrfmiddlewaretoken' value='5I2SlleZJOMUX9QbwYLUIAOshdrdpRcy' />
</form>
</div>
<p class="form-p">已有账号？<a href="login.html">[立即登录]</a></p>
</div>
</div>
</div>
</section>
<input id="isLogin" type="hidden" value="False"/>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/validateDialog.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/login.min.js' %}" type="text/javascript"></script>
</body>
</html>
C:\Users\hlg\PycharmProjects\MxOnline\apps\users\views.py
# _*_ encoding:utf-8 _*_
from django.shortcuts import render
from django.contrib.auth import authenticate, login
from django.contrib.auth.backends import ModelBackend #
from django.db.models import Q # 完成并集
from django.views.generic.base import View #
# Create your views here.
from .models import UserProfile
from .forms import LoginForm
class CustomBackend(ModelBackend):
def authenticate(self, username=None, password=None, **kwargs):
# 完成自己的逻辑
try:
# user = UserProfile.objects.get(username=username)
user = UserProfile.objects.get(Q(username=username)|Q(email=username))
if user.check_password(password):
return user
except Exception as e:
return None
# Register+View 说明是一个处理前端请求的View类
class RegisterView(View):
def get(self, request):
return render(request, "register.html", {})
# 基于类
class LoginView(View): # 继承View django的View会自动调用get ,post
def get(self, request):
return render(request, "login.html", {})
def post(self, request):
login_form = LoginForm(request.POST) # 实例化
if login_form.is_valid():
user_name = request.POST.get("username", "")
pass_word = request.POST.get("password", "")
user = authenticate(username=user_name, password=pass_word)
if user is not None:
login(request, user) # 这个是系统提供的 login
return render(request, "index.html") # 登录成功，跳转到首页
else:
return render(request, "login.html", {"msg": "用户名或密码错误"}) # 验证失败
else:
return render(request, "login.html", {"login_form":login_form}) # 登录失败，跳转到登录页面
C:\Users\hlg\PycharmProjects\MxOnline\MxOnline\urls.py
现在进入首页，或者浏览器输入http://127.0.0.1:8000/register/
效果图：
下面看一下图片验证码：
进入 https://github.com/ 搜索 django captcha
点进去：
再点击：documentation online
看到：
点击 Installation 告诉我们怎么安装
第一步：安装
pip install django-simple-captcha==0.4.6
第二步：Add captcha to the INSTALLED_APPS in your settings.py
第三步：Run python manage.py migrate
在运行之前，需要把
url(r'^captcha/', include('captcha.urls')),
然后：
新生成的表：
新建一个工具类：
向用户发送邮件
向用户发送邮件之前，需要定义好邮件的内容：
下面把整个有关代码贴出来：
C:\Users\hlg\PycharmProjects\MxOnline\templates\register.html
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
<title>慕学在线注册</title>
{# <link rel="stylesheet" type="text/css" href="../css/reset.css">#}
{# <link rel="stylesheet" type="text/css" href="../css/login.css">#}
<link rel="stylesheet" type="text/css" href="{% static 'css/reset.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'css/login.css' %}">
</head>
<body>
<div class="loginbox dialogbox">
<h1>账号登录</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="cont">
<form id="jsLoginForm" autocomplete="off">
<div class="box">
<span class="word3">用户名</span>
<input type="text" name="account_l" id="account_l" placeholder="手机号/邮箱" />
</div>
<div class="box">
<span class="word2">密 码</span>
<input type="password" name="password_l" id="password_l" placeholder="请输入您的密码"/>
</div>
<div class="error btns login-form-tips" id="jsLoginTips"></div> <!--登录错误提示-->
<div class="btns">
<span><input type="checkbox" id="jsAutoLogin" /> 自动登录</span>
<span class="forget btn fr">忘记密码</span>
</div>
<div class="button">
<input type="button" value="登录" id="jsLoginBtn" />
</div>
<div class="btns">
<span class="fr">没有账号？<span class="regist btn">立即注册</span></span>
</div>
</form>
</div>
</div>
<div class="dialog" id="jsDialog">
<!--提示弹出框-->
<div class="successbox dialogbox" id="jsSuccessTips">
<h1>成功提交</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="cont">
<h2>您的需求提交成功！</h2>
<p></p>
</div>
</div>
<div class="noactivebox dialogbox" id="jsUnactiveForm" >
<h1>邮件验证提示</h1>
<div class="close jsCloseDialog"><img src="../images/dig_close.png"/></div>
<div class="center">
<img src="../images/send.png"/>
<p>我们已经向您的邮箱<span class="green" id="jsEmailToActive">[email protected]</span>发送了邮件，<br/>为保证您的账号安全，请及时验证邮箱</p>
<p class="a"><a class="btn" id="jsGoToEmail" target="_blank" href="http://mail.qq.com">去邮箱验证</a></p>
<p class="zy_success upmove"></p>
<p style="display: none;" class="sendE2">没收到，您可以查看您的垃圾邮件和被过滤邮件，也可以再次发送验证邮件（<span class="c5c">60s</span>）</p>
<p class="sendE">没收到，您可以查看您的垃圾邮件和被过滤邮件，<br/>也可以<span class="c5c green" id="jsSenEmailAgin" style="cursor: pointer;">再次发送验证邮件</span></p>
</div>
</div>
</div>
<div class="bg" id="dialogBg"></div>
<header>
<div class="c-box fff-box">
<div class="wp header-box">
<p class="fl hd-tips">慕学在线，在线学习平台！</p>
<ul class="fr hd-bar">
<li>服务电话：<span>4001008031</span></li>
<li><a href="login.html">[登录]</a></li>
<li class="active"><a href="register.html">[注册]</a></li>
</ul>
</div>
</div>
</header>
<section>
<div class="c-box bg-box">
<div class="login-box clearfix">
<div class="hd-login clearfix">
<a class="index-logo" href="index.html"></a>
<h1>用户注册</h1>
<a class="index-font" href="index.html">回到首页</a>
</div>
<div class="fl slide">
<div class="imgslide">
<ul class="imgs">
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
<li><a href=""><img width="483" height="472" src="../images/57a801860001c34b12000460.jpg" /></a></li>
</ul>
</div>
<div class="unslider-arrow prev"></div>
<div class="unslider-arrow next"></div>
</div>
<div class="fl form-box">
<div class="tab">
<!--<h2 class="active">手机注册</h2>-->
<h2>邮箱注册</h2>
</div>
<!--<div class="tab-form">-->
<!--<form id="mobile_register_form" autocomplete="off">-->
<!--<input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />-->
<!--<div class="form-group marb20">-->
<!--<label>手 机 号</label>-->
<!--<input id="jsRegMobile" name="account" type="text" placeholder="请输入您的手机号码" />-->
<!--</div>-->
<!--<div class="form-group marb20" id="jsRefreshCode">-->
<!--<label>验 证 码</label>-->
<!--<input autocomplete="off" class="form-control-captcha mobile-register-captcha" id="mobile-register-captcha_1" name="captcha_m_1" placeholder="请输入验证码" type="text" /> <input class="form-control-captcha mobile-register-captcha" id="mobile-register-captcha_0" name="captcha_m_0" placeholder="请输入验证码" type="hidden" value="29953bacf7005e8469388b449d97d00d523c1706" /> <img src="/captcha/image/29953bacf7005e8469388b449d97d00d523c1706/" alt="captcha" class="captcha" />-->
<!--</div>-->
<!--<div class="clearfix">-->
<!--<div class="form-group marb8 verify-code">-->
<!--<label>短信验证码</label>-->
<!--<input id="jsPhoneRegCaptcha" name="mobile_code" type="text" placeholder="输入手机验证码" />-->
<!--</div>-->
<!--<input class="verify-code-btn sendcode" id="jsSendCode" value="发送验证码">-->
<!--</div>-->
<!--<div class="form-group marb8">-->
<!--<label>密 码</label>-->
<!--<input id="jsPhoneRegPwd" name="password_m" type="password" placeholder="请输入6-20位非中文字符密码" />-->
<!--</div>-->
<!--<div class="error btns" id="jsMobileTips"></div>-->
<!--<div class="auto-box marb8">-->
<!--</div>-->
<!--<input class="btn btn-green" id="jsMobileRegBtn" type="button" value="注册并登录" />-->
<!--</form>-->
<!--</div>-->
<div class="tab-form">
<form id="email_register_form" method="post" action="{% url 'register' %}" autocomplete="off">
<input type='hidden' name='csrfmiddlewaretoken' value='gTZljXgnpvxn0fKZ1XkWrM1PrCGSjiCZ' />
<div class="form-group marb20 {% if register_form.errors.email %}errorput{% endif %}">
<label>邮 箱</label>
<input type="text" id="id_email" name="email" value="{{ register_form.email.value }}" value="None" placeholder="请输入您的邮箱地址" />
</div>
<div class="form-group marb8 {% if register_form.errors.password %}errorput{% endif %}">
<label>密 码</label>
<input type="password" id="id_password" name="password" value="{{ register_form.password.value }}" placeholder="请输入6-20位非中文字符密码" />
</div>
<div class="form-group marb8 captcha1 {% if register_form.errors.captcha %}errorput{% endif %}">
<label>验 证 码</label>
{{ register_form.captcha }}
</div>
<div class="error btns" id="jsEmailTips">{% for key,error in register_form.errors.items %}{{ error }}{% endfor %}</div>
<div class="auto-box marb8">
</div>
<input class="btn btn-green" id="jsEmailRegBtn" type="submit" value="注册并登录" />
{% csrf_token %}
</form>
</div>
<p class="form-p">已有账号？<a href="login.html">[立即登录]</a></p>
</div>
</div>
</div>
</section>
<input id="isLogin" type="hidden" value="False"/>
<script src="{% static 'js/jquery.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/unslider.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/validateDialog.min.js' %}" type="text/javascript"></script>
<script src="{% static 'js/login.min.js' %}" type="text/javascript"></script>
</body>
</html>
C:\Users\hlg\PycharmProjects\MxOnline\MxOnline\urls.py
# _*_ encoding:utf-8 _*_
"""MxOnline URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/1.9/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')
Including another URLconf
1. Add an import: from blog import urls as blog_urls
2. Import the include() function: from django.conf.urls import url, include
3. Add a URL to urlpatterns: url(r'^blog/', include(blog_urls))
"""
from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView # 专门处理静态文件
import xadmin
# from users.views import user_login
from users.views import LoginView, RegisterView, ActiveUserView
urlpatterns = [
url(r'^xadmin/', xadmin.site.urls),
url('^$', TemplateView.as_view(template_name="index.html"), name="index"),
# url('^login/$', user_login, name="login")
url('^login/$', LoginView.as_view(), name="login"), # as_view()方法是把类转换成方法使用
url('^register/$', RegisterView.as_view(), name="register"),
url(r'^captcha/', include('captcha.urls')),
url(r'^active/(?P<active_code>.*)/$', ActiveUserView.as_view(), name="user_active")
]
C:\Users\hlg\PycharmProjects\MxOnline\apps\users\views.py
# _*_ encoding:utf-8 _*_
from django.shortcuts import render
from django.contrib.auth import authenticate, login
from django.contrib.auth.backends import ModelBackend #
from django.db.models import Q # 完成并集
from django.views.generic.base import View #
from django.contrib.auth.hashers import make_password
# Create your views here.
from .models import UserProfile, EmailVerifyRecord
from .forms import LoginForm, RegisterForm
from utils.email_send import send_register_email
class CustomBackend(ModelBackend):
def authenticate(self, username=None, password=None, **kwargs):
# 完成自己的逻辑
try:
# user = UserProfile.objects.get(username=username)
user = UserProfile.objects.get(Q(username=username)|Q(email=username))
if user.check_password(password):
return user
except Exception as e:
return None
class ActiveUserView(View):
def get(self, request, active_code):
all_records = EmailVerifyRecord.objects.filter(code=active_code)
if all_records:
for record in all_records:
email = record.email
user = UserProfile.objects.get(email= email)
user.is_active = True
user.save()
return render(request, "login.html")
# Register+View 说明是一个处理前端请求的View类
class RegisterView(View):
def get(self, request):
register_form = RegisterForm()
return render(request, "register.html", {'register_form':register_form})
# 验证逻辑
def post(self, request):
# 实例化用户传来的数据
register_form = RegisterForm(request.POST)
if register_form.is_valid():
user_name = request.POST.get("email", "")
pass_word = request.POST.get("password", "")
user_profile = UserProfile()
user_profile.username = user_name
user_profile.email = user_name
user_profile.is_active = False
user_profile.password = make_password(pass_word)
user_profile.save()
# 发送验证码
send_register_email(user_name, "register")
# 注册成功，返回到登录页面
return render(request, "login.html")
else:
# 注册失败，返回到注册页面
return render(request, "register.html", {"register_form":register_form})
# 基于类
class LoginView(View): # 继承View django的View会自动调用get ,post
def get(self, request):
return render(request, "login.html", {})
def post(self, request):
login_form = LoginForm(request.POST) # 实例化
if login_form.is_valid():
user_name = request.POST.get("username", "")
pass_word = request.POST.get("password", "")
user = authenticate(username=user_name, password=pass_word)
if user is not None:
if user.is_active:
login(request, user) # 这个是系统提供的 login
return render(request, "index.html") # 登录成功，跳转到首页
else:
return render(request, "login.html", {"msg": "用户名或密码错误"}) # 验证失败
else:
return render(request, "login.html", {"msg": "用户名或密码错误"}) # 验证失败
else:
return render(request, "login.html", {"login_form":login_form}) # 登录失败，跳转到登录页面
C:\Users\hlg\PycharmProjects\MxOnline\apps\utils\email_send.py
# _*_ encoding:utf-8 _*_
from random import Random
from django.core.mail import send_mail
from users.models import EmailVerifyRecord
from MxOnline.settings import EMAIL_FROM
def random_str(randomlength=8):
str = ''
chars= 'AaBbCcDdEeFfGgHhIiJiKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz0123456789'
length = len(chars) - 1
random = Random()
for i in range(randomlength):
str+=chars[random.randint(0, length)]
return str
def send_register_email(email, send_type="register"):
email_record = EmailVerifyRecord()
code = random_str(16) # 生成一个16位字符
email_record.code = code
email_record.email = email
email_record.send_type = send_type
email_record.save()
# 向用户发送邮件
email_title = ""
email_body = ""
if send_type == "register":
email_title = "慕学在线 激活链接"
email_body = "点击 ：http://127.0.0.1:8000/active/{0}".format(code)
# 在settings.py中配置好之后，就可以发送邮件了
send_status = send_mail(email_title, email_body, EMAIL_FROM, [email])
if send_status:
pass
注意下图的邮件配置
