node.js + express + mongoose + express-art-template + mongodb + bootstrap 博客实战项目[黑马程序员]--part02(续)
2021/7/23 2:06:23
本文主要是介绍node.js + express + mongoose + express-art-template + mongodb + bootstrap 博客实战项目[黑马程序员]--part02(续),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
1. app.js
// 引入 express 框架 const express = require('express'); // 引入路径处理 const path = require('path'); // 引入express-session 模块z const session = require('express-session'); // 导入 art-template 模板引擎 const template = require('art-template'); // 全局引入 dateFormat 模块 (用于处理 日期格式) const dateFormat = require('dateformat'); // 引入 morgan 第三方模块 (用于开发环境 打印请求信息至控制台 const morgan = require('morgan'); // 导入 config 模块 const config = require('config'); //创建网站服务器 const app = express(); // 数据库连接 (并未返回模块成员 不用变量接收) require('./model/connect'); // 处理POST请求参数 (extended false 默认使用 querrString 处理字符串) // 不能处理 form-datal 即 二进制 数据 app.use(express.urlencoded({ extended: false })); // 配置session app.use(session({ resave: true, // 在未登录时 客户端不保存 cookie saveUninitialized: false, secret: 'secret key', cookie: { // cookie 保存的最长时间 单位:毫秒 maxAge: 24 * 60 * 60 * 1000 } })); // 向express 指定框架模板所在位置 app.set('views', path.join(__dirname, 'views')); // 向express 指定框架模板的默认后缀 app.set('view engine', 'art'); // 向文件后缀为 .art 文件,指定渲染所使用的模板引擎 app.engine('art', require('express-art-template')); // 向模板内部导入 dateFormat 变量 (默认写法) template.defaults.imports.dateFormat = dateFormat; // 开放静态资源文件 符号 / 代表其根目录 即 该路径 app.use(express.static(path.join(__dirname, 'public'))); // 拦截请求,判断用户登录状态 // 由于中间件的执行顺序是代码从上至下执行,所以应放在路由匹配中间件之前 // 引入 登录拦截模块 app.use('/admin', require('./middleware/loginGuard')); // 获取当前系统的配置信息 console.log(config.get('title')); // 获取系统环境变量(返回值为 对象数据类型) // console.log(process.env); // 根据系统环境变量中的 变量名 NODE_ENV 获取变量值 // process.env.NODE_ENV; // 进行判断 // if (process.env.NODE_ENV == 'development') { // // 当前是 开发环境 // console.log('当前是开发环境'); // // 在开发环境中 将客户端发送到服务器端的请求信息打印到控制台中 // app.use(morgan('dev')); // } else { // // 当前是 生产环境 // console.log('当前是生产环境'); // }; // 引入路由模块 const home = require('./route/home'); const admin = require('./route/admin'); // 为路由匹配请求路径 app.use('/home', home); app.use('/admin', admin); // 错误处理中间件 app.use((err, req, res, next) => { // 将字符串数据类型转化为对象数据类型 const result = JSON.parse(err); // 空数组 let params = []; // 遍历对象 填充数组 for (let attr in result) { if (attr != 'path') { params.push(attr + '=' + result[attr]); } }; // message 后 通过 & 进行拼接 res.redirect(`${result.path}?${params.join('&')}`); }); // 监听端口 80 浏览器默认给 url添加 80端口 app.listen(80); // 启动成功后 命令行打印 console.log('网站服务器启动成功,请访问:localhost');
2. loginGuard.js
// 导出模块 module.exports = (req, res, next) => { // 字符截取 (这里是为了做 文章专项路由) let subUrl = req.url.substring(0, 6); // 判断用户访问的是否为登录页面 以及 用户的登录状态 // 若 用户是登录状态,则放行请求 // 若 用户是非登录状态,则将请求重定向至登录页面 if (subUrl != '/login' && !req.session.username) { // req.session.username 见admin.js 第36行,若用户为登录状态则 session对象下应该有username属性,反之则没有 res.redirect('/admin/login'); } else { // 用户为登录状态 放行请求 // 如果该用户为 普通用户 if (req.session.role == 'normal') { // 页面跳转至 博客首页 并阻止代码向下执行 return res.redirect('/home/?message=登录成功'); } else { // 如果该用户为 超级用户 admin next(); } }; };
login.js
// 导入 bcryptjs const bcrypt = require('bcryptjs'); // 导入用户集合构造函数 const { User } = require('../../model/user'); // 导出模块 module.exports = async(req, res) => { // (async 异步函数标记) // 接收post请求参数 const { email, password, aid } = req.body; // 如果客户端浏览器禁用 js 运行,则客户端进行的账号和密码验证将失效 // 为此在服务端我们增加验证功能 if (email.length == 0 || password.length == 0) return res.status(400).render('admin/error', { msg: '邮件地址或密码错误' }); // 根据邮箱地址查询用户信息 (参数 ES6写法 键值对相等 写其一) // 如果查询到用户 userData 变量类型为对象类型 // 如果没有查询到用户 userData 变量为空 let userData = await User.findOne({ email }); if (userData) { // 查询到用户 // 将客户端传递过来的密码 与 数据库中用户信息的密码进行比对 // true 对比成功 false 对比失败 let isValid = bcrypt.compare(password, userData.password) if (isValid) { // 登录成功 // 将用户名存储在请求对象中 // session 是 express-session 提供的对象(存储信息时,会自动创建 sessionId) req.session.username = userData.username; // 将用户角色 存储在 session 对象中 req.session.role = userData.role; // res.send('登录成功'); // req.app 即 app.js 文件中的 app(即 express() 的实例化对象) // app.local 可以理解为 全局对象,所有 template 模板均可拿到 req.app.locals.userInfo = userData; // 专项跳转 // 对用户的角色进行判断 if (userData.role == 'admin') { // 管理员 重定向到 usersList 页面 res.redirect('/admin/usersList'); } else { if (aid) { // 重定向至 原文章(aid对应的文章)页面 res.redirect('/home/article?aid=' + aid) } else { // 普通用户 重定向至 博客首页 res.redirect('/home'); } }; } else { // 没有查询到用户 res.status(400).render('admin/error', { msg: '邮件地址或密码错误' }); }; } else { // 没有查询到用户 res.status(400).render('admin/error', { msg: '邮件地址或密码错误' }); }; };
2.1. 文章专项路由
为实现以下流程(登录后仍跳转至该页面):
aid:即该文章 _id,以此作为唯一标识符,方便进行之后的页面跳转
2.2. 判断用户的登录状态
3. 路由模块
3.1. admin.js
// 引用 express 框架 const express = require('express'); // 创建博客展示页面路由 const admin = express.Router(); //渲染登录页面 路由 (导入登录页面模块 admin.get('/login', require('./admin/loginPage')); // 实现登录功能 路由 (导入登录模块 admin.post('/login', require('./admin/login')); // 实现退出功能 路由 admin.get('/logout', require('./admin/logout')); // 用户系路由 // 创建 用户列表页面 路由 admin.get('/usersList', require('./admin/usersList')); // 创建 用户编辑页面 路由 admin.get('/user-edit', require('./admin/user-edit')) // 创建实现 用户添加功能 路由 admin.post('/user-add', require('./admin/user-add')); // 创建实现 修改用户信息功能 路由 admin.post('/user-modify', require('./admin/user-modify')); // 创建实现 删除用户功能 路由 admin.get('/user-delete', require('./admin/user-delete')); // 文章系路由 // 创建 文章列表页面 路由 admin.get('/articlesList', require('./admin/articlesList')); // 创建 文章编辑页面 路由 admin.get('/article-edit', require('./admin/article-edit')) // 创建 文章添加功能 路由 admin.post('/article-add', require('./admin/article-add')) // 创建实现 修改文章功能 路由 admin.post('/article-modify', require('./admin/article-modify')); // 创建实现 删除文章功能 路由 admin.get('/article-delete', require('./admin/article-delete')); // 将路由对象作为模块成员进行导出 module.exports = admin;
3.2. 具体功能实现
3.2.1. 用户添加 user-add.js
// 引入用户集合的构造函数 const { User, validateUser } = require('../../model/user'); // 引入加密模块 const bcrypt = require('bcryptjs'); module.exports = async(req, res, next) => { // 用户验证 try { await validateUser(req.body); } catch (err) { // 验证未通过 // 重定向至用户添加页面 (重定向结束后,会执行 res.end() ) // return res.redirect(`/admin/user-edit?message=${err.message}`); // JSON.stringify() 将对象数据数据类型转化内字符串数据类型 let redData = { path: '/admin/user-edit', message: err.message }; return next(JSON.stringify(redData)); }; // 根据邮箱地址查询用户是否已存在 let user = await User.findOne({ email: req.body.email }); // 如果用户已经存在 if (user) { // 重定向至用户添加页面 (重定向结束后,会执行 res.end() ) // return res.redirect(`/admin/user-edit?message=该邮箱地址已经被占用`); let redData = { path: '/admin/user-edit', message: '该邮箱地址已经被占用' }; return next(JSON.stringify(redData)); }; // 对密码进行加密处理 // 生成随机字符串 const salt = await bcrypt.genSalt(10); // 加密 const bcryptPassword = await bcrypt.hash(req.body.password, salt); // 加密后密码替换 原密码 req.body.password = bcryptPassword; // 将用户信息添加到数据库 await User.create(req.body); // 重定向至用户编辑页面 (重定向结束后,会执行 res.end() ) // return res.redirect(`/admin/usersList`); let redData = { path: '/admin/user-edit', message: '用户添加成功!' }; return next(JSON.stringify(redData)); };
3.2.2. 用户删除 user-delete.js
// 引入 用户集合 的构造函数 const { User } = require('../../model/user'); module.exports = async(req, res) => { // 解构对象 获得 id let { userId } = req.query; // 根据 id 删除用户 await User.findOneAndDelete({ _id: id }); // 重定向至用户列表页面 res.redirect('/admin/usersList'); };
3.2.3. 用户编辑 user-edit.js
// 引入用户集合的构造函数 const { User } = require('../../model/user'); module.exports = async(req, res) => { // 路由标识 (标识当前为 用户编辑 页面) req.app.locals.currentLink = 'user-edit'; // 获取 url 中相关信息 let { message, id } = req.query; // 针对 是否有 id 进而判断 是添加用户 或是 修改用户信息 if (id) { // 修改用户信息 let user = await User.findOne({ _id: id }); // 渲染 用户编辑页面(修改用户信息) res.render('admin/user-edit', { message, user, link: '/admin/user-modify?id=' + id, btnTxt: '修改', userId: '用户id:' + id }); } else { // 渲染 用户编辑页面(添加修改用户) res.render('admin/user-edit', { message, link: '/admin/user-add', btnTxt: '添加' }); }; };
3.2.4. 用户修改 user-modify.js
// 导入用户集合的构造函数 const { User } = require('../../model/user'); // 引入加密模块 const bcrypt = require('bcryptjs'); module.exports = async(req, res, next) => { // 接收 post 传递的 参数 let { username, email, password, role, state } = req.body; // 接收 get 传递的 id let { id } = req.query; let userData = await User.findOne({ _id: id }); // 密码比对 (参数1: 接收的密码; 参数2:数据库中保存的密码) const isValid = await bcrypt.compare(password, userData.password); // 比对结果 if (isValid) { // 密码相等 await User.updateOne({ _id: id }, { username, email, role, state }); // 页面重定向至 用户列表页面 res.redirect('/admin/usersList'); } else { // 密码不等 // 信息填充 let info = { path: '/admin/user-edit', message: '密码错误! 信息修改失败.', id }; // next() 方法的第一个参数传递字符串 (JSON.stringify() 对象转字符串) next(JSON.stringify(info)); }; };
3.2.5. 用户列表渲染 usersList.js
// 导入用户集合构造函数 const { User } = require('../../model/user') module.exports = async(req, res) => { // 路由标识 (标识当前为 用户列表 页面) req.app.locals.currentLink = 'usersList'; // 接收客户端传递过来的 当前页 参数 let page = req.query.page || 1; // 每一页显示的数据条数 let pageSize = 10; // 用户数据的总条数 let count = await User.countDocuments(); // 总页数(向上取整) let total = Math.ceil(count / pageSize); // 页码对应的数据查询开始位置 let start = (page - 1) * pageSize; let users = await User.find().limit(pageSize).skip(start); // res.send(users); // 渲染用户列表页面 res.render('admin/usersList', { users, page, total, count }); };
这篇关于node.js + express + mongoose + express-art-template + mongodb + bootstrap 博客实战项目[黑马程序员]--part02(续)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-21Vue3教程:新手入门到实践应用
- 2024-12-21VueRouter4教程:从入门到实践
- 2024-12-20Vue3项目实战:从入门到上手
- 2024-12-20Vue3项目实战:新手入门教程
- 2024-12-20VueRouter4项目实战:新手入门教程
- 2024-12-20如何实现JDBC和jsp的关系?-icode9专业技术文章分享
- 2024-12-20Vue项目中实现TagsView标签栏导航的简单教程
- 2024-12-20Vue3入门教程:从零开始搭建你的第一个Vue3项目
- 2024-12-20从零开始学习vueRouter4:基础教程
- 2024-12-20Vuex4课程:新手入门到上手实战全攻略