{"id":24600172,"url":"https://github.com/real-jacket/cloudmusic-hooks","last_synced_at":"2025-06-15T14:09:17.603Z","repository":{"id":41496908,"uuid":"247414860","full_name":"real-jacket/cloudmusic-hooks","owner":"real-jacket","description":"一个基于react + hooks + redux + immutable 实现的网易云音乐移动端应用 ","archived":false,"fork":false,"pushed_at":"2023-12-08T14:15:23.000Z","size":1579,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-30T18:44:00.772Z","etag":null,"topics":["hooks","immutable","react","redux"],"latest_commit_sha":null,"homepage":"https://www.realjacket.fun/music","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/real-jacket.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-15T06:36:17.000Z","updated_at":"2023-12-08T14:04:31.000Z","dependencies_parsed_at":"2023-01-20T01:32:57.391Z","dependency_job_id":null,"html_url":"https://github.com/real-jacket/cloudmusic-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fcloudmusic-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fcloudmusic-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fcloudmusic-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/real-jacket%2Fcloudmusic-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/real-jacket","download_url":"https://codeload.github.com/real-jacket/cloudmusic-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251759247,"owners_count":21639193,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","immutable","react","redux"],"created_at":"2025-01-24T13:19:11.521Z","updated_at":"2025-04-30T18:24:51.489Z","avatar_url":"https://github.com/real-jacket.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 网易云音乐移动端 React + hooks\n\n[![CloudMusic CI/CD](https://github.com/real-jacket/cloudmusic-hooks/actions/workflows/main.yml/badge.svg)](https://github.com/real-jacket/cloudmusic-hooks/actions/workflows/main.yml)\n\n一个基于 React 技术栈开发的网易云音乐移动端，使用技术栈为 react + hooks + redux + react-router + immutable + axios 等，借用开源的 网易云 api 开发而成。\n\n## 开发文档\n\n这是一个个人学习项目，项目开发参考自掘金小册 [React Hooks 与 Immutable 数据流实战](https://juejin.im/book/5da96626e51d4524ba0fd237) , 使用 react-create-app 脚手架开发而成，项目里包含大量的UI组件、以及一些高度封装的自定义 hooks 组件，使用了业内知名的第三方库来实现特殊的动画效果。\n\n### 目录结构\n\n```text\n|── .github/workflows         github action 固定部署目录\n|   ├── main.yml              部署配置文件\n|── deploy_sh                 shell 部署脚本\n|   ├── docker-compose.yml    docker-compose 配置文件\n|   ├── start.sh              服务器项目部署脚本\n├── nginx                     nginx 服务配置\n├── public                    静态文件目录\n├── src                       源码目录\n|   ├── api                   接口管理目录\n|   ├── application           页面目录（根据路由分割）\n|   |   ├── Home              页面组件\n|   |   |   ├── Banner        页面 Home 私有组件\n|   |   |   ├── store         组件 redux 状态\n|   |   |   ├── index.js      Home 页面逻辑\n|   |   |   └── style.js      Home 页面样式\n|   ├── assets                静态文件目录（字体、icon、全局css变量相关）\n|   ├── baseUI                通用UI组件\n|   ├── components            公共组件目录\n|   |   |── Header            全局公共组件\n|   |   |   ├── index.js      Header组件\n|   |   |   └── style.js      Header组件样式文件\n|   ├── config                项目配置\n|   ├── routes                项目路由集中配置\n|   ├── utils                 公共方法库\n|   ├── store                 状态管理\n|   ├── App.js                App 组件文件\n|   ├── index.js              项目入口文件\n|   └── style.js              全局 style-componets 样式文件\n├── .dockerignore             Docker 镜像构建 ignore 文件\n├── Dockerfile                镜像构建配置\n└── package.json\n```\n\n### 功能实现\n\n- [x] 首页\n- [x] 歌手排行页\n- [x] 榜单页\n- [x] 歌单页/个人专辑页\n- [x] 播放页\n- [ ] 搜索页\n- [ ] 个人信息侧边栏\n\n### ci/cd 部署实现\n\n这个项目实现了基于 github action 与 docker 容器平台的 ci/cd 自动化流程。\n\n目前流程步骤：\n\n1. github 代码库 push 代码 master 分支，自动触发 action。\n2. 拉取 master 分支代码进行 build 打包。\n3. 根据 Dockerfile 配置文件进行 镜像构建，并上传到镜像仓库，一般是个人的 Docker Hub。\n4. 通过 ssh 登录个人服务器，上传执行脚本文件 deploy_sh。\n5. 服务器登陆 docker 仓库。\n6. 执行 shell 部署脚本，拉取最近构建的镜像，并 通过docker-compose 配置文件运行容器。\n\n## 项目计划\n\n这个项目未来除了会新增与完善一些页面功能外，会尽力更新以下内容：\n\n- [ ] 项目性能优化\n- [ ] typescript 重构实现\n- [ ] 项目单元测试 cypress/jest\n- [ ] 原生移动端 flutter 版本实现\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freal-jacket%2Fcloudmusic-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freal-jacket%2Fcloudmusic-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freal-jacket%2Fcloudmusic-hooks/lists"}