Express 4.x实战:中间件、RESTful API与项目生成
Express 是 Node.js 生态中最流行的 Web 框架,基于内置 http 模块封装了更简洁的 API 和强大的中间件机制。本文从基础用法入手,逐步深入到中间件链、RESTful 接口设计以及使用 express-generator 快速搭建项目,所有代码均基于 Express 4.x 版本。一、Express 基础与请求/响应对象
安装 Express 4.x:
npm install express@4
创建最简服务器(监听 52273 端口):
const express = require('express');
const app = express();
app.listen(52273, () => {
console.log('服务器监听地址是 http://127.0.0.1:52273');
});
1. 响应对象 response
response.send() 会根据传入参数类型自动返回合适格式:
- 字符串 → HTML
- 数组/对象 → JSON
示例:返回一个数组,浏览器自动收到 JSON:
app.use((req, res) => {
let output = [];
for (let i = 0; i < 3; i++) {
output.push({ count: i, name: 'name - ' + i });
}
res.send(output);
});
2. 请求对象 request
常用属性:params(路由参数)、query(URL 查询变量)、headers(请求头)。
示例:根据 User-Agent 判断浏览器类型:
app.use((req, res) => {
let agent = req.header('User-Agent');
if (agent.toLowerCase().match(/chrome/)) {
res.send('<h1>*_*欢迎使用谷歌浏览器</h1>');
} else {
res.send('<h1>^_^您使用的不是谷歌浏览器,当然这并不影响浏览网页</h1>');
}
});
二、中间件机制
Express 中间件通过 app.use() 注册,格式:app.use( callback[, callback])。多个中间件通过 next() 串联执行。
示例:中间件传递变量:
app.use((req, res, next) => {
req.number = 20;
res.number = 35;
next();
});
app.use((req, res) => {
res.send('<h1 style="color:green">' + req.number + ' : ' + res.number + '</h1>');
});
常用中间件:
- router:处理路由
- static:托管静态文件
- morgan:日志
- cookie-parser:处理 Cookie
- body-parser:解析 POST 请求体
1. router 中间件
取代 http 模块中的 if-else 路由判断,直接用 app.get()/app.post() 等。
路由参数示例:
app.get('/page/:id', (req, res) => {
let name = req.params.id;
res.send('<h2 style="color:red">' + name + ' Page</h2>');
});
2. static 中间件(内置)
用于托管图片、CSS、JS 等静态文件:
app.use(express.static(__dirname + '/image'));
// 之后可直接通过路径访问 /image 下的文件,例如 /82.jpg
3. cookie-parser 中间件
先安装:
npm install cookie-parser
设置无签名中间件,读写 Cookie:
const cookieParser = require('cookie-parser');
app.use(cookieParser());
app.get('/', (req, res) => {
res.cookie('string', 'cookie');
res.cookie('json', { name: 'cookie', property: 'delicious' });
res.send(req.cookies);
});
4. body-parser 中间件
用于解析 POST 请求体(如 form 提交),需安装:
npm install body-parser
常用方法:bodyParser.urlencoded({ extended: false }) 用于解析 application/x-www-form-urlencoded 数据;bodyParser.json() 解析 JSON。
登录验证综合示例(使用 cookie-parser + body-parser + 文件读取):
const fs = require('fs');
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
let app = express();
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.get('/', (req, res) => {
if (req.cookies.auth) {
res.send('<h1 style="color:red;text-align: center">登录成功</h1>');
} else {
res.redirect('/login');
}
});
app.get('/login', (req, res) => {
fs.readFile('login.html', (err, data) => {
res.send(data.toString());
});
});
app.post('/login', (req, res) => {
let login = req.body.login;
let pass = req.body.pass;
if (login == 'mingrisoft' && pass == '123456') {
res.cookie('auth', true);
res.redirect('/');
} else {
res.redirect('/login');
}
});
app.listen(52273);
login.html 文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<form method="post">
<fieldset style="width: 250px;margin: 0 auto;padding:20px">
<legend style="color:#ff5722">管理员登录</legend>
<table>
<tr>
<td><label for="user">账 号:</label></td>
<td><input type="text" name="login" id="user"/></td>
</tr>
<tr height="40">
<td><label for="pass">密 码:</label></td>
<td><input type="password" name="pass" id="pass"/></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" style="background: #41d7ea;width: 85px;height: 25px;border: 1px solid #e0ac5e;outline: none;border-radius: 5px;"/>
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
三、实现 RESTful Web 服务
按照 RESTful 规范,对同一资源(如用户 /user)使用不同的 HTTP 方法实现 CRUD。以下使用虚拟数据库(内存 JSON 数组)演示。
虚拟数据库模块 db.js:
module.exports = (function() {
let DummyDB = {};
let storage = [];
let count = 1;
DummyDB.get = (id) => {
if (id) {
id = (typeof id == 'string') ? Number(id) : id;
for (let i in storage) {
if (storage.id == id) return storage;
}
} else {
return storage;
}
};
DummyDB.insert = (data) => {
data.id = count++;
storage.push(data);
return data;
};
DummyDB.remove = (id) => {
id = (typeof id == 'string') ? Number(id) : id;
for (let i in storage) {
if (storage.id == id) {
storage.splice(i, 1);
return true;
}
}
return false;
};
return DummyDB;
})();
主服务文件(引入 db.js、cookie-parser、body-parser):
const fs = require('fs');
const express = require('express');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const DummyDB = require('./db.js');
let app = express();
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
// 查询所有用户
app.get('/user', (req, res) => {
res.send(DummyDB.get());
});
// 查询指定用户
app.get('/user/:id', (req, res) => {
res.send(DummyDB.get(req.params.id));
});
// 添加用户页面
app.get('/addUser', (req, res) => {
fs.readFile('addUser.html', (err, data) => {
res.send(data.toString());
});
});
// 提交添加用户
app.post('/addUser', (req, res) => {
let name = req.body.name;
let pass = req.body.pass;
if (name && pass) {
res.send(DummyDB.insert({ name: name, pass: pass }));
} else {
throw new Error('error');
}
});
// 删除用户
app.delete('/user/:id', (req, res) => {
if (DummyDB.remove(req.params.id)) {
res.send('删除成功');
} else {
res.send('删除失败');
}
});
app.listen(52273, () => {
console.log('服务器监听地址是 http://127.0.0.1:52273');
});
addUser.html 表单内容:
<form method="post">
<fieldset>
<legend>登录账户</legend>
用户名:<input type="text" name="name"/><br/>
密 码:<input type="password" name="pass"/><br/>
<input type="submit" value="提交"/>
</fieldset>
</form>
四、使用 express-generator 快速搭建项目
express-generator 是官方应用生成器,可快速创建项目骨架。安装:
npm install -g express-generator
创建项目:
cd /path/to/projects
express my_project
执行后控制台会提示下一步:安装依赖并启动。
cd my_project
npm install
npm start
生成的项目默认包含 package.json、app.js、views 目录(使用模板引擎)、public 静态资源目录等,省去手动搭建基础结构的繁琐。
总结
Express 4.x 通过简洁的 API 和灵活的中间件体系,让 Node.js Web 开发效率大幅提升。掌握 request/response 对象、中间件链、路由设计以及常见第三方中间件(cookie-parser、body-parser)即可应对多数后端场景。结合 RESTful 风格和 express-generator,能快速构建可维护的 API 服务。
Re: Express 4.x实战:中间件、RESTful API与项目生成
非常实用的教程,感谢楼主分享!中间件链和cookie-parser+body-parser组合的例子很清晰,我正好在做一个登录功能,跟着代码试了一下,已经跑起来了。有个小问题想确认一下:示例中`fs.readFile('login.html', ...)`读取的是项目根目录下的文件吗?需不需要特殊配置路径?Re: Express 4.x实战:中间件、RESTful API与项目生成
感谢楼主的详细教程!代码很清晰,从基础到中间件都有实战例子,尤其是 cookie-parser 和 body-parser 的登录验证示例,很实用。请问能再补充一下 express-generator 的具体用法和生成的项目结构吗?Re: Express 4.x实战:中间件、RESTful API与项目生成
感谢分享!教程结构清晰,代码示例也很直观,尤其中间件传递变量的例子一下子就看懂了。有个小问题想请教:Express 4.16+ 好像已经内置了 `express.json()` 和 `express.urlencoded()`,现在还是推荐额外装 `body-parser` 吗?另外标题里提到了 RESTful API 和项目生成,正文好像还没到那部分,楼主后续会继续吗?期待更新!
页:
[1]