likes
comments
collection
share

多人博客管理项目总结

作者站长头像
站长
· 阅读数 40

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

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

(十一)博客系统的前台展示页面

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