如何在BOSS列表页展示BOSS活跃状态

背景

在boss上找工作的同学可能有一些困扰，工作列表页没有展示boss的活跃度以及职位的活跃度，所以海投之后，很多信息就变成了未读状态，所以我们怎么能将boss的活跃度获取到并且展示到列表页里呢？

思路

1. 首先我们点进职位详情，可以看到职位的详情里面是有boss的活跃度的。
2. 经过页面的分析，详情页的数据获取不是通过接口获取，而是服务端渲染的数据。
3. 那我们如何将服务端渲染的数据获取到，并且回传到列表页进行展示呢？？

puppeteer

Puppeter是一个Node.js库，它提供了一个高级API来控制DevTools协议上的Chrome/Chromium。Puppeter默认在无头模式下运行，但可以配置为在完整Chrome/Chrmium中运行。

它可实现如下功能：

1. 自动化表单提交、UI测试、键盘输入等。
2. 使用最新的JavaScript和浏览器功能创建一个自动化测试环境。
3. 捕获站点的时间线跟踪，以帮助诊断性能问题。
4. 测试Chrome扩展。
5. 生成页面的屏幕截图和PDF。
6. 抓取SPA（单页应用程序）并生成预渲染内容（即“SSR”（服务器端渲染））

文档地址：what-is-puppeteer

具体实现

1. 安装puppeteer依赖
2. 编写程序监听列表页中接口：/xxx/xxx/joblist.json
3. 根据监听接口的返回数据，进入列表详情页
4. 将详情页的服务端渲染数据拿到，并且根据class获取到boss活跃状态
5. 存储boss活跃状态，重新渲染列表页

详细代码如下

const puppeteer = require('puppeteer');

const getBoss = async () => {
    const browser = await puppeteer.launch({
        headless: false
    }); //打开浏览器
    const page = await browser.newPage(); //打开一个空白页
    await page.goto(`https://www.zhipin.com/web/geek/job?query=%E6%B5%8B%E8%AF%95%E5%B7%A5%E7%A8%8B%E5%B8%88&city=101010100`); //在地址栏输入网址并等待加载

    let isFirst = true;
    const jobData = []
    // 监听 'response' 事件来获取响应
    page.on('response', async response => {
        if(response.url().includes('/wapi/zpgeek/search/joblist.json') && isFirst){
            const data = await response.json();
            const zpData = data.zpData.jobList;
            const urls = [];
            zpData.forEach(item=>{
                jobData.push({
                    ...item,
                    url: `https://www.zhipin.com/job_detail/${item.encryptJobId}.html?lid=${item.lid}&securityId=${item.securityId}&sessionId=`
                })
            })

            for await (let url of urls){
                await page.goto(url); //在地址栏输入网址并等待加载;
                 // 使用Puppeteer的evaluate函数来执行JavaScript代码以获取页面中的文本
                const results = await page.evaluate(() => {
                    const elements = document.querySelectorAll('.boss-active-time'); // 选择页面中class为"abc"的元素
                    const texts = Array.from(elements).map(element => element.innerText); // 获取元素的文本内容
                    return texts;
                });
                jobData.forEach(item=>{
                    if(item.url === url){
                        item.bossHuoYue = results[0]
                    }
                })
            }
            isFirst = false

            await page.goto(`https://www.zhipin.com/web/geek/job?query=%E6%B5%8B%E8%AF%95%E5%B7%A5%E7%A8%8B%E5%B8%88&city=101010100`); //在地址栏输入网址并等待加载

            // 等待页面加载完成
            await page.waitForNavigation();
            await page.evaluate((jobData) => {
            // 通过选择器选择要修改颜色样式的元素，并修改它的CSS属性   
                const elements = document.getElementsByClassName('job-card-wrapper');
                setTimeout(()=>{
                    for(let i = 0;i<jobData.length;i++){
                        if(jobData[i].bossHuoYue === '今日活跃'){
                            [...elements][i].style.backgroundColor = 'green'
                        }else {
                            [...elements][i].style.backgroundColor = 'red'
                        }
                    }  
                },2000)
            },jobData)
        }
    });
};

module.exports = {
    getBoss
};

执行node xxx.js即可；

PS

1. 代码写的比较随意，自行优化即可；代码写的比较随意，自行优化即可；代码写的比较随意，自行优化即可；
2. www.zhipin.com/web/geek/jo… 地址是我随便写的，可以自行封装或者修改；
3. 为了方便预览，颜色是随便给的，可以将获取的标签展示到页面上，更直观；
4. 可以将有标签的数据重新渲染，然后进行筛选过滤，这里就不演示了，比较简单；

效果预览

1. boss为 今日活跃的职位信息，背景色改为绿色；
2. boss为 非今天活跃的职位信息，背景色改为红色；
3. 如果需要展示更详细的，例如3日内活跃，修改代码中backgroundColor判断部分即可；

大致就是下面这个效果：

总结

本功能仅供自己找工作时使用，如boss修改对应的实现方式（如class名、SSR渲染），脚本需要对应做出修改；欢迎留言讨论。