簡介

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

在本教程中，您將學(xué)習(xí)如何使用 React 作為前端，使用 Node.js 和 Cheerio 作為後端來建立動態(tài)連結(jié)預(yù)覽產(chǎn)生器。對於想要在使用 Vite 和 TypeScript 等現(xiàn)代高效工具的同時探索網(wǎng)頁抓取的 Web 開發(fā)人員來說，這是一個很棒的專案。

您將學(xué)到什麼：

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

1.設(shè)定您的項目

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

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

使用 Vite.js 建立 React 前端

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

pnpm create vite@latest

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

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

2.設(shè)定 Node.js 伺服器

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

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

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

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

3.建立網(wǎng)頁抓取 API

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

這是index.ts中伺服器的基本結(jié)構(gòu)：

<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>

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

4.建立連結(jié)預(yù)覽元件

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

以下是如何實作應(yīng)用程式元件來處理連結(jié)預(yù)覽產(chǎn)生器：

pnpm create vite@latest

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

該元件允許使用者輸入 URL，然後將其發(fā)送到後端以獲取並顯示連結(jié)預(yù)覽。

5.運行應(yīng)用程式

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

啟動 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>

導(dǎo)航至 http://localhost:5173，您將看到您的應(yīng)用程式正在運行，允許使用者輸入 URL 並產(chǎn)生連結(jié)預(yù)覽。

結(jié)論

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

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

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

以上是全端網(wǎng)頁抓?。菏褂?Vite.js、React 和 Node.js 建立連結(jié)預(yù)覽的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！