【Node.js实战】一文带你开发博客项目之Express重构(初始化环境,处理 session,连接 redis)

本文涉及的产品
Redis 开源版,标准版 2GB
推荐场景:
搭建游戏排行榜
云数据库 Tair(兼容Redis),内存型 2GB
全局流量管理 GTM,标准版 1个月
简介: 【Node.js实战】一文带你开发博客项目之Express重构(初始化环境,处理 session,连接 redis)

一、前言

前面我们学习了如何安装 Express,并初步理解了什么是中间件机制。

接下来,我们再回到我们的 myblog 博客项目中,去重构和完善我们的功能…

二、初始化环境

1、安装 mysql 和 xxs

终端键入:

npm i mysql
npm i xss

2、迁移文件

我们原生node.js的工作并没有白做。接下来,我们把之前写的代码初步迁移到 Express 版本的 myblog 博客项目中

82c3eead5c7b4e40bac2345e5d7bf647.png

3、修改 blog.js 文件

我们首先在查询上(/list)做点东西(呈现出 list 的内容)…

blog.js

var express = require('express');
var router = express.Router();
// 导入博客和用户控制器相关内容
const {
  getList,
  getDetail,
  newBlog,
  updateBlog,
  delBlog
} = require('../controller/blog')
// 导入成功和失败的模型
const {
  SuccessModel,
  ErrorModel
} = require('../model/resModel')
// 博客列表
router.get('/list', function (req, res, next) {
  // 博客的作者,req.query 用在 GET 请求中
  let author = req.query.author || ''
  // 博客的关键字
  const keyword = req.query.keyword || ''
  // 查询的结果
  const result = getList(author, keyword)
  return result.then(listData => {
    res.json(
      new SuccessModel(listData)
    )
  })
});
// 博客详情
router.get('/detail', function (req, res, next) {
  res.json({
    errno: 0,
    data: 'OK'
  })
});
module.exports = router;

5baff0cf89c44748892ebe7aa9fd7d89.png

三、Express 处理 session

1、安装 express-session

使用 express-session 和 connect-redis,简单方便

req.session 保存登录信息,登录校验做成 express 中间件

我们在控制台安装 express-session

npm i express-session

2、测试 session

之后在 app.js 中导入和使用 session

app.js

const session = require('express-session')
....
app.use(cookieParser());
// 解析完 cookie,我们解析 session
app.use(session({
  secret: 'QianDuan2023', // 密匙
  cookie: {
    // path: '/', // 根目录(默认配置)
    // httpOnly: true, // 只能后端操作 cookie(默认配置)
    maxAge: 24 * 60 * 60 * 1000 // 小时,分钟,秒,毫秒
  }
}))

之后,在 user.js 中测试一下当前用户的状态存储(每次刷新记录一次)

user.js

router.get('/session-test', (req, res, next) => {
    const session = req.session
    if (session.viewNum == null) {
        session.viewNum = 0
    }
    session.viewNum++
    res.json({
        viewNum: session.viewNum
    })
})

8edfec14ed034db18260ffc733014cc6.png

四、session 连接 redis

1、登录测试

我们使用 /login-test 进行登录测试

user.js

验证登录的逻辑

var express = require('express');
var router = express.Router();
const {
    login
} = require('../controller/user')
const {
    SuccessModel,
    ErrorModel
} = require('../model/resModel')
router.post('/login', function (req, res, next) {
    // post 接口都是从 req.body 中获取
    const {
        username,
        password
    } = req.body
    // 传入两个参数 用户名 密码
    const result = login(username, password)
    return result.then(data => {
        if (data.username) {
            // 设置 session
            req.session.username = data.username
            req.session.realname = data.realname
            res.json(
                new SuccessModel()
            )
            return
        }
        res.json(
            ErrorModel('登录失败')
        )
    })
});
router.get('/login-test', (req, res) => {
    if (req.session.username) {
        res.json({
            errno: 0,
            msg: '已登录'
        })
        return
    }
    res.json({
        errno: -1,
        msg: '未登录'
    })
})
module.exports = router;

f2dec058d99b427d84bd474358123291.png

e8ca5d1fe2cc4d83a5bf124aa85bccf1.png

2、使用 connect-redis 插件

终端键入安装

npm i redis connect-redis

在 db 文件夹下创建 redis.js 文件,定义连接对象

redis.js

const redis = require('redis')
const {
    REDIS_CONF
} = require('../conf/db.js')
// 创建客户端
const redisClient = redis.createClient({
    url: `redis://${REDIS_CONF.host}:${REDIS_CONF.port}`,
    legacyMode: true
})
// 连接
redisClient.connect()
    .then(() => console.log('redis connect sucess!'))
    .catch(console.error)
module.exports = redisClient

3、session 连接 redis

接下来,我们修改 app.js 文件,完成 session 和 redis 的连接

app.js

const RedisStore = require('connect-redis')(session)
......
// 获取到 redisClient
const redisClient = require('./db/redis')
const sessionStore = new RedisStore({
  client: redisClient
})
// 解析完 cookie,我们解析 session
app.use(session({
  secret: 'QianDuan2023', // 密匙
  cookie: {
    // path: '/', // 根目录(默认配置)
    // httpOnly: true, // 只能后端操作 cookie(默认配置)
    maxAge: 24 * 60 * 60 * 1000 // 小时,分钟,秒,毫秒
  },
  // 把 session 存储到 redis 里
  store: sessionStore,
  resave: false,
  saveUninitialized: false
}))

f29e48bd82164abcb322a6433f303fb4.png

三、写在最后

至此,我们明白了 如何使用 Express 框架对我们的 myblog 项目进行初步的重构, 继续跟进学习吧!


后续会对该项目进行多次重构【多种框架(express,koa)和数据库(mysql,sequelize,mongodb)】


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

45fc82a82c6542bdb2ff4986377d8db3.png

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore     ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库 ECS 实例和一台目标数据库 RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
3天前
|
前端开发 API 开发者
Next.js 实战 (五):添加路由 Transition 过渡效果和 Loading 动画
这篇文章介绍了Framer Motion,一个为React设计的动画库,提供了声明式API处理动画和页面转换,适合创建响应式用户界面。文章包括首屏加载动画、路由加载Loading、路由进场和退场动画等主题,并提供了使用Framer Motion和next.js实现这些动画的示例代码。最后,文章总结了这些效果,并邀请读者探讨更好的实现方案。
|
29天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
23天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
24天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
2月前
|
Web App开发 JSON JavaScript
Node.js 中的中间件机制与 Express 应用
Node.js 中的中间件机制与 Express 应用
|
2月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
37 2
|
3月前
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
4月前
|
Web App开发 JavaScript 前端开发
构建高效后端服务:Node.js与Express框架的实战指南
【9月更文挑战第6天】在数字化时代的潮流中,后端开发作为支撑现代Web和移动应用的核心,其重要性不言而喻。本文将深入浅出地介绍如何使用Node.js及其流行的框架Express来搭建一个高效、可扩展的后端服务。通过具体的代码示例和实践技巧,我们将探索如何利用这两个强大的工具提升开发效率和应用性能。无论你是后端开发的新手还是希望提高现有项目质量的老手,这篇文章都将为你提供有价值的见解和指导。
|
5月前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
2月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。