目录
- 项目介绍(需求分析)
- 数据表设计
- 图片验证码
1. 项目介绍(需求分析)
模拟博客园实现大概的功能
博客项目需求分析
-首页(显示文章)
-文章详情
-点赞,点踩
-文章评论
-字评论
-评论的展示
-登录功能(图片验证码)
-注册功能(基于form验证,ajax)
-个人站点(不同人不同样式,文章过滤)
-后台管理:
-文章展示
-新增文章
-富文本编辑器
2. 数据库设计
-
UserInfo用户表, 存放用户的信息 字段如下
UserInfo -nid -name -password -email -phone -avatar 用户头像 -create_date 用户注册时间 -blog 与blog一对一
-
Blog,用户个人站点表
Blog -nid -title 网站标题 -site_name 站点路由 -theme 主题
-
category, 文章类别
category: -nid -title -blog 跟blog一对多
-
tag:(文章关键字,标签)
tag:(文章关键字) -nid -title -blog 跟blog一对多
-
article, 文章表
article -nid -title -desc 摘要 -create_time auto_add_now:当该条记录创建时,自动添加当前时间 -content 文章内容 -category 一对多 文章所属分类 -tag 多对多 文章关键字 -blog 一对多 所属站点
-
commit,评论表
commit -nid -user 哪个用户 一对多 -article 对哪篇文章 一对多 -content 评论了什么内容 -commit_time 时间 -parent 与自己(self)外键关联 如何实现根评论与子评论? -有同学分析,要再建一张表,跟commit是一对多的关系(不好) -如何用这一个表,表示出根评论和子评论? -再加一个字段,标记,给哪条评论,评论的 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字段联合唯一 因为一个用户只能对一篇文章操作一次
BBS表关系
3. 图片验证码
-
首先我们定义一个获取随机rgb颜色的函数
def get_random_color(__min=0, __max=255): """ 设置最大与最小的rgb值, 用以设置背景色和验证码颜色的深浅区分 """ r = random.randint(__min, __max) g = random.randint(__min, __max) b = random.randint(__min, __max) return ( r, g, b )
-
再定义一个获取随机字符的函数
def get_code(): ''' 获取随机验证码 :param code: :return 一位随机大小写字母数字字符: ''' 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) -
定义获取验证码的视图函数
安装模块
pip3 install Pillowfrom PIL import Image,ImageDraw,ImageFont import random from io import BytesIO def get_valid_code(request): code='' #用来存放生成的验证码的, 方便存进session #生成一张随机图片 #第一个参数是模式:RGB,第二个参数是图片大小(w,h),第三个参数是图片颜色, 背景色设置个浅色 img = Image.new('RGB', (320, 35), color=get_random_color(180, 230)) #拿到画笔,将图片传入画笔 img_draw=ImageDraw.Draw(img) #生成一个字体对象, 第一个参数是字体文件的路径,第二个参数是字体大小 font=ImageFont.truetype('static/font/ss.TTF',size=25) # 画字 #第一个参数,xy的坐标, #第二个参数:要写的文字, #第三个参数:写文字的颜色, #第四个参数:字体 for i in range(5): ret= method.get_code() # 文字设置个深色 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)) # ============================== #将图片暂时保存到内存中,存取快,用完能自动清理 #直接用img的save方法,第一个参数是文件对象,第二个参数图片格式 f = BytesIO() img.save(f, 'png') #取出数据并且返回 data = f.getvalue() return HttpResponse(data)
-
给获取验证码图片的函数开一个路由
url(r'^get_valid_code/$', views.get_valid_code), -
模板里获取验证码图片
<img src="/get_valid_code/" id="img_code" height="35" width="320" alt="" >
4.在登录函数中获取验证码进行判断
前后端不分离的时候
随机验证码生成时就放在session里面
在登录函数中通过session取出来与前端传过来的比对
前后端分离的时候
请求验证码图片时候, 带上前端生成的uuid
将生成的验证码和uuid存进redis, key为uuid, value为验证码
登录的时候把uuid和验证码都传给后端, 后端通过uuid从redis中取出验证码, 与传来的对比
5. 点击验证码进行刷新
//获取到验证码图片控件
//n与m是用来传到后台划线与点的个数的,
//这样每刷新一次图片就会清晰一点
$("#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)
})
