用js写个爬虫

最新推荐文章于 2024-06-04 18:48:02 发布

qingshandaijason

最新推荐文章于 2024-06-04 18:48:02 发布

阅读量6.3k

点赞数 7

文章标签： nodejs js javascript html

本文链接：https://blog.csdn.net/qingshandaijason/article/details/116145395

版权

如何用js完成爬虫项目

前言
一、node.js的安装
二、mysql的安装
三、确定爬取网页
四、查看分析网页源码
五、开始写爬虫
到这里爬虫已经差不多写好了
六、构建网站访问数据库中爬取到的内容

前言

这是我第一次尝试写爬虫，爬虫代码肯定有很多地方写得不太好，不过思路大致是这个样子，之后我还会做些优化。
在这里我用的vscode写的一个新闻网站的爬虫。
可以自行安装vscode。
开始之前还要做些准备工作。

一、node.js的安装

Windows下https://nodejs.org/ 官网下载安装最新的LTS版本。
MAC OS下载相应的pkg包安装。
Linux下载tar.gz包解压运行。
特殊linux版本或者嵌入式系统（比如树莓派系统）可下载源码编译。
具体安装例子见：
https://www.runoob.com/nodejs/nodejs-install-setup.html

二、mysql的安装

https://dev.mysql.com/downloads/mysql/
在这里下载安装包后将其解压到c:\mysql文件夹。
然后以管理员身份打开命令行。
在这里插入图片描述
然后自己动手安装配置好后就可以开始使用了
进入mysql后可创建一个数据库crawl,然后再创建一个表fetches。
新建文件fetches.sql。

然后就可以拷贝到命令行里。

三、确定爬取网页

我选取的是新华网http://www.xinhuanet.com/

四、查看分析网页源码

在该新闻网页右键查看源代码。
如：
分析我们需要爬取的内容。

五、开始写爬虫

npm···

在这里插入图片描述
我们需要先在终端输入npm i request npm i cheerio npm i iconv-lite npm i data-utils；
来安装这些我们需要的包。

下面就是爬虫里我们要引用的包
代码如下（示例）：

var fs = require('fs');
var myRequest = require('request')//获取网页内容
var myCheerio = require('cheerio')//筛选网页信息
var myIconv = require('iconv-lite')
require('date-utils');

Node调用mysql

npm install mysql;

创建mysql.js文件

代码如下（示例）：

var mysql = require("mysql");
var pool = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
    password: 'root',
    database: 'crawl'
});
var query = function(sql, sqlparam, callback) {
    pool.getConnection(function(err, conn) {
        if (err) {
            callback(err, null, null);
        } else {
            conn.query(sql, sqlparam, function(qerr, vals, fields) {
                conn.release(); //释放连接 
                callback(qerr, vals, fields); //事件驱动回调 
            });
        }
    });
};
var query_noparam = function(sql, callback) {
    pool.getConnection(function(err, conn) {
        if (err) {
            callback(err, null, null);
        } else {
            conn.query(sql, function(qerr, vals, fields) {
                conn.release(); //释放连接 
                callback(qerr, vals, fields); //事件驱动回调 
            });
        }
    });
};
exports.query = query;
exports.query_noparam = query_noparam;

定义要访问的网站

var source_name = "新华网";
var myEncoding = "utf-8";
var seedURL = 'http://www.xinhuanet.com/';

定义新闻页面里具体的元素的读取方式

定义哪些url可以作为新闻页面


var seedURL_format = "$('a')";
var keywords_format = " $('meta[name=\"keywords\"]').eq(0).attr(\"content\")";
var title_format = "$('title').text()";
var author_format = "$('.editor').text()";
var content_format = "$('.left_zw').text()";
var date_format = "$('.info').text()";
var desc_format = " $('meta[name=\"description\"]').eq(0).attr(\"content\")";
var source_format = "$('#source_baidu').text()";
var url_reg = /\d{4}-\d{2}\/\d{2}\//;
var regExp = /((\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2})|(\d{4}年\d{1,2}月\d{1,2}日)/

url_reg后面的正则表达式可以根据新闻网页链接的特征表示。
我这里通过链接上有年月日的时间这个特征来表示的。

构造一个模仿浏览器的request

//request模块异步fetch url
function request(url, callback) {
    var options = {
        url: url,
        encoding: null,
        //proxy: 'http://x.x.x.x:8080',
        headers: headers,
        timeout: 10000 //
    }
    myRequest(options, callback)
}

读取种子页面

解析出种子页面里所有的链接

request(seedURL, function (err, res, body) { //读取种子页面
    // try {
    //用iconv转换编码
    var html = myIconv.decode(body, myEncoding);
    //console.log(html);
    //准备用cheerio解析html
    var $ = myCheerio.load(html, { decodeEntities: true });
    // } catch (e) { console.log('读种子页面并转码出错：' + e) };

    var seedurl_news;

    try {
        seedurl_news = eval(seedURL_format);
        //console.log(seedurl_news);
    } catch (e) { console.log('url列表所处的html块识别出错：' + e) };

遍历种子页面里所有的链接

规整化所有链接，如果符合新闻URL的正则表达式就爬取

request(seedURL, function (err, res, body) { //读取种子页面
    // try {
    //用iconv转换编码
    var html = myIconv.decode(body, myEncoding);
    //console.log(html);
    //准备用cheerio解析html
    var $ = myCheerio.load(html, { decodeEntities: true });
    // } catch (e) { console.log('读种子页面并转码出错：' + e) };

    var seedurl_news;

    try {
        seedurl_news = eval(seedURL_format);
        //console.log(seedurl_news);
    } catch (e) { console.log('url列表所处的html块识别出错：' + e) };

    seedurl_news.each(function (i, e) { //遍历种子页面里所有的a链接
        var myURL = "";
        try {
            //得到具体新闻url
            var href = "";
            href = $(e).attr("href");
            if (typeof (href) == "undefined") {  // 有些网页地址undefined
                return true;
            }
            if (href.toLowerCase().indexOf('http://') >= 0 || href.toLowerCase().indexOf('https://') >= 0) myURL = href; //http://开头的或者https://开头
            else if (href.startsWith('//')) myURL = 'http:' + href; 开头的
            else myURL = seedURL.substr(0, seedURL.lastIndexOf('/') + 1) + href; //其他

        } catch (e) { console.log('识别种子页面中的新闻链接出错：' + e) }

        if (!url_reg.test(myURL)) return; //检验是否符合新闻url的正则表达式
        //console.log(myURL);
        newsGet(myURL); //读取新闻页面
    });
});

读取具体的新闻页面，构造一个空的fetch对象用于存储数据

function newsGet(myURL) { //读取新闻页面
    request(myURL, function (err, res, body) { //读取新闻页面
        //try {
        var html_news = myIconv.decode(body, myEncoding); //用iconv转换编码
        //console.log(html_news);
        //准备用cheerio解析html_news
        var $ = myCheerio.load(html_news, { decodeEntities: true });
        myhtml = html_news;
        //} catch (e) {    console.log('读新闻页面并转码出错：' + e);};

        console.log("转码读取成功:" + myURL);
        //动态执行format字符串，构建json对象准备写入文件或数据库
        var fetch = {};
        fetch.title = "";
        fetch.content = "";
        fetch.publish_date = (new Date()).toFormat("YYYY-MM-DD");
        //fetch.html = myhtml;
        fetch.url = myURL;
        fetch.source_name = source_name;
        fetch.source_encoding = myEncoding; //编码
        fetch.crawltime = new Date();

读取新闻页面中的元素并保存到fetch对象里


 if (keywords_format == "") fetch.keywords = source_name; // eval(keywords_format);  //没有关键词就用sourcename
        else fetch.keywords = eval(keywords_format);

        if (title_format == "") fetch.title = ""
        else fetch.title = eval(title_format); //标题

        if (date_format == "") fetch.publish_date = ""
        else fetch.date = eval(date_format); 
        
        try {
            if (author_format == "") fetch.author = source_name; //eval(author_format);  //作者
            else fetch.author = eval(author_format);

            if (content_format == "") fetch.content = "";
            else fetch.content = eval(content_format).replace("\r\n" + fetch.author, ""); //内容,是否要去掉作者信息自行决定

            if (source_format == "") fetch.source = fetch.source_name;
            else fetch.source = eval(source_format).replace("\r\n", ""); //来源

            if (desc_format == "") fetch.desc = fetch.title;
            else fetch.desc = eval(desc_format).replace("\r\n", ""); //摘要    
        } catch (e) { return; }
        // var filename = source_name + "_" + (new Date()).toFormat("YYYY-MM-DD") +
        //     "_" + myURL.substr(myURL.lastIndexOf('/') + 1) + ".json";
        // 存储json
        // fs.writeFileSync(filename, JSON.stringify(fetch));

        var fetchAddSql = 'INSERT INTO fetches(url,source_name,source_encoding,title,' +
            'keywords,author,publish_date,crawltime,content) VALUES(?,?,?,?,?,?,?,?,?)';
        var fetchAddSql_Params = [fetch.url, fetch.source_name, fetch.source_encoding,
            fetch.title, fetch.keywords, fetch.author, fetch.publish_date,
            fetch.crawltime.toFormat("YYYY-MM-DD HH24:MI:SS"), fetch.content
        ];

        //执行sql，数据库中fetch表里的url属性是unique的，不会把重复的url内容写入数据库
        mysql.query(fetchAddSql, fetchAddSql_Params, function(qerr, vals, fields) {
            if (qerr) {
                console.log(qerr);
            }
        }); //mysql写入
        
    });
}

我这里try{}catch(e){return;}就是如果抓取不到的就跳过了；

到这里爬虫已经差不多写好了

六、构建网站访问数据库中爬取到的内容

首先创建一个7.03.html作为网页端（前端）

代码如下（示例）：

<!DOCTYPE html>
<html>

<body>
    <form action="http://127.0.0.1:8080/process_get" method="GET">
        <br> 标题：<input type="text" name="title">
        <input type="submit" value="Submit">
    </form>
    <script>
    </script>
</body>

</html>

再创建一个7.03.js作为后端

代码如下（示例）：

var express = require('express');
var mysql = require('./mysql.js')
var app = express();
var cors = require('cors');
app.use(cors());
//app.use(express.static('public'));
app.get('/7.03.html', function(req, res) {
    res.sendFile(__dirname + "/" + "7.03.html");
})
app.get('/7.04.html', function(req, res) {
    res.sendFile(__dirname + "/" + "7.04.html");
})
app.get('/process_get', function(req, res) {
    res.writeHead(200, { 'Content-Type': 'text/html;charset=utf-8' }); //设置res编码为utf-8
    //sql字符串和参数
    var fetchSql = "select url,source_name,title,author,publish_date from fetches where title like '%" +
        req.query.title + "%'";
    console.log(fetchSql);
    mysql.query(fetchSql, function(err, result, fields) {
        console.log(result);
        res.end(JSON.stringify(result));
    });
})
var server = app.listen(8080, function() {
    console.log("访问地址为 http://127.0.0.1:8080/7.03.html")

})

Node运行7.03.js后访问http://127.0.0.1:8080/7.03.html

在这里插入图片描述
点击submit后得到

用express脚手架来创建一个网站框架

在命令行中之前文件的目录下

express –e search_site

生成出一个search_site的文件夹。
由于我们需要使用mysql，因此将mysql.js拷贝进这个文件夹。
mysql.js拷贝后还需要在search_site文件夹内cmd运行。
依次进行：

npm install mysql –save
npm install

用vscode打开文件search_site/routes/index.js

添加

router.get('/process_get', function(request, response) {
  //sql字符串和参数
  var fetchSql = "select url,source_name,title,author,publish_date " +
      "from fetches where title like '%" + request.query.title + "%'";
  mysql.query(fetchSql, function(err, result, fields) {
      response.writeHead(200, {
          "Content-Type": "application/json"
      });
      response.write(JSON.stringify(result));
      response.end();
  });
});

在search_site/public/下创建一个search.html

<!DOCTYPE html>
<html>
<header>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</header>

<body>
    <form>
        <br> 标题：<input type="text" name="title_text">
        <input class="form-submit" type="button" value="查询">
    </form>
    <div class="cardLayout" style="margin: 10px 0px">
        <table width="100%" id="record2"></table>
    </div>
    <script>
        $(document).ready(function() {
            $("input:button").click(function() {
                $.get('http://127.0.0.1:8080/process_get', {title : $("input:text").val()}, function(data) {
                    $("#record2").empty();
                    $("#record2").append('<tr class="cardLayout"><td>url</td><td>source_name</td>' +
                        '<td>title</td><td>author</td><td>publish_date</td></tr>');
                    data = JSON.parse(data);
                    for (let list of data) {
                        let table = '<tr class="cardLayout"><td>';
                        Object.values(list).forEach(element => {
                            table += (element + '</td><td>');
                        });
                        $("#record2").append(table + '</td></tr>');
                    }
                });
            });

        });
    </script>
</body>

</html>

在search_site文件夹下cmd运行(node bin/www)，然后用浏览器打开网址http://127.0.0.1：8080/search.html

在这里插入图片描述
差不多就成品就是这样了，还有些欠缺的地方，之后还要补充改进。

qingshandaijason

关注

7
点赞
踩
46

收藏

觉得还不错? 一键收藏
0
评论
用js写个爬虫

如何用js完成爬虫项目前言一、node.js的安装二、确定爬取网页三、查看分析网页源码四、开始写爬虫1、npm···2.读入数据总结二、使用步骤1.引入库2.读入数据总结功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入前言这是我
复制链接

扫一扫