Einführung

Die Webentwicklung entwickelt sich ständig weiter und mit Tools wie Vite.js und React war die Erstellung schneller und reaktionsfähiger Front-End-Anwendungen noch nie so einfach. Aber was passiert, wenn Ihre App Inhalte von anderen Websites abrufen und anzeigen soll? Hier kommt Web Scraping ins Spiel, und heute werden wir eine Full-Stack-Anwendung erstellen, die genau das tut.

In diesem Tutorial erfahren Sie, wie Sie mit React für das Frontend und Node.js mit Cheerio für das Backend einen dynamischen Link-Vorschaugenerator erstellen. Dies ist ein fantastisches Projekt für Webentwickler, die Web Scraping erkunden und gleichzeitig mit modernen, effizienten Tools wie Vite und TypeScript arbeiten möchten.

Was Sie lernen werden:

• Einrichten eines Vite.js React-Projekts mit TypeScript
• Erstellen eines Node.js-Servers mit Express
• Axios und Cheerio für Web Scraping verwenden
• Erstellen einer Full-Stack-Anwendung in einem zusammenhängenden Projekt

1. Einrichten Ihres Projekts

Wir beginnen mit der Einrichtung der Projektstruktur. In diesem Tutorial werden das Frontend und das Backend im selben Projektverzeichnis untergebracht. Dieses Setup macht die Entwicklung unkompliziert und sorgt für die Organisation Ihres Projekts.

Beginnen Sie mit der Erstellung des ReactJS-Projekts mit ViteJS und verwenden Sie die Typescript-Vorlage

Erstellen des React-Frontends mit Vite.js

Als nächstes verwenden Sie Vite, um das React-Frontend mit TypeScript zu gerüsten:

pnpm create vite@latest

Dieser Befehl richtet mithilfe von
TypeScript ein neues React-Projekt in einem Verzeichnis Ihres Projekts ein. Navigieren Sie zum Ordner „Ihr Projekt“ und installieren Sie die Abhängigkeiten:

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

2. Einrichten des Node.js-Servers

Da das Frontend nun fertig ist, fahren wir mit der Erstellung eines Node.js-Servers fort. Erstellen Sie zunächst ein Serververzeichnis und initialisieren Sie ein Node.js-Projekt:

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

Sie benötigen Express für den Server, zusammen mit Axios zum Stellen von HTTP
-Anfragen, Cheerio zum Parsen von HTML, Body-Parser zum Abrufen des JSON-Bodys von
Anfrage und Cors zum Aktivieren von CORS für API:

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

3. Erstellen der Web Scraping API

Mit der Einrichtung des Backends können wir einen API-Endpunkt erstellen, der eine URL akzeptiert, deren Inhalt abruft und wichtige Metadaten wie Titel, Beschreibung und Bild extrahiert.

Hier ist die Grundstruktur des Servers in 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>

Dieser Code richtet einen einfachen Express-Server ein, der auf POST-Anfragen unter /api/preview wartet. Wenn eine Anfrage mit einer URL gestellt wird, ruft der Server den HTML-Inhalt dieser URL mit Axios ab und analysiert ihn mit Cheerio. Die Metadaten werden dann extrahiert und an den Client zurückgegeben.

4. Erstellen der Link-Vorschau-Komponente

Erstellen Sie in der React-App eine Komponente, die eine URL als Eingabe verwendet und die vom Backend abgerufene Vorschau anzeigt.

So können Sie die App-Komponente für die Handhabung des Link Preview Generators implementieren:

pnpm create vite@latest

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

Mit dieser Komponente können Benutzer eine URL eingeben, die dann an das Backend gesendet wird, um die Linkvorschau abzurufen und anzuzeigen.

5. Ausführen der Anwendung

Um die Anwendung auszuführen, müssen Sie schließlich sowohl den Frontend- als auch den Backend-Server starten:

Starten Sie den Node.js-Server:

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

Starten Sie das Vite React-Frontend:

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

Navigieren Sie zu http://localhost:5173 und Sie sehen Ihre App in Aktion, sodass Benutzer eine URL eingeben und eine Linkvorschau erstellen können.

Fazit

In diesem Tutorial haben wir die Leistungsfähigkeit von Vite.js, React, Node.js und Cheerio kombiniert, um eine Full-Stack-Anwendung zu erstellen, die Web-Scraping unterstützt. Unabhängig davon, ob Sie ein persönliches Projekt erstellen oder Ihrem Portfolio eine neue Fähigkeit hinzufügen möchten, ist es von unschätzbarem Wert zu verstehen, wie Frontend und Backend in ein einziges Projekt integriert werden.

Denken Sie daran: Obwohl Web Scraping ein leistungsstarkes Tool ist, ist es wichtig, es verantwortungsvoll zu nutzen. Respektieren Sie immer die Nutzungsbedingungen der Websites, die Sie durchsuchen, und berücksichtigen Sie die ethischen Auswirkungen.

Wenn Sie dieses Tutorial hilfreich fanden, vergessen Sie nicht, meinen Kanal zu abonnieren, um weitere Inhalte wie diesen zu erhalten, und hinterlassen Sie einen Kommentar, wenn Sie Fragen oder Vorschläge für zukünftige Tutorials haben.

Das obige ist der detaillierte Inhalt vonFull-Stack Web Scraping: Erstellen Sie Linkvorschauen mit Vite.js, React und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!