BBS項目 登錄界面代碼詳解
阿新 • • 發佈：2018-07-03
raw 數字0 efault import fun pri panel 行修改 use
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/" >
</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>
BBS項目 登錄界面代碼詳解