先创建Django项目：
配置settings.py和MySQL我不说了，自己网上配置
xiangmu.js文件
我的MySQL：
链接MySQL，映射数据库我就不说了
我是把MySQL的表给映射过来的【inspectdb + 表名】
复制到models.py文件里，然后映射
我的models.py文件：
1from django.db import models 2 3# Create your models here. 4class Users1(models.Model): 5 """ 6 用户表: 昵称，邮箱，密码，个人简介，头像地址 7 """ 8 # nick_name = models.CharField(max_length=20) 9 # email = models.CharField(max_length=50) 10 # password = models.CharField(max_length=100) 11 # introduce = models.CharField(max_length=255,blank=True, null=True) 12 # head = models.ImageField(upload_to='', default='http://img3.duitang.com/uploads/item/201505/22/20150522205616_KeX3C.jpeg') 13 14class Users(models.Model): 15 nick_name = models.CharField(max_length=20) 16 email = models.CharField(max_length=50) 17 password = models.CharField(max_length=100) 18 19 class Meta: 20 managed = False 21 db_table = 'users'
我的views.py文件：
1# Create your views here. 2 3from django.core.mail import send_mail 4from django.shortcuts import render 5import random 6from test1.models import Users 7from django.http import HttpResponse 8from django.db.models import Q 9 10# 注册页面 11def zhuce01(request): 12 return render(request,'zhuce.html') 13 14# 注册功能 15def zhuce02(request): 16 # 从浏览器获取数据 17 uesr1 = request.POST.get('yhm')#用户名 18 yx1 = request.POST.get('yx')#邮箱 19 pw1 = request.POST.get('mm')#密码 20 wyzm = request.POST.get('yzm')#验证码 21 # 从浏览器获取缓存数据 22 yzm = request.session['message'] 23 24 # 判断用户名是否重复 25 if(Users.objects.filter(nick_name=uesr1)): 26 del request.session['message']#删除浏览器缓存 27 request.session['message'] = ''#设置浏览器缓存message 为空 28 return HttpResponse("用户名重复，注册失败！") 29 30 # 判断邮箱是否重复 31 elif(Users.objects.filter(email=yx1)): 32 del request.session['message']#删除浏览器缓存 33 request.session['message'] = ''#设置浏览器缓存message 为空 34 return HttpResponse("邮箱重复，注册失败！") 35 36 # 判断验证码是否和邮箱验证码一样 37 elif (wyzm!=yzm): 38 del request.session['message']#删除浏览器缓存 39 request.session['message'] = ''#设置浏览器缓存message 为空 40 return HttpResponse("验证码错误或者过期") 41 else: 42 # 判断验证码是否一样 43 if(wyzm==yzm): 44 del request.session['message'] #删除浏览器缓存 45 request.session['message'] = '' #设置浏览器缓存message 为空 46 # 储存到数据库中 47 u = Users(nick_name=uesr1,email=yx1,password=pw1) 48 u.save() 49 return HttpResponse("注册成功！") 50 else: 51 return HttpResponse("注册失败！") 52 53# 登入页面 54def dengru01(request): 55 return render(request,'dengru.html') 56 57# 登入功能 58def dengru02(request): 59 # 从浏览器获取数据 60 duesr1 = request.POST.get('dyhm')#用户名 61 dpw1 = request.POST.get('dmm')#密码 62 #异常捕捉 63 try: 64 # 判断用户名或者邮箱和密码是否和数据库匹配 65 Users.objects.get(Q(Q(nick_name=duesr1)|Q(email=duesr1))&Q(password=dpw1)) 66 except: 67 return HttpResponse("用户名或者密码错误！") 68 return HttpResponse('成功！') 69 70#密码重置页面 71def mimachongzhi01(request): 72 return render(request,'chongzhimima.html') 73 74#密码重置功能 75def mimachongzhi02(request): 76 # 从浏览器中获取数据 77 uesr1 = request.POST.get('zyhm')#用户名 78 pw1 = request.POST.get('zxmm1')#密码1 79 pw2 = request.POST.get('zxmm2')#密码2 80 zyx = request.POST.get('zyx')#验证码 81 # 从浏览器获取缓存数据 82 zyx1 = request.session['message'] 83 84 # 判断密码，验证码是否一致 85 if((pw1 == pw2)&(zyx == zyx1)): 86 # 判断邮箱是否一致 87 u = Users.objects.get(email=uesr1) 88 # 更改密码 89 u.password = pw1 90 # 放到数据库中 91 u.save() 92 del request.session['message']#删除浏览器缓存 93 request.session['message'] = ''#设置浏览器缓存message 为空 94 return HttpResponse("重置成功！") 95 # 判断密码和验证码是否一致 96 elif((pw1 == pw2)&(zyx != zyx1)): 97 del request.session['message']#删除浏览器缓存 98 request.session['message'] = ''#设置浏览器缓存message 为空 99 return HttpResponse("验证码错误或者过期！") 100 # 判断密码和验证码是否一致 101 elif ((pw1 != pw2) & (zyx == zyx1)): 102 del request.session['message']#删除浏览器缓存 103 request.session['message'] = ''#设置浏览器缓存message 为空 104 return HttpResponse("密码不一致！") 105 else: 106 del request.session['message']#删除浏览器缓存 107 request.session['message'] = ''#设置浏览器缓存message 为空 108 return HttpResponse("密码不一致或者验证码错误！") 109 110 111def dianjiyianzhengma(request): 112 # 随机数 113 number = str(random.randint(100000, 999999)) 114 # 将message放到浏览器中 115 request.session['message'] = number 116 # 邮箱验证码 117 # send_mail("重置密码", "重置密码的验证码："+number, "1542776628@qq.com", ["1542776628@qq.com"], fail_silently=True) 118 return HttpResponse(number)
我的urls.py文件：
不是xiangmu里的urls.py文件，而是untitled2中的urls.py文件
1"""untitled2 URL Configuration 2The `urlpatterns` list routes URLs to views. For more information please see: 3 https://docs.djangoproject.com/en/2.1/topics/http/urls/ 4Examples: 5Function views 6 1. Add an import: from my_app import views 7 2. Add a URL to urlpatterns: path('', views.home, name='home') 8Class-based views 9 1. Add an import: from other_app.views import Home 10 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 11Including another URLconf 12 1. Import the include() function: from django.urls import include, path 13 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 14""" 15from django.contrib import admin 16from django.urls import path 17from xiangmu.views import zhuce01,zhuce02,dengru01,dengru02,mimachongzhi01,mimachongzhi02,dianjiyianzhengma 18 19from System import urls 20 21urlpatterns = [ 22 23 path('', dengru01), 24 path('dengru02/', dengru02), 25 26 path('zhuce01/', zhuce01), 27 path('zhuce02/', zhuce02), 28 29 path('mimachongzhi01/', mimachongzhi01), 30 path('mimachongzhi02/', mimachongzhi02), 31 32 path('dianjiyianzhengma/', dianjiyianzhengma), 33 34 35]
我的HTML文件：
我的HTML文件引用了bootstrap，angular的网站，如下：
1<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 2<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 3<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 4<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
1.注册页面
(1).script的判断功能或者条件，自己可以去写
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>注册系统</title> 6 7 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 11 12 <script src="/static/js/xiangmu.js"></script> 13 14</head> 15<body ng-app="myApp" ng-controller="myCtrl"> 16 <div style="width: 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px"> 17 <div style="text-align: center"> 18 <h2><a href="/">登入</a>----<a href="#">注册</a></h2> 19 </div> 20 <div> 21 <form class="form-horizontal" role="form" method="get" name="myForm"> 22 <div class="form-group"> 23 <p class="col-sm-1"></p> 24 <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 25 <div class="col-sm-8"> 26 <input ng-model="username" name="username" type="text" class="form-control" id="firstname" placeholder="用户名" required> 27 </div> 28 <div class="col-sm-2" style="top: 9px"> 29 <span ng-show="myForm.username.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span> 30 <span ng-show="myForm.username.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span> 31 </div> 32 </div> 33 <div class="form-group"> 34 <p class="col-sm-1"></p> 35 <p class="col-sm-1"><span class="glyphicon glyphicon-envelope" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 36 <div class="col-sm-8"> 37 <input ng-model="Email" name="Email" type="email" class="form-control" id="firstname" placeholder="邮箱" required> 38 </div> 39 <div class="col-sm-2" style="top: 9px"> 40 <span ng-show="myForm.Email.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span> 41 <span ng-show="myForm.Email.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span> 42 </div> 43 </div> 44 <div class="form-group"> 45 <p class="col-sm-1"></p> 46 <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 47 <div class="col-sm-8"> 48 <input ng-model="password" onblur="tname()" name="password" type="text" class="form-control" id="passwordlastname" placeholder="密码" required> 49 </div> 50 <div class="col-sm-2" style="top: 9px"> 51 <span ng-show="myForm.password.$invalid"><span class="glyphicon glyphicon-remove" style="color: rgb(255, 1, 0);"></span></span> 52 <span ng-show="myForm.password.$valid"><span class="glyphicon glyphicon-ok" style="color: rgb(0, 0, 255);"></span></span> 53 </div> 54 </div> 55 <div class="form-group"> 56 <p class="col-sm-1"></p> 57 <p class="col-sm-1"><span class="glyphicon glyphicon-inbox" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px;"></span></p> 58 <div class="col-sm-5"> 59 <input ng-model="yianzhengma" type="text" class="form-control" id="lastname" placeholder="请输入验证码"> 60 </div> 61 <div class="col-sm-4"> 62 <input ng-click="dianjiyzm()" id="btn" type="button" style="width: 100%" class="btn-block form-control btn-primary obtain generate_code" value=" 获取验证码" onclick="settime(this)"> 63 </div> 64 <p class="col-sm-1"></p> 65 </div> 66 <div class="form-group"> 67 <p class="col-sm-1"></p> 68 <div class="col-sm-10"> 69 <input ng-click="zhuce01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="注册"> 70 </div> 71 <p class="col-sm-1"></p> 72 </div> 73 </form> 74 </div> 75 </div> 76 77 <script type="text/javascript"> 78 //倒计时 79 var countdown=3; 80 function settime(val) { 81 if (countdown == 0) { 82 val.removeAttribute("disabled"); 83 val.value="获取验证码"; 84 countdown = 3; 85 return false; 86 } else { 87 val.setAttribute("disabled", true); 88 val.value="重新发送(" + countdown + ")"; 89 countdown--; 90 } 91 setTimeout(function() { 92 settime(val); 93 },1000); 94 } 95 96 function tname(){ 97 var name=document.getElementById("passwordlastname").value; 98 if(name.length<6) 99 alert("密码要大于6个字符") 100 } 101 </script> 102 103</body> 104</html>
2.登入页面
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>登入系统</title> 6 7 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 11 12 <script src="/static/js/xiangmu.js"></script> 13 14</head> 15<body ng-app="myApp" ng-controller="myCtrl"> 16 <div style="width: 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px"> 17 <div style="text-align: center"> 18 <h2><a href="/">登入</a>----<a href="zhuce01">注册</a></h2> 19 </div> 20 <div> 21 <form class="form-horizontal" role="form"> 22 <div class="form-group"> 23 <p class="col-sm-1"></p> 24 <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 25 <div class="col-sm-9"> 26 <input ng-model="usernameemail" type="text" class="form-control" id="firstname" placeholder="用户名或者邮箱"> 27 </div> 28 <p class="col-sm-1"></p> 29 </div> 30 <div class="form-group"> 31 <p class="col-sm-1"></p> 32 <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 33 <div class="col-sm-9"> 34 <input ng-model="dengrupassword" type="password" class="form-control" id="lastname" placeholder="密码"> 35 </div> 36 <p class="col-sm-1"></p> 37 </div> 38 <div class="form-group"> 39 <p class="col-sm-1"></p> 40 <div class="col-sm-10"> 41 <input ng-click="dengru01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="登入"> 42 </div> 43 <p class="col-sm-1"></p> 44 </div> 45 <div class="form-group"> 46 <h5 style="margin-left: 60%"><a href="mimachongzhi01">忘记密码，重置密码</a></h5></p> 47 </div> 48 </form> 49 </div> 50 </div> 51</body> 52</html>
3.密码重置页面
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>重置密码</title> 6 7 <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> 8 <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> 9 <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 10 <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script> 11 12 <script src="/static/js/xiangmu.js"></script> 13 14</head> 15<body ng-app="myApp" ng-controller="myCtrl"> 16 <div style="width: 25%;height: 100%;padding: 25px;margin:auto;border: 5px solid black;margin-top: 130px"> 17 <div style="text-align: center"> 18 <h2>重置密码</h2> 19 </div> 20 <div> 21 <form class="form-horizontal" role="form" method="get"> 22 <div class="form-group"> 23 <p class="col-sm-1"></p> 24 <p class="col-sm-1"><span class="glyphicon glyphicon-user" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 25 <div class="col-sm-9"> 26 <input ng-model="zusername" type="text" class="form-control" id="firstname" placeholder="请输入邮箱"> 27 </div> 28 <p class="col-sm-1"></p> 29 </div> 30 <div class="form-group"> 31 <p class="col-sm-1"></p> 32 <p class="col-sm-1"><span class="glyphicon glyphicon-inbox" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px;"></span></p> 33 <div class="col-sm-5"> 34 <input ng-model="yianzhengma" type="text" class="form-control" id="lastname" placeholder="请输入验证码"> 35 </div> 36 <div class="col-sm-4"> 37 <input ng-click="dianjiyzm()" id="btn" type="button" style="width: 100%" class="btn-block form-control btn-primary obtain generate_code" value=" 获取验证码" onclick="settime(this)"> 38 </div> 39 <p class="col-sm-1"></p> 40 </div> 41 <div class="form-group"> 42 <p class="col-sm-1"></p> 43 <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 44 <div class="col-sm-9"> 45 <input ng-model="password1" type="text" class="form-control" id="lastname" placeholder="请输入新密码"> 46 </div> 47 <p class="col-sm-1"></p> 48 </div> 49 <div class="form-group"> 50 <p class="col-sm-1"></p> 51 <p class="col-sm-1"><span class="glyphicon glyphicon-lock" style="color: rgb(0, 0, 0); font-size: 20px;top: 7px"></span></p> 52 <div class="col-sm-9"> 53 <input ng-model="password2" type="text" class="form-control" id="lastname" placeholder="请再输入一次新密码"> 54 </div> 55 <p class="col-sm-1"></p> 56 </div> 57 <div class="form-group"> 58 <p class="col-sm-1"></p> 59 <div class="col-sm-10"> 60 <input ng-click="mimachongzhi01()" width="100%" class="btn-block btn btn-primary form-control" type="button" value="重置"> 61 </div> 62 <p class="col-sm-1"></p> 63 </div> 64 <div class="form-group"> 65 <h5 style="margin-left: 70%"><a href="/">返回登入注册</a></h5> 66 </div> 67 </form> 68 </div> 69 </div> 70 71 <script type="text/javascript"> 72 //倒计时 73 var countdown=3; 74 function settime(val) { 75 if (countdown == 0) { 76 val.removeAttribute("disabled"); 77 val.value="获取验证码"; 78 countdown = 3; 79 return false; 80 } else { 81 val.setAttribute("disabled", true); 82 val.value="重新发送(" + countdown + ")"; 83 countdown--; 84 } 85 setTimeout(function() { 86 settime(val); 87 },1000); 88 } 89 </script> 90 91</body> 92</html>
我的js文件：
可以把HTML的js的功能写在这里
1var app = angular.module('myApp',[]) 2 3app.controller('myCtrl',function ($scope) { 4 5 $scope.dengru01 = function(){ 6 $.post('/dengru02/',{dyhm:$scope.usernameemail,dmm:$scope.dengrupassword},function (dengruxianshi) { 7 alert(dengruxianshi) 8 }) 9 } 10 11 12 $scope.zhuce01 = function () { 13 $.post('/zhuce02/',{yhm:$scope.username,yx:$scope.Email,mm:$scope.password,yzm:$scope.yianzhengma},function (zhucexianshi) { 14 alert(zhucexianshi) 15 }) 16 } 17 18 19 $scope.mimachongzhi01 = function () { 20 $.post('/mimachongzhi02/',{zyhm:$scope.zusername,zyx:$scope.yianzhengma,zxmm1:$scope.password1,zxmm2:$scope.password2},function (chongzhixianshi) { 21 alert(chongzhixianshi) 22 }) 23 } 24 25 26 $scope.dianjiyzm = function () { 27 $.post("/dianjiyianzhengma/",{czyzm:$scope.yianzhengma},function (czyzm1) { 28 alert(czyzm1) 29 }) 30 } 31 32})