乐趣区

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

jiezi

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 数据库增加账号

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

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

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

退出移动版