BBS项目架构实现

一、注册功能

  1. 注册页面搭建
    1. auto_id
  2. 数据校验
    1. 使用forms组件实现（forms）
    2. 创建一个文件夹随意，创建一个.py中
    3. 在.py文件中创建类继承form.Form
    4. 创建字段实现，实现对字段的约束，添加样式 widget error_messages required invalid（邮箱格式验证）
    5. 扩充验证使用钩子函数，局部钩子和全局钩子
  3. 注册页面搭建实现
    1. 创建form组件验证对象返回给前端
    2. 将对象渲染到页面
  4. 前端实现用户上传头像替代
    1. 通过change方法实现，
    2. 通过FileReader()产生对象
    3. 获取用户上传文件
    4. 通过文件阅读器读取文件
    5. 通过onload实现加载完替代图片路径
  5. 前端返回数据给后端
    1. 创建FormData()对象
    2. 通过each,serializeArray来获取form表单中所有的key-vauel，添加到对象中
    3. ajax返回数据
    4. 注意使用两个false使用
    5. 向后端发送数据
  6. 后端处理
    1. 获取所有前端数据
    2. 放入到form组件表单中验证 is_valid
    3. 获取所有通过的校验的数据
    4. 移除确认密码
    5. 获取文件内容
    6. 判断头像是否为空
    7. 打散字典保存内容
    8. 返回结果（成功失败）
  7. 前端处理
    1. 成功直接跳转到登录界面
    2. 失败通过dom操作显示错误信息
      1. 使用each ，拼接id
      2. 通过错误的id显示错误信息，并添加has-error
    3. 鼠标点进错误提示框则清除错误信息

img

二、登录功能

  1. 登录页面搭建 不使用表单提交
  2. 图片验证码
    1. img标签可以有具体的路径，图片的二进制数据，后端的url（自动向后端发送get请求）
    2. 利用PIL，image imagedrow imagefont, bytesio模块实现
    3. 生成图片对象
    4. 生成画笔对象
    5. 设置画笔字体
    6. 生成随机验证码
    7. 将验证码保存到session
    8. 生成bytesio对象
    9. 保存对象
    10. 返回结果getvalue
  3. 发送请求验证ajax请求
  4. 后端校验用户，返回结果
  5. 前端处理后端传来的结果失败刷新验证码，成功进入首页
  6. img

三、首页搭建

  1. 主页搭建
    1. 设置导航条，判断用户是否已将登录如果没有显示登录注册按钮
    2. 用户登录情况下导航条中显示用户名和更多操作，
    3. 导航条中实现修改密码和注销操作
      1. 修改密码旧密码，新密码，新密码确认密码
      2. ajax发送请求后台校验返回结果
    4. 侧边栏显示广告位
    5. csrfmiddlewaretoken
  2. admin管理员添加表中信息 createsuperuser
    1. 在admin表中注册表
    2. 在model中创建元类meta实现表名，和str
  3. 展示文章信息
    1. 直接返回返回所文章文章对象，实现分页功能
    2. 循环显示每篇文章
    3. 头像渲染
      1. 要把用户上传的头像暴露在页面中
      2. 在settings.py配置文件中配置 MEDIA_ROOT = os.path.join(BASE_DIR,'media')
      3. 在url中导入serve模块写一个url('^media/(?P<path>.*)',serve, {'document_root':settings.MEDIA_ROOT}) ,文件访问路径 src="/media/{{ article.blog.userinfo.avatar }}

img

四、个人站点搭建

  1. 页面的搭建
  2. 个人文章的显示
    1. 访问站点有可能不存在则报错页面
    2. 个文章的搭建通过用户名访问路径
    3. 获取用户文章传到页面中for循环，并且页面显示小图标配置
    4. 通过点击文章标题可以进入文章内容显示，配置一个url单独url有一个特点就是个人站点为用户名字
  3. 侧边栏搭建（配置统一的url）
    1. 文章分类 查询当前用户所有分类及分类下的所有文章数
    2. 标签分类 查询当前用户所有的标签及标签下的文章数
    3. 日期分类 根据年月统计文章数
      1. from django.db.models import Countfrom django.db.models.functions import TruncMonth
      2. data_list = models.Article.objects.filter(blog=blog_obj).annotate(month=TruncMonth('create_time')).values( 'month').annotate(count=Count('pk')).values_list('month', 'count')
    4. 通过点击对应侧边栏连接可以查看当前一个分类下面的文章，用同一个url配置，两个以id另一个以年月查询
    5. 用户名/分类/id名
    6. url(r'^(?P\w+)/(?Pcategory|tag|archive)/(?P.*)', views.site),
  4. 模板划分
    1. 将个人站点进行划分，侧边栏和中间文章为修改内容
      1. 侧边栏划分
      2. 创建一个侧边栏的html将侧边栏内容复制进去，然后创建include_tag
      3. 创建一个函数，带参数，看页面缺什么就传什么，在将结果返回locals
      4. 在base.html中使用，
  5. 文章页搭建
    1. 返回当前文章的内容
    2. 返回评论数
    3. url:用户名/article/文章id

img

五、点赞点彩功能

  1. 布局点赞点彩页面
  2. dom操作获取用户是点赞还是点彩，使用(hasClass方法实现判断)
  3. 通过ajax请求发送数据
  4. 发送的数据包括（给那篇文章点赞和点彩）
    1. 返回点赞还是点彩
    2. 返回用户点赞的是那篇文章的id
    3. 返回csrf，可以通过ajax携带也可以通过，引入js文件实现
  5. 后台处理（先处理正确的逻辑）
    1. 判断用户是否登录
    2. 判断用户点赞的文章是否是自己的文章（传来的id进行判断）orm查询
    3. 判断用户是否已经点过了，通过orm查询
    4. 操作文章表中的点赞数进行加一通过F查询
    5. 对点赞表中插入数据一条
    6. 错误逻辑处理
    7. JsonResponse返回数据
  6. 检测是否修改成功
    • 成功
      1. 显示点赞成功提示，
      2. 修改点赞的数值，通过dom操作
    • 返回失败信息并向用户提示

img

六、评论功能

  1. 页面布局

    1. 判断用户是否登录
      • 登录显示评论框
      • 没有显示登录和注册功能
    2. 显示评论内容
      1. 判断有没回复评论使用 @ 符号连接

  2. 评论功能

    1. 获取评论的信息
    2. 发送数据给后端
      1. 当前评论文章的id
      2. 评论内容，
      3. csrf
    3. 后端处理
      1. 获取前端传来的数据
      2. 表操作
        • 文章表中当前文章评论数据
        • 操作评论表，插入评论内容
      3. 返回数据
    4. 前端处理
      1. 提示用户评论成功
      2. 清空框中内容
      3. 将用户填加的内容动态的添加的标签中显示appen

  3. 回复功能

    1. 点击回复功能标签显示要评论那个人的用户名通过@连接，并在文本框中显示，获取焦点，
    2. 并获取点前评论用户的id
    3. 添加内容
    4. 判断用户是否是子评论通过id判断
      1. 如果是则获取提交内容进行处理，将@和用户名取出实现保存数据
    5. 传送数据
      1. 当前文章的id
      2. 处理过的内容
      3. 写评论内容用户的id
      4. 跨平台校验
    6. 后台处理
      1. 直接在插入数据的sql语句加入id字段
      2. 返回数据
    7. 前端处理
      1. 显示评论成功
      2. 动态添加标签
    8. 前端子评论的渲染 {{ comment.parent.user.username }}
      4. 清除全局变量写评论的用户id
    9. 发表一个评论渲染img

子评论渲染img

img

img

七、后台管理

  1. 页面搭建，
  2. 获取用户文章
    1. 表格显示
  3. 添加文章操作
    1. 页面搭建，显示标签和分类
    2. 为textarea添加编辑功能
      1. 引用下载文件
      2. 看文档调用
    3. 上传文件内容解决xss攻击
      1. 方式使用bs4库实现，将script标签去除
      2. 保存文章内容
      3. 保存文章与之对应的标签，通过bluk_create方法实现
    4. 上传文件中上传图片
      1. 到文档中配置，添加跳转页面和csrf
      2. 获取文件信息，拼接路径保存到暴露的文件夹中，
      3. 返回信息要包含url路径，才可以在文档中显示图片
  4. 修改上传的头像，
    1. 页面搭建
    2. 在保存头像的时候不能使用updata方法实现图像的更新，所以要使用save

img

img

decompose

img

# 静态文件配置STATICFILES_DIRS = [    os.path.join(BASE_DIR, 'static')]# 扩展第三张表字段AUTH_USER_MODEL = 'app.UserInfo'# 全局装饰器配置LOGIN_URL = '/login/'# 配置用户上传的文件图片规则,都会将静态文件放入一个文件夹中,还可以暴露其他文件夹中文件，慎重使用# 会把用户上传用户的全部资源上传到后端这个指定的文件夹MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

parser decompose
posted @ 2019-11-17 18:42  RandySun  阅读(555)  评论(0)  编辑  收藏  举报