利用 respage01 动态刷新百度热力图，获取实时热门信息

前端

2023-10-29 07:05:46

前言

respage01 是一款轻量级、易于使用的 dashboard 模板，凭借其强大功能，您能够快速构建自己的信息看板。无论是个人学习还是工作需求，respage01 都能完美契合。

今天，我们着重探讨如何利用 respage01 动态刷新百度热力图。百度热力图是一个汇聚实时热门信息的宝库，通过可视化的方式呈现，让您轻松把握互联网风向。

一、respage01 安装与配置

安装 respage01
```
npm install respage01 -g
```
创建项目
```
respage01 init my-project
```
配置项目

编辑项目根目录下的 respage01.config.js 文件，配置百度热力图的数据源。
```
module.exports = {
  baiduHeatmap: {
    apiKey: 'YOUR_API_KEY'
  }
};
```

二、创建百度热力图组件

导入所需模块

import React, { useState, useEffect } from 'react';
import { Heatmap } from 'respage01-components';

定义组件

const BaiduHeatmap = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.baidu.com/heatmap/data?apiKey=YOUR_API_KEY')
      .then(res => res.json())
      .then(data => setData(data))
      .catch(error => console.error(error));
  }, []);

  return (
    <Heatmap data={data} />
  );
};

export default BaiduHeatmap;