【Node.js实战】一文带你开发博客项目之初识Express（安装Express，处理路由，中间件机制）-阿里云开发者社区

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

2023-06-16 265

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

一、前言

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

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

二、express

1、安装 express

使用脚手架（express-generator）

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

npm install express-generator -g

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

express blog-express

之后我们安装依赖

npm install

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

npm start

我们访问 localhost:3000 端口

下面我们安装一下 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 已经为我们封装好了路由，我们直接拿来简单配置一下就可以

我们可以参照 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 请求的测试

3、中间件机制

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

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

首先，我们来做一个小 demo

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

npm init -y

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

"main": "app.js",

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

npm i express

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');
})