利用inscode帮我用前端页面展示分析博客数据

⭐前言

大家好，我是yma16，本文分享利用inscode帮我用前端页面展示分析博客数据。

node系列往期文章
node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置
node笔记_http服务搭建（渲染html、json）
node笔记_读文件
node笔记_写文件
node笔记_连接mysql实现crud
node笔记_formidable实现前后端联调的文件上传
node笔记_koa框架介绍
node_koa路由
node_生成目录
node_读写excel
node笔记_读取目录的文件
node笔记——调用免费qq的smtp发送html格式邮箱
node实战——搭建带swagger接口文档的后端koa项目（node后端就业储备知识）
node实战——后端koa结合jwt连接mysql实现权限登录（node后端就业储备知识）
node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）

koa系列项目文章
前端vite+vue3结合后端node+koa——实现代码模板展示平台（支持模糊搜索+分页查询）
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查
node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

koa-vue性能监控到封装sdk系列文章
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
性能监控系统搭建——vue3实现性能监控数据展示（第二章）
性能监控计算——封装带性能计算并上报的npm包（第三章）
canvas系列文章
web canvas系列——快速入门上手绘制二维空间点、线、面
webgl canvas系列——快速加背景、抠图、加水印并下载图片
webgl canvas系列——animation中基本旋转、平移、缩放（模拟冒泡排序过程）
前端vue系列文章
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容
前端vue3——html2canvas给网站截图生成宣传海报
前端——html拖拽原理
前端 富文本编辑器原理——从javascript、html、css开始入门
前端老古董execCommand——操作 选中文本 样式
前端如何在30秒内实现吸管拾色器？
前端——原生Selection api操作选中文本 样式、取消样式（解决标签的无限嵌套问题）
前端 ——xml转json json转xml 实现 mjml 邮件内容转json，json转mjml
前端 ——youtube、tiktok视频封面获取并使用canvas合并封面和自定义播放按钮生成图片
前端gmail邮件加载动态样式——动态评分交互邮件可提交api
react_flow自定义节点、边——使用darg布局树状结构

⭐inscode提示词

提示词：

1. 拉起vite react 初始化前端项目
2. 实现一个总结csdn博客的主题网站，所有文章地址都在https://blog.csdn.net/qq_38870145?spm=1000.2115.3001.5343，根据浏览量和内容 作出一整年的csdn博客总结，给出规划和建议

ai思考过程：
思路清晰
有理有据

# CSDN博客总结网站 - 开发任务清单

## 需求概述
创建一个动漫风格的CSDN博客总结网站，基于用户博客数据（https://blog.csdn.net/qq_38870145）进行一整年的博客总结分析，提供规划和建议。

## 技术方案
- **技术栈**: HTML + TailwindCSS + DaisyUI + JavaScript
- **风格**: 动漫风格，色彩鲜明，可爱元素
- **核心功能**: 博客数据可视化、年度总结、技术分析、规划建议

## 开发任务
### 前置工作
- [x] 项目结构初始化
- [x] 动漫风格CSS主题配置
- [x] 基础页面布局设计

### 页面开发
- [x] 首页Hero区域（动漫风格个人简介）
- [x] 博客数据统计展示（访问量、文章数、粉丝等）
- [x] 年度创作趋势图表
- [x] 技术领域分布分析
- [x] 热门文章排行榜
- [x] 专栏分类展示
- [x] 年度总结与规划建议
- [x] 交互式数据可视化组件

### 数据展示
- [x] 动态数据统计卡片
- [x] 图表组件集成
- [x] 响应式布局适配
- [x] 动画效果实现

### 功能完善
- [x] 移动端适配
- [x] 性能优化
- [x] 项目配置文件

## 操作记录
- [2025/10/24 23:12] ✅ 完成：创建项目开发任务清单
- [2025/10/24 23:15] ✅ 完成：安装TailwindCSS和DaisyUI依赖
- [2025/10/24 23:15] ✅ 完成：配置Vite集成TailwindCSS
- [2025/10/24 23:15] ✅ 完成：配置动漫风格CSS样式
- [2025/10/24 23:15] ✅ 完成：开发动漫风格博客总结主页面
- [2025/10/24 23:21] ✅ 完成：抓取CSDN博客详细统计数据
- [2025/10/24 23:21] ✅ 完成：添加社区数据统计展示
- [2025/10/24 23:21] ✅ 完成：添加互动数据统计展示
- [2025/10/24 23:21] ✅ 完成：添加关注数据统计展示
- [2025/10/24 23:21] ✅ 完成：更新技术专栏总览展示

抓取数据的效果：

总结的建议

⭐结束

本文分享到这结束，如有错误或者不足之处欢迎指出！

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 最后，感谢你的阅读！