Web 開發不斷發展，借助 Vite.js 和 React 等工具，創建快速且響應靈敏的前端應用程式從未如此簡單。但是，當您需要應用程式從其他網站獲取和顯示內容時會發生什麼？這就是網頁抓取的用武之地，今天，我們將建立一個完整的堆疊應用程式來實現這一點。
在本教程中，您將學習如何使用 React 作為前端，使用 Node.js 和 Cheerio 作為後端來建立動態連結預覽產生器。對於想要在使用 Vite 和 TypeScript 等現代高效工具的同時探索網頁抓取的 Web 開發人員來說，這是一個很棒的專案。
我們將從設定專案結構開始。在本教程中，前端和後端將位於同一專案目錄中。這種設置使開發變得簡單，並使您的專案保持井井有條。
先使用 ViteJS 建立 ReactJS 專案並使用 Typescript 範本
接下來，使用 Vite 透過 TypeScript 建立 React 前端：
pnpm create vite@latest
此指令使用
TypeScript 在您的專案目錄中設定一個新的 React 專案。導航到您的專案資料夾並安裝依賴項：
<span>cd your-project<br>pnpm install</span>
現在前端已準備就緒，讓我們繼續建立 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>
設定後端後，我們可以建立一個 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 解析它。然後元資料被提取並返回給客戶端。
在 React 應用程式中，建立一個元件，該元件將 URL 作為輸入並顯示從後端取得的預覽。
以下是如何實作應用程式元件來處理連結預覽產生器：
pnpm create vite@latest
<span>cd your-project<br>pnpm install</span>
該元件允許使用者輸入 URL，然後將其發送到後端以獲取並顯示連結預覽。
最後，要運行應用程序，您需要啟動前端和後端伺服器：
啟動 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中文網其他相關文章！
