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中文网其他相关文章！
