BBS项目 登录界面代码详解
forms
from django import forms
# 创建form类
class LoginInfo(forms.Form):
# 创建账号字段
username = forms.CharField(
#默认名称
label="用户名",
#错误提示
error_messages={
#不能为空
"required":"用户名不能为空"
},
#widget方法调用，可以定义类
widget=forms.widgets.TextInput(attrs={"class":"form-control"})
)
# 创建密码字段
password = forms.CharField(
# 默认名称
label="密码",
# 错误提示
error_messages={
# 不能为空
"required": "密码不能为空"
},
# widget方法调用，可以定义类
widget=forms.widgets.PasswordInput(attrs={"class": "form-control"})
)
———————————————————————————————————————————————————————————————————————————————
views
from django.shortcuts import render,HttpResponse
from bolg import forms
from django.contrib import auth
from django.http import JsonResponse
# Create your views here.
def login(request):
# 创建LoginInfo对象
login_obj = forms.LoginInfo()
# 判断是否是POST数据
if request.method == "POST":
# 用于传参判断
ret = {'code': 0}
# 提取账号密码和验证码
username = request.POST.get('id_username')
password = request.POST.get('id_password')
print(username)
v_code = request.POST.get('v_code')
print(v_code)
# 判断验证码是否正确，从session中提取
if v_code.upper() == request.session.get('v_code'):
# 用authenticate判断账户密码
user = auth.authenticate(username=username, password=password)
# 判断是否有此用户
if user:
# 有的话转入登录后页面
ret['data'] = '/index/'
else:
# 用户错误，传递错误信息
ret['code'] = 1
ret['data'] = "用户名或密码错误"
else:
# 验证码错误传递错误信息
ret['code'] = 1
ret['data'] = "验证码错误"
print(ret)
return JsonResponse(ret)
return render(request, 'login.html', {'login_obj': login_obj})
def v_code(request):
# PIL 生成图片模块
# Image 生成图片对象
# ImageDraw 生成画笔对象
# ImageFont 生成文字对象
from PIL import Image, ImageDraw, ImageFont
# 随机数类
import random
# 定义一个生成随机数颜色的方法
def get_color():
return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)
# 定义生成图片对象
img_obj = Image.new(
"RGB", # 图片类型
(250, 35), # 图片大小
color=get_color() # 图片色彩
)
# 定义生成画笔对象
# Draw生成img_obj的画笔对象
draw_obj = ImageDraw.Draw(img_obj)
# 定义生成字体对象
# truetype 生成字体对象，后面参数，字体文件路径，字体大小
font_obj = ImageFont.truetype('static/font/kumo.ttf', size=28)
# 存放随机数
tem_list = []
# 产生随机字体
for i in range(5):
# 获取随机数，限定为数字0-9，大小写字母
# 把得到的数字转为字符串
a = str(random.randint(0, 9))
# 把得到的数字转为asc编码值
b = chr(random.randint(97, 122))
c = chr(random.randint(65, 90))
# 3个随机数取其一
r = random.choice([a, b, c])
# 画笔对象对图片中的字体进行修改
draw_obj.text(
(i * 48 + 20, 0), # 字体在图片中的位置
r, # 上面随机数得到的文字内容
get_color(), # 字体颜色
font=font_obj # 字体样式
)
# 把穗子字体放入字体列表中
tem_list.append(r)
#用join将列表转为字符串
code_str=''.join(tem_list)
#把字符串转为小写，在放入session中
request.session['v_code']=code_str.upper()
from io import BytesIO
#生成IO对象
tem=BytesIO()
#把图片对象以png格式放到tem对象中
img_obj.save(tem,'png')
#取出tem中的值
data=tem.getvalue()
# content_type 以什么类型和编码读取，这里设置的图片类型
return HttpResponse(data, content_type="image/png")
def index(request):
return render(request,'index.html')
———————————————————————————————————————————————————————————————————————————————
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="/static/bootstrap-3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/mystyle.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4">
{# 面板开始#}
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">BBS登录界面</h3>
</div>
<div class="panel-body">
{# 登录界面开始#}
<form>
<div class="form-group">
<label for="{{ login_obj.username.id_for_label }}">{{ login_obj.username.label }}</label>
{{ login_obj.username }}
</div>
<div class="form-group">
<label for="{{ login_obj.password.id_for_label }}">{{ login_obj.password.label }}</label>
{{ login_obj.password }}
</div>
<div id="v-code-wrapper" class="form-group">
<label for="">验证码</label>
<input type="text" class="form-control" id="v-code-input">
<img id="v_code" src="/v_code/" alt="">
</div>
<button type="button" class="btn btn-default btn-primary" id="button_denglu">登陆</button>
<span id="cuo" class="error"></span>
</form>
{# 登录界面结束#}
</div>
</div>
{# 面板结束#}
</div>
</div>
</div>
<script src="/static/jquery-3.3.1.min.js"></script>
<script src="/static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="/static/setupAjax.js"></script>
<script>
$('#button_denglu').click(function () {
$.ajax(
{
url: "/login/",
type: "POST",
data: {
"id_username": $('#id_username').val(),
"id_password": $('#id_password').val(),
"v_code": $('#v-code-input').val()
},
success: function (data) {
if (data.code) {
$('.error').text(data.data)
} else {
location.href = data.data
}
}
}
)
});
$('form input').focus(function () {
$('.error').text("")
});
$('#v_code').click(function () {
this.src += '?'
})
</script>
</body>
</html>
