Jos verkkosivusto ei tarjoa hyvää sovellusliittymää, seuraavaksi paras vaihtoehto on raaputtaa sen sisältö. Cheerio ja Express.js auttavat sinua tekemään juuri sen.

Web-kaappaus on tekniikka, jonka avulla on mahdollista saada tietoja tietystä verkkosivustosta. Verkkosivustot käyttävät HTML-koodia sisällön kuvaamiseen. Jos HTML on puhdas ja semanttinen, sitä on helppo käyttää hyödyllisen tiedon etsimiseen.

Käytät yleensä verkkokaavinta tietojen hankkimiseen ja seuraamiseen sekä tulevien muutosten seuraamiseen.

jQuery-konseptit, jotka kannattaa tietää ennen Cheerion käyttöä

jQuery on yksi suosituimmista olemassa olevista JavaScript-paketeista. Se helpottaa työskentelyä Document Object Model (DOM), käsittele tapahtumia, animaatioita ja paljon muuta. Cheerio on web-kaappauspaketti, joka rakentuu jQueryn päälle – jakaa saman syntaksin ja API: n ja helpottaa HTML- tai XML-dokumenttien jäsentämistä.

Ennen kuin opit käyttämään Cheerioa, on tärkeää tietää, kuinka valita HTML-elementtejä jQuerylla. Onneksi jQuery tukee useimpia CSS3-valitsimia, mikä helpottaa elementtien nappaamista DOM: sta. Katso seuraava koodi:

instagram viewer 

$("#container");

Yllä olevassa koodilohkossa jQuery valitsee elementit id "säiliöstä". Samanlainen toteutus tavallisella vanhalla JavaScriptillä näyttäisi tältä:

document.querySelectorAll("#container");

Vertaamalla kahta viimeistä koodilohkoa voit nähdä, että entinen koodilohko on paljon helpompi lukea kuin jälkimmäinen. Se on jQueryn kauneus.

jQueryllä on myös hyödyllisiä menetelmiä, kuten teksti(), html()ja paljon muuta, mikä mahdollistaa HTML-elementtien käsittelyn. On olemassa useita menetelmiä, joilla voit kulkea DOM: n läpi, kuten vanhempi(), sisarukset(), edellinen(), ja Seuraava().

The jokainen () jQuery-menetelmä on erittäin suosittu monissa Cheerio-projekteissa. Sen avulla voit iteroida objekteja ja taulukoita. Syntaksi kohteelle jokainen () menetelmä näyttää tältä:

$().each(<arrayorobject>, callback)

Yllä olevassa koodilohkossa soita takaisin suoritetaan jokaiselle taulukon tai objektiargumentin iteraatiolle.

Ladataan HTML: ää Cheeriolla

Voit aloittaa HTML- tai XML-tietojen jäsentämisen Cheeriolla käyttämällä cheerio.load() menetelmä. Katso tämä esimerkki:

const $ = cheerio.load('
Hello, world!
');
console.log($('h1').text())

Tämä koodilohko käyttää jQueryä teksti() menetelmä hakee tekstin sisällön h1 elementti. Koko syntaksi kohteelle ladata() menetelmä näyttää tältä:

load(content, options, mode)

The sisältö parametri viittaa todellisiin HTML- tai XML-tietoihin, jotka välität ladata() menetelmä. vaihtoehtoja on valinnainen objekti, joka voi muuttaa menetelmän käyttäytymistä. Oletuksena ladata() menetelmä esittelee html, pää, ja kehon elementtejä, jos ne puuttuvat. Jos haluat lopettaa tämän toiminnan, varmista, että asetat sen tila vääräksi.

Hakkeriuutisten kaapiminen Cheerion kanssa

Tässä projektissa käytetty koodi on saatavilla a GitHub-arkisto ja sen käyttö on ilmaista MIT-lisenssin alaisena.

On aika yhdistää kaikki tähän mennessä oppimasi ja luoda yksinkertainen verkkokaavin. Hacker News on suosittu verkkosivusto yrittäjille ja innovoijille. Se on myös täydellinen verkkosivusto web-kaappaustaitojen hyödyntämiseen, koska se latautuu nopeasti, sillä on hyvin yksinkertainen käyttöliittymä, eikä se näytä mainoksia.

Varmista, että sinulla on Node.js ja Node Package Manager käynnissä koneellasi. Luo tyhjä kansio ja sitten a package.json tiedosto ja lisää seuraava JSON tiedoston sisään:

{
"name": "web-scraper",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "nodemon index.js"
 },
"author": "",
"license": "MIT",
"dependencies": {
"cheerio": "^1.0.0-rc.12",
"express": "^4.18.2"
 },
"devDependencies": {
"nodemon": "^3.0.1"
 }
}

Kun olet tehnyt tämän, avaa pääte ja suorita:

npm i

Tämän pitäisi asentaa tarvittavat riippuvuudet, joita tarvitset kaavin rakentamiseen. Nämä paketit sisältävät Cheerio HTML: n jäsentämiseen, ExpressJS palvelimen luomiseen ja kehitysriippuvuutenaNodemon, apuohjelma, joka kuuntelee muutoksia projektissa ja käynnistää palvelimen automaattisesti uudelleen.

Asioiden määrittäminen ja tarvittavien toimintojen luominen

Luo an index.js tiedosto ja luo kyseiseen tiedostoon vakiomuuttuja nimeltä "PORT". Aseta PORT 5500 (tai mikä tahansa valitsemasi numero), tuo sitten Cheerio- ja Express-paketit vastaavasti.

const PORT = 5500;
const cheerio = require("cheerio");
const express = require("express");
const app = express();

Määritä seuraavaksi kolme muuttujaa: url, html, ja valmis sivu. Aseta url Hacker Newsin URL-osoitteeseen.

const url = 'https://news.ycombinator.com';
let html;
let finishedPage;

Luo nyt funktio nimeltä getHeader() joka palauttaa HTML-koodin, joka selaimen tulee hahmontaa.

functiongetHeader(){
return`

Luo toinen toiminto getScript() joka palauttaa jonkin verran JavaScriptiä selaimen suorittamista varten. Varmista, että syötät muuttujan tyyppi argumenttina, kun sitä kutsut.

functiongetScript(type){
return`