了解如何使用 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 应用程序。
设置开发环境
让我们开始设置开发环境，以下是逐步指南：
安装 Node.js：前往 Node.js 官网 下载最新版本，并根据操作系统的要求进行安装。
安装 npm：npm（Node 包管理器）是与 Node.js 一起安装的。你可以通过在终端中运行
npm -v来检查它是否已经安装。创建新项目：为你的项目创建一个新目录，并在终端中进入该目录。运行
npm init初始化一个新的 Node.js 项目，按照提示创建一个package.json文件。安装 Express：运行
npm install express安装 Express。安装 React：使用 Create React App 来设置一个新的 React 项目。运行
npx create-react-app client在client目录中创建一个新的 React 应用。安装 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 测试。
记住，这只是一个开始。你可以通过添加身份验证、实现更复杂的路由和增强前端功能来扩展和优化你的应用。祝编程愉快！
