使用 Node.js、Express 和 React 构建强大的 API

了解如何使用 Node.js、Express 和 React 创建一个强大且动态的 API。这个综合指南将引导你从设置开发环境开始，到集成 React 前端，并利用 APIPost 进行高效的 API 测试。无论你是初学者还是经验丰富的开发者，这篇文章都适合你。

今天，我们将深入探索 Node.js、Express 和 React 的精彩世界。无论你是经验丰富的程序员还是刚入门的开发者，本博客将引导你使用这些流行的技术构建一个强大的 API。我们将从基础开始，逐步设置开发环境，了解这些工具是如何协同工作的。此外，我们还将展示如何利用 APIPost 让你的工作更加轻松。所以，拿起你最爱的编程小零食，跟着我们一起开始吧！

为什么选择 Node.js、Express 和 React？

在开始编写代码之前，让我们先讨论一下为什么这些技术值得你关注。

Node.js

Node.js 是一个让你在服务器端运行 JavaScript 的运行时环境。它基于 Chrome 的 V8 JavaScript 引擎，具有高效快速的特点。使用 Node.js，你可以构建可扩展的网络应用程序，处理多个请求，同时使用单一的编程语言（JavaScript）进行客户端和服务器端开发。

Express

Express 是一个轻量级且灵活的 Node.js Web 应用框架。它为构建 Web 和移动应用程序提供了一套强大的功能。使用 Express，你可以轻松地设置服务器、管理路由并处理 HTTP 请求和响应。它是许多 Node.js 应用程序的核心，与 React 配合使用时效果尤为出色。

React

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 和一个社区维护。React 允许你创建可重用的 UI 组件，并高效地管理应用程序的状态。与 Node.js 和 Express 配合使用时，你可以轻松构建动态、响应式的 Web 应用程序。

设置开发环境

让我们开始设置开发环境，以下是逐步指南：

1. 安装 Node.js：前往 Node.js 官网 下载最新版本，并根据操作系统的要求进行安装。
2. 安装 npm：npm（Node 包管理器）是与 Node.js 一起安装的。你可以通过在终端中运行 npm -v 来检查它是否已经安装。
3. 创建新项目：为你的项目创建一个新目录，并在终端中进入该目录。运行 npm init 初始化一个新的 Node.js 项目，按照提示创建一个 package.json 文件。
4. 安装 Express：运行 npm install express 安装 Express。
5. 安装 React：使用 Create React App 来设置一个新的 React 项目。运行 npx create-react-app client 在 client 目录中创建一个新的 React 应用。
6. 安装 APIPost：为了简化 API 开发和测试，我们将使用 APIPost。你可以从 APIPost 官网 免费下载并进行集成。

使用 Node.js 和 Express 构建 API

环境设置好之后，让我们用 Node.js 和 Express 构建一个简单的 API。

第一步：设置 Express 服务器

在项目的根目录中创建一个名为 server.js 的文件，并添加以下代码来设置一个基础的 Express 服务器：

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

在终端中运行 node server.js。你应该看到 "Server running at http://localhost:3000"。然后打开浏览器并访问 http://localhost:3000，你会看到 "Hello World!"。

第二步：创建 API 路由

接下来，我们来创建一些 API 路由。在 server.js 文件中，添加以下代码来创建一个返回书籍列表的简单 API：

const books = [
  { id: 1, title: '1984', author: 'George Orwell' },
  { id: 2, title: 'To Kill a Mockingbird', author: 'Harper Lee' },
  { id: 3, title: 'The Great Gatsby', author: 'F. Scott Fitzgerald' }
];

app.get('/api/books', (req, res) => {
  res.json(books);
});

现在，当你访问 http://localhost:3000/api/books 时，会看到一个包含书籍列表的 JSON 响应。

第三步：连接数据库

为了使我们的 API 更加动态，我们将连接一个数据库。在本示例中，我们使用 MongoDB。首先，通过运行 npm install mongoose 安装 Mongoose。

创建一个名为 db.js 的新文件，并添加以下代码以连接到 MongoDB：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost:27017/library', {
  useNewUrlParser: true,
  useUnifiedTopology: true
});

const db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', () => {
  console.log('Connected to MongoDB');
});

module.exports = db;

在 server.js 文件中，引入 db.js 文件以连接数据库：

const db = require('./db');

接下来，我们创建一个 Mongoose 模型来存储书籍。创建一个名为 book.js 的新文件，并添加以下代码：

const mongoose = require('mongoose');

const bookSchema = new mongoose.Schema({
  title: String,
  author: String,
});

const Book = mongoose.model('Book', bookSchema);

module.exports = Book;

在 server.js 文件中，更新 /api/books 路由以从数据库中获取书籍：

const Book = require('./book');

app.get('/api/books', async (req, res) => {
  const books = await Book.find();
  res.json(books);
});

现在，你可以在 MongoDB 数据库中添加、更新和删除书籍，并且 API 将动态反映这些更改。

将 React 与 Node.js 和 Express 集成

现在我们已经设置好了 API，让我们将其与 React 前端集成。

第一步：设置代理

为了让 React 前端向 API 发出请求，我们需要设置代理。打开 client/package.json 文件，添加以下内容：

"proxy": "http://localhost:3000"

第二步：从 API 获取数据

在你的 React 应用中，让我们创建一个组件来从 API 获取数据并显示它。打开 client/src/App.js 文件，并将其内容替换为以下代码：

import React, { useEffect, useState } from 'react';
import './App.css';

function App() {
  const [books, setBooks] = useState([]);

  useEffect(() => {
    fetch('/api/books')
      .then(response => response.json())
      .then(data => setBooks(data));
  }, []);

  return (
    <div className="App">
      <h1>Books</h1>
      <ul>
        {books.map(book => (
          <li key={book.id}>{book.title} by {book.author}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在 client 目录中运行 npm start 启动 React 开发服务器，你应该能看到从 API 获取到的书籍列表显示在页面上。

使用 APIPost 进行高效的 API 测试

API 开发离不开适当的测试。APIPost 通过其用户友好的界面和强大的功能简化了测试过程。通过使用 APIPost，你可以快速测试你的端点、验证响应并自动化测试过程。访问 APIPost 官网 下载并将其集成到你的 API 开发工作流中，享受更加流畅高效的体验。

1. 设置 APIPost 📋

利用 APIPost 测试和比较优化前后的网页加载时间，帮助你有效识别性能改进。

curl -w "@curl-format.txt" -o /dev/null -s "https://apipost.example.com/page"

2. 分析响应时间 📉

在优化前后，测量并记录响应时间，以量化性能提升。这一步可以突出优化如何改善加载速度。

3. 使用 CI/CD 自动化测试 ⚙️

将 APIPost 集成到你的持续集成/持续部署（CI/CD）管道中，持续监控页面加载性能，快速识别回归问题。确保在所有更新中，性能始终保持最佳。

示例 curl-format.txt:

apipost run "https://open.apipost.cn/open/ci/automated_testing?ci_id=MjE4MDIzMzg1MTk5MTY1NDQwOjEwMjUzNjYzNTA2NjIwNDE5OjEzMTI1Nzk3MzQyMzcxODk5&token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoyMTgwMjMzODUxMTUyNzkzNjAsImlzcyI6ImFwaXBvc3QiLCJleHAiOjE3MjYyOTI2MzJ9.429eP2JlEApWAWCCK6zqy3HoKYHPNRq7LK95xde-Tro" -r html

通过将 APIPost 纳入你的工具链，你可以确保网页始终具有卓越的性能，为用户提供流畅高效的体验。

结论

恭喜！你已经成功使用 Node.js、Express 和 React 构建了一个强大的 API。你学会了如何设置开发环境、创建 API 路由、连接数据库以及将 React 集成到后端中。同时，你也了解了如何利用 APIPost 简化 API 测试。

记住，这只是一个开始。你可以通过添加身份验证、实现更复杂的路由和增强前端功能来扩展和优化你的应用。祝编程愉快！