前两章主要和大家介绍了Puppteer的使用与处理数据，但是对于我们来说，假设要获取AdminJS的热点，每次都要去手动运行一下，这显然是不靠谱的，这一章将和大家一起学习更加方便快捷的使用方式。主要思路如下如所示：
思路已经有了，下面开始进行实现
准备工作
node环境，vscode（或其他）
搭建一个express服务
这里使用了express来实现，掘友们也可以使用其他框架实现，express快速实现可以参考其github的示例，非常的简单。
首先安装 express
npm install express
安装后可以copy官方demo也可以自己手动写一个：
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World juejin')
})
app.listen(3000)
ok，这样一个简单的http服务就搭建完成了，执行代码，然后我们在浏览器地址里输入http://localhost:3000/, 这时你看到Hello World juejin说明你的服务已经ok了。
执行脚本
接下来就是我们的主要内容了，我们将上一章最后得到的提取数据代码当作脚本，注意这里的cookie，其实是不需要的在复制后可以将他删掉。将脚本命名为puppeteer.js代码如下：
const puppeteer = require("puppeteer");
// const cookieObjects = require('./cookie');
async function start(){
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 800 }); // 设置浏览器视窗大小
// cookieObjects.forEach((cookie) => {
// page.setCookie(cookie);
// });
await page.goto("https://Admin.net/pins");
await page.waitForSelector("#juejin > div.view-container.pin_container > main > main > div.stream.no-topic-list.no-hot-new-tag > div.stream-wrapper > div.pin-list-view > div > ul > span > li");
let pins = []
pins = await page.evaluate((pins) => {
const list = document.querySelectorAll('#juejin > div.view-container.pin_container > main > main > div.stream.no-topic-list.no-hot-new-tag > div.stream-wrapper > div.pin-list-view > div > ul > span > li')
list.forEach(item => {
console.log(item)
pins.push({
auth: item.querySelector('.username').innerText,
content: item.querySelector('.content').innerText
})
})
return pins
}, pins)
return pins
}
module.exports = start
记得要安装puppeteer，没有安装的小伙伴执行npm install puppeteer否则会报错。上面的代码会返回一段热点数据，接下来将他与接口结合起来
生成接口
const express = require('express')
const start = require('./puppeteer')
const app = express()
app.get('/pins', async function (req, res) {
const pins = await start()
res.send(pins)
})
app.listen(3000)
上面代码中，我们引入了生成的puppeteer脚本，将他的返回结赋予返回值，这时重启服务，在浏览器中输入http://localhost:3000/pins ，就会看到如下图所示：
这样一个手动请求的接口就实现了，下面进行ui界面的开发。
ui界面搭建
我们使用vue3来进行页面搭建，大家参考这里Vue3来进行快速安装，这里就不和大家一起做了，在官网中有详细的教程，当我们按照官网的流程启动后，看到页面既可进行后面步骤了
可能遇到问题：
- 如果发现vscode有红色警告，使用Volar并禁用Vetur插件
- 如果启动
npm run dev提示app.vue文件找不到需要在env.d.ts追加
declare module '*.vue' {
import type { DefineComponent } from 'vue';
const vueComponent: DefineComponent<{}, {}, any>;
export default vueComponent;
}
需要安装：
- antdesign ui库，用来美化界面
- axios用来请求接口
执行
npm install ant-design-vue
npm install axios
ant-design-vue按照官网教程全局引入即可，只是用来美化界面。
axios需要配置代理：
export default defineConfig({
...
server: {
proxy: {
'^/api': {
target: "http://127.0.0.1:3000", //这里是上面我们启动的http服务
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '') //将接口重写去掉/api
}
}
}
})
创建Pins.vue
<template>
<a-button type="primary" @click="clickPinsHandle">热点</a-button>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'auth'">
<span>
<smile-outlined />
作者
</span>
</template>
</template>
</a-table>
</template>
<script lang="ts">
import {
SmileOutlined,
DownOutlined
} from '@ant-design/icons-vue';
import {
ref,
defineComponent
} from 'vue';
import axios from 'axios';
const columns = [{
title: '作者',
dataIndex: 'auth',
key: 'auth',
width: 200
},
{
title: '内容',
dataIndex: 'content',
key: 'content',
}
];
let data = ref([{
auth: 'John Brown',
content: 32,
}, ]);
export default defineComponent({
components: {
SmileOutlined,
DownOutlined,
},
methods: {
clickPinsHandle() {
axios.get('/api/pins')
.then(function (response) {
// handle succes
data.value = response.data
console.log(data);
})
.catch(function (error) {
// handle error
console.log(error);
})
}
},
setup() {
return {
data,
columns,
};
},
});
</script>
在app.vue中使用
<script setup lang="ts">
import Pins from './components/Pins.vue'
</script>
<template>
<Pins />
</template>
当点击热点时，就会发送请求pins,后端开始执行脚本并返回数据，最后展示数据
ok，这样一个通过web来执行puppeteer脚本并将数据返回给