使用 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 應用程序。

設置開發環境

讓我們開始設置開發環境，以下是逐步指南：

安裝 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 納入你的工具鏈，你可以確保網頁始終具有卓越的性能，為用戶提供流暢高效的體驗。