nodejs爬取视频网页信息并使用

最新推荐文章于 2024-03-29 20:24:51 发布

fgnfhg

最新推荐文章于 2024-03-29 20:24:51 发布

阅读量1.4k

点赞数

文章标签： node.js

本文链接：https://blog.csdn.net/fgnfhg/article/details/122061393

版权

一、安装资源包

npm install art-template

npm install request

npm install cheerio

引入包

const request = require('request')
const template = require('art-template')
const fs = require('fs')
const cheerio = require('cheerio')

二、获取网页源码，并提取需要数据

//封装异步获取网页源码函数，返回Promise对象
const RP = (url) => { 
    return new Promise((resolve, reject) => {
        request(url, function(error, response, body) {
            resolve(body)//获取网页源代码
        })
    })
}

async function main() {
    var data = [] //存放多页源码
    var arr = []//保存提取的数据
    const host = 'https://www.zhenbuka3.com'
    var s = 0
    var j = 1  //从s-j页
    for (i=s;i<j;i++) {
        const url = `/vodtype/1-${i+1}/`
        data += await RP(host + url)    
    }

网页地址栏的变化为1-1, 1-2, 1-3…, 所以每次获取网页的数据，只需要改变一个值。

S为起始页, j为尾页，可根据需要获取页数。使用await 将返回的Promise对象数据存入data中，

data中存入j-s页的数据。

    const $ = cheerio.load(data)
    $('.stui-vodlist__thumb').each((i, item) => {
        arr[i] = {
            name: $(item).attr('title'),
            image: $(item).attr('data-original'),
            url: host + $(item).attr('href'),
            information: "",
            number: i
        }
    })
    $('.stui-vodlist__detail p').each((i, item) => {
        arr[i].information = $(item).text()
    });

为抓取需要的数据，用cheerio模块创建一个和jQuery选择器用法相似的选择器。抓取 ‘名称’，’图片’，’地址’，’信息’，’序号’，以对象的形式放入数组中，由于’信息’与其他数据不在同一个选择器中，所以在后面添加进对象中。

三、使用引擎模板，用获取到的数组替换设定div

fs.readFile('本地初始html文件.html', function(error, data2) {
            var div = ''
            var add = `
            {{div}}
        `
            var ret = ''
            for (var i = 0; i < arr.length; ++i) {
                    div = `
            <div class="li"><a href={{url}} target="blank">
                <img src={{image}} alt=""></a>
                <div class="h6">{{name}}</div>
                <div class="span">{{information}}</div>
            </div>`
                ret +=  template.render(div, arr[i])
            }

使用art-template模板引擎，用arr数组中的对象替换掉div中的数据，ret存放多组div。

四、用处理后的div替换本地html页面

            var rets = ret + add    //为字符串添加{{div}}
            var html = data2.toString()
            var res = html.replace('{{div}}', rets)
            fs.writeFile('本地初始html文件.html', res, function(error) {
                if (error) {
                     console.log('写入错误')
                }
            })
        })
}
main()

将rets数据写入本地html页面，是用替换的方式，将本地html中的标识{{div}}替换为ret,为方便程序还能持续使用，还得在本地html页面中添加标识{{div}}，留待下次替换。最后将处理完毕的本地html页面写入本地html文件。

执行该js文件后，打开本地html页面执行，就能获得如下效果：

本地初始html文件源码：

<style>
        .li {
            width: 20%;
            height: 20%;
            float:left;
            position: relative;
            margin-top: 1%;
            margin-bottom: 1%;
        }
        img {
            position: relative;
            width: 60%;
            height: 17vw;
            background-size: auto;
            left: 20%;
        }
        .h6 {
            margin-bottom: 0px;
            margin-top: 2px;
            width: 60%;
            min-height: 19px;
            font-size: 13px;
            margin-left:20%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .span {
            width: 60%;
            margin-bottom: 0px;
            margin-left:20%;
            min-height: 19px;
            font-size: 11px;
            overflow: hidden;
            color:rgb(92, 91, 91);
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    </style>
<body>
    <div>           
     {{div}}
</div>
</body>