如何爬取js动态生成的页面数据--案例

一、目标网页及要求

目标网页：

https://www.xuexi.cn/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.html

要求：

• 爬取页面中的详情页文章标题、内容、发布时间、文章来源，存入本地mongodb数据库
• 同时在本地创建一个文件夹，在该文件夹下以文章标题.txt创建文本，写入文章内容

2、目标页面分析

以Chrome浏览器为例，通过F12打开抓包工具，按F5刷新下页面，ctr+F进行全局搜索页面中的内容，发现该页面内容是通过ajax动态获取的

Method：GET

url：https://www.xuexi.cn/lgdata/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.json?_st=27037952

将响应内容通过新窗口打开(安装过JSONView插件)，可以很直观的查看Json数据结构

通过分析发现，详情页链接都在title下的link中，并且分为：带请求参数id和不带请求参数两种形式

3、详情页分析

接下来分别对这两种形式的详情页链接进行访问，继续按照目标主页页面的分析步骤，发现数据是通过js动态加载的

携带请求参数id：

详情页url  ：https://www.xuexi.cn/lgpage/detail/index.html?id=10942099116228124117&item_id=10942099116228124117

数据来源js：https://boot-source.xuexi.cn/data/app/10942099116228124117.js?callback=callback&_st=1622280445799

其它详情页数据来源js都是这种格式

规律如下：

通过详情页url提取id，然后_st参数是16开头的13位数字，没错，就是时间戳*1000后的整数部分，这样我们就能通过详情页url来找到其数据来源js的url

提取数据：

• • 首先通过正则提取出dict数据，然后通过jsonpath规则提取出目标数据
  • 标题：‘$..title’
  • 内容：'$..content'，之后通过xpath提取p或者span标签中的内容
  • 来源：'$..show_source'
  • 出版时间：'$..publishi_time'

不带请求参数：

详情页url  ：https://www.xuexi.cn/5c39c314138da31babf0b16af5a55da4/e43e220633a65f9b6d8b53712cba9caa.html

数据来源js：https://www.xuexi.cn/5c39c314138da31babf0b16af5a55da4/datae43e220633a65f9b6d8b53712cba9caa.js

其它详情页都是以e43e220633a65f9b6d8b53712cba9caa.html结尾，js页都是以datae43e220633a65f9b6d8b53712cba9caa.js结尾

规律如下：

将详情页url中的e43e220633a65f9b6d8b53712cba9caa.html替换成datae43e220633a65f9b6d8b53712cba9caa.js即可

提取数据：

• • 首先通过正则提取出dict数据，然后通过jsonpath规则提取出目标数据
  • 标题：'$.fp8ttetzkclds001..frst_name'
  • 内容：'$.fp8ttetzkclds001.detail.content'，之后通过xpath提取p或者span标签中的内容
  • 来源：'$.fp8ttetzkclds001..source'
  • 出版时间：'$.fp8ttetzkclds001..original_time'

4、代码实现

# coding:utf-8
import jsonpath
import json
import re
import requests
import time
import os
import pymongo
import fake_useragent
from lxml import etree

class XuexiSpider:
    def __init__(self):
        ua = fake_useragent.UserAgent().random  # 生成随机User-Agent
        self.headers = {
            'User-Agent':ua
        }
        self.json_data_url = 'https://www.xuexi.cn/lgdata/f997e76a890b0e5a053c57b19f468436/018d244441062d8916dd472a4c6a0a0b.json?_st=27035433' #首页数据来源
        self.mongoClient = pymongo.MongoClient('mongodb://localhost:27017')


    def work(self):
        '''开启爬虫'''
        if not os.path.exists('./data'):
            os.mkdir('./data')
        # 发送请求，获取首页dict数据
        dict_data = requests.get(self.json_data_url,headers=self.headers).json()
        # 提取详情页link
        detail_page_links = jsonpath.jsonpath(dict_data,'$..title.link')
        for link in detail_page_links:
            if link.endswith('html'):
                self.parse_link_no_id(link)
            else:
                self.parse_link_with_id(link)
        self.mongoClient.close() #关闭数据库连接

    def parse_link_with_id(self,link):
        '''解析url中带有id参数的链接'''
        id = re.findall(r'id=(\d+)',link)[0] #提取link中的id
        _st = str(time.time()*1000).split('.')[0] #构造_st：当前时间戳*1000后取整数部分，然后转成str
        js_link = 'https://boot-source.xuexi.cn/data/app/{0}.js?callback=callback&_st={1}'.format(id,_st)
        response = requests.get(js_link,headers=self.headers).text
        response_dict_data = json.loads(re.findall(r'{.*}',response)[0])
        title = jsonpath.jsonpath(response_dict_data,'$..title')[0] #详情页标题
        raw_content = jsonpath.jsonpath(response_dict_data,'$..content')[0]
        #有的页面只有图片或者视频，content内容为''或者<!--{img:0}-->\n\n，所以需要做个判断
        if not raw_content:
            content = ''
        elif raw_content.startswith('<!--'):
            content = ''
        else:
            tree = etree.HTML(raw_content)
            content_list = tree.xpath('//p/text()|//span/text()') #文本内容存放在p或者span标签内
            content = '\n\n'.join(content_list) #详情页内容
        source = jsonpath.jsonpath(response_dict_data,'$..show_source')[0] #详情页文章来源
        publish_time = jsonpath.jsonpath(response_dict_data,'$..publish_time')[0] #详情页文章出版时间
        item = {
            'title':title,
            'content':content,
            'source':source,
            'publish_time':publish_time
        }
        self.pipeline(item)

    def parse_link_no_id(self,link):
        '''解析url中不带有id参数的链接'''
        js_link = link.replace('e43e220633a65f9b6d8b53712cba9caa.html','datae43e220633a65f9b6d8b53712cba9caa.js')
        response = requests.get(js_link, headers=self.headers).text
        response_dict_data = json.loads(re.findall(r'{.*}', response)[0])
        title = jsonpath.jsonpath(response_dict_data, '$.fp8ttetzkclds001..frst_name')[0]  # 详情页标题
        raw_content = jsonpath.jsonpath(response_dict_data, '$.fp8ttetzkclds001.detail.content')[0]
        #content内容可能为空字符串，所以需要做个判断
        if not raw_content:
            content = ''
        elif raw_content.startswith('<!--'):
            content = ''
        else:
            tree = etree.HTML(raw_content)
            content_list = tree.xpath('//p/text()|//span/text()')
            content = '\n\n'.join(content_list)  # 详情页内容
        source = jsonpath.jsonpath(response_dict_data, '$.fp8ttetzkclds001..source')[0]  # 详情页文章来源
        publish_time = jsonpath.jsonpath(response_dict_data, '$.fp8ttetzkclds001..original_time')[0]  # 详情页文章出版时间
        item = {
            'title': title,
            'content': content,
            'source': source,
            'publish_time': publish_time
        }
        self.pipeline(item)

    def pipeline(self,item):
        '''存储数据'''
        # 写入本地文件，文件名：详情页标题.txt
        with open('./data/'+item['title']+'.txt','w',encoding='utf-8') as f:
            f.write(item['content'])

        #存入mongodb数据库
        db = self.mongoClient.test #获取数据库
        collection = db.xuexi #获取集合
        collection.insert_one(item) #集合中插入数据

if __name__ == '__main__':
    xuexi = XuexiSpider()
    xuexi.work()

由于爬取的数据不是很多，就没有采用多线程或协程异步去实现代码

爬取结果：

 

文本内容：

 

 至此，大功告成！！！

 

分析案例来源：https://www.cnblogs.com/bobo-zhang/p/10561617.html#4216119