Express.js 框架简介
Express.js 是 Node.js 中最流行的 Web 应用框架，它提供了一系列强大的功能来帮助开发者构建 Web 和移动应用程序。下面我将通过一个简单的示例来展示 Express 的基本用法。
实现思路
我将创建一个简单的 Express 服务器，包含以下功能：
基本路由处理
静态文件服务
中间件使用
模板引擎渲染
代码实现
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express.js 框架简介</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
padding: 20px;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
}
header {
text-align: center;
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 2px solid #f0f0f0;
}
h1 {
color: #4a4a4a;
margin-bottom: 10px;
}
.subtitle {
color: #666;
font-size: 1.2em;
}
.logo {
font-size: 3em;
margin-bottom: 20px;
color: #323232;
}
.content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.card {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
h2 {
color: #5a5a5a;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eaeaea;
}
h3 {
margin: 15px 0 10px;
color: #6a6a6a;
}
ul {
list-style-type: none;
margin: 15px 0;
}
li {
margin-bottom: 8px;
padding-left: 20px;
position: relative;
}
li:before {
content: "•";
color: #0078d7;
position: absolute;
left: 0;
}
code {
background: #272822;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
display: block;
overflow-x: auto;
margin: 15px 0;
font-family: 'Fira Code', monospace;
font-size: 0.9em;
}
.inline-code {
background: #e8e8e8;
color: #d63384;
padding: 2px 6px;
border-radius: 3px;
font-family: 'Fira Code', monospace;
}
.footer {
text-align: center;
margin-top: 30px;
color: #888;
font-size: 0.9em;
}
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">Express.js</div>
<h1>Node.js Web 应用框架</h1>
<p class="subtitle">快速、极简、灵活的 Node.js Web 框架</p>
</header>
<div class="content">
<div class="card">
<h2>什么是 Express？</h2>
<p>Express 是一个基于 Node.js 平台的极简、灵活的 Web 应用开发框架，它提供了一系列强大的特性来帮助创建各种 Web 和移动应用。</p>
<h3>核心特性：</h3>
<ul>
<li>简化了路由处理</li>
<li>集成了视图渲染支持</li>
<li>包含大量中间件</li>
<li>高性能和可扩展性</li>
<li>庞大的生态系统</li>
</ul>
</div>
<div class="card">
<h2>基本用法</h2>
<p>下面是一个简单的 Express 应用程序示例：</p>
<code>const express = require('express');
const app = express();
const port = 3000;
// 基本路由
app.get('/', (req, res) => {
res.send('Hello World!');
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});</code>
</div>
<div class="card">
<h2>中间件概念</h2>
<p>Express 应用本质上是一系列中间件函数的调用。</p>
<h3>常见中间件：</h3>
<ul>
<li><span class="inline-code">express.json()</span> - 解析 JSON 请求体</li>
<li><span class="inline-code">express.urlencoded()</span> - 解析 URL 编码的请求体</li>
<li><span class="inline-code">express.static()</span> - 提供静态文件服务</li>
<li><span class="inline-code">morgen</span> - HTTP 请求日志记录</li>
</ul>
</div>
<div class="card">
<h2>路由示例</h2>
<p>Express 提供了直观的路由定义方法：</p>
<code>// 基本路由
app.get('/api/users', (req, res) => {
res.json([{name: '张三'}, {name: '李四'}]);
});
// 带参数的路由
app.get('/api/users/:id', (req, res) => {
const userId = req.params.id;
res.json({id: userId, name: '王五'});
});
// POST 请求处理
app.post('/api/users', (req, res) => {
// 创建新用户
res.status(201).send('用户创建成功');
});</code>
</div>
</div>
<div class="footer">
<p>Express.js - 最受欢迎的 Node.js Web 框架 | 自 2010 年发布以来一直是 Node.js 生态系统的重要组成部分</p>
</div>
</div>
<script>
// 这里只是展示前端代码，实际的Express应用运行在Node.js环境中
console.log("这是一个前端页面，实际Express应用运行在服务器端");
</script>
</body>
</html>
Express.js 的关键特点
轻量且灵活：Express 不强制任何特定的项目结构，让开发者可以根据需要自由组织代码。
中间件架构：通过中间件处理请求和响应，可以轻松添加各种功能。
路由系统：提供了强大的路由机制，可以定义各种 HTTP 方法和路径的处理程序。
模板引擎集成：支持多种模板引擎（如 Pug、EJS、Handlebars）。
错误处理：提供了方便的错误处理机制。
Express.js 是构建 Node.js Web 应用程序的事实标准，许多其他框架（如 Feathers、Sails 等）都是基于 Express 构建的。