gb-music (在线音乐平台) 毕业设计

489 阅读2分钟

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

项目首页

QQ截图20220606212244.png

管理员端

Snipaste_2022-06-06_21-23-25.png

项目详细介绍

  • 服务端

    在线音乐平台后台主要通过Express构建服务,主要使用的中间件有router,controller和service,分别管理路由,控制层和业务逻辑层。本系统使用http1.1,若要使用http2.0,直接使用./app/ssl下的证书即可(或者使用阿里云免费证书)。同时在app.js中引入http2-express-bridge即可。同时使用

const app = http2Express(express);

创建App实例。 项目目录结构如图所示。

51.png

  1. app存放系统主要一些配置信息。
    1. alipay 存放沙箱模拟支付时所需的公钥和私钥
    2. key用于存放jwt生成token时所需的公钥和私钥
    3. ssl 用于存放http2.0所需证书(阿里云免费证书)
    4. config 导出相关配置的路径URL或者端口号等
    5. database.js配置数据库(创建连接池,连接数据库等)
    6. index.js 到处express实例,注册路由等
    7. refis.js配置redis(用于实现歌手飙升榜)
    8. errorHandle 错误处理返回相应的错误信息和http状态码
  2. constants存放系统常量
  3. controller 控制层
  4. network 发送网络请求相关配置
  5. router 路由管理
  6. service 数据库(sql)
  7. static 静态资源
  8. utils 工具函数
  9. main.js项目入口
  10. upload用于存放系统上传的文件信息(用户头像,专辑,歌单封面,视频源文件,歌曲源文件,电台源文件等)

controller层

c.png

service层

s.png

数据库则使用mysql,数据库表如图所示

database.png

  • 前端
  • 后台管理系统 更新中...

项目演示地址 gb-music