标签：rap 字符串类 获取 错误 imp script 越界 text idt
1.views.pyfrom django.shortcuts import render, HttpResponsefrom django.http import JsonResponse
from django.contrib import auth
from PIL import Image, ImageDraw, ImageFont
import random
from io import BytesIO
# Create your views here.
# 自己生成验证码的登录
def login(request):
if request.method == "POST":
# 初始化一个给AJAX返回的数据
ret = {"status": 0, "msg": ""}
# 从提交过来的数据中 取到用户名和密码
username = request.POST.get("username")
pwd = request.POST.get("password")
valid_code = request.POST.get("valid_code") # 获取用户填写的验证码
if valid_code and valid_code.upper() == request.session.get("valid_code", "").upper():
# 验证码正确
# 利用auth模块做用户名和密码的校验
user = auth.authenticate(username=username, password=pwd)
if user:
# 用户名密码正确
# 给用户做登录
auth.login(request, user)
ret["msg"] = "/index/"
else:
# 用户名密码错误
ret["status"] = 1
ret["msg"] = "用户名或密码错误！"
else:
ret["status"] = 1
ret["msg"] = "验证码错误"
return JsonResponse(ret)
return render(request, "login.html")
# 获取验证码图片的视图
def get_valid_img(request):
# 获取随机颜色的函数
def get_random_color():
return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
# 生成一个图片对象
img_obj = Image.new(
‘RGB‘,
(220, 35),
get_random_color()
)
# 在生成的图片上写字符
# 生成一个图片画笔对象
draw_obj = ImageDraw.Draw(img_obj)
# 加载字体文件， 得到一个字体对象
font_obj = ImageFont.truetype("static/font/kumo.ttf", 28)
# 开始生成随机字符串并且写到图片上
tmp_list = []
for i in range(5):
u = chr(random.randint(65, 90)) # 生成大写字母
l = chr(random.randint(97, 122)) # 生成小写字母
n = str(random.randint(0, 9)) # 生成数字，注意要转换成字符串类型
tmp = random.choice([u, l, n])
tmp_list.append(tmp)
draw_obj.text((20 + 40 * i, 0), tmp, fill=get_random_color(), font=font_obj)
# 保存到session
request.session["valid_code"] = "".join(tmp_list)
# 加干扰线
width = 220 # 图片宽度（防止越界）
height = 35
for i in range(5):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, height)
y2 = random.randint(0, height)
draw_obj.line((x1, y1, x2, y2), fill=get_random_color())
# 加干扰点
for i in range(40):
draw_obj.point((random.randint(0, width), random.randint(0, height)), fill=get_random_color())
x = random.randint(0, width)
y = random.randint(0, height)
draw_obj.arc((x, y, x+4, y+4), 0, 90, fill=get_random_color())
# 不需要在硬盘上保存文件，直接在内存中加载就可以
io_obj = BytesIO()
# 将生成的图片数据保存在io对象中
img_obj.save(io_obj, "png")
# 从io对象里面取上一步保存的数据
data = io_obj.getvalue()
return HttpResponse(data)
2.urls.py
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r‘^admin/‘, admin.site.urls),
url(r‘^login/‘, views.login),
url(r‘^get_valid_img.png/‘, views.get_valid_img),
]
3.login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎登录</title>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<form class="form-horizontal col-md-6 col-md-offset-3 login-form">
{% csrf_token %}
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" name="username" placeholder="用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="password" name="password" placeholder="密码">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-10">
<input type="text" name="valid_code" id="valid_code">
<img id="valid-img" class="valid-img" src="/get_valid_img.png?" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" id="login-button">登录</button>
<span class="login-error"></span>
</div>
</div>
</form>
</div>
</div>
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script>
$("#login-button").click(function () {
// 1. 取到用户填写的用户名和密码 -> 取input框的值
var username = $("#username").val();
var password = $("#password").val();
var valid_code = $("#valid_code").val();
// 2. 用AJAX发送到服务端
$.ajax({
url: "/login/",
type: "post",
data: {
"username": username,
"password": password,
"valid_code": valid_code,
"csrfmiddlewaretoken": $("[name=‘csrfmiddlewaretoken‘]").val()
},
success: function (data) {
console.log(data);
if (data.status) {
// 有错误，在页面上提示
$(".login-error").text(data.msg);
} else {
// 登陆成功
location.href = data.msg;
}
}
})
});
// 当input框获取焦点时将之前的错误清空
$("#username,#password").focus(function () {
// 将之前的错误清空
$(".login-error").text("");
});
// 点击验证码图片 刷新验证码
$("#valid-img").click(function () {
$(this)[0].src += "?";
})
</script>
</body>
</html>
标签：rap 字符串类 获取 错误 imp script 越界 text idt
原文地址：https://www.cnblogs.com/Guishuzhe/p/9594192.html
