一、注册功能

  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. 鼠标点进错误提示框则清除错误信息

二、登录功能

  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. 前端处理后端传来的结果失败刷新验证码,成功进入首页

三、首页搭建

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

四、个人站点搭建

  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中使用,{% load mytag %} {% index username %}
  5. 文章页搭建
    1. 返回当前文章的内容
    2. 返回评论数
    3. url:用户名/article/文章id

五、点赞点彩功能

  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操作
    • 返回失败信息并向用户提示

六、评论功能

  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. 发表一个评论渲染

子评论渲染

七、后台管理

  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

decompose

# 静态文件配置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

BBS项目架构实现的更多相关文章

  1. BBS项目架构

    数据库设计 用户表(用的是auth_user那张表,通过自定义表继承AbstractUser) phone 电话 avatar 头像 create_time 创建时间#外键 blog 一对一个人站点表 ...

  2. nginx之location、inmp架构详解、BBS项目部署

    本期内容概要 location lnmp架构 部署BBS项目 内容详细 1.location 使用Nginx Location可以控制访问网站的路径 但一个server可以有多个location配置 ...

  3. 7、架构--location、LNMP架构、uwsgi部署、BBS项目部署

    笔记 1.晨考 1.Nginx中常用的模块 autoindex stub_status allow 和 deny basic limit_conn limit_req 2.配置步骤 1.创建连接池 2 ...

  4. BBS项目部署

    1.准备 项目架构为:LNM+Python+Django+uwsgi+Redis   (L:linux,N:nginx,M:mysql) 将bbs项目压缩上传到:  /opt 在shell中直接拖拽 ...

  5. BBS项目-01

    目录 BBS项目 BBS开发流程: BBS表格创建: BBS项目 BBS开发流程: BBS项目: 开发流程: 需求分析 草拟一些项目的大致技术点和流程 架构设计 架构师(框架 语言 数据库 缓存数据库 ...

  6. BBS项目(一)

    目录 BBS项目(一) 项目开发流程 BBS项目 BBS表分析 自关联 表关系图示 BBS项目(一) 项目开发流程 项目分类 针对互联网用户:抖音,淘宝····· 针对公司内部:后台管理系统··· 针 ...

  7. .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整(续)-使用配置文件动态注入

    上次实现了依赖注入,但是web项目必须要引用业务逻辑层和数据存储层的实现,项目解耦并不完全:另一方面,要同时注入业务逻辑层和数据访问层,注入的服务直接写在Startup中显得非常臃肿.理想的方式是,w ...

  8. .Net Core MVC 网站开发(Ninesky) 2.3、项目架构调整-控制反转和依赖注入的使用

    再次调整项目架构是因为和群友dezhou的一次聊天,我原来的想法是项目尽量做简单点别搞太复杂了,仅使用了DbContext的注入,其他的也没有写接口耦合度很高.和dezhou聊过之后我仔细考虑了一下, ...

  9. UWP开发之Mvvmlight实践九:基于MVVM的项目架构分享

    在前几章介绍了不少MVVM以及Mvvmlight实例,那实际企业开发中将以那种架构开发比较好?怎样分层开发才能节省成本? 本文特别分享实际企业项目开发中使用过的项目架构,欢迎参照使用!有不好的地方欢迎 ...

随机推荐

  1. 【Python】【Django】查询所有学生信息

    要做到以下效果: 改代码后效果: 从0开始顺序计数: 倒叙计数到0

  2. android 开发学习2

    Dao dao = new Dao(yi_ji_lu_zhang_dan.this);List<GetOneRecord> list = dao.getAllRecord();//创建迭代 ...

  3. 为什么vue中的data用return返回

    1.为什么在项目中data需要使用return返回数据呢? 不使用return包裹的数据会在项目的全局可见,会造成变量污染:使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件. 当一 ...

  4. ofo身陷被收购、破产传闻,中国的共享单车还能活下去吗?

    大潮退去,终将现出谁在"裸泳".尤其是那些看似火爆却迅速陨落的新事物,总是避免不了让人发出"伤仲永"的感慨.这其中,共享经济就是很典型的案例.共享睡眠舱.共享马 ...

  5. 18 ~ express ~ 前台分类导航展示 与 排序

    一,前台分类导航展示 1,后台文件:  /router/main.js router.get('/',(req,res,next)=>{ /** * 从数据库中读取分类信息 * rs是一个数组类 ...

  6. Busybox文件系统的移植

    相关软件下载地址:http://pan.baidu.com/s/16yo8Y fsc100开发板 交叉编译器:arm-cortex_a8-linux-gnueabi-gcc busybox-1.17. ...

  7. hdu3359 Kind of a Blur

    因为变化出来的是平均数,那么就可以对每一个变化出来的列方程,直接高斯消元就行了. #include<bits/stdc++.h> #define N 100005 #define LL l ...

  8. 下页小希学MVC5+EF6.2 学习记录三

      目的:1 学习mvc+ef 2  写下日记也是对自己的督促 期待已久的EF终于来了. 学完本篇文章,你将会掌握基于EF数据模型的完整开发流程. 本次将会完成EF数据模型的搭建和使用. 基于这个模型 ...

  9. Linux - 安装 dotnet core 环境

    Linux -  安装 dotnet core 环境 系统环境:CentOS7 官方安装指导 https://www.microsoft.com/net/learn/get-started/linux ...

  10. PAT Advanced 1034 Head of a Gang (30) [图的遍历,BFS,DFS,并查集]

    题目 One way that the police finds the head of a gang is to check people's phone calls. If there is a ...