node:爬虫爬取网页图片

来源:http://www.chinese-glasses.com 作者:Web前端 人气:134 发布时间:2019-11-14
摘要:目录 安装node,并下载依赖 搭建服务 请求我们要爬取的页面,返回json 三、使用node搭建简单服务器接收请求返回数据 前言 周末自己在家闲着没事,刷着微信,玩着手机,发现自己的微

目录

  • 安装node,并下载依赖
  • 搭建服务
  • 请求我们要爬取的页面,返回json

三、使用node搭建简单服务器接收请求返回数据

前言

周末自己在家闲着没事,刷着微信,玩着手机,发现自己的微信头像该换了,就去网上找了一下头像,看着图片,自己就想着作为一个码农,可以把这些图片都爬取下来做成一个微信小程序,说干就干,了解一下基本都知道怎么做了,整理分享一波给大家。

2)根据数据模板生成模拟数据。(一般场景配置两个参数够用了Mock.mock( rurl, template ))

  • Mock.mock( rurl?, rtype?, template|function( options ) )
  • rurl(可选)。表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。
  • rtype(可选)。表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
  • template (可选)。表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
  • function(options)(可选)。表示用于生成响应数据的函数。
  • options 指向本次请求的 Ajax 选项集,含有 url、type 和 body 三个属性
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- (必选)加载 Mock -->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
<script type="text/javascript">
    $(function () {

     /*
    * Mock.mock( rurl, template )
    * rurl:表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。
    * template:表示数据模板,可以是对象或字符串
    * */

//         mock拦截ajax请求并返回数据
        Mock.mock(/.json/, {
            'code':'000',
            'message':'message信息',
            'list|1-10': [{
                'id|+1': 1,
                'email': '@EMAIL',
                'name': '@name'
            }]
        })


        $.ajax({
            url:'list.json',
            contentType: 'application/json',
            type: 'POST',
            timeout: 5000,
            dataType:'JSON',
            data: JSON.stringify({schoolId: 123}),
            success: function (res) {
                if(res.code == 000){
                    console.log(res);
                    $('<pre>').text(JSON.stringify(res, null, 4)).appendTo('body');
                }else{
                    alert(res.message);
                }
            },
            Error: function (xhr, type, errorThrown) {
                console.log(JSON.stringify(xhr));
                console.log(type);
                console.log(errorThrown);
            }
        });
    })
</script>
  • 把html文件在浏览器里打开,出现以下格式的json数据;
  • ==注意:每次打开页面或刷新一次页面数据会随机改变==;
{
   "code": "000",
   "message": "message信息",
   "list": [
       {
           "id": 1,
           "email": "u.skubdwsbs@nfuzlwgd.et",
           "name": "Michael Clark"
       },
       {
           "id": 2,
           "email": "u.sokjrkoja@lnmxlkx.kp",
           "name": "Brian Davis"
       },
       {
           "id": 3,
           "email": "t.chpjw@jnidn.se",
           "name": "Margaret Allen"
       }
   ]
}

 

1)引入mockjs,可以是在线地址,或者是下载到本地引入,一般==在body结束标签前引入==。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>第三方框架,mockjs拦截ajax请求返回数据</title>
</head>
<body>

<!--内容-->

<!--body结束标签前引用-->
<script type="text/javascript" src="http://mockjs.com/dist/mock.js"></script>
</body>
</html>

搭建服务器

新建一个·名为node的文件夹。

10bet,首先你需要下载express依赖

npm install express 

再新建一个名为demo.js的文件 目录结构如图:

10bet 1

在demo.js引入下载的express

const express = require('express');
const app = express();
app.get('/index', function(req, res) {
res.end('111')
})
var server = app.listen(8081, function() {
    var host = server.address().address
    var port = server.address().port
    console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

运行node demo.js简单的服务就搭起来了,如图:

10bet 2

一、请求本地 json 文件,返回数据。

请求我们要爬取的页面

请求我们要爬取的页面

npm install superagent
npm install superagent-charset
npm install cheerio

superagent 是用来发起请求的,是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下.,也可以使用http发起请求

superagent-charset防止爬取下来的数据乱码,更改字符格式

cheerio为服务器特别定制的,快速、灵活、实施的jQuery核心实现.。 安装完依赖就可以引入了

var superagent = require('superagent');
var charset = require('superagent-charset');
charset(superagent);
const cheerio = require('cheerio');

引入之后就请求我们的地址,https://www.qqtn.com/tx/weixintx_1.html,如图:

10bet 3

声明地址变量:

const baseUrl = 'https://www.qqtn.com/'

这些设置完之后就是发请求了,接下来请看完整代码demo.js

var superagent = require('superagent');
var charset = require('superagent-charset');
charset(superagent);
var express = require('express');
var baseUrl = 'https://www.qqtn.com/'; //输入任何网址都可以
const cheerio = require('cheerio');
var app = express();
app.get('/index', function(req, res) {
    //设置请求头
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    //类型
    var type = req.query.type;
    //页码
    var page = req.query.page;
    type = type || 'weixin';
    page = page || '1';
    var route = `tx/${type}tx_${page}.html`
    //网页页面信息是gb2312,所以chaeset应该为.charset('gb2312'),一般网页则为utf-8,可以直接使用.charset('utf-8')
    superagent.get(baseUrl + route)
        .charset('gb2312')
        .end(function(err, sres) {
            var items = [];
            if (err) {
                console.log('ERR: ' + err);
                res.json({ code: 400, msg: err, sets: items });
                return;
            }
            var $ = cheerio.load(sres.text);
            $('div.g-main-bg ul.g-gxlist-imgbox li a').each(function(idx, element) {
                var $element = $(element);
                var $subElement = $element.find('img');
                var thumbImgSrc = $subElement.attr('src');
                items.push({
                    title: $(element).attr('title'),
                    href: $element.attr('href'),
                    thumbSrc: thumbImgSrc
                });
            });
            res.json({ code: 200, msg: "", data: items });
        });
});
var server = app.listen(8081, function() {

    var host = server.address().address
    var port = server.address().port

    console.log("应用实例,访问地址为 http://%s:%s", host, port)

})

运行demo.js就会返回我们拿到的数据,如图:

10bet 4

一个简单的node爬虫就完成了。希望可以到 项目上点一个 star 作为你对这个项目的认可与支持,谢谢。 

项目地址:https://github.com/Mr-MengBo/Reptilian

2)安装express应用程序生成器

官网

  • 全局安装express-generator;
npm install -g express-generator
  • 有安装Git Bash Here等第三方命令行工具,我们打开文件管理,进入到想要生成项目的位置后,右键打开Git Bash Here 就可以在当前位置启动命令行工具了;
  • 如果没有安装git等第三方cmd命令行工具,我们打开文件管理,进入到想要生成项目的位置后,直接在地址栏输入cmd,会在当前目录打开cdm命令行工具;
  • 在我们想要的位置打开命令行工具之后,就可以开始以下步骤:
  • 创建一个名为myapp的express应用程序
express --view=pug myapp

成功后会自动在目标位置创建一个名为myapp的项目并生成很多文件,命令行显示效果如下:

E:my_work
$ express --view=pug myapp

   create : myapp
   create : myapp/package.json
   create : myapp/app.js
   create : myapp/public
   create : myapp/routes
   create : myapp/routes/index.js
   create : myapp/routes/users.js
   create : myapp/views
   create : myapp/views/index.pug
   create : myapp/views/layout.pug
   create : myapp/views/error.pug
   create : myapp/bin
   create : myapp/bin/www
   create : myapp/public/javascripts
   create : myapp/public/images
   create : myapp/public/stylesheets
   create : myapp/public/stylesheets/style.css

   install dependencies:
     > cd myapp && npm install

   run the app:
     > SET DEBUG=myapp:* & npm start

在命令行最下面有提示,install dependencies: cd myapp && npm install 然后 run the app: npm start,我们按照提示来;

  • 进入myapp项目;
cd myapp
  • 安装package.json文件中的依赖;
npm install
  • 网络不好可以用cnpm安装
cnpm install
  • 运行项目
E:my_workmyapp
$ npm start

> myapp@0.0.0 start E:my_workmyapp
> node ./bin/www
  • 在浏览器输入localhost:3000,会打开一个页面显示Welcome to Express,说明已经成功启动服务了。

安装node

我们开始安装node,可以去node官网下载https://nodejs.org/zh-cn/,下载完成后运行node使用,

node -v

安装成功后会出现你所安装的版本号。

接下来我们使用node, 打印出hello world,新建一个名为index.js文件输入

console.log('hello world')

运行这个文件

node index.js

就会在控制面板上输出hello world

- 根目录新建api文件夹,新建demo.js;

// api/demo.js

var dataDemo={
    'code':'000',
    'message':'message消息',
    'lists':[
        {
            'naem':'小明',
            'age': '12',
            'sex':'男'
        },{
            'naem':'小红',
            'age': '12',
            'sex':'女'
        }
    ]
}
exports.getData = function(method,data){
    var backData={
        "code":'000',
        "msg":"",
        "data":dataDemo
    }
    if(method=='DELETE'){
        backData={
            "code":'999',
            "msg":"不支持DELETE方法"
        }
    }
    return JSON.stringify(backData);
}kData);
}
  • 重新运行npm start,浏览器打开localhost:3000,此时应该显示的是hello world;
  • 打开localhost:3000/api/demo,页面显示
{
    "code": "000",
    "msg": "",
    "data": {
        "code": "000",
        "message": "message消息",
        "lists": [
            {
                "naem": "小明",
                "age": "12",
                "sex": "男"
            },
            {
                "naem": "小红",
                "age": "12",
                "sex": "女"
            }
        ]
    }
}
  • 以上都成功了,那就说明配置成功了,复制一个js文件命名为demo2.js,改动一下数据,浏览器访问localhost:3000/api/demo2应该也是可以的;

1)注意json格式;

// list.json
{
  "code":"000",
  "message":"message信息",
  "lists":[
      {
        "name":"小明",
        "sex":"男",
        "age": "3"
      },
      {
        "name":"小红",
        "sex":"女",
        "age":"3"
      }
    ]
}

本文由10bet发布于Web前端,转载请注明出处:node:爬虫爬取网页图片

关键词:

频道精选

最火资讯