【Node.js实战】一文带你开发博客项目之初识Express(安装Express,处理路由,中间件机制)

简介: 【Node.js实战】一文带你开发博客项目之初识Express(安装Express,处理路由,中间件机制)

一、前言

前面我们已经使用原生的 node.js 完成了 myblog 博客项目。


接下来,我们使用 express 框架来重构我们的 myblog 项目…


二、express

1、安装 express

使用脚手架(express-generator)


首先,我们全局安装脚手架

npm install express-generator -g

使用脚手架生成名为 blog-express 的项目

express blog-express

bbadc894d86140ffa10efe8f3f480d96.png

之后我们安装依赖

npm install

再之后,我们就可以启动它了

npm start

我们访问 localhost:3000 端口

6826501d5a194344af001b8c60c3ecce.png

下面我们安装一下 nodemon

npm i nodemon cross-env --save-dev

给 package.json 添加一行(实时监听,不用再次启动)

  "scripts": {
    ...
    "dev": "cross-env NODE_ENV=dev nodemon ./bin/www"
  },

那么我们便可以使用 npm run dev 来启动项目了


2、express 处理路由

express 已经为我们封装好了路由,我们直接拿来简单配置一下就可以

04f583f7b6124a5c8460e4cba9df1db2.png

我们可以参照 index.js 的代码,稍加修改即可

blog.js

我们首先配置一下博客列表和博客详情的路由(GET请求)

var express = require('express');
var router = express.Router();
// 博客列表
router.get('/list', function(req, res, next) {
  res.json({
    errno: 0,
    data: [1, 2, 3]
  })
});
// 博客详情
router.get('/detail', function(req, res, next) {
  res.json({
    errno: 0,
    data: 'OK'
  })
});
module.exports = router;

user.js

我们再来配置一下登录的路由(POST请求)

var express = require('express');
var router = express.Router();
// 登录
router.post('/login', function (req, res, next) {
    const { username, password } = req.body
    res.json({
        errno: 0,
        data: {
            username,
            password
        }
    })
});
module.exports = router;

app.js

在 app.js 文件中添加刚刚配置的路由

const blogRouter = require('./routes/blog')
const userRouter = require('./routes/user')
...
app.use('/api/blog', blogRouter);
app.use('/api/user', userRouter);

接下来,我们来进行一下 GET 和 POST 请求的测试

8b7b41c4bef84f39842971e71f729ca5.png

6d6ed26cebf941a9a12865f1ed39c749.png

c91b73443d1b43e3b4c78283ac597992.png

3、中间件机制

中间件主要是指封装所有Http请求细节处理的方法


express 中间件函数,帮助拆解主程序的业务逻辑,并且每一个的中间件函数处理的结果都会传递给下一个中间件函数


首先,我们来做一个小 demo


我们在根目录创建 express-test 文件,在当前目录下初始化

npm init -y

修改 package.json 文件下的主文件

"main": "app.js",

之后创建 app.js 文件,并安装 express(注意:没有使用到脚手架,因为此处仅做测试介绍中间件)

npm i express

af395533b3e1465388f8f1397a753242.png

app.js

我们编写一些 http 请求,理解一下 next() 的作用(根据请求方式和路径进行匹配执行)

const express = require('express')
// 本次 http 请求的实例
const app = express()
app.use((req, res, next) => {
    console.log('请求开始...', req.method, req.url)
    next()
})
app.use((req, res, next) => {
    // 假设在处理 cookie
    req.cookie = {
        userId: 'abc123'
    }
    next()
})
app.use((req, res, next) => {
    // 假设处理 post data
    // 异步
    setTimeout(() => {
        req.body = {
            a: 100,
            b: 200
        }
        next()
    })
})
app.use('/api', (req, res, next) => {
    console.log('处理 /api 路由')
    next()
})
app.get('/api', (req, res, next) => {
    console.log('get /api 路由')
    next()
})
app.post('/api', (req, res, next) => {
    console.log('post /api 路由');
    next()
})
app.get('/api/get-cookie', (req, res, next) => {
    console.log('get /api/get-cookie');
    res.json({
        errno: 0,
        data: req.cookie
    })
})
app.post('/api/get-post-data', (req, res, next) => {
    console.log('post /api/get-post-data');
    res.json({
        errno: 0,
        data: req.body
    })
})
app.use((req, res, next) => {
    console.log('处理 404');
    res.json({
        errno: -1,
        msg: '404 not found'
    })
})
app.listen(3000, () => {
    console.log('server is running on port 3000');
})

3c283e63328849efbcbd223943e005de.png

b9e30e97a9ea44b58f76c9b8d6429c58.png

f64a72f586ef485b8d6a30e6c72035b0.png

三、写在最后

至此,我们明白了 如何安装Express,如何处理路由以及什么是中间件机制 继续跟进学习吧!


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


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


45fc82a82c6542bdb2ff4986377d8db3.png

相关文章
|
2月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
18天前
|
JavaScript 安全 中间件
深入浅出Node.js中间件机制
【10月更文挑战第36天】在探索Node.js的奥秘之旅中,中间件的概念如同魔法一般,它让复杂的请求处理变得优雅而高效。本文将带你领略这一机制的魅力,从概念到实践,一步步揭示如何利用中间件简化和增强你的应用。
|
1月前
|
消息中间件 JavaScript 中间件
深入浅出Node.js中间件机制
【10月更文挑战第24天】在Node.js的世界里,中间件如同厨房中的调料,为后端服务增添风味。本文将带你走进Node.js的中间件机制,从基础概念到实际应用,一探究竟。通过生动的比喻和直观的代码示例,我们将一起解锁中间件的奥秘,让你轻松成为后端料理高手。
28 1
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
2月前
|
SQL JavaScript 关系型数据库
node博客小项目:接口开发、连接mysql数据库
【10月更文挑战第14天】node博客小项目:接口开发、连接mysql数据库
|
2月前
|
SQL 前端开发 JavaScript
Nest.js 实战 (十五):前后端分离项目部署的最佳实践
这篇文章介绍了如何使用现代前端框架Vue3和后端Node.js框架Nest.js实现的前后端分离架构的应用,并将其部署到生产环境。文章涵盖了准备阶段,包括云服务器的设置、1Panel面板的安装、数据库的安装、域名的实名认证和备案、SSL证书的申请。在部署Node服务环节,包括了Node.js环境的创建、数据库的配置、用户名和密码的设置、网站信息的填写、静态网站的部署、反向代理的配置以及可能遇到的常见问题。最后,作者总结了部署经验,并希望对读者有所帮助。
157 11
|
2月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
25天前
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
42 0
|
2月前
|
前端开发 JavaScript API
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
JavaScript逆向爬取实战——使用Python实现列表页内容爬取(一)
|
2月前
|
前端开发 网络协议
Nest.js 实战 (十四):如何获取客户端真实 IP
这篇文章介绍了在Nest.js应用中获取客户端真实IP地址的问题及解决方法。问题出现在使用本地代理时,请求的IP地址总是返回::1或::ffff:127.0.0.1。为解决这个问题,需要确保代理服务器正确设置转发头如X-Forwarded-For或X-Real-IP,后端服务能够读取这些头信息来确定客户端的IP地址。文章以作者自己的OpenResty应用为例,展示了如何通过配置反向代理和设置X-Forwarded-For头来获取真实IP地址,并提供了相关的代码示例。最后,文章提到了使用这个解决方案后的实际效果,例如在操作日志中记录真实IP地址。