url配置
from django.conf.urls import url,include
from django.contrib import admin
from blogCMS import settings
from django.views.static import serve
from blog import views
from blog import urls
urlpatterns = [
url(r'^login/', views.login),
url(r'^log_out/', views.log_out),
url(r'^reg/', views.reg),
]
登录相关
视图
def login(request):
if request.method=="POST":
print("====可以走过来")
username = request.POST.get("username")
password = request.POST.get("password")
validCode = request.POST.get("valid_code")
login_response = {"is_login": False, "error_msg": None}
if validCode.upper()==request.session.get("keepValidCode").upper(): #验证码不区分大小写
user = auth.authenticate(username=username,password=password)
if user:
login_response["is_login"]=True #验证通过
auth.login(request,user)
# request.session["username"] = username
else:
login_response["error_msg"]="用户名或密码错误" #验证不通过
else:
login_response["error_msg"]="验证码输入有误" #验证码错误
import json
return HttpResponse(json.dumps(login_response))
else:
# print(request.session["keepValidCode"])
return render(request,"login.html")
前端HTML
{#<!DOCTYPE html>#}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="/static/jquery/jquery-3.2.1.min.js"></script>
<script src="/static/jquery/jquery.session.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- 为使用方便，直接使用jquery.js库，如您代码中不需要，可以去掉 -->
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<!-- 引入封装了failback的接口--initGeetest -->
<script src="http://static.geetest.com/static/tools/gt.js"></script>
</head>
<style></style>
<body>
<div class="container" style="margin-top: 100px">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>欢迎登录</h2>
</div>
<div class="panel-body">
<form class="form-signin" novalidate>
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" class="form-control" placeholder="请输入用户名" required
autofocus>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" class="form-control" placeholder="请输入密码" required
autofocus>
</div>
<div class="row valiCode">
<div class="col-md-5">
<div class="form-group">
<label for="validCode">验证码</label>
<input type="text" class="form-control validCode_text" id="validCode"
placeholder="请输入右侧验证码">
</div>
</div>
<div class="col-md-7 ">
{# <a href="">#}
{# <img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" >点击更换验证码#}
{# </a>#}
<img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" title="点击更换验证码">
<div id="popup-captcha"></div>
<input type="button" class="ret" style="background: none;border: none" id="fresh" value="看不清，换一张">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住密码
</label>
<a href="">忘记密码</a>
</div>
</form>
<div class="col-md-4">
<button class="btn btn-info btn-block" id="subBtn">登录</button>
<span class="error"></span>
</div>
<div class="col-md-4">
<button class="btn btn-success btn-block" id="register">注册</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/static/jquery/jquery.cookie.js"></script>
<script src="/static/blog/login.js"></script>
<script>
var handlerPopup = function (captchaObj) {
// 成功的回调
captchaObj.onSuccess(function () {
var validate = captchaObj.getValidate();
$.ajax({
url: "/pc-geetest/ajax_validate", // 进行二次验证
type: "post",
dataType: "json",
data: {
username: $('#username').val(),
password: $('#password').val(),
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
geetest_challenge: validate.geetest_challenge,
geetest_validate: validate.geetest_validate,
geetest_seccode: validate.geetest_seccode
},
success: function (data) {
var response = data;
if (response["is_login"]){
if ($.cookie("next_path")){
location.href=$.cookie("next_path");
alert($.cookie("next_path"))
$.removeCookie("next_path","",{ expires: -1 })
}
else{
location.href="/index/"
}
}else{
$(".error").html(response["error_msg"]).css("color","red");
}
}
});
});
$("#subBtn").click(function () {
captchaObj.show();
});
// 将验证码加到id为captcha的元素里
captchaObj.appendTo("#popup-captcha");
// 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
};
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback）
$.ajax({
url: "/pc-geetest/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
type: "get",
dataType: "json",
success: function (data) {
// 使用initGeetest接口
// 参数1：配置参数
// 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
initGeetest({
gt: data.gt,
challenge: data.challenge,
product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
// 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
}, handlerPopup);
}
});
</script>
</body>
</html>
JS
$("#register").click(function () {
location.href="/reg/"
});
// //url无刷新验证码
$(".validCode_img").click(function () {
this.src+="?";
});
//
注册相关
视图配置
# 注册
def reg(request):
if request.method == "POST":
print(request.FILES)
regform = RegForm(request,request.POST,request.FILES)
# print("=====这里是regform=====")
reg_response = {"user":None,"valid_code":False,"errors":""}
# print(regform.cleaned_data.get("username"))
if regform.is_valid():
print("===this is ===")
username = regform.cleaned_data.get("username")
password = regform.cleaned_data.get("password")
obj = models.UserInfo.objects.create_user(username=username,password=password,avatar=request.FILES.get("img","/avatar/default.png"))
reg_response["user"]=username
print("======", reg_response["user"])
else:
print("===验证不通过====")
reg_response["errors"]=regform.errors
# return HttpResponse("OK")
return HttpResponse(json.dumps(reg_response))
regform = RegForm(request)
return render(request,"reg.html",{"regform":regform})
HTML相关
{#<!DOCTYPE html>#}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jquery/jquery-3.2.1.min.js"></script>
<script src="/static/jquery/jquery.cookie.js"></script>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
</head>
<style>
.cc {
margin-top: 10px;
}
.avator_div {
position: relative;
width: 60px;
height: 60px;
cursor: hand;
}
.avator_img, .avator_file {
position: absolute;
left: 80px;
top: 0;
width: 60px;
height: 60px;
{# cursor: hand;#}
}
.avator_file {
opacity: 0;
{# cursor: hand;#}{# display: none;#}
}
</style>
<body>
{#<img src="/static/img/top.png" style=" 100%;position: fixed;top: 0;left: 0;">#}
<div class="container" style="margin-top: 20px">
<div class="row">
<h2>注册页面</h2>
<hr>
<div class="col-md-6">
<form novalidate>
{% csrf_token %}
<div class="cc">用户名：
{{ regform.username }}
</div>
<div class="cc">密码：
{{ regform.password }}
</div>
<div class="cc">确认密码：
{{ regform.repassword }}
</div>
<div class="cc">邮箱：
{{ regform.email }}
</div>
<div class="avator_div cc">
<label for="avator">头像：</label>
<img src="/static/img/default.png" class="avator_img" id="preScan">
<input type="file" id="avator" class="avator_file">
</div>
<div class="row valiCode">
<div class="col-md-5">
<div class="form-group">
<label for="validCode">验证码：</label>
{{ regform.valid_code }}
</div>
</div>
<div class="col-md-7 " style="margin-top: 20px">
<img class="validCode_img" src="/get_validCode_img/" alt="" width="160px" height="40px" >
</div>
</div>
<button type="button" class="btn btn-success ajax_signUp">点击注册</button>
</form>
</div>
<div class="col-md-4 col-md-offset-1">
<img src="/static/img/registersideimg.png" alt="">
</div>
</div>
</div>
</body>
<script src="/static/blog/register.js"></script>
<script>
</script>
</html>
js
// 注册页面的主要js代码
var per_error_arr = [];
$(".ajax_signUp").click(function () {
var form = new FormData();
form.append("username",$("[name=username]").val());
form.append("password",$("[name=password]").val());
form.append("repassword",$("[name=repassword]").val());
form.append("email",$("[name=email]").val());
form.append("valid_code",$("[name=valid_code]").val());
var fileobj =$("#preScan").next()[0].files[0];
// console.log(fileobj);
$.ajax({
url: "/reg/",
type: "POST",
data: form,
processData: false,
contentType: false,
headers: {"X-CSRFToken": $.cookie('csrftoken')},
success: function (data) {
data = JSON.parse(data);
if (data["user"]) {
alert("OK");
location.href="/login/"
}
else if(data["errors"]){
var error_list = data["errors"];
console.log("per_error_arr",per_error_arr);
$(".Mr_zhang").css("border","").next().remove();
for (var error in error_list){
$div=$("<div>").addClass("row");
$div_in=$("<div>").addClass("col-md-5").addClass("col-md-offset-9");
$div.append($div_in);
console.log($div);
if (error=="__all__"){
$div_in.text("密码不一致!");
$("#id_repeat_password").css("border","2px solid red").after($div);
}
$div_in.text(errors[error]);
$("#id_"+error).css("border","2px solid red").addClass("Mr_zhang").after($div);
}
pre_error_arr=errors_list;
console.log("pre_error_arr",pre_error_arr)
}
}
})
});
$(".validCode_img").click(function () {
this.src+="?";
});
$("#avator").change(function () {
console.log("OK");
var first_file = $(this)[0].files[0];
var reader = new FileReader();
reader.readAsDataURL(first_file);
reader.onload=function () {
$("#preScan").attr("src",this.result)
}
})
*注销
# 注销
def log_out(request):
auth.logout(request)
return redirect("/login/")