一、注册功能

  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. vant库在vue全局引入toast组件

    第一步: 在config中引入 // 全局引入vant的提示框 import { Toast } from "vant"; Vue.use(Toast); 第二步: 在组要的.vu ...

  2. mybatis今年笔记

    1.读取配置文件:用的就是解析Xml文件的技术 2.mybatis是支持自己写dao层的,但是没有必要. mybatis做的事情: 第一个创建代理对象,第二个在代理对象中调用方法. 3.相同的注解如果 ...

  3. C++的vector容器清空

    c++内部STL库中自带了一个容器vetcor, 自带了清空方法——clear().但是clear使用之后,并不能清空数据,其数据再未被覆盖之前是不会改变的,个人猜测clear仅仅把指针挪动到了起始位 ...

  4. SpringBoot安全认证Security

    一.基本环境搭建 父pom依赖 <parent> <groupId>org.springframework.boot</groupId> <artifactI ...

  5. Android file内部存储

    通过file=openFileOutput()获得,将数据存储在data/data/+包名+files下面. 代码如下: MainActivity.java: import android.os.Bu ...

  6. Python操作APP -- Appium-Python-Client

    Appium连接模拟器 pip install Appium-Python-Client 使用Appium定位或者使用辅助定位工具 SDK安装目录/tools/bin,双击此辅助定位工具 from a ...

  7. 2019 年 Google 编程之夏活动报告

    2019 年 Google 编程之夏活动报告 主要介绍了 GSoC 2019 活动的几个课题并讲述了整个活动的组织过程 Google 编程之夏活动不仅仅是一个夏日的实习项目,对于组织和一些社区的成员来 ...

  8. Linux学习20200215

  9. XML--XSL

    参考 http://blog.51cto.com/cnn237111/1345998 https://www.w3.org/TR/2017/REC-xslt-30-20170608/ 声明 把文档声明 ...

  10. Python笔记_第五篇_Python数据分析基础教程_NumPy基础

    1. NumPy的基础使用涵盖如下内容: 数据类型 数组类型 类型转换 创建数组 数组索引 数组切片 改变维度 2. NumPy数组对象: NumPy中的ndarray是一个多维数组对象,该兑现共有两 ...