Express.js 框架简介
Express.js 是 Node.js 中最流行的 Web 应用框架,它提供了一系列强大的功能来帮助开发者构建 Web 和移动应用程序。下面我将通过一个简单的示例来展示 Express 的基本用法。
实现思路
我将创建一个简单的 Express 服务器,包含以下功能:
基本路由处理
静态文件服务
中间件使用
模板引擎渲染
代码实现
html
* {
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;
}
}
Node.js Web 应用框架
快速、极简、灵活的 Node.js Web 框架
什么是 Express?
Express 是一个基于 Node.js 平台的极简、灵活的 Web 应用开发框架,它提供了一系列强大的特性来帮助创建各种 Web 和移动应用。
核心特性:
- 简化了路由处理
- 集成了视图渲染支持
- 包含大量中间件
- 高性能和可扩展性
- 庞大的生态系统
基本用法
下面是一个简单的 Express 应用程序示例:
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}`);
});
中间件概念
Express 应用本质上是一系列中间件函数的调用。
常见中间件:
- express.json() - 解析 JSON 请求体
- express.urlencoded() - 解析 URL 编码的请求体
- express.static() - 提供静态文件服务
- morgen - HTTP 请求日志记录
路由示例
Express 提供了直观的路由定义方法:
// 基本路由
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('用户创建成功');
});
// 这里只是展示前端代码,实际的Express应用运行在Node.js环境中
console.log("这是一个前端页面,实际Express应用运行在服务器端");
Express.js 的关键特点
轻量且灵活:Express 不强制任何特定的项目结构,让开发者可以根据需要自由组织代码。
中间件架构:通过中间件处理请求和响应,可以轻松添加各种功能。
路由系统:提供了强大的路由机制,可以定义各种 HTTP 方法和路径的处理程序。
模板引擎集成:支持多种模板引擎(如 Pug、EJS、Handlebars)。
错误处理:提供了方便的错误处理机制。
Express.js 是构建 Node.js Web 应用程序的事实标准,许多其他框架(如 Feathers、Sails 等)都是基于 Express 构建的。