我给中国奥运数做了可视化

本文主要是介绍我给中国奥运数做了可视化，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

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)