nodejs爬虫示例记录

3672Js.Com2019-05-31 00:41 来源:未知阅读:684 关注度5

nodejs爬虫示例记录

在使用这段脚本之前，需要先安装nodejs 、npm 然后再用npm包管理器下载安装下面代码中依赖的的cheerio和request模块。
cheerio是nodejs用来抓取页面的模块,
而request则让http请求更加方便，是第三方包。
http，fs是nodejs内置的核心模块。

javascript 代码

var http = require('http');
var fs = require('fs');
var cheerio = require('cheerio');
var request = require('request');
var url = '想要抓取页面的路径';
var fetchPage = function(x) {
  statusbarRequest(x);
};
/** [statusbarRequest description]第一次请求 */
var statusbarRequest = function(x) {
  http.get(x, function(res) {
    var html = '';
    var titles = [];
    res.setEncoding('utf-8'); //防止中文乱码
    res.on('data', function(chunk) {
      html += chunk;
    });
    res.on('end', function() {
      var $ = cheerio.load(html); //$这边表示抓取到的整个页面
      var items = $('#con_two_1').find('li'), //抓取到的页面的页面结构，然后数据处理就根据这些页面结构去处理
        arr = [];
      items.each(function() {
        var _this = $(this);
        var title = _this.find('p').text().trim();
        var pic = 'http://www.cdchina.org/sasac/zjfb/' + _this.find('img').attr('src');
        arr.push({
          title: title,
          pic: pic
        });
      });
      saveContent(arr);
      saveImgs(arr);
    }).on('error', function(err) {
      console.log(err);
    });
  });
};
/** [saveContent description]将抓取到的内容转成json字符串，然后写入json文件 */
var saveContent = function(arr) {
  var txt = JSON.stringify(arr);
  fs.appendFile('./data/data.json', txt, 'utf-8', function(err) { //appendFile 是在data.json这个文件中追加的
    if (err) {
      console.log(err);
    }
  });
};
/** [saveImgs description]保存图片 */
var saveImgs = function(arr) {
  arr.map(function(cur, index) {
    var a = cur.pic.split('/');
    var name = a[a.length - 1],
      picPath = cur.pic;
    request.head(picPath, function(err, res) {
      if (err) {
        console.log(err);
      }
    });
    request(picPath).pipe(fs.createWriteStream('./images/' + name));
  });
};
fetchPage(url);

效果图：

在终端输出的抓取内容

项目目录结构之前取得了数据，现在就要来做呈现，我这边用了vuejs框架，并且追加了vue-resource来做http请求。
脚本代码如下：
javascript 代码

var initPage = function() {
  var demo = new Vue({
    el: '#app',
    data: {
      items: [],
      total: {},
      url: './data/data.json',
      tabs: [{
        'title': '省级单位',
        'value': 'con_two_1'
      }, {
        'title': '市级',
        'value': 'con_two_2'
      }, {
        'title': '县级',
        'value': 'con_two_3'
      }],
      curTabIndex: 'con_two_1'
    },
    created: function() {
      this.getData();
    },
    methods: {
      getData: function() {
        this.$http.get(this.url).then(function(res) {
          return res.json()
        }).then(function(result) {
          this.$set(this, 'total', result);
          this.$set(this, 'items', result[this.curTabIndex]);
        });
      },
      switchTab: function(tb) {
        this.curTabIndex = tb.value;
        this.$set(this, 'items', this.total[this.curTabIndex]);
      }
    }
  });
};

initPage();

页面结构代码如下：
html 代码

<body>
  <div class="wrap" id="app">
    <ul class="m-tab">
      <li v-for="tb in tabs" v-bind:class="{active:tb.value==curTabIndex}" v-on:touchstart="switchTab(tb)">{{tb.title}}</li>
    </ul>
    <div class="content">
      <ul class="m-list">
        <li v-for="item in items">
          <a v-bind:href="item.link">
            <img v-bind:src="item.pic">
            {{item.title}}
          </a>
        </li>
      </ul>
    </div>
  </div>
  <script src="./js/lib/vue.js"></script>
  <script src="./js/lib/vue-resource.js"></script>
  <script src="./js/index.js"></script>
</body>

本地实现爬虫爬的网站地址：http://www.cdchina.org/sasac/zjfb/index.html?zjolTitleName=%E5%BE%AE%E7%9F%A9%E9%98%B5#