博客系统 之 登录
登录
每个项目必不可少的就是登录了吧，下面就把这个登录总结一下，方便以后参考。
首先需要的登录页面。
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>登录博客园-代码改变世界</h3>
<form action="">
<div class="form-group">
<label for="user">用户名</label>
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="pwd">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="valid_code" placeholder="请输入验证码">
</div>
<div class="col-md-6">
<img id="valid_img" width="250" height="40" src="/get_valid_img" alt="">
</div>
</div>
</div>
<input type="button" class="btn btn-primary login_btn" value="登录"><span class="error"
style="color: red;margin-left: 20px"></span>
</form>
</div>
</div>
</div>
光标签太丑了，再稍微装饰下吧。
给它加点css样式。
<style>
body{
background-color: #c0c0c0;
}
.container {
margin-top: 100px;
border:2px solid royalblue;
background-color: #ffffff;
width: 610px;
height:400px;
}
.row h3{
color: #e98015;
}
</style>
记得导入bootstrap组件。
样式调整好了，接下来该给按钮绑定事件。当然了，还有验证码，我们给它设置点击验证码刷新图片功能。
在这之前还要干一件事：
{% csrf_token %}
js事件：
// 登录验证
$(".login_btn").on("click",function () { //给提交按钮添加单击事件
$.ajax({
url:"",
type:"post",
data:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
user:$("#user").val(),
pwd:$("#pwd").val(),
valid_code:$("#valid_code").val(),
},
success:function (data) {
if(data.state){
location.href="/index/"
}else{
$(".error").text(data.msg)
}
}
})
});
// 验证码刷新
$("#valid_img").on("click",function () {
$(this)[0].src+="?" //单击验证码进行一次刷新
// alert(123)
});
登录页面就这样简单布置下，这只是我们看到的样式，那么后台需要做什么？
登录form表单中action没有路径，默认提交到本页面。
前端跟后台根据url先做个连接：
登录：
url(r'^login/', views.login),
验证码：
url(r'^get_valid_img/', views.get_valid_img), # 验证码
重点来了。
根据URL找到views视图，函数中的判断才决定你的前端页面最后是什么结果。
登录函数：
from django.contrib import auth
from django.http import JsonResponse
# 登录函数
def login(request):
if request.is_ajax():
user = request.POST.get("user") # 用户名
pwd = request.POST.get("pwd") # 密码
valid_code = request.POST.get("valid_code") # 输入的验证码
res = {"state": False, "msg": None} # 初始状态
valid_str = request.session.get("valid_str") # 生成的验证码
if valid_code.upper() == valid_str.upper(): # 文本框与随机验证码大写作比较
user = auth.authenticate(username=user, password=pwd) # 去数据库作比较
if user: # 登录成功
res["state"] = True
auth.login(request, user) # 做Session操作
else: # 没有此用户名
res["msg"] = "用户名或密码错误"
else:
res["msg"] = "验证码错误"
return JsonResponse(res)
return render(request, "login.html")
验证码：
# 登录获取验证码
def get_valid_img(request):
# 方式一
# with open("mj.jpg", "rb") as f:
# data = f.read()
# 方式二
# import PIL
# from PIL import Image
#
# image = Image.new("RGB", (250, 40), "green") #图片模式，大小，颜色
#
# with open("valid_code.png", "wb") as f:
# image.save(f, "png")
# with open("valid_code.png", "rb") as f:
# data = f.read()
# 方式三
# import PIL
# from PIL import Image
# import random
#
#
# def get_random_color(): # 随机颜色
# return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
#
#
# image = Image.new("RGB", (250, 40), get_random_color())
#
# with open("valid_code.png", "wb") as f:
# image.save(f, "png")
# with open("valid_code.png", "rb") as f:
# data = f.read()
# 方式四
# from PIL import Image
# import random
#
# def get_random_color(): # 随机颜色
# return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))
#
# image = Image.new("RGB", (250, 40), get_random_color())
# 生成的图片保存在内存
# from io import BytesIO
# f = BytesIO()
# image.save(f, "png") #生成的图片保存在内存，png的格式
# data = f.getvalue() #取出来
# f.close()
# 方式五
from PIL import Image
from PIL import ImageDraw, ImageFont
import random
def get_random_color(): # 随机颜色
return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) # 红，绿，蓝
image = Image.new("RGB", (250, 40), get_random_color()) # 图片模式，大小，颜色
draw = ImageDraw.Draw(image) # 在图片上写内容
font = ImageFont.truetype("blog/static/font/kumo.ttf", size=32) # 设置字体样式和大小
temp = [] # 空列表保存生成的随机字符
# 生成五个随机字符
for i in range(5):
random_num = str(random.randint(0, 9)) # 生成1——9 的随机数 int转成 str
random_low_alpha = chr(random.randint(97, 122)) # 生成a——z的随机小写字母
random_upper_alpha = chr(random.randint(65, 90)) # 生成A——Z的随机大写字母
random_char = random.choice([random_num, random_low_alpha, random_upper_alpha]) # 数字，小写字母，大写字母，随机挑选
# 在生成的验证码图片添加内容样式
# 坐标，文本内容，图片颜色，字体
draw.text((24 + i * 36, 0), random_char, get_random_color(), font=font)
# 生成的验证码内容添加到列表中保存,方便登录时校验
temp.append(random_char)
# 噪点噪线
width = 250
height = 40
for i in range(2):
x1 = random.randint(0, width)
x2 = random.randint(0, width)
y1 = random.randint(0, height)
y2 = random.randint(0, height)
draw.line((x1, y1, x2, y2), fill=get_random_color())
for i in range(2):
draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color())
x = random.randint(0, width)
y = random.randint(0, height)
draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color())
# 在内存中生成图片
from io import BytesIO
f = BytesIO()
image.save(f, "png") # 生成的图片保存在内存，png的格式
data = f.getvalue() # 取出来
f.close()
valid_str = "".join(temp) # 列表转换成字符串,与文本框输入的内容作比较
# session将验证码保存在数据库
request.session["valid_str"] = valid_str
return HttpResponse(data) # 返回验证码内容
登录页面就这样简单总结一下，当然，还有很多具体细节或者是想优化的地方，就要自己努力了。
浙公网安备 33010602011771号