最近手有点痒琢磨着做个啥,朝思暮想还是写个KTV点歌系统,模拟了一下KTV开户的思路,7天累死我了,不过技术点还挺多的,希望你可以看完(〜㉨)〜
用Node(Express)教你写KTV点歌系统,包括前台内容和后台管理系统,整合Express框架和Mongodb数据库服务器开发;教你用Vue.JS,ElementUI和iViewUI写出超漂亮的页面,随心点歌随心听
思维导图
技术栈
-
后端: Express + Mongodb + jsonwebtoken等等
-
前端: Vue.JS + ElementUI + iViewUI + Axios等等
功能介绍
本项目分前台开发,后台开发和服务器开发
- 用户听歌需要登录(路由守卫)
- 用户需要到管理员申请账号和密码
- 用户登录听歌(风格点歌,语种点歌,明星点歌,热门歌曲等等…)
- 剩余时长30分钟提醒,到时间自动下机
- 管理员对歌曲的增删改查
- 管理员给用户开户,可以选择上机的时间
- 管理员查看订单,删除订单,搜索订单
- 管理员收藏歌曲,推荐到ktv推荐歌曲
- 等等…
项目设计结构
-- 服务器基本架构
ktv-select_music-system
├── README.md
├── index.js -- 后台文件入口
├── test.http -- 测试文件
├── api -- 路由文件
│ ├── admin.js -- 配置管理员的操作
| ├── music.js -- 配置歌曲信息
| ├── user.js -- 配置用户的相关操作
| └── safecode.js -- 配置安全码
├── config -- 配置
| ├── Date.js -- 配置日期格式化插件
| ├── delNoUse.js -- 封装闲置删除闲置资源方法
| ├── http.js -- 配置跨域
| ├── isBadAccount.js -- 封装账户是否合法
| ├── newaccount.js -- 封装随机开户方法
| ├── passport.js -- 验证token是否合法
| ├── uploadImg.js -- 封装上传图片方法
| └── uploadMusic.js -- 封装上传歌曲方法
├── ktv-admin --后台管理系统界面
├── ktv-client --前台用户点歌项目界面
├── dbModel
| └── ** -- Mongodb数据库的一些模型
├── mongodb
| └── mongodb.js -- 配置Mongodb,链接数据库
├── secret
| ├── mongodbURI.js -- Mongodb地址
| └── jwtkey.js -- token的私钥
├── static -- 资源存放处
| ├── music -- 歌曲上传目标文件夹
| ├── poster -- 歌曲海报上传目标文件夹
└── └── view -- 配置404文件
-- 后台管理系统架构
ktv-admin
├── README.md
├── public
| ├── index.html -- vue挂载页面
| └── ** -- 你可以在这里链接少量静态资源
├── src -- 开发文件夹
| ├── App.vue -- Vue挂载根页面
| ├── main.js -- Vue程序入口文件,挂载各种组件
| ├── router.js -- Vue路由配置文件
| ├── store.js -- Vuex的状态管理文件
| ├── assets -- 静态资源文件夹
| ├── components --公共组件
| | └── nav.vue -- 后台导航栏
| ├── plugins --插件
| | ├── axios.js -- 配置跨域,拦截器等等
| | ├── Date.js -- 格式化日期
| | └── wsmLoading.js -- 加载动画Loading
| ├── stores -- 状态管理文件夹
| | └── adminStore.js -- 管理员状态
| ├── views -- 页面文件夹
| | ├── 404.vue -- 404页面
| | ├── adminlikes.vue -- 管理员处理ktv收藏歌曲
| | ├── allorders.vue -- 订单管理
| | ├── Home.vue -- 后台根页面
| | ├── Index.vue -- 后台首页
| | ├── managemusic.vue -- 音乐管理
| | ├── user_service.vue -- 给用户开户
| | └── login.vue -- 后台登录
└── babel.config.js -- babel配置
-- 前台用户听歌架构
ktv-client
├── README.md
├── public
| ├── index.html -- vue挂载页面
| └── ** -- 你可以在这里链接少量静态资源
├── src -- 开发文件夹
| ├── App.vue -- Vue挂载根页面
| ├── main.js -- Vue程序入口文件,挂载各种组件
| ├── router.js -- Vue路由配置文件
| ├── store.js -- Vuex的状态管理文件
| ├── assets -- 静态资源文件夹
| ├── components --公共组件
| | ├── bottomNav.vue -- 底部音乐控制区域
| | └── topNav.vue -- 顶部信息区域
| ├── config --配置
| | ├── addSong.js --封装选取歌曲方法
| | ├── isBadAccount.js --验证账户合法性
| | ├── isLogin.js --是否登录
| | ├── nextSong.js --封装下一首歌曲方法
| | └── prevSong.js --封装上一首歌曲方法
| ├── plugins --插件
| | ├── axios.js -- 配置跨域,拦截器等等
| | └── wsmLoading.js -- 加载动画Loading
| ├── stores -- 状态管理文件夹
| | └── song.js -- 存储歌曲信息
| ├── views -- 页面文件夹
| | ├── 404.vue -- 404页面
| | ├── abc.vue -- 拼音点歌
| | ├── artist.vue -- 明星点歌
| | ├── Home.vue -- 后台根页面
| | ├── Index.vue -- 后台首页
| | ├── hot.vue -- 热播歌曲
| | ├── ktvlikes.vue -- ktv推荐歌曲
| | ├── selected.vue -- 已选歌曲
| | ├── style.vue -- 风格点歌
| | └── language.vue -- 语种点歌
├── babel.config.js -- babel配置
└── vue.config.js -- vue配置
项目启动介绍
-
首先不要改变服务器端口,否则报错.
-
首先在最外层文件夹下载依赖:npm install 下载后端依赖,
-
接着进入ktv-client, npm install 下载用户前端依赖.
-
接着进入ktv-admin, npm install 下载管理员前端依赖.
-
以上工作完成后,使用命令
npm run server 或者 node index &
命令启动Node服务器,启动成功会显示:Server is running on port [8633].
Mongodb is Connected.Please have a great coding.
-
进入ktv-client,打开命令板,使用命令
npm run client
启动前台用户项目,启动成功后用浏览器访问http://localhost:xxxx
-
进入ktv-admin,打开命令板,使用命令
npm run admin
启动后台管理系统项目,启动成功后用浏览器访问http://localhost:xxxx
-
本例中将Mongodb部署在本地电脑上,如果你仔细阅读了这篇文档,启动项目应该是很容易的。如果你把Mongodb部署在其他地方,请自行修改
secret/mongodbURI.js
配置文件信息。
10.项目启动成功
技术攻关
Date方法
由于脑袋不好使的原因加上js没有元素格式化日期的方法,就瞎掰一个(值得学习)
Date.js
/**
*
* @author: Mr_Wei
* @version: 1.0.0
* @description: 格式化日期
* @Date: 2019/10/16 09:32
*
*/
Date