第一章 puppeteer爬虫

一 安装依赖

yarn init -y
yarn add koa puppeteer
yarn add nodemon -g(看情况）

二 抓取页面

const puppeteer=require('puppeteer');
const url="https://movie.douban.com/top250";
async function run(){
    /* 1.启动puppeteer，创建一个Chrome的实例 */
    const browser=await puppeteer.launch();
    /* 2.在浏览器中新建一个页面 */
    const page=await browser.newPage();
    /* 3.使用page.goto()函数去打开一个页面 */
    await page.goto(url)
    /* 4.抓取数据--使用screenshot函数去抓取页面 */
    await page.screenshot({
        path:"douban.png"
    })
    /* 5.关闭浏览器 */
    await browser.close()
}
run()

yarn start

三 抓取页面数据 拉勾网 招聘

const puppeteer=require('puppeteer');
const url="https://www.lagou.com/zhaopin/";
async function run(){
    /* 1.启动puppeteer，创建一个Chrome的实例 */
    const browser=await puppeteer.launch(
        {
            headless:false,
            slowMo:20
        }
    );
    /* 2.在浏览器中新建一个页面 */
    const page=await browser.newPage();
    /* 3.使用page.goto()函数去打开一个页面 */
    await page.goto(url,{
        waitUntil:'networkidle2'
    })
    /* 4.选中点击的元素 */
   /* 5.让页面等待1s */
   await page.waitFor(2000)
   await page.hover(".con_list_item")
   /* 6.page.evaluate()  可以让我们使用DOM选择器 */
   let res=await page.evaluate(()=>{
       var $=window.jQuery;
       var items=$(".con_list_item");  //抓取那一块的字段名
       var links=[];
      if(items.length>0){
         items.each((index,item)=>{
             var company_name=$(item).find(".company_name a").html();
             var com_logo=$(item).find(".com_logo img").attr("src");
             var money=$(item).find(".p_bot .money").html();
             var position=$(item).find(".p_top h3").html();
             links.push({
                 company_name,
                 com_logo,
                 money,
                 position
             })
         })
      }
      return links;
   })
   //关闭浏览器
   browser.close()
   console.log(res)
}
run()

四 让数据返回前端

新建一个文件夹，再建一个db.js，将index,js里面的内容放到里面

const puppeteer=require('puppeteer');
const url="https://www.lagou.com/zhaopin/";
async function run(){
    /* 1.启动puppeteer，创建一个Chrome的实例 */
    const browser=await puppeteer.launch(
        // {
        //     headless:false,
        //     slowMo:20
        // }
    );
    /* 2.在浏览器中新建一个页面 */
    const page=await browser.newPage();
    /* 3.使用page.goto()函数去打开一个页面 */
    await page.goto(url,{
        waitUntil:'networkidle2'
    })
    /* 4.选中点击的元素 */
   /* 5.让页面等待1s */
   await page.waitFor(2000)
   await page.hover(".con_list_item")
   /* 6.page.evaluate()  可以让我们使用DOM选择器 */
   let res=await page.evaluate(()=>{
       var $=window.jQuery;
       var items=$(".con_list_item");  //抓取那一块的字段名
       var links=[];
      if(items.length>0){
         items.each((index,item)=>{
             var company_name=$(item).find(".company_name a").html();
             var com_logo=$(item).find(".com_logo img").attr("src");
             var money=$(item).find(".p_bot .money").html();
             var position=$(item).find(".p_top h3").html();
             links.push({
                 company_name,
                 com_logo,
                 money,
                 position
             })
         })
      }
      return links;
   })
   browser.close()
   return res;
}
module.exports=run;  //导出

五 在index.js中导入db.js

const run=require('./reptile/db');
const koa=require('koa');
const app=new koa();
app.use(async ctx=>{
    var data=await run();
    ctx.body=data;
})
app.listen(8080)

六 安装路由router

//1.安装依赖
yarn add koa-router
//2.导入
const Router=require('koa-router);
const router=new Router();
//3.使用app.use(router.routes())

index.js

const run=require('./reptile/db');
const koa=require('koa');
const Router=require('koa-router');
const router=new Router();
const app=new koa();
router.get("/zhaopin",async ctx=>{
    var data=await run();
    ctx.body=data;
})
app.use(router.routes())
app.listen(8080)

直接使用localhost:8080/zhaopin看效果

七 跨域 渲染数据

index.js

//1.安装依赖
yarn add koa2-cros
//2.导入
const cors=require('koa2-cors')
//3.使用
app.use(cors())

八 使用aja请求数据

新建一个index.html文件 引用jQuery

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
      var url="http://localhost:8080/zhaopin";
      $.ajax({
          url,
          success:res=>{
              console.log(res)
          }
      })
    </script>