【Node.js实战】一文带你开发博客项目之Koa2重构(实现session、开发路由、联调、日志)

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容Redis),内存型 2GB
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
简介: 【Node.js实战】一文带你开发博客项目之Koa2重构(实现session、开发路由、联调、日志)

一、前言

前面我们介绍了 await / async 的基本使用,学到了 koa2 框架的安装、项目的创建,以及路由的基本使用。


接下来,我们正式使用 koa2 对我们的 myblog 博客项目进行重构!

二、实现 session

终端安装一些必要的东西(koa-generic-session、koa-redis、redis),更容易实现登录

npm i koa-generic-session koa-redis redis

修改 app.js 文件

app.js

const session = require('koa-generic-session')
const redisStore = require('koa-redis')
......
// session 配置(在routes前面)
app.keys = ['Qianduan2023']
app.use(session({
  // 配置 cookier
  cookie: {
    path: '/',
    httpOnly: true,
    maxAge: 24 * 60 * 60 * 1000
  },
  // 配置 redis
  store: redisStore({
    all: '127.0.0.1:6379' // 本地 reids
  })
}))

我们在 user.js 中创建一个 session-test 做测试

user.js

router.get('/session-test', async function(ctx, next) {
    if (ctx.session.viewCount == null) {
        ctx.session.viewCount = 0
    }
    ctx.session.viewCount++
    ctx.body = {
        errno: 0,
        viewCount: ctx.session.viewCount
    }
})

999fbb1ca4454848afd2b9d2b8f026d1.png

三、开发路由

1、安装 mysql 和 xss

终端键入以下代码,安装 mysql 和 xss

npm i mysql xss

2、代码迁移

be5fc3383b0b44d0b40528f91619749e.png

修改 app.js 文件,修改本地 redis 的写法

app.js

const { REDIS_CONF } = require('./conf/db')
......
  // 配置 redis
  store: redisStore({
    // all: '127.0.0.1:6379' // 本地 reids
    all: `${REDIS_CONF.host}:${REDIS_CONF.port}`
  })

3、修改 controller 控制器

修改 controller 文件里的内容(主要是修改成 async/await 的形式)

./controller.blog.js

// 导入执行 sql 的相关内容
const xss = require('xss')
const { exec } = require('../db/mysql')
// 获取博客列表(通过作者和关键字)
const getList = async (author, keyword) => {
    // 1=1 是为了语法的绝对正确,注意以下 sql 拼接时的空格
    let sql = `select * from blogs where 1=1 `
    if (author) {
        sql += `and author='${author}' `
    }
    if (keyword) {
        sql += `and title like '%${keyword}%' `
    }
    // 以时间的倒序
    sql += `order by createtime desc;`
    // 返回 promise
    return await exec(sql)
}
// 获取博客详情(通过 id)
const getDetail = async (id) => {
    const sql = `select * from blogs where id='${id}'`
    const rows = await exec(sql)
    return rows[0]
}
// 新建博客 newBlog 若没有,就给它一个空对象
const newBlog = async (blogData = {}) => {
    // blogData 是一个博客对象,包含 title content author 属性
    const title = xss(blogData.title)
    const content = xss(blogData.content)
    const author = blogData.author
    const createTime = Date.now()
    const sql = `
                insert into blogs (title, content, createtime, author)
                values ('${title}', '${content}', '${createTime}', '${author}');
    `
    const insertData = await exec(sql)
    return {
        id: insertData.insertId
    }
}
// 更新博客(通过 id 更新)
const updateBlog = async (id, blogData = {}) => {
    // id 就是要更新博客的 id
    // blogData 是一个博客对象 包含 title content 属性
    const title = xss(blogData.title)
    const content = xss(blogData.content)
    const sql = `
        update blogs set title='${title}', content='${content}' where id=${id}
    `
    const updateData = await exec(sql)
    // 更新的影响行数大于 0,则返回 true
    if (updateData.affectedRows > 0) {
        return true
    }
    return false
}
// 删除博客(通过 id 删除)
const delBlog = async (id, author) => {
    const sql = `delete from blogs where id='${id}' and author='${author}'`
    const delData = await exec(sql)
    if (delData.affectedRows > 0) {
        return true
    }
    return false
}
// 导出共享
module.exports = {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    delBlog
}

./controller/user.js

const { exec, escape } = require('../db/mysql')
const { genPassword } = require('../utils/cryp')
// 登录(通过用户名和密码)
const login = async (username, password) => {
    username = escape(username)
    // 生成加密密码
    password = genPassword(password)
    password = escape(password)
    const sql = `
        select username, realname from users where username=${username} and password=${password}
    `
    const rows = await exec(sql)
    return rows[0]
}
// 导出共享
module.exports = {
    login
}

4、开发路由

开发 ./routes 文件里的路由,直接拷贝 blog-express 文件里的内容,使用 koa2 规定的格式即可

./routes/blog.js

const router = require('koa-router')()
// 导入博客和用户控制器相关内容
const {
    getList,
    getDetail,
    newBlog,
    updateBlog,
    delBlog
} = require('../controller/blog')
// 导入成功和失败的模型
const {
    SuccessModel,
    ErrorModel
} = require('../model/resModel')
const loginCheck = require('../middleware/loginCheck')
// 前缀
router.prefix('/api/blog')
router.get('/list', async function (ctx, next) {
    // 博客的作者,req.query 用在 GET 请求中
    let author = ctx.query.author || ''
    // 博客的关键字
    const keyword = ctx.query.keyword || ''
    if (ctx.query.isadmin) {
        // 管理员界面
        if (ctx.session.username == null) {
            // 未登录
            ctx.body = new ErrorModel('未登录')
            return
        }
        // 强制查询自己的博客
        author = ctx.session.username
    }
    // 查询的结果
    const listData = await getList(author, keyword)
    ctx.body = new SuccessModel(listData)
})
router.get('/detail', async function (ctx, next) {
    const data = await getDetail(ctx.query.id)
    ctx.body = new SuccessModel(data)
})
router.post('/new', loginCheck, async function (ctx, next) {
    const body = ctx.request.body
    body.author = ctx.session.username
    const data = await newBlog(body)
    ctx.body = new SuccessModel(data)
})
router.post('/update', loginCheck, async function (ctx, next) {
    const val = await updateBlog(ctx.query.id, ctx.body)
    if (val) {
        ctx.body = new SuccessModel()
    } else {
        ctx.body = new ErrorModel('更新博客失败')
    }
})
router.post('/del', loginCheck, async function (ctx, next) {
    const author = ctx.session.username
    const val = await delBlog(ctx.query.id, author)
    if (val) {
        ctx.body = new SuccessModel()
    } else {
        ctx.body = new ErrorModel('删除博客失败')
    }
})
module.exports = router

./routes/user.js

const router = require('koa-router')()
const { login } = require('../controller/user')
const { SuccessModel, ErrorModel } = require('../model/resModel')
// 前缀
router.prefix('/api/user')
// 路由的中间件必须是个 async 函数
router.post('/login', async function (ctx, next) {
    // 通过 request.body 获取
    const { username, password } = ctx.request.body
    const data = await login(username, password)
    if (data.username) {
        // 设置 session
        ctx.session.username = data.username
        ctx.session.realname = data.realname
        ctx.body = new SuccessModel()
        return
    }
        ctx.body = new ErrorModel('登录失败')
})
module.exports = router

四、联调

启动 redis,开启 nginx

后端:npm run dev

前端:http-server -p 8001

aa3a66073bac41edbe1db7c2b927bc04.png

34f3f283f6554d0f8b232cae6dbaa1a1.png

3c38e8562bd742d58e238ea884d39b87.png

五、日志

终端键入安装 koa-morgan

npm i koa-morgan

修改 app.js 文件

app.js

const path = require('path')
const fs = require('fs')
const morgan = require('koa-morgan')
......
// 日志记录
const ENV = process.env.NODE_ENV
if (ENV !== 'production') {
  // 开发环境 / 测试环境
  app.use(morgan('dev'))
} else {
  // 线上环境使用 combined(写入文件)
  const logFileName = path.join(__dirname, 'logs', 'access.log')
  const writeStream = fs.createWriteStream(logFileName, {
    flags: 'a'
  })
  app.use(morgan('combined', {
    stream: writeStream
  }));
}

同样的,修改 package.json 文件

package.json

"prd": "cross-env NODE_ENV=production nodemon ./bin/www"

npm run prd,运行文件,之后打开几个页面,查看 access.log 文件的内容

bba4ee41dbac4d0f9318ec49fa9edbe0.png

六、写在最后

至此,我们明白了 如何使用 Koa2 框架对我们的 myblog 项目进行进一步的重构(实现session、开发路由、联调、日志), 本系列文章暂告一段落!

如果你需要该项目的 源码,请通过本篇文章最下面的方式 加入 进来~~

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
23天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
17天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
18天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
1月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
58 4
|
1月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
1月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
32 2
|
JavaScript 前端开发 中间件
Node.js Web 开发框架大全《中间件篇》
  这篇文章与大家分享优秀的 Node.js 中间件模块。Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。
1185 6
|
Web App开发 前端开发 JavaScript
Node.js Web 开发框架大全《静态文件服务器篇》
  这篇文章与大家分享优秀的 Node.js 静态服务器模块。Node 是一个服务器端 JavaScript 解释器,它将改变服务器应该如何工作的概念。它的目标是帮助程序员构建高度可伸缩的应用程序,编写能够处理数万条同时连接到一个(只有一个)物理机的连接代码。
1024 0
|
1月前
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
32 2
2024年5月node.js安装(winmac系统)保姆级教程
|
1月前
|
存储 JavaScript 搜索推荐
Node框架的安装和配置方法
安装 Node 框架是进行 Node 开发的第一步,通过正确的安装和配置,可以为后续的开发工作提供良好的基础。在安装过程中,需要仔细阅读相关文档和提示,遇到问题及时解决,以确保安装顺利完成。
100 2