乐趣区

关于前端:多人博客管理项目总结

gitee
百度网盘 提取码: b2et

BLOG -- 源码目录
└──  config -- 配置文件
        ├── development.json -- 开发环境配置
        ├── default.json -- 默认配置
        ├── production.json -- 生产环境配置
        └── custom-environment-variables.json -- 私密环境变量
└── middleware 中间件
     └──loginGuard.js 登录拦挡
 └── model -- 数据库操作
     ├── connect.js -- 数据库连贯
     ├── comment.js -- 评论汇合规定
     └── user.js -- 用户治理
└──  public -- 动态资源
       ├── home -- 博客展现页面
       └── admin -- 博客治理页面
            └── common.js -- 客户端验证登录表单
       └── uploads -- 上传文件
└── route -- 路由  
      └──  admin -- 博客治理页面
             ├── article.js -- 文章列表页
             ├── article-add.js -- 新增文章
             ├── article-edit.js -- 文章治理页
             ├── loginPage.js 登录页面渲染
             ├── logout.js 退出页面性能实现
             ├── userPage.js 用户页面渲染
             ├── user-edit-fn.js -- 用户增加页面路由
             ├── user-edit.js -- 用户编辑页面路由
             ├── user-delete.js -- 用户分页性能路由
             ├── user-modify.js -- 用户批改性能路由
             └── login.js 登录页面性能实现
       └── home ---- 博客展现页面
              ├── article.js 博客文章
              ├── index.js -- 首页文章详情路由
              ├──  article.js -- 文章展现页面路由
              └──comment.js 博客评论
      ├── admin.js -- 博客治理页面路由
      └── home.js -- 博客展现页面路由
└── views -- 模板
     └── home -- 博客展现页面 art 模板
            └── common -- 公共局部 art 模板
                 ├──layout.art -- 公共骨架
                 └── header.art -- 头部公共局部
            ├──    article.art -- 文章展现
            └── default.art -- 文章首页详情
     └── admin -- 博客治理页面 art 模板
          └──common -- 公共局部 art 模板
               ├── header -- 头部公共模板
               ├── aside -- 侧边栏公共模板
               └── layout -- 骨架公共模板
          ├── login.art -- 登录页面
          ├── error.art -- 谬误页面
          ├── article-edit.art -- 文章治理模板
          ├── article.art -- 文章列表模板
          ├── user.art -- 用户列表页
          └── user-edit.art -- 用户编辑页面
├── app.js -- 创立网站服务
├──    joi.js -- JavaScript 对象的规定描述语言和验证器
└── hash.js -- 对 bcrypt 的测试代码

一些技术点: express mongoose bcrypt Joi art-template express-art-template express-session mongoose-sex-page morgan config
(一)路由跳转和抽取公共局部代码
次要内容:

  1. 进行我的项目的初始化:创立网站服务器,构建模块化路由,引入路由模块,为路由匹配申请门路
  2. 构建博客治理页面模板:引入门路,凋谢动态资源文件,渲染后缀为 art 的模板
  3. 优化模板(抽离公共局部),建设骨架模板

(二)我的项目性能的实现——用户治理
次要内容:

  1. 连贯数据库,创立用户汇合,初始化用户
  2. 为登录表单项设置申请地址、申请形式以及表单项 name 属性
  3. 当用户点击登录按钮时,客户端验证用户是否填写了登录表单,如果其中一项没有输出,阻止表单提交
  4. 服务器端接管申请参数,验证用户是否填写了登录表单,如果其中一项没有输出,为客户端做出响应,阻止程序向下执行
  5. 依据邮箱地址查问用户信息,如果用户不存在,为客户端做出响应,阻止程序向下执行,如果用户存在,将用户名和明码进行比对,比对胜利,用户登录胜利,比对失败,用户登录失败
  6. 保留登录状态,明码加密解决

(三)我的项目性能的实现之新增用户
次要内容:

  1. 为用户列表页面的新增用户按钮增加链接
  2. 增加一个连贯对应的路由,在路由处理函数中渲染新增用户模板
  3. 为新增用户表单指定申请地址、申请形式、为表单项增加 name 属性
  4. 减少实现增加用户的性能路由
  5. 接管到客户端传递过去的申请参数
  6. 对申请参数的格局进行验证
  7. 验证以后要注册的邮箱地址是否曾经注册过
  8. 对明码进行加密解决
  9. 将用户信息增加到数据库中
  10. 重定向页面到用户列表页面

(四)我的项目性能的实现之数据分页

  1. 当前页,用户通过点击上一页或者下一页或者页码产生,客户端通过 get 参数形式传递到服务器端
  2. 总页数,依据总页数判断当前页是否为最初一页,依据判断后果做响应操作,总页数:Math.ceil(总数据条数 / 每页显示数据条数)

(五)我的项目性能的实现之用户信息批改

  1. 将要批改的用户 ID 传递到服务器端
  2. 建设用户信息批改性能对应的路由
  3. 接管客户端表单传递过去的申请参数
  4. 依据 id 查问用户信息,并将客户端传递过去的明码和数据库中的明码进行比对
  5. 如果比对失败,对客户端做出响应
  6. 如果明码比照胜利,将用户信息更新到数据库中

(六)我的项目性能的实现之用户信息删除

  1. 在确认删除框中增加暗藏域用以存储要删除用户的 ID 值
  2. 为删除按钮添自定义属性用以存储要删除用户的 ID 值
  3. 为删除按钮增加点击事件,在点击事件处理函数中获取自定义属性中存储的 ID 值并将 ID 值存储在表单的暗藏域中
  4. 为删除表单增加提交地址以及提交形式
  5. 在服务器端建设删除性能路由
  6. 接管客户端传递过去的 id 参数
  7. 依据 id 删除用户

(七)我的项目性能的实现之文章治理

(八)另一种分页形式:mongoose-sex-page(第三方模块)

(九)我的项目性能的实现之 mongoDB 数据库增加账号

(十)我的项目性能的实现之开发环境与生产环境

(十一)博客零碎的前台展现页面

(十二)我的项目性能的实现之文章评论和退出性能

退出移动版