django 登入，注册，密码重置

先创建Django项目：

配置settings.py和MySQL我不说了，自己网上配置

​

​

xiangmu.js文件

我的MySQL：

​

链接MySQL，映射数据库我就不说了

​

我是把MySQL的表给映射过来的【inspectdb  +   表名】

​

​

复制到models.py文件里，然后映射

​

我的models.py文件：

from django.db import models

# Create your models here.
class Users1(models.Model):
    """
        用户表: 昵称，邮箱，密码，个人简介，头像地址
    """
    # nick_name = models.CharField(max_length=20)
    # email = models.CharField(max_length=50)
    # password = models.CharField(max_length=100)
    # introduce = models.CharField(max_length=255,blank=True, null=True)
    # head =  models.ImageField(upload_to='', default='http://img3.duitang.com/uploads/item/201505/22/20150522205616_KeX3C.jpeg')

class Users(models.Model):
    nick_name = models.CharField(max_length=20)
    email = models.CharField(max_length=50)
    password = models.CharField(max_length=100)

    class Meta:
        managed = False
        db_table = 'users'

我的views.py文件：

# Create your views here.

from django.core.mail import send_mail
from django.shortcuts import render
import random
from test1.models import Users
from django.http import HttpResponse
from django.db.models import Q

# 注册页面
def zhuce01(request):
    return render(request,'zhuce.html')

# 注册功能
def zhuce02(request):
    # 从浏览器获取数据
    uesr1 = request.POST.get('yhm')#用户名
    yx1 = request.POST.get('yx')#邮箱
    pw1 = request.POST.get('mm')#密码
    wyzm = request.POST.get('yzm')#验证码
    # 从浏览器获取缓存数据
    yzm = request.session['message']

    # 判断用户名是否重复
    if(Users.objects.filter(nick_name=uesr1)):
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("用户名重复，注册失败！")

    # 判断邮箱是否重复
    elif(Users.objects.filter(email=yx1)):
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("邮箱重复，注册失败！")

    # 判断验证码是否和邮箱验证码一样
    elif (wyzm!=yzm):
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("验证码错误或者过期")
    else:
        # 判断验证码是否一样
        if(wyzm==yzm):
            del request.session['message'] #删除浏览器缓存
            request.session['message'] = '' #设置浏览器缓存message 为空
            # 储存到数据库中
            u = Users(nick_name=uesr1,email=yx1,password=pw1)
            u.save()
            return HttpResponse("注册成功！")
        else:
            return HttpResponse("注册失败！")

# 登入页面
def dengru01(request):
    return render(request,'dengru.html')

# 登入功能
def dengru02(request):
    # 从浏览器获取数据
    duesr1 = request.POST.get('dyhm')#用户名
    dpw1 = request.POST.get('dmm')#密码
    #异常捕捉
    try:
        # 判断用户名或者邮箱和密码是否和数据库匹配
        Users.objects.get(Q(Q(nick_name=duesr1)|Q(email=duesr1))&Q(password=dpw1))
    except:
        return HttpResponse("用户名或者密码错误！")
    return HttpResponse('成功！')

#密码重置页面
def mimachongzhi01(request):
    return render(request,'chongzhimima.html')

#密码重置功能
def mimachongzhi02(request):
    # 从浏览器中获取数据
    uesr1 = request.POST.get('zyhm')#用户名
    pw1 = request.POST.get('zxmm1')#密码1
    pw2 = request.POST.get('zxmm2')#密码2
    zyx = request.POST.get('zyx')#验证码
    # 从浏览器获取缓存数据
    zyx1 = request.session['message']

    # 判断密码，验证码是否一致
    if((pw1 == pw2)&(zyx == zyx1)):
        # 判断邮箱是否一致
        u = Users.objects.get(email=uesr1)
        # 更改密码
        u.password = pw1
        # 放到数据库中
        u.save()
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("重置成功！")
    # 判断密码和验证码是否一致
    elif((pw1 == pw2)&(zyx != zyx1)):
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("验证码错误或者过期！")
    # 判断密码和验证码是否一致
    elif ((pw1 != pw2) & (zyx == zyx1)):
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("密码不一致！")
    else:
        del request.session['message']#删除浏览器缓存
        request.session['message'] = ''#设置浏览器缓存message 为空
        return HttpResponse("密码不一致或者验证码错误！")


def dianjiyianzhengma(request):
    # 随机数
    number = str(random.randint(100000, 999999))
    # 将message放到浏览器中
    request.session['message'] = number
    # 邮箱验证码
    # send_mail("重置密码", "重置密码的验证码："+number, "1542776628@qq.com", ["1542776628@qq.com"], fail_silently=True)
    return HttpResponse(number)

我的urls.py文件：

不是xiangmu里的urls.py文件，而是untitled2中的urls.py文件

"""untitled2 URL Configuration
The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.1/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from xiangmu.views import zhuce01,zhuce02,dengru01,dengru02,mimachongzhi01,mimachongzhi02,dianjiyianzhengma

from System import urls

urlpatterns = [

    path('', dengru01),
    path('dengru02/', dengru02),

    path('zhuce01/', zhuce01),
    path('zhuce02/', zhuce02),

    path('mimachongzhi01/', mimachongzhi01),
    path('mimachongzhi02/', mimachongzhi02),

    path('dianjiyianzhengma/', dianjiyianzhengma),

]

我的HTML文件：

我的HTML文件引用了bootstrap，angular的网站，如下：

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

1.注册页面

(1).script的判断功能或者条件，自己可以去写

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>注册系统</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
　　 <script src="/static/js/xiangmu.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div style=" 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px">
        <div style="text-align: center">
            <h2><a href="/">登入</a>----<a href="#">注册</a></h2>
        </div>
        <div>
            <form class="form-horizontal" role="form"  method="get" name="myForm">
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-8">
                        <input ng-model="username" name="username" type="text" class="form-control" id="firstname" placeholder="用户名" required>
                    </div>
                    <div class="col-sm-2" style="top: 9px">
                        <span ng-show="myForm.username.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span>
                        <span ng-show="myForm.username.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span>
                    </div>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-envelope" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-8">
                        <input ng-model="Email" name="Email" type="email" class="form-control" id="firstname" placeholder="邮箱" required>
                    </div>
                    <div class="col-sm-2" style="top: 9px">
                        <span ng-show="myForm.Email.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span>
                        <span ng-show="myForm.Email.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span>
                    </div>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-8">
                        <input ng-model="password" onblur="tname()" name="password" type="text" class="form-control" id="passwordlastname" placeholder="密码" required>
                    </div>
                    <div class="col-sm-2" style="top: 9px">
                        <span ng-show="myForm.password.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span>
                        <span ng-show="myForm.password.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span>
                    </div>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-inbox" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px;"></span></p>
                    <div class="col-sm-5">
                        <input ng-model="yianzhengma"  type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-4">
                        <input ng-click="dianjiyzm()" id="btn" type="button" style=" 100%" class="btn-block form-control btn-primary obtain generate_code" value=" 获取验证码" onclick="settime(this)">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <div class="col-sm-10">
                        <input ng-click="zhuce01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="注册">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        //倒计时
        var countdown=3;
        function settime(val) {
            if (countdown == 0) {
                val.removeAttribute("disabled");
                val.value="获取验证码";
                countdown = 3;
                return false;
            } else {
                val.setAttribute("disabled", true);
                val.value="重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(val);
            },1000);
        }

        function tname(){
            var name=document.getElementById("passwordlastname").value;
            if(name.length<6)
                alert("密码要大于6个字符")
        }
    </script>

</body>
</html>

2.登入页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登入系统</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <script src="/static/js/xiangmu.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div style=" 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px">
        <div style="text-align: center">
            <h2><a href="/">登入</a>----<a href="zhuce01">注册</a></h2>
        </div>
        <div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-9">
                        <input ng-model="usernameemail" type="text" class="form-control" id="firstname" placeholder="用户名或者邮箱">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-9">
                        <input ng-model="dengrupassword" type="password" class="form-control" id="lastname" placeholder="密码">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <div class="col-sm-10">
                        <input ng-click="dengru01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="登入">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <h5 style="margin-left: 60%"><a href="mimachongzhi01">忘记密码，重置密码</a></h5></p>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

3.密码重置页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置密码</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>

    <script src="/static/js/xiangmu.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    <div style=" 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px">
        <div style="text-align: center">
            <h2>重置密码</h2>
        </div>
        <div>
            <form class="form-horizontal" role="form"  method="get">
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-9">
                        <input ng-model="zusername" type="text" class="form-control" id="firstname" placeholder="请输入邮箱">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-inbox" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px;"></span></p>
                    <div class="col-sm-5">
                        <input ng-model="yianzhengma"  type="text" class="form-control" id="lastname" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-4">
                        <input ng-click="dianjiyzm()" id="btn" type="button" style=" 100%" class="btn-block form-control btn-primary obtain generate_code" value=" 获取验证码" onclick="settime(this)">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-9">
                        <input ng-model="password1" type="text" class="form-control" id="lastname" placeholder="请输入新密码">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p>
                    <div class="col-sm-9">
                        <input ng-model="password2" type="text" class="form-control" id="lastname" placeholder="请再输入一次新密码">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <p class="col-sm-1"></p>
                    <div class="col-sm-10">
                        <input ng-click="mimachongzhi01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="重置">
                    </div>
                    <p class="col-sm-1"></p>
                </div>
                <div class="form-group">
                    <h5 style="margin-left: 70%"><a href="/">返回登入注册</a></h5>
                </div>
            </form>
        </div>
    </div>

    <script type="text/javascript">
        //倒计时
        var countdown=3;
        function settime(val) {
            if (countdown == 0) {
                val.removeAttribute("disabled");
                val.value="获取验证码";
                countdown = 3;
                return false;
            } else {
                val.setAttribute("disabled", true);
                val.value="重新发送(" + countdown + ")";
                countdown--;
            }
            setTimeout(function() {
                settime(val);
            },1000);
        }
    </script>

</body>
</html>

我的js文件：

可以把HTML的js的功能写在这里

var app = angular.module('myApp',[])

app.controller('myCtrl',function ($scope) {

    $scope.dengru01 = function(){
        $.post('/dengru02/',{dyhm:$scope.usernameemail,dmm:$scope.dengrupassword},function (dengruxianshi) {
            alert(dengruxianshi)
        })
    }


    $scope.zhuce01 = function () {
        $.post('/zhuce02/',{yhm:$scope.username,yx:$scope.Email,mm:$scope.password,yzm:$scope.yianzhengma},function (zhucexianshi) {
            alert(zhucexianshi)
        })
    }


    $scope.mimachongzhi01 = function () {
        $.post('/mimachongzhi02/',{zyhm:$scope.zusername,zyx:$scope.yianzhengma,zxmm1:$scope.password1,zxmm2:$scope.password2},function (chongzhixianshi) {
            alert(chongzhixianshi)
        })
    }


    $scope.dianjiyzm = function () {
        $.post("/dianjiyianzhengma/",{czyzm:$scope.yianzhengma},function (czyzm1) {
            alert(czyzm1)
        })
    }

})