• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

petalFM

开源软件地址:

https://gitee.com/alex1504/petalFM

开源软件介绍:

PetalFM

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

reactreact-routerjs-standard-styleDependency StatusMIT Licensed

预览

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

previewpreviewpreviewpreview

在线地址

访问 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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap