django登录注册案例（上） - 详解

创建项目并完成初始配置

settings.py中，配置templates和static

TEMPLATES = [{'BACKEND': 'django.template.backends.django.DjangoTemplates','DIRS': [os.path.join(BASE_DIR,'templates')],'APP_DIRS': True,'OPTIONS': {'context_processors': ['django.template.context_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',],},},
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

在models.py中

from django.db import models
from datetime import datetime
# Create your models here.
class User(models.Model):
username = models.CharField(max_length=16) #用户名
password = models.CharField(max_length=255) #密码
is_delete = models.BooleanField(default=False) #逻辑删除字段
create_time = models.DateTimeField(auto_now=datetime.now()) #注册时间

然后终端执行迁移命令

 python manage.py makemigrations
python manage.py migrate

navicat连接sqlite数据库

说明创建成功

然后在templates下面创建一个user文件夹，然后创建一个register.html

注册
{% csrf_token %}
用户名：
密码：
再次输入密码：

views.py且对存入数据库中的密码进行哈希加密

from django.shortcuts import render
from django.http import JsonResponse
import re
import hashlib
from .models import User
# Create your views here.
def index(request):
return render(request,'index.html')
def register(request):
if request.method == "GET":
return render(request,'user/register.html')
elif request.method == "POST":
#注册
username = request.POST.get("username")
pwd = request.POST.get("pwd")
cpwd = request.POST.get("cpwd")
#用户名不能重复
is_exi = User.objects.filter(username=username).first()
if is_exi:
return JsonResponse({'code': -1, 'msg': "名字已存在，请另外取一个靓号！！"})
if not all([username,pwd,cpwd]):
return JsonResponse({'code': -1, 'msg': "有必填项未填写！！"})
if pwd != cpwd:
return JsonResponse({'code': -1, 'msg': "两次密码输入不一致！！"})
if username.isdigit():
return JsonResponse({'code':-1,'msg':"账号不能全为数字！！"})
if not (6<=len(username)<=16):
return JsonResponse({'code':-1,'msg':"账号为6-16位字符组成"})
if not re.match('[0-9a-zA-Z]{8,16}',pwd):
return JsonResponse({'code': -1, 'msg': "密码需要8-16位数字或者字母组成"})
#存入数据
u = User()
u.username = username
#todo: 对密码进行hash
s = hashlib.sha1()
s.update(pwd.encode("utf-8"))
sha1_pwd = s.hexdigest()
u.password = sha1_pwd
u.save()
return JsonResponse({'code': 200, 'msg': "注册成功"})

配置路由

url(r'^register/',register),

运行

查看数据库

 但是我们发现，使用submit点击提交会mor刷新页面，所以在这里我们用return false就会阻止默认行为，并触发前端Ajax请求。

要使用Ajax请求，首先得导入

所以修改register.py

注册
{% csrf_token %}
用户名：
密码：
再次输入密码：
{#     #}{# submit 默认会刷新页面，return false就会阻止默认行为 #}
$(function () {
// 三个全局变量，表示是否验证通过
is_erro_username = false
is_erro_pwd = false
is_erro_cpwd = false
$("input[name='username']").blur(function () {
check_name()
})
$("input[name='pwd']").blur(function () { // blur表示失去角点的时候触发
check_pwd()
})
$("input[name='cpwd']").blur(function () { // blur表示失去角点的时候触发
check_cpwd()
})
function check_name() {
// blur表示失去角点的时候触发
user = $("input[name='username']").val()
{#console.log('用户名失去焦点', user)#}
if (user == "") { // 如果用户名为空
$("input[name='username']").next().html('用户名不能为空').show()
is_erro_username = false // 表示验证不通过
} else if (user.length  16) {
$("input[name='username']").next().html('用户名为6-16位').show()
is_erro_username = false // 表示验证不通过
} else { // 用户名不为空
reg = /[0-9a-zA-Z]{6,16}/;
if (reg.test(user)) { //正则能匹配，账号正确,隐藏提示
$("input[name='username']").next().hide()
is_erro_username = true // 表示验证通过
} else { // 账号错误
$("input[name='username']").next().html('账号为6-16位字符组成').show()
is_erro_username = false // 表示验证不通过
}
}
}
function check_pwd() {
user = $("input[name='pwd']").val()
if (user == "") { // 如果密码为空
$("input[name='pwd']").next().html('密码不能为空').show()
is_erro_pwd = false // 表示验证不通过
} else if (user.length  16) {
$("input[name='pwd']").next().html('密码为8-16位').show()
is_erro_pwd = false // 表示验证不通过
} else { // 密码不为空
reg = /[0-9a-zA-Z]{8,16}/;
if (reg.test(user)) { //正则能匹配，账号正确,隐藏提示
$("input[name='pwd']").next().hide()
is_erro_pwd = true // 表示验证通过
} else { // 账号错误
$("input[name='pwd']").next().html('密码为8-16位字符组成').show()
is_erro_pwd = false // 表示验证不通过
}
}
}
function check_cpwd() {
{#console.log('确认密码失去焦点')#}
pwd = $("input[name='pwd']").val()
cpwd = $("input[name='cpwd']").val()
if (pwd !== cpwd) {
$("input[name='cpwd']").next().html('两次输入密码不一致').show()
is_erro_cpwd = false
} else {
$("input[name='cpwd']").next().hide()
is_erro_cpwd = true
}
}
$(':submit').click(function () {
// console.log('点击了注册按钮')
// 再次确认一下三个参数验证通过
check_name();
check_pwd();
check_cpwd();
console.log(is_erro_username, is_erro_cpwd, is_erro_pwd)
if (is_erro_username && is_erro_cpwd && is_erro_pwd) { //都验证通过
var username = $("input[name='username']").val()
var pwd = $("input[name='pwd']").val()
var cpwd = $("input[name='cpwd']").val()
var csrf = $("input[name='csrfmiddlewaretoken']").val();
// 发送ajax请求
$.ajax({
url: '/register/',
data: {'username': username, 'pwd': pwd, 'cpwd': cpwd, 'csrfmiddlewaretoken': csrf},
type: 'post',
success: function (res) {
console.log(res)
if (res.code == 200){
$(this).next().hide()
//注册成功,跳转到主页
window.location.href = '/'
}else{
// 注册失败
$("#yangtuo").html(res.msg).show()
}
}
})
} else {  // 至少有一个验证不通过
console.log('至少有一个验证不通过')
return false
}
})
})

并创建一个主页index.html

主页
欢迎您~
欢迎来到平平的课堂！
注册
登录

刷新

注册成功则跳转首页

输入：

跳转：