实现在hexo博客首页展示不背单词的学习数据

今天在背单词时想让网站记录一下数据，于是开始百度ing…(典型的不务正业）

发现不背单词没有提供接口后决定自己进行爬取

使用软件：Reqable · API抓包调试 + API测试一站式工具

首先在手机上安装此软件，按照步骤安装

这里找了位仁兄的博客，不会使用可以进行参考：一键式调试工具—Reqable 使用指南-CSDN博客

先安装证书

点击开发者按钮

手机设置找到凭据

安装CA证书

开始抓取接口

点击刚才软件右下角的飞机，这样你的软件上就会开始出现应用的请求记录

然后打开不背单词，点击下方第三个按钮进入仪表盘，点击我的数据下方的卡片

返回刚才的应用

请求列表

点击显示绿色200的一个请求

请求页面

点击链接右边的复制按钮，这里怕有人点错附上链接

1	`https://learnywhere.cn/api/bb/dashboard/profile/search?sid=*****`

这里sid便是你的个人id

Python部分（其实就是一个请求而已）

from flask import Flask, jsonify
import requests

app = Flask(__name__)

@app.route('/api/bbdc', methods=['GET'])
def get_profile():
    session = requests.Session()
    url = "https://learnywhere.cn/api/bb/dashboard/profile/search?sid=****"
    response = session.get(url)
    data = response.json()
    return jsonify(data)

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

这样就能获取到你不背单词的json数据

博客部分

基本思路就是：在首页名字下方插入一个盒子，在盒子里加上js请求来的json数据，整理后创建元素显示数据

这部分自由发挥，我的绝对不是最好的，你甚至可以直接在js中调用不背单词的接口，但我因为跨域和安全性（防止暴露sid）等问题使用了Python接口

const url = "http://[你的服务器ip]:5000/api/bbdc";

async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();

    const todayData = data.data_body.learnList.find(item => item.date === "今日");
    const todayDuration = data.data_body.durationList.find(item => item.date === "今日");

    const learnNum = todayData ? todayData.learnNum : 0;
    const reviewNum = todayData ? todayData.reviewNum : 0;
    const duration = todayDuration ? todayDuration.duration : 0;

    // 创建一个新的元素来显示数据
    const dataElement = document.createElement("div");
    dataElement.textContent = `单词数: ${learnNum} | 复习数: ${reviewNum} | 学习时间: ${duration} 分钟`;

    // 设置样式
    dataElement.style.fontSize = "14px";
    dataElement.style.textAlign = "center";
    dataElement.style.marginTop = "10px";
    dataElement.style.color = "#fff";  // 设置文字颜色

    // 获取容器并插入新元素
    const container = document.querySelector(".banner-text.text-center.fade-in-up");
    if (container) {
      // 通过 flex 布局使内容竖直排列
      container.style.display = "flex";
      container.style.flexDirection = "column"; // 设置竖直排列
      container.style.alignItems = "center"; // 水平居中
      container.style.justifyContent = "center"; // 竖直居中

      // 将新元素插入到容器中
      container.appendChild(dataElement);
    }

  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();