本文主要是介绍我给中国奥运数做了可视化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
2020东京奥运会已经开幕很多天了,还记得小时候看奥运会的是在2008年的北京奥运会,主题曲是北京欢迎你, 那个时候才上小学吧,几乎有中国队的每场必看,当时也是热血沸腾了, 时间转眼已经到了2021年而我也从小学生变成了一个每天不断敲代码的程序员👩💻,看奥运的时间又少,但是又想出分力,既然是程序员,想着能为奥运会搞点什么?第一时间想到了就是给奥运奖牌数🏅做可视化,因为单看表格数据,不能体现出我们中国的牛逼🐂, 废话不多说,直接开写。
数据获得
我们先看下奥运奖牌数的表格,这东西肯定是接口获得的吧,我不可能手写吧,而且每天都是更新的,难道我要每天去改,肯定不是这样的,我当时脑子里就想着去做爬虫,去用puppeteer 去模拟浏览器的行为然后获取页面的原生dom,然后将表格的数据搞出来, 然后我就很兴奋的去搞了,写了下面的代码:
const puppeteer = require('puppeteer')async function main() {// 启动chrome浏览器const browser = await puppeteer.launch({// // 指定该浏览器的路径// executablePath: chromiumPath,// 是否为无头浏览器模式,默认为无头浏览器模式headless: false,})// 在一个默认的浏览器上下文中被创建一个新页面const page1 = await browser.newPage()// 空白页刚问该指定网址await page1.goto('https://tiyu.baidu.com/tokyoly/home/tab/%E5%A5%96%E7%89%8C%E6%A6%9C/from/pc')// 等待title节点出现await page1.waitForSelector('title')// 用page自带的方法获取节点// 用js获取节点const titleDomText2 = await page1.evaluate(() => {const titleDom = document.querySelectorAll('#kw')return titleDom})console.log(titleDomText2, '查看数据---')// 截图//await page1.screenshot({ path: 'google.png' })// await page1.pdf({// path: './baidu.pdf',// })browser.close()
}
main()
然后当我很兴奋的想要去结果的时候,结果发现是空。百度是不是做了反爬虫协议, 毕竟我是爬虫菜鸟,搞了很久。还是没搞出来。如果有大佬会,欢迎指点我下哦!
不过这个puppeteer,这个库有点牛皮的,可以实现网页截图、生成pdf、拦截请求,其实有点自动化测试的感觉。感兴趣的同学可以自行了解一下,这不在本篇文章介绍的重点。
接口获得
然后这时候就开始疯狂百度,开始寻找有没有现成的api, 真是踏破铁鞋无觅处,得来全不费工夫。被我找到了,原来是有大佬已经开始做了, 这时候我本地直接去请求那个接口是有问题的,前端不得不处理的问题—— 跨域。 看着东西我头疼哇, 不过没关系, 我直接node起一个服务器, 我node去请求那个接口,然后后台在配置下跨域, 搞定接口数据就直接获得了, 后台服务我是用的express, 搭建的服务器直接随便搞搞的。代码如下:
const axios = require('axios')
const express = require('express')
const request = require('request')
const app = express()const allowCrossDomain = function (req, res, next) {res.header('Access-Control-Allow-Origin', '*')res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')res.header('Access-Control-Allow-Headers', 'Content-Type')res.header('Access-Control-Allow-Credentials', 'true')next()
}
app.use(allowCrossDomain)app.get('/data', (req, res) => {request({url: 'http://apia.yikeapi.com/olympic/?appid=43656176&appsecret=I42og6Lm',method: 'GET',headers: { 'Content-Type': 'application/json' },},function (error, response, body)
这篇关于我给中国奥运数做了可视化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!