又有一段时间没有写博客了,是应该写一点什么东西的,哈哈哈哈哈。然后最近呢,开发的项目还是挺多的,可以给大家看的有两个项目,一个是影视站,一个是音乐站。那么,他们分别长以下的样子。
影视站线上预览地址:https://movie.onmicrosoft.cn/watch/688fc2ae37afc71b?episode=1
音乐站线上预览地址:https://music.icodeq.com/play
这两个项目的工期都不是很长,那么就是通过 Git 的版本管理来查看一下这两个项目的开发历程
首先看影视站
第一步,肯定是新建一个项目 用了一些提示词之后,写了第一个炫酷的首页,作为这个项目的开端
给了一点提示词,做了第一版播放链接页面,感觉效果还不错
虽然UI有点乱 布局页有问题,但是仍然是个不错的开始
然后接着,调整了下布局
播放器重构了下,引入了 plyr
可以开始播放第一个视频了
看到移动端布局还是乱的
又适配了下移动端
移动端状态栏按钮变少了一点
然后又给这个网站添加了剧集播放和进度条管理功能(无图)
然后修复了下这个封面 作为首字来作为logo
然后生成了下管理端的登录页面
然后让AI将所有用到的API写到一个api.ts文件中,将接口整合一下,也就是从mock数据接入到 真实的API 地址里面去
将前端用到的API文档输出为markdown文件
接着让AI根据文档生成后端 FastAPI 的 CURD 文件
至此 后端功能已经写好
以为已经有了API文档 后台也一起写好了
给网站的一些异常状态添加了报错提示
生成一份 README.md ,项目开源 至此 项目开发完成,耗时两天(业余时间开发)。
影视站就是比较简单,非常愉快的一次开发体验。
接着开发音乐站
音乐站首先给了一版提示词 是这样的
效果不太好 和自己想象中的差太远了,但是给我了一个开始,接着就是想办法一点一点优化了,我在纸上简单的画了下网站的布局
出来了一个大概的样子
歌词两个字删掉
让歌词正在播放的始终在中间,并且加了滚动逻辑,已经可以正常的可以点击跳转滚动
加了点氛围灯效
增加了全屏播放歌词功能
侧边栏增加折叠功能
给这个页面的组件增加了一些入场动画效果
让歌词支持手动滚动
升级了下背景效果的展示函数,更高性能和更高级
同时也初步跑了下其余的页面
然后就是重构这几个AI直接写出来的页面
变成两行一排的歌曲页面
继续重构
重构搜索结果页面
所有歌曲增加分页
初步效果
发现页面增加入场动画
重构第二个 歌单页面
歌单内页
然后实现艺术家页面
艺术家内页
实现一个播放器的播放列表功能
接着 着重实现了下播放器的真实播放功能(随机播放,列表播放等实现)
然后又实现了心情
然后让AI将所有用到的接口都做成API的形式,放在一个API函数里面
还有前端的接口文档
然后,初步生成了后端 CURD 和管理端
管理端页面初步实现
然后发现一个音乐只能关联一个艺术家,又实现了多表联表 实现一个音乐关联多个艺术家
然后,因为导入音乐太麻烦了,跟朋友研究了下,做了个网易云搜索元信息数据的API
然后尝试画了一版批量导入
做出来的页面的效果
又支持了并发数设置(由 大佬 xcsoft 开发)
在这个项目中已经解决 or 未解决的产生的 issues
至此,音乐站全部开发完成,线上预览地址:Self-Music - 音乐流媒体平台