Bilibili历史记录分析工具前端项目教程

Bilibili历史记录分析工具前端项目教程

BiliHistoryFrontend 获取b站历史记录，保存到本地数据库，可下载对应视频及时存档，生成详细的年度总结，自动化任务部署到服务器实现自动同步，以及自动发送日志邮件，下面链接是对应后端 项目地址: https://gitcode.com/gh_mirrors/bi/BiliHistoryFrontend

1. 项目介绍

本项目是基于Vue 3开发的一个B站历史记录分析工具的前端项目。它提供了丰富的B站观看历史数据分析功能，如查看观看时间、重复观看次数、整体完成率、UP主完成率、标题关键词、月度关键词等。用户可以通过该项目更好地了解自己的观看习惯和偏好。

该项目需要与后端项目BilibiliHistoryFetcher配合使用，以实现完整的功能。

2. 项目快速启动

使用Docker安装

首先，确保你的系统中已经安装了Docker。

• 构建镜像：

  docker build -t bili-history-fetcher-web:dev .
  

• 启动容器：

  docker run --name bili-history-fetcher-web -p 5173:80 -d bili-history-fetcher-web:dev
  

• 停止容器：

  docker stop bili-history-fetcher-web
  

使用源码安装

• 克隆项目：

  git clone https://github.com/2977094657/BiliHistoryFrontend.git
  cd BilibiliHistoryFrontend
  

• 安装依赖：

  npm install
  

• 启动开发服务器：

  # 网页版开发
  npm run dev
  

• 构建应用：

  # 网页版构建
  npm run build
  

3. 应用案例和最佳实践

首次使用指南

• 登录账号： 打开页面后，点击侧边栏的设置，配置你的服务器地址。然后点击侧边栏中的"未登录"状态，使用B站手机APP扫描二维码进行登录。登录成功后会显示你的用户名。

• 获取历史记录： 登录成功后，点击导航栏中的"实时更新"按钮。首次使用时会自动获取你的全部历史记录，这可能需要一些时间。获取完成后数据会自动导入到本地数据库，页面会自动刷新并显示你的观看历史。

• 后续使用： 每次打开页面时，建议点击"实时更新"以获取最新记录。实时更新只会获取新增的记录，速度很快。

页面介绍

• 主页
• 评论
• 我的收藏
• 媒体管理
• 计划任务
• 设置
• 视频下载功能
• 年度总结页面

4. 典型生态项目

本项目使用了以下典型生态项目：

• Vue 3：用于构建用户界面的渐进式JavaScript框架。
• Tauri：用于构建跨平台桌面应用，相比Electron具有更小的体积和更高的性能。
• Bilibili-API-collect：B站的API集合，用于获取B站数据。
• ArtPlayer：强大且灵活的HTML5视频播放器。

通过这些典型的生态项目，本项目为用户提供了一个功能丰富且易于使用的B站历史记录分析工具。

BiliHistoryFrontend 获取b站历史记录，保存到本地数据库，可下载对应视频及时存档，生成详细的年度总结，自动化任务部署到服务器实现自动同步，以及自动发送日志邮件，下面链接是对应后端 项目地址: https://gitcode.com/gh_mirrors/bi/BiliHistoryFrontend