Pengikisan Web Tindanan Penuh: Buat Pratonton Pautan dengan Vite.js, React dan Node.js

Pengenalan

Pembangunan web sentiasa berkembang dan dengan alatan seperti Vite.js dan React, mencipta aplikasi bahagian hadapan yang pantas dan responsif tidak pernah semudah ini. Tetapi apakah yang berlaku apabila anda memerlukan apl anda untuk mengambil dan memaparkan kandungan daripada tapak web lain? Di sinilah pengikisan web masuk dan hari ini, kami akan membina aplikasi tindanan penuh yang melakukan perkara itu.

Dalam tutorial ini, anda akan belajar cara mencipta penjana pratonton pautan dinamik menggunakan React untuk bahagian hadapan dan Node.js dengan Cheerio untuk bahagian belakang. Ini ialah projek yang hebat untuk pembangun web yang ingin meneroka pengikisan web sambil bekerja dengan alatan moden dan cekap seperti Vite dan TypeScript.

Apa yang Anda Akan Pelajari:

• Menyediakan projek Vite.js React dengan TypeScript
• Mencipta pelayan Node.js dengan Express
• Menggunakan Axios dan Cheerio untuk mengikis web
• Membina aplikasi tindanan penuh dalam satu projek padu

1. Menyediakan Projek Anda

Kami akan mulakan dengan menyediakan struktur projek. Dalam tutorial ini, bahagian hadapan dan bahagian belakang akan ditempatkan dalam direktori projek yang sama. Persediaan ini menjadikan pembangunan mudah dan memastikan projek anda teratur.

Mulakan dengan mencipta projek ReactJS dengan ViteJS dan gunakan templat Typescript

Membuat React Frontend dengan Vite.js

Seterusnya, gunakan Vite untuk mengasah bahagian hadapan React dengan TypeScript:

pnpm create vite@latest

Arahan ini menyediakan projek React baharu dalam direktori projek anda, menggunakan
TypeScript. Navigasi ke folder projek anda dan pasang kebergantungan:

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

2. Menyediakan Pelayan Node.js

Sekarang bahagian hadapan sudah sedia, mari kita teruskan untuk mencipta pelayan Node.js. Mulakan dengan mencipta direktori pelayan dan memulakan projek Node.js:

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

Anda memerlukan Express untuk pelayan, bersama-sama dengan Axios untuk membuat HTTP
permintaan, Cheerio untuk menghurai HTML, body-parser untuk mengambil JSON body daripada
permintaan dan cors untuk mendayakan CORS untuk API:

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

3. Membina Web Scraping API

Dengan persediaan bahagian belakang, kami boleh membuat titik akhir API yang menerima URL, mengambil kandungannya dan mengekstrak metadata utama seperti tajuk, perihalan dan imej.

Berikut ialah struktur asas pelayan dalam 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>

Kod ini menyediakan pelayan Express ringkas yang mendengar permintaan POST di /api/preview. Apabila permintaan dibuat dengan URL, pelayan mengambil kandungan HTML URL tersebut menggunakan Axios dan menghuraikannya dengan Cheerio. Metadata kemudiannya diekstrak dan dikembalikan kepada pelanggan.

4. Mencipta Komponen Pratonton Pautan

Dalam apl React, buat komponen yang akan mengambil URL sebagai input dan memaparkan pratonton yang diambil dari bahagian belakang.

Begini cara anda boleh melaksanakan komponen Apl untuk mengendalikan Penjana Pratonton Pautan:

pnpm create vite@latest

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

Komponen ini membenarkan pengguna memasukkan URL, yang kemudiannya dihantar ke bahagian belakang untuk mengambil dan memaparkan pratonton pautan.

5. Menjalankan Aplikasi

Akhir sekali, untuk menjalankan aplikasi, anda perlu memulakan pelayan bahagian hadapan dan bahagian belakang:

Mulakan pelayan Node.js:

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

Mulakan bahagian hadapan Vite React:

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

Navigasi ke http://localhost:5173, dan anda akan melihat apl anda sedang beraksi, membenarkan pengguna memasukkan URL dan menjana pratonton pautan.

Kesimpulan

Dalam tutorial ini, kami menggabungkan kuasa Vite.js, React, Node.js dan Cheerio untuk mencipta aplikasi tindanan penuh yang mampu mengikis web. Sama ada anda ingin membuat projek peribadi atau menambah kemahiran baharu pada portfolio anda, memahami cara mengintegrasikan bahagian hadapan dan bahagian belakang dalam satu projek adalah tidak ternilai.

Ingat, walaupun pengikisan web adalah alat yang berkuasa, anda perlu menggunakannya secara bertanggungjawab. Sentiasa menghormati syarat perkhidmatan tapak web yang anda cari dan pertimbangkan implikasi etika.

Jika anda mendapati tutorial ini membantu, jangan lupa untuk melanggan saluran saya untuk lebih banyak kandungan seperti ini dan berikan ulasan jika anda mempunyai sebarang soalan atau cadangan untuk tutorial akan datang.

Atas ialah kandungan terperinci Pengikisan Web Tindanan Penuh: Buat Pratonton Pautan dengan Vite.js, React dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!