14 Star 32 Fork 11

alex1504 / petalFM

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

PetalFM

基于react构建的简易精美的FM

react react-router js-standard-style Dependency Status MIT Licensed

预览

以下预览图截取环境是iPhone8P微信内置浏览器

preview preview preview preview

在线地址

访问 http://fm.huzerui.com/, 更好的体验效果请在移动端体验,扫描下面二维码。

qrcode

测试账号

  • 用户名: petalFM
  • 密码: petalFM

技术栈

based on

特点

  • 材质设计风格界面。主色调为粉色色调。
  • 使用Leancloud提供数据服务。
  • 专属FM和心动FM定制

功能

  • [x]登录、注册和注销
  • [x]定制个人偏好标签
  • [x]精选调频,私人调频,红心调频频道选择
  • [x]搜索歌曲,收集歌曲,下载歌曲
  • [x]将歌曲添加到垃圾箱或从中回收歌曲
  • []个人配置、话题切换等。

项目目录说明

.
|-- 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安全域名,本地克隆项目后无法直接运行,解决方式如下:

前置工作:

  • Step1:执行命令克隆项目到本地git clone https://github.com/alex1504/PetalFM.git
  • Step2:安装依赖 npm install
  • Step3:在 https://leancloud.cn/ 注册账号并且在后台创建一个leancloud应用
  • Step4:在leancloud应用后台导入根目录database下面的数据库,并且在_User表创建你的管理员账号(用户名和密码需为4-8位的数字、字母或_)
  • Step5:修改 /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入口并且通过搜索接口录入歌曲,并设置歌曲所属类别。

开发:

  • Step6:执行 npm run dev运行项目
  • Step7:执行 npm run build打包项目,/dist/文件夹为打包后的项目文件

部署:

  • Step9:在开发过程中,webpack-dev-server将本地 /api/请求转发到http://music.163.com/api(若需增加别的转发机制请修改package.json中的proxy配置,完整配置参考http-proxy),因此部署到服务器时请借助nginx或nodejs服务器进行接口转发,否则搜索和录入服务不生效。

更多

协议

MIT © alex1504

MIT License Copyright (c) 2018 Zerui Hu Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

基于react构建的简易精美的FM 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/alex1504/petalFM.git
git@gitee.com:alex1504/petalFM.git
alex1504
petalFM
petalFM
master

搜索帮助