表設計
注冊功能
"""
1.注冊功能需要forms組件
不同功能,可單獨一個py文件2.利用forms組件渲染前端標簽1.利用ajax提交2.forms組件獲取用戶數據的數據。$('#form').serializeArray()獲取forms標簽所有用戶普通鍵值對的數據3. 手動渲染頭像label里面內容,點擊都會跳轉到for指定的標簽上4.實時展示用戶頭像 1.文件閱讀器2.change時間3.onload等待加載完畢5.用戶信息不合法,渲染提示信息1.forms組件渲染的標簽id值有一個固定的特點id_字段名ps:獲取id值:form.auto_id2.根據后端返回的字段以及字段對應的報錯信息自己手動憑借對應字段的id值3. 提示功能的完善1.jQuery的鏈式操作2. input獲取焦點事件"""
驗證碼
"""
圖片相關模塊
pip3 install pillow
"""from PIL import Image,ImageDraw,ImageFont"""
Image:生成圖片
ImageDraw:能夠圖片上亂涂亂畫
ImageFont:控制字體樣式
"""
from io import BytesIO, StringIO"""
ByttesIO: 臨時幫你儲存數據,返回數據是二進制
StringIO: 臨時幫你儲存數據,返回數據是字符串
"""
url(r'^get_code/', views.get_code, name='get_code'),# 獲取隨機3個0-255數
def get_random():""":return: 返回0-255三個隨機數,元組"""return random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)# 獲取驗證碼
def get_code(request):# 1.產生一張隨機顏色的圖片img_obj = Image.new('RGB', (350, 35), get_random())# 2.產生一只在圖片上的畫筆img_draw = ImageDraw.Draw(img_obj)# 3.產生字體樣式img_font = ImageFont.truetype(r'static\font\font.ttf', 35)# 產生5個隨機驗證碼code = ''for i in range(5):upper_str = chr(random.randint(65, 90)) # 大寫字母lower_str = chr(random.randint(97, 122)) # 小寫字母random_int = str(random.randint(0, 9)) # 數字# 隨機取一個temp_str = random.choice([upper_str, lower_str, random_int])# 寫在圖片上,位置,內容,顏色,字體#一個一個寫,能控制間距img_draw.text((45 + i * 60, -2), temp_str, get_random(), font=img_font)# 儲存code += temp_strprint(code)#驗證碼需要校驗,所以找地方存起來,并且其他視圖函數也能拿到request.session['code'] = codeio_obj = BytesIO() #生成一個內存管理器對象 可以看成文件句柄img_obj.save(io_obj, 'png') 把圖片放進去return HttpResponse(io_obj.getvalue()) # 從內存管理器中讀取二進制的圖片數據返回給前端
前端代碼:
<img src="/get_code/" alt="圖片驗證碼" id="id_img">
js代碼:
原理:src改變,立馬刷新。點擊一次圖片,給url添加一個?號
$('#id_img').click(function () {var oldSrc = $(this).attr('src');$(this).attr('src', oldSrc += '?')});
參考:https://www.cnblogs.com/guyouyin123/p/12293758.html#2%E3%80%81%E6%B3%A8%E5%86%8C%E5%8A%9F%E8%83%BD