基于 react 构建的简易精美的 FM
以下预览图截取环境是 iPhone8P 微信内置浏览器
https://github.com/alex1504/PetalFM
访问 http://fm.huzerui.com/, 更好的体验效果请在移动端体验,扫描下面二维码。
.
|-- config // webpack配置目录
|-- database // 数据库备份目录
|-- media // readme描述资源
|-- src // 源码目录
| |-- components // 公共组件
| |-- pages // 页面组件
| |-- Login // 登陆页面
| |-- Guide // 标签定制页
| |-- Index // 主页
| |-- Search // 搜索页
| |-- Admin // 后台数据录入页(仅管理员可见)
| |-- Dislike // 用户不兴趣歌曲页
| |-- router // 路由定义
| |-- services // 后端服务目录
| |-- avinit.js // leancloudSDK初始化
| |-- config.js // 数据库相关配置
| |-- songServices.js // 歌曲相关服务
| |-- userServices.js // 用户相关服务
| |-- index.js // 后端数据库服务入口
| |-- store // 状态管理目录
| |-- index.js // 加载各种store模块
| |-- types // 定义触发状态改变类型
| |-- reducers // 状态生成器
| |-- Utils // 工具函数
| |-- index.js // 程序入口文件
|-- .gitignore // Git提交忽略文件规则
|-- LICENSE // 授权协议
|-- README.md // 项目说明
|-- package.json // 配置项目相关信息
.
由于后端云开启了 WEB 安全域名,本地克隆项目后无法直接运行,解决方式如下:
前置工作:
git clone https://github.com/alex1504/PetalFM.git
npm install
/src/services/config.js
配置如下:export const APP_ID = 'YOUR APP_ID FOUND IN LEANCLOUD APP SETTING';
export const APP_KEY = 'YOUR APP_KEY FOUND IN LEANCLOUD APP SETTING';
export const SUPER_USER_OBJECT_ID = 'YOUR SUPERUSER ACCOUNT OBJECT ID';
只有管理员才能看到 Admin 入口并且通过搜索接口录入歌曲,并设置歌曲所属类别。
开发:
npm run dev
运行项目npm run build
打包项目,/dist/
文件夹为打包后的项目文件部署:
/api/
请求转发到http://music.163.com/api
(若需增加别的转发机制请修改 package.json 中的 proxy 配置,完整配置参考http-proxy),因此部署到服务器时请借助 nginx 或 nodejs 服务器进行接口转发,否则搜索和录入服务不生效。MIT © alex1504