gb-music是一个在线音乐平台,前端使用React+TypeScript, 管理员端则使用vue , 后端使用Express+MySQL。
项目样式
项目技术与环境:
tip :所有数据管理员上传,不依赖于任何第三方 后台API 前端:
- node v16.15.0
- yarn v1.22.18
- create-react-app v5.0.1
- @vue/cli v4.5.13
- vue v2.6.11
- react v17.0.2
- tsc v2.0.4
- typescript v4.1.2
后端
- express v4.17.1
- MySQL v8.0.22
- redis
开发工具
- webStrom
- vscode
- navicat premium
- apipost
- git v2.30.0
其它主要npm包详情见package.json
项目首页
管理员端
项目详细介绍
-
服务端
在线音乐平台后台主要通过Express构建服务,主要使用的中间件有router,controller和service,分别管理路由,控制层和业务逻辑层。本系统使用http1.1,若要使用http2.0,直接使用./app/ssl下的证书即可(或者使用阿里云免费证书)。同时在app.js中引入
http2-express-bridge即可。同时使用
const app = http2Express(express);
创建App实例。 项目目录结构如图所示。
- app存放系统主要一些配置信息。
- alipay 存放沙箱模拟支付时所需的公钥和私钥
- key用于存放jwt生成token时所需的公钥和私钥
- ssl 用于存放http2.0所需证书(阿里云免费证书)
- config 导出相关配置的路径URL或者端口号等
- database.js配置数据库(创建连接池,连接数据库等)
- index.js 到处express实例,注册路由等
- refis.js配置redis(用于实现歌手飙升榜)
- errorHandle 错误处理返回相应的错误信息和http状态码
- constants存放系统常量
- controller 控制层
- network 发送网络请求相关配置
- router 路由管理
- service 数据库(sql)
- static 静态资源
- utils 工具函数
- main.js项目入口
- upload用于存放系统上传的文件信息(用户头像,专辑,歌单封面,视频源文件,歌曲源文件,电台源文件等)
controller层
service层
数据库则使用mysql,数据库表如图所示
- 前端
- 后台管理系统 更新中...
项目演示地址 gb-music