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

前言

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)