分别用 2 天半和 9 天，我用 ClaudeCode 写出了自己的影视站和音乐站（已开源） [附开发历程]

原创

Zkeq

发布于 2025-08-18 12:11:46

9743

文章被收录于专栏：ZkeqZkeq

如题，分别用2天半和9天，我用 ClaudeCode 写出了自己的影视站和音乐站（已开源）。本文附开发历程

TL; DR

私人音乐站（支持批量导入音乐搜刮） Self-Music 开源地址：

预览地址：https://music.icodeq.com/play

Github 地址：https://github.com/zkeq/Self-Music

CNB地址：https://cnb.cool/onmicrosoft/Self-Music

宝塔+Vercel一键部署教程：https://github.com/zkeq/Self-Music#-%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B

影视站 Self-Cinema 开源地址

进击的巨人第一季：https://movie.onmicrosoft.cn/watch/be81cd5131c5b177

进击的巨人第二季：https://movie.onmicrosoft.cn/watch/c8b8e964f3de2621

项目开源了：

https://github.com/zkeq/Self-Cinema

https://cnb.cool/onmicrosoft/Self-Cinema

可搭配文件床项目传到自己多吉云使用（1毛钱1GB）非常便宜

文件床开源地址：https://github.com/zkeq/shareFilePublic

开发历程

Coding ｜记一次使用 Claude Code 开发影视站 & 音乐站的开发历程

https://icodeq.com/2025/23fec5ee98fa/

项目截图：

影视站：

音乐站：

音乐分享服务站：

项目的开发历程呢，在我的博客上写了：https://icodeq.com/2025/23fec5ee98fa/

也是非常愉快的一次开发体验

下面摘抄全文如下

又有一段时间没有写博客了，是应该写一点什么东西的，哈哈哈哈哈。然后最近呢，开发的项目还是挺多的，可以给大家看的有两个项目，一个是影视站，一个是音乐站。那么，他们分别长以下的样子。
影视站线上预览地址：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)