BBS之项目介绍,数据表设计,图片验证码

目录

1. 项目介绍(需求分析)
2. 数据表设计
3. 图片验证码

1. 项目介绍(需求分析)

模拟博客园实现大概的功能

博客项目需求分析
    -首页(显示文章)
    -文章详情
    -点赞,点踩
    -文章评论
        -字评论
        -评论的展示
    -登录功能(图片验证码)
    -注册功能(基于form验证,ajax)
    -个人站点(不同人不同样式,文章过滤)
    -后台管理:
        -文章展示
    -新增文章
        -富文本编辑器

2. 数据库设计

1. UserInfo用户表, 存放用户的信息 字段如下

   UserInfo    
       -nid
       -name
       -password
       -email
       -phone
       -avatar   用户头像
       -create_date    用户注册时间
       -blog 与blog一对一
   

1. Blog,用户个人站点表

   Blog
       -nid  
       -title   网站标题
       -site_name 站点路由
       -theme 主题
   

1. category, 文章类别

   category:
       -nid
       -title
       -blog   跟blog一对多
   

1. tag:(文章关键字,标签)

   tag:(文章关键字)
       -nid
       -title
       -blog    跟blog一对多
   

1. article, 文章表

   article
       -nid
       -title   
       -desc    摘要
       -create_time    auto_add_now:当该条记录创建时,自动添加当前时间
       -content   文章内容
   
       -category    一对多  文章所属分类
       -tag         多对多  文章关键字
       -blog        一对多  所属站点
   

1. 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的那条评论的
   

1. 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 Pillow

  from 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),
  

• 模板里获取验证码图片

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)
    })