全端網頁抓取：使用 Vite.js、React 和 Node.js 建立連結預覽

簡介

Web 開發不斷發展，借助 Vite.js 和 React 等工具，創建快速且響應靈敏的前端應用程式從未如此簡單。但是，當您需要應用程式從其他網站獲取和顯示內容時會發生什麼？這就是網頁抓取的用武之地，今天，我們將建立一個完整的堆疊應用程式來實現這一點。

在本教程中，您將學習如何使用 React 作為前端，使用 Node.js 和 Cheerio 作為後端來建立動態連結預覽產生器。對於想要在使用 Vite 和 TypeScript 等現代高效工具的同時探索網頁抓取的 Web 開發人員來說，這是一個很棒的專案。

您將學到什麼：

• 使用 TypeScript 設定 Vite.js React 專案
• 使用 Express 建立 Node.js 伺服器
• 使用 Axios 和 Cheerio 進行網頁抓取
• 在一個有凝聚力的專案中建立全端應用程式

1.設定您的項目

我們將從設定專案結構開始。在本教程中，前端和後端將位於同一專案目錄中。這種設置使開發變得簡單，並使您的專案保持井井有條。

先使用 ViteJS 建立 ReactJS 專案並使用 Typescript 範本

使用 Vite.js 建立 React 前端

接下來，使用 Vite 透過 TypeScript 建立 React 前端：

pnpm create vite@latest

此指令使用
TypeScript 在您的專案目錄中設定一個新的 React 專案。導航到您的專案資料夾並安裝依賴項：

<span>cd your-project<br>pnpm install</span>

2.設定 Node.js 伺服器

現在前端已準備就緒，讓我們繼續建立 Node.js 伺服器。首先建立一個伺服器目錄並初始化一個 Node.js 專案：

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

您需要 Express 作為伺服器，需要 Axios 來發出 HTTP
請求，Cheerio 來解析 HTML，body-parser 來從
請求中獲取 JSON 正文，以及 cors 來為 API 啟用 CORS：

npm install express axios cheerio <span>body-parser cors</span>

3.建立網頁抓取 API

設定後端後，我們可以建立一個 API 端點，它接受 URL、取得其內容並提取關鍵元數據，如標題、描述和圖像。

這是index.ts中伺服器的基本結構：

<span>// index.js<br><br>const express = require("express");<br>const bodyParser = require("body-parser");<br>const cors = require("cors");<br><br>const { getUrlPreview } = require("./url.controller");<br><br>const app = express();<br>const PORT = process.env.SERVER_PORT || 5005;<br><br>app.use(bodyParser.json());<br>app.use(cors());<br><br>app.get("/health", (<span>req, res) =></span> {<br>  return res.status(200).json({ status: "Server Running" });<br>});<br>app.post("/preview", getUrlPreview);<br><br>app.listen(PORT, () => {<br>  console.log("Server is running: %s", PORT);<br>});</span>

<span>// url.controller.js<br><br>const axios = require("axios");<br>const cheerio = require("cheerio");<br>const { object, string, ValidationError } = require("yup");<br><br>const schema = object({<br>  url: string().url().required(),<br>});<br><br>const getUrlPreview = async (req, res) => {<br>  try {<br>    const value = await schema.validate(req.body);<br><br>    const { data } = await axios.get(value.url);<br>    const $ = cheerio.load(data);<br><br>    const title =<br>      $('meta[property="og:title"]').attr("content") || $("title").text();<br>    const description =<br>      $('meta[property="og:description"]').attr("content") ||<br>      $('meta[property="description"]').attr("content");<br>    const image =<br>      $('meta[property="og:image"]').attr("content") ||<br>      $("img").first().attr("src");<br><br>    const previewData = {<br>      title: title || "No title available",<br>      description: description || "No description available",<br>      image: image || "No image available",<br>    };<br><br>    return res.status(200).json(previewData);<br>  } catch (err) {<br>    if (err instanceof ValidationError) {<br>      return res.status(422).send(err.message);<br>    }<br><br>    console.log(err);<br><br>    return res.status(500).send("Something went wrong!");<br>  }<br>};<br><br>module.exports = {<br>  getUrlPreview,<br>};</span>

此程式碼設定了一個簡單的 Express 伺服器，用於偵聽 /api/preview 處的 POST 請求。當使用 URL 發出請求時，伺服器使用 Axios 來取得該 URL 的 HTML 內容並使用 Cheerio 解析它。然後元資料被提取並返回給客戶端。

4.建立連結預覽元件

在 React 應用程式中，建立一個元件，該元件將 URL 作為輸入並顯示從後端取得的預覽。

以下是如何實作應用程式元件來處理連結預覽產生器：

pnpm create vite@latest

<span>cd your-project<br>pnpm install</span>

該元件允許使用者輸入 URL，然後將其發送到後端以獲取並顯示連結預覽。

5.運行應用程式

最後，要運行應用程序，您需要啟動前端和後端伺服器：

啟動 Node.js 伺服器：

<span>cd ..<br>mkdir server<br>cd server<br>pnpm init</span>

啟動 Vite React 前端：

npm install express axios cheerio <span>body-parser cors</span>

導航至 http://localhost:5173，您將看到您的應用程式正在運行，允許使用者輸入 URL 並產生連結預覽。

結論

在本教程中，我們結合了 Vite.js、React、Node.js 和 Cheerio 的強大功能，創建了一個能夠進行網頁抓取的全棧應用程式。無論您是想建立個人專案還是為您的作品集添加新技能，了解如何將前端和後端整合到單一專案中都是非常寶貴的。

請記住，雖然網頁抓取是一個強大的工具，但負責任地使用它也很重要。始終尊重您抓取的網站的服務條款，並考慮道德影響。

如果您發現本教學有幫助，請不要忘記訂閱我的頻道以獲取更多此類內容，如果您對未來的教程有任何問題或建議，請發表評論。

以上是全端網頁抓取：使用 Vite.js、React 和 Node.js 建立連結預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章！