文章目录
🔥前言
访问网址 →http://www.godsplan.top/apps/allapps
Github → https://github.com/flowers-10/gods_plan
从立项到上线其实已经过了 4个月了,靠着碎片时间开发的一个博客网站,包括购买服务器,网站备案等一整套流程下来,项目耗时曲线也被拉长,不过功夫不负有心人,时间冉冉—
—趁着九月初中秋节这个热浪余波未了,Heat Waves ♨️ 🌊 1.0版本也终于正式上线!!
文章结尾会附上浏览链接
这是一个通过全栈开发的一个极简风响应式多功能音乐播放器+知识博客web (单人役)
后端技术栈:nodejs
/ express
/express-ws
前端技术栈:vue3
/typescript
/vite
/axios
/pinia
/vue-router
/element-plus
UI框架选型来自codepan
展示:
Mobile
ipad
web
一、⭐项目简介
热浪网是一个个人音乐博客,包含了音乐流媒体、发现浏览、app主页、博客浏览学习、聊天交流等功能
包含了 Apps 、Music 、 Discover 、 Knowledge 四大模块
具体页面结构:
tips:手机版左上角G图标可以打开侧边栏
二、⭐功能简介
✨1.登录界面
主要使用了网易云音乐的接口进行登录(手机验证码 or 密码登陆)
🤏可拖拽弹框组件: vue自定义拖拽指令 + 封装组件 + 动态插槽 + 表单验证 + vue transiton动画组件
🔐 权限:动态路由 (update页面只有管理员才能进入)+ token + 路由拦截器(例:我的音乐界面需要登录才能访问,如果用户进入此路由会返回登录界面)
web效果
🎹2.音乐主页展示
🖱️可根据滚轮滚动切换高亮标题的二级菜单
web 效果
🕶️3. 主题切换
🕶️ 主题切换:
切换根节点上的 css lightmodel or darkmodel + css 变量var()
🤏封装可拖拽主题切换按钮:
检测用户是移动端还是pc端,移动端会隐藏按钮,自定义拖拽指令,双击切换全局css
web效果
切换效果:
mobile效果
💡 light
🖤 dark
📰 4、文章管理
富文本编辑器 添加图片:通过接口上传到node服务器,再返回url显示
增加文章类型
删除选中文章 : 可多选
修改文章:
web效果
添加文章:
web效果
⭐5.博客分享和知识学习
跟随滚轮滚动响应的 TOP 按钮
响应式的文章列表
文章列表展示:
mobile效果
web效果
文章内容:
iapd效果
🎶 6.歌单列表详情
mv入口
歌手界面入口
专辑页面
单机歌曲所在的行播放歌曲
播放全部歌曲(50首以内)
持久化处理,保存歌单的id,下次通过侧边栏入口进入时会记忆原id的歌单(默认歌单:猜你喜欢)
封装公共组件 歌曲列表组件 (歌曲列表、歌手最热50首歌曲、播放列表中使用)
ipad效果
🎶7.播放列表
删除播放列表中的歌曲
刷新歌曲(最多50首, 网易云的防盗链,歌曲url会过期,刷新歌曲后即可听歌)
ipad效果
📺8.mv播放
moblie效果
总结
更多的内容请移步以下链接体验
一个极简风格的音乐博客 点这里“浏览链接”
= -=求求大佬们给我点个赞吧!!!💗💗💗⭐⭐⭐
项目还有许多功能开发完善中~敬请期待(搜索功能、设置、animategril养成等)