node.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > node.js > Node.js Express框架

Node.js中Express框架入门示例教程

作者：天天进步2015

Express.js是Node.js的轻量级Web框架,以简洁、灵活和高效著称,支持路由、中间件、模板引擎,适合快速构建Web应用和API,接下来通过本文给大家介绍Node.js中Express框架入门教程,感兴趣的朋友一起看看吧

什么是Express.js？

Express.js是Node.js最受欢迎的Web应用框架之一，被称为"快速、开放、极简的Web框架"。它为构建Web应用程序和API提供了一套丰富的功能，同时保持了轻量级和灵活性。

为什么选择Express？

环境准备

在开始之前，确保您的系统已安装：

检查安装版本：

node --version
npm --version

安装Express

创建新项目

# 创建项目目录
mkdir my-express-app
cd my-express-app
# 初始化npm项目
npm init -y
# 安装Express
npm install express

使用Express生成器（可选）

# 全局安装Express生成器
npm install -g express-generator
# 创建项目
express --view=ejs my-app
cd my-app
npm install

创建第一个Express应用

让我们创建一个简单的"Hello World"应用：

基础示例

// app.js
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}`);
});

运行应用：

node app.js

访问 http://localhost:3000，您将看到"Hello World!"消息。

路由基础

路由决定了应用程序如何响应客户端对特定端点的请求。

HTTP方法

// GET请求
app.get('/users', (req, res) => {
  res.send('获取用户列表');
});
// POST请求
app.post('/users', (req, res) => {
  res.send('创建新用户');
});
// PUT请求
app.put('/users/:id', (req, res) => {
  res.send(`更新用户 ${req.params.id}`);
});
// DELETE请求
app.delete('/users/:id', (req, res) => {
  res.send(`删除用户 ${req.params.id}`);
});

路由参数

// 路径参数
app.get('/users/:id', (req, res) => {
  const userId = req.params.id;
  res.send(`用户ID: ${userId}`);
});
// 多个参数
app.get('/users/:userId/posts/:postId', (req, res) => {
  const { userId, postId } = req.params;
  res.json({ userId, postId });
});
// 查询参数
app.get('/search', (req, res) => {
  const { q, page, limit } = req.query;
  res.json({ query: q, page, limit });
});

路由模式匹配

// 通配符
app.get('/ab*cd', (req, res) => {
  res.send('匹配 abcd, abxcd, abRANDOMcd 等');
});
// 可选参数
app.get('/products/:id?', (req, res) => {
  if (req.params.id) {
    res.send(`产品ID: ${req.params.id}`);
  } else {
    res.send('所有产品');
  }
});

中间件详解

中间件是Express的核心概念，它是在请求-响应循环中执行的函数。

应用级中间件

// 全局中间件
app.use((req, res, next) => {
  console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
  next(); // 调用next()继续执行下一个中间件
});
// 特定路径的中间件
app.use('/api', (req, res, next) => {
  console.log('API请求');
  next();
});

内置中间件

// 解析JSON请求体
app.use(express.json());
// 解析URL编码的请求体
app.use(express.urlencoded({ extended: true }));
// 提供静态文件服务
app.use(express.static('public'));

第三方中间件

# 安装常用中间件
npm install morgan cors helmet compression
const morgan = require('morgan');
const cors = require('cors');
const helmet = require('helmet');
const compression = require('compression');
// 日志中间件
app.use(morgan('combined'));
// 启用CORS
app.use(cors());
// 安全中间件
app.use(helmet());
// 压缩响应
app.use(compression());

错误处理中间件

// 错误处理中间件必须有四个参数
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({
    error: '服务器内部错误',
    message: err.message
  });
});

模板引擎

Express支持多种模板引擎，如EJS、Pug、Handlebars等。

使用EJS

npm install ejs
// 设置模板引擎
app.set('view engine', 'ejs');
app.set('views', './views');
// 渲染模板
app.get('/profile/:name', (req, res) => {
  res.render('profile', { 
    username: req.params.name,
    title: '用户资料'
  });
});

创建模板文件 views/profile.ejs：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1>欢迎, <%= username %>!</h1>
    <p>这是您的个人资料页面。</p>
</body>
</html>

完整示例：简单的博客API

const express = require('express');
const app = express();
const port = 3000;
// 中间件
app.use(express.json());
app.use(express.static('public'));
// 模拟数据
let posts = [
  { id: 1, title: '第一篇文章', content: '这是第一篇文章的内容' },
  { id: 2, title: '第二篇文章', content: '这是第二篇文章的内容' }
];
// 获取所有文章
app.get('/api/posts', (req, res) => {
  res.json(posts);
});
// 获取特定文章
app.get('/api/posts/:id', (req, res) => {
  const post = posts.find(p => p.id === parseInt(req.params.id));
  if (!post) {
    return res.status(404).json({ error: '文章未找到' });
  }
  res.json(post);
});
// 创建新文章
app.post('/api/posts', (req, res) => {
  const { title, content } = req.body;
  if (!title || !content) {
    return res.status(400).json({ error: '标题和内容不能为空' });
  }
  const newPost = {
    id: posts.length + 1,
    title,
    content
  };
  posts.push(newPost);
  res.status(201).json(newPost);
});
// 更新文章
app.put('/api/posts/:id', (req, res) => {
  const postIndex = posts.findIndex(p => p.id === parseInt(req.params.id));
  if (postIndex === -1) {
    return res.status(404).json({ error: '文章未找到' });
  }
  const { title, content } = req.body;
  posts[postIndex] = { ...posts[postIndex], title, content };
  res.json(posts[postIndex]);
});
// 删除文章
app.delete('/api/posts/:id', (req, res) => {
  const postIndex = posts.findIndex(p => p.id === parseInt(req.params.id));
  if (postIndex === -1) {
    return res.status(404).json({ error: '文章未找到' });
  }
  posts.splice(postIndex, 1);
  res.status(204).send();
});
// 错误处理
app.use((req, res) => {
  res.status(404).json({ error: '页面未找到' });
});
app.listen(port, () => {
  console.log(`博客API运行在 http://localhost:${port}`);
});

最佳实践

项目结构建议

my-app/
├── public/          # 静态文件
├── views/           # 模板文件
├── routes/          # 路由模块
├── middleware/      # 自定义中间件
├── models/          # 数据模型
├── controllers/     # 控制器
├── config/          # 配置文件
├── app.js          # 主应用文件
└── package.json

路由模块化

// routes/users.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res) => {
  res.send('用户列表');
});
router.get('/:id', (req, res) => {
  res.send(`用户ID: ${req.params.id}`);
});
module.exports = router;
// 在主应用中使用
const userRoutes = require('./routes/users');
app.use('/users', userRoutes);

环境配置

// 使用环境变量
const port = process.env.PORT || 3000;
const env = process.env.NODE_ENV || 'development';
if (env === 'development') {
  app.use(morgan('dev'));
}

下一步学习

掌握了Express基础后，您可以继续学习：

总结

Express.js是一个功能强大而又简洁的Web框架，非常适合快速构建Web应用程序和API。通过掌握路由、中间件、模板引擎等核心概念，您就能够开发出功能丰富的Web应用。

记住Express的哲学：保持简单，但提供足够的灵活性让开发者能够构建复杂的应用程序。随着经验的积累，您将能够利用Express的强大功能构建更加复杂和优雅的Web解决方案。

相关资源

到此这篇关于Node.js中Express框架入门教程的文章就介绍到这了,更多相关Node.js Express框架内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文