全栈网页抓取：使用 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中文网其他相关文章！