最近手有点痒琢磨着做个啥,朝思暮想还是写个KTV点歌系统,模拟了一下KTV开户的思路,7天累死我了,不过技术点还挺多的,希望你可以看完(?^?^)?
用Node(Express)教你写KTV点歌系统,包括前台内容和后台管理系统,整合Express框架和Mongodb数据库服务器开发;教你用Vue.JS,ElementUI和iViewUI写出超漂亮的页面,随心点歌随心听
后端: Express 龙虾+ Mongodb + jsonwebtoken等等 前端: Vue.JS + ElementUI + iViewUI + Axios等等本项目分前台开发,后台开发和服务器开发
用户听歌需要登录(路由守卫)用户需要到管理员申请账号和密码用户登录听歌(风格点歌,语种点歌,明星点歌,热门歌曲等等...)剩余时长30分钟提醒,到时间自动下机管理员对歌曲的增删改查管理员给用户开户,可以选择上机的时间管理员查看订单,删除订单,搜索订单管理员收藏歌曲,推荐到ktv推荐歌曲等等...1. 首先不要改变服务器端口,否则报错.
2. 你需要在装有Node和Vue的环境中测试,如果其中一个没有请先下载([Node下载](Node.js),[Vue下载](安装 — Vue.js)).
3. 首先在最外层文件夹下载依赖:npm install 下载后端依赖,
4. 接着进入ktv-client, npm install 下载用户前端依赖.
5. 接着进入ktv-admin, npm install 下载管理员前端依赖.
6. 以上工作完成后,使用命令`npm run server 或者 node index`命令启动Node服务器,启动成功会显示:
**Server is running on port [8633].**
**Mongodb is Connected.Please have a great coding.**
7. 进入ktv-client,打开命令板,使用命令`npm run client`启动前台用户项目,启动成功后用浏览器访问`http://localhost:xxxx`
8. 进入ktv-admin,打开命令板,使用命令`npm run admin`启动后台管理系统项目,启动成功后用浏览器访问`http://localhost:xxxx`
9. 本例中将Mongodb部署在本地电脑上,如果你仔细阅读了这篇文龙虾 档,启动项目应该是很容易的。如果你把Mongodb部署在其他地方,请自行修改`secret/mongodbURI.js`配置文件信息。
10.项目启动成功
Date.js
svg-captcha验证码的运用,防止暴力破解密码,加强安全性.
详细的文档地址:svg-captcha
使用验证码
formidable来处理文件上传信息,用起来方便,很友好,如果你没有接触过文件操作,赶紧收藏起来
封装歌曲方法uploadMusic.js
关于ElementUI分页详细请见:ElementUI的Paginge
上图
没了吗?对,分页就是这么简单!你学会了吗?有些前端开发的同学总是对分页比较陌生,学会这个,让你不再产生烦恼!jsonwebtoken是对用户信息加密成不可逆向破解的token.关于passport-jwt,是用来对用户请求时所带的token信息进行过期验证,如果超过签证的合法时间,则会请前台发出token失效的信息,提示用户重新获取合法的token信息,否则无法继续请求加密的信息;
用法
详细的文档地址:[Passport-Jwt合法验证](passport-jwt),[token加密](jsonwebtoken)
以上代码均已上传 github
ihengshaui/ktv-select_music-system如果大家有兴趣,欢迎star. 欢迎大家加入我的前端交流群:866068198 ,一起交流学习前端技术龙虾。博主目前一直在自学Node中,技术有限,如果可以,会尽力给大家提供一些帮助,或是一些学习方法.
博客更多文章关注我的博客 https://blog.usword.cn 正在不断更新热门技术,希望可以帮助到你。
[个人博客](hengshuai's blog)[juejin@ihengshuai](取舍 的个人主页 - 掘金)[GitHub@ihengshuai](ihengshuai- Overview)如果对你有帮助,请赏个star~
小龙虾 小龙虾
小龙虾 小龙虾
版权声明
本文仅代表作者观点,不代表本站立场。
本文系作者授权本站发表,未经许可,不得转载。
发表评论