惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
GbyAI
GbyAI
SecWiki News
SecWiki News
Project Zero
Project Zero
C
Cisco Blogs
Simon Willison's Weblog
Simon Willison's Weblog
P
Privacy International News Feed
D
Darknet – Hacking Tools, Hacker News & Cyber Security
Scott Helme
Scott Helme
A
Arctic Wolf
Security Latest
Security Latest
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Privacy & Cybersecurity Law Blog
Apple Machine Learning Research
Apple Machine Learning Research
T
Tailwind CSS Blog
The Hacker News
The Hacker News
T
Tenable Blog
雷峰网
雷峰网
有赞技术团队
有赞技术团队
V
V2EX
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threat Research - Cisco Blogs
T
Threatpost
AWS News Blog
AWS News Blog
L
LINUX DO - 热门话题
Application and Cybersecurity Blog
Application and Cybersecurity Blog
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
S
SegmentFault 最新的问题
月光博客
月光博客
Spread Privacy
Spread Privacy
S
Secure Thoughts
宝玉的分享
宝玉的分享
博客园 - 三生石上(FineUI控件)
Forbes - Security
Forbes - Security
T
The Exploit Database - CXSecurity.com
G
GRAHAM CLULEY
The Last Watchdog
The Last Watchdog
Y
Y Combinator Blog
I
Intezer
博客园 - 【当耐特】
B
Blog RSS Feed
Attack and Defense Labs
Attack and Defense Labs
I
InfoQ
博客园 - 叶小钗
Cyberwarzone
Cyberwarzone
V2EX - 技术
V2EX - 技术
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Hugging Face - Blog
Hugging Face - Blog
H
Help Net Security
C
CERT Recently Published Vulnerability Notes

ZkeqのCoding日志

年度|我的2025年度总结 从想法到落地:我是如何在两个小时的时间里做出一个人格完善站的。(支持大家随意提问情感问题) Hexo 博客搭建:一份写给新手的完全指南 Golang | 山竹记账 Go 后端版学习笔记 云声计划 | 如何使用宝塔最新版 + Vercel,来部署一个私人的影视站+音乐站 Coding | 分别用2天半和9天,我用 ClaudeCode 写出了自己的影视站和音乐站 年度|我的2024年度总结 日常|IMYAI文本处理工具箱开源随记 项目课 | Vue.js开发印象云笔记 前端体系|Promise专题 - 原理以及是什么 KubeEdge | [进阶] KubeEdge高可用环境搭建 KubeEdge | [基础] KubeEdge架构设计及其环境搭建 KubeEdge | 边缘计算基本功--云原生 KubeEdge | 多视角认识边缘计算 KubeEdge | 边缘计算,其实就在你身边 章节起手式 (转) Kubernetes | 【尚硅谷】Kubernetes(k8s)入门到实战教程丨全新升级完整版 Kubernetes | 高可用的 K8S 集群构建 [完结] Kubernetes | 证书可用时间修改 Kubernetes | Helm 及其它功能性组件
Coding | 记一次使用 Claude Code 开发影视站&音乐站的开发历程
Zkeq · 2025-08-18 · via ZkeqのCoding日志

又有一段时间没有写博客了,是应该写一点什么东西的,哈哈哈哈哈。然后最近呢,开发的项目还是挺多的,可以给大家看的有两个项目,一个是影视站,一个是音乐站。那么,他们分别长以下的样子。

影视站线上预览地址:https://movie.onmicrosoft.cn/watch/688fc2ae37afc71b?episode=1

微信图片_20250730200910_886

音乐站线上预览地址:https://music.icodeq.com/play

屏幕截图(616)

这两个项目的工期都不是很长,那么就是通过 Git 的版本管理来查看一下这两个项目的开发历程

首先看影视站

第一步,肯定是新建一个项目 用了一些提示词之后,写了第一个炫酷的首页,作为这个项目的开端

image-20250817141424987

给了一点提示词,做了第一版播放链接页面,感觉效果还不错

image-20250817150243961

虽然UI有点乱 布局页有问题,但是仍然是个不错的开始

然后接着,调整了下布局

image-20250817150551213

播放器重构了下,引入了 plyr

image-20250817150627338

可以开始播放第一个视频了

image-20250817150703350

看到移动端布局还是乱的

image-20250817150822300

又适配了下移动端

image-20250817150848980

image-20250817150901704

移动端状态栏按钮变少了一点

image-20250817150936929

然后又给这个网站添加了剧集播放和进度条管理功能(无图)

然后修复了下这个封面 作为首字来作为logo

然后生成了下管理端的登录页面

image-20250817151857109

然后让AI将所有用到的API写到一个api.ts文件中,将接口整合一下,也就是从mock数据接入到 真实的API 地址里面去

image-20250817152009770

将前端用到的API文档输出为markdown文件

image-20250817151522924

image-20250817151532712

接着让AI根据文档生成后端 FastAPI 的 CURD 文件

image-20250817151709326

至此 后端功能已经写好

以为已经有了API文档 后台也一起写好了

image-20250817152120239

image-20250817152341181

image-20250817152452783

给网站的一些异常状态添加了报错提示

c5b697fb43753a4c82b877549d0f7692

生成一份 README.md ,项目开源 至此 项目开发完成,耗时两天(业余时间开发)。

image-20250817153303238

影视站就是比较简单,非常愉快的一次开发体验。

接着开发音乐站

音乐站首先给了一版提示词 是这样的

image-20250817154601005

效果不太好 和自己想象中的差太远了,但是给我了一个开始,接着就是想办法一点一点优化了,我在纸上简单的画了下网站的布局

f511fada5a1b207dc19f6a69def236e1

出来了一个大概的样子

image-20250817154923460

歌词两个字删掉

image-20250817155157613

让歌词正在播放的始终在中间,并且加了滚动逻辑,已经可以正常的可以点击跳转滚动

image-20250817155238562

加了点氛围灯效

image-20250817155342719

增加了全屏播放歌词功能

image-20250817155429664

侧边栏增加折叠功能

image-20250817155507187

给这个页面的组件增加了一些入场动画效果

image-20250817155550964

让歌词支持手动滚动

image-20250817155748812

升级了下背景效果的展示函数,更高性能和更高级

image-20250817155842182

同时也初步跑了下其余的页面

image-20250817155912177

image-20250817155918538

image-20250817155924736

image-20250817155929591

然后就是重构这几个AI直接写出来的页面

变成两行一排的歌曲页面

image-20250817160011216

继续重构

image-20250817160144585

重构搜索结果页面

image-20250817160211446

所有歌曲增加分页

image-20250817160230769

初步效果

image-20250817160308563

发现页面增加入场动画

image-20250817160354421

重构第二个 歌单页面

image-20250817160443264

歌单内页

image-20250817160456126

然后实现艺术家页面

image-20250817160526689

艺术家内页

image-20250817160538665

实现一个播放器的播放列表功能

image-20250817160641582

接着 着重实现了下播放器的真实播放功能(随机播放,列表播放等实现)

然后又实现了心情

image-20250817160839424

image-20250817160848099

然后让AI将所有用到的接口都做成API的形式,放在一个API函数里面

image-20250817161048419

还有前端的接口文档

image-20250817161103765

然后,初步生成了后端 CURD 和管理端

image-20250817161131056

管理端页面初步实现

image-20250817161143250

然后发现一个音乐只能关联一个艺术家,又实现了多表联表 实现一个音乐关联多个艺术家

image-20250817161607418

image-20250817161614807

然后,因为导入音乐太麻烦了,跟朋友研究了下,做了个网易云搜索元信息数据的API

image-20250817162432037

image-20250817162445261

然后尝试画了一版批量导入

fd8193fcd493644104c0bc63cf86eba4

做出来的页面的效果

image-20250817162556520

又支持了并发数设置(由 大佬 xcsoft 开发)

image-20250817162807206

在这个项目中已经解决 or 未解决的产生的 issues

image-20250817163347443

至此,音乐站全部开发完成,线上预览地址:Self-Music - 音乐流媒体平台

屏幕截图(616)

屏幕截图(617)

屏幕截图(618)

屏幕截图(619)

屏幕截图(621)

屏幕截图(620)

屏幕截图(624)

屏幕截图(623)