目錄
- 項目介紹(需求分析)
- 數(shù)據(jù)表設(shè)計
- 圖片驗證碼
1. 項目介紹(需求分析)
模擬博客園實現(xiàn)大概的功能
博客項目需求分析
-首頁(顯示文章)
-文章詳情
-點贊,點踩
-文章評論
-字評論
-評論的展示
-登錄功能(圖片驗證碼)
-注冊功能(基于form驗證,ajax)
-個人站點(不同人不同樣式,文章過濾)
-后臺管理:
-文章展示
-新增文章
-富文本編輯器
2. 數(shù)據(jù)庫設(shè)計
-
UserInfo用戶表, 存放用戶的信息 字段如下
UserInfo -nid -name -password -email -phone -avatar 用戶頭像 -create_date 用戶注冊時間 -blog 與blog一對一
-
Blog,用戶個人站點表
Blog -nid -title 網(wǎng)站標(biāo)題 -site_name 站點路由 -theme 主題
-
category, 文章類別
category: -nid -title -blog 跟blog一對多
-
tag:(文章關(guān)鍵字,標(biāo)簽)
tag:(文章關(guān)鍵字) -nid -title -blog 跟blog一對多
-
article, 文章表
article -nid -title -desc 摘要 -create_time auto_add_now:當(dāng)該條記錄創(chuàng)建時,自動添加當(dāng)前時間 -content 文章內(nèi)容 -category 一對多 文章所屬分類 -tag 多對多 文章關(guān)鍵字 -blog 一對多 所屬站點
-
commit,評論表
commit -nid -user 哪個用戶 一對多 -article 對哪篇文章 一對多 -content 評論了什么內(nèi)容 -commit_time 時間 -parent 與自己(self)外鍵關(guān)聯(lián) 如何實現(xiàn)根評論與子評論? -有同學(xué)分析,要再建一張表,跟commit是一對多的關(guān)系(不好) -如何用這一個表,表示出根評論和子評論? -再加一個字段,標(biāo)記,給哪條評論,評論的 nid user article content parent_id 1 1 1 111 null 這是文章根評論 2 2 1 222 null 3 3 1 333 1 這是評論id為1的那條評論的 4 4 1 444 3 這是評論id為3的那條評論的 5 3 1 反彈 4 這是評論id為4的那條評論的
-
UpandDown,點贊點踩表
UpandDown -nid -user 哪個用戶 一對多 -article 對哪篇文章 一對多 -is_up 點贊還是點踩 布爾 其中user字段與article字段聯(lián)合唯一 因為一個用戶只能對一篇文章操作一次
BBS表關(guān)系
3. 圖片驗證碼
-
首先我們定義一個獲取隨機rgb顏色的函數(shù)
def get_random_color(__min=0, __max=255): """ 設(shè)置最大與最小的rgb值, 用以設(shè)置背景色和驗證碼顏色的深淺區(qū)分 """ r = random.randint(__min, __max) g = random.randint(__min, __max) b = random.randint(__min, __max) return ( r, g, b )
-
再定義一個獲取隨機字符的函數(shù)
def get_code(): ''' 獲取隨機驗證碼 :param code: :return 一位隨機大小寫字母數(shù)字字符: ''' a = chr(random.randint(65, 90)) b = chr(random.randint(97, 122)) c = random.randint(0, 9) res = str(random.choice([a, b, c])) return str(res) -
定義獲取驗證碼的視圖函數(shù)
安裝模塊
pip3 install Pillowfrom PIL import Image,ImageDraw,ImageFont import random from io import BytesIO def get_valid_code(request): code='' #用來存放生成的驗證碼的, 方便存進session #生成一張隨機圖片 #第一個參數(shù)是模式:RGB,第二個參數(shù)是圖片大小(w,h),第三個參數(shù)是圖片顏色, 背景色設(shè)置個淺色 img = Image.new('RGB', (320, 35), color=get_random_color(180, 230)) #拿到畫筆,將圖片傳入畫筆 img_draw=ImageDraw.Draw(img) #生成一個字體對象, 第一個參數(shù)是字體文件的路徑,第二個參數(shù)是字體大小 font=ImageFont.truetype('static/font/ss.TTF',size=25) # 畫字 #第一個參數(shù),xy的坐標(biāo), #第二個參數(shù):要寫的文字, #第三個參數(shù):寫文字的顏色, #第四個參數(shù):字體 for i in range(5): ret= method.get_code() # 文字設(shè)置個深色 img_draw.text((i*30+25, 0),ret, method.get_color(80, 150), font=font) code+=ret #將驗證碼存進session request.session['code'] = code print(code) # ==============畫點畫線可以省略================ width = 180 height = 35 for i in range(10): x1 = random.randint(0, width) x2 = random.randint(0, width) y1 = random.randint(0, height) y2 = random.randint(0, height) # 在圖片上畫線, 線用淺色 img_draw.line((x1, y1, x2, y2), fill=method.get_color(180, 230)) for i in range(100): # 畫點, 用淺色 img_draw.point([random.randint(0, width), random.randint(0, height)], fill=method.get_color(180, 230)) x = random.randint(0, width) y = random.randint(0, height) # 畫弧形, 用淺色 img_draw.arc((x, y, x + 4, y + 4), 0, 90, fill=method.get_color(180, 230)) # ============================== #將圖片暫時保存到內(nèi)存中,存取快,用完能自動清理 #直接用img的save方法,第一個參數(shù)是文件對象,第二個參數(shù)圖片格式 f = BytesIO() img.save(f, 'png') #取出數(shù)據(jù)并且返回 data = f.getvalue() return HttpResponse(data)
-
給獲取驗證碼圖片的函數(shù)開一個路由
url(r'^get_valid_code/$', views.get_valid_code), -
模板里獲取驗證碼圖片
<img src="/get_valid_code/" id="img_code" height="35" width="320" alt="" >
4.在登錄函數(shù)中獲取驗證碼進行判斷
前后端不分離的時候
隨機驗證碼生成時就放在session里面
在登錄函數(shù)中通過session取出來與前端傳過來的比對
前后端分離的時候
請求驗證碼圖片時候, 帶上前端生成的uuid
將生成的驗證碼和uuid存進redis, key為uuid, value為驗證碼
登錄的時候把uuid和驗證碼都傳給后端, 后端通過uuid從redis中取出驗證碼, 與傳來的對比
5. 點擊驗證碼進行刷新
//獲取到驗證碼圖片控件
//n與m是用來傳到后臺劃線與點的個數(shù)的,
//這樣每刷新一次圖片就會清晰一點
$("#img_code").click(function () {
if (n===0 || m===0){
n=1;
m=1;
}
else{
n-=2;
m-=20;
}
$("#img_code")[0].src='/get_valid_code/?n=' +n+ '&m=' + m;
console.log(111)
})
