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
(一)路由跳转和抽取公共部分代码
主要内容:
- 进行项目的初始化:创建网站服务器,构建模块化路由,引入路由模块,为路由匹配请求路径
- 构建博客管理页面模板:引入路径,开放静态资源文件,渲染后缀为art的模板
- 优化模板(抽离公共部分),建立骨架模板
(二)项目功能的实现——用户管理
主要内容:
- 连接数据库,创建用户集合,初始化用户
- 为登录表单项设置请求地址、请求方式以及表单项name属性
- 当用户点击登录按钮时,客户端验证用户是否填写了登录表单, 如果其中一项没有输入,阻止表单提交
- 服务器端接收请求参数,验证用户是否填写了登录表单,如果其中一项没有输入,为客户端做出响应,阻止程序向下执行
- 根据邮箱地址查询用户信息,如果用户不存在,为客户端做出响应,阻止程序向下执行,如果用户存在,将用户名和密码进行比对, 比对成功,用户登录成功, 比对失败,用户登录失败
- 保存登录状态,密码加密处理
(三)项目功能的实现之新增用户
主要内容:
- 为用户列表页面的新增用户按钮添加链接
- 添加一个连接对应的路由,在路由处理函数中渲染新增用户模板
- 为新增用户表单指定请求地址、请求方式、为表单项添加name属性
- 增加实现添加用户的功能路由
- 接收到客户端传递过来的请求参数
- 对请求参数的格式进行验证
- 验证当前要注册的邮箱地址是否已经注册过
- 对密码进行加密处理
- 将用户信息添加到数据库中
- 重定向页面到用户列表页面
(四)项目功能的实现之数据分页
- 当前页,用户通过点击上一页或者下一页或者页码产生,客户端通过get参数方式传递到服务器端
- 总页数,根据总页数判断当前页是否为最后一页,根据判断结果做响应操作,总页数:Math.ceil(总数据条数 / 每页显示数据条数)
- 将要修改的用户ID传递到服务器端
- 建立用户信息修改功能对应的路由
- 接收客户端表单传递过来的请求参数
- 根据id查询用户信息,并将客户端传递过来的密码和数据库中的密码进行比对
- 如果比对失败,对客户端做出响应
- 如果密码对比成功,将用户信息更新到数据库中
- 在确认删除框中添加隐藏域用以存储要删除用户的ID值
- 为删除按钮添自定义属性用以存储要删除用户的ID值
- 为删除按钮添加点击事件,在点击事件处理函数中获取自定义属性中存储的ID值并将ID值存储在表单的隐藏域中
- 为删除表单添加提交地址以及提交方式
- 在服务器端建立删除功能路由
- 接收客户端传递过来的id参数
- 根据id删除用户
(七)项目功能的实现之文章管理
(八)另一种分页方式:mongoose-sex-page(第三方模块)
(十一)博客系统的前台展示页面
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。