提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔

ktv點歌系統 Vue +Express+ Mongodb

• 前言
• 一、技術棧
• 二、功能介紹
• • 1.本項目分前臺開發,后臺開發和服務器開發
  • 項目設計結構
  • 運行截圖
  • 2.注冊
  • Vue、ElementUI分頁使用
• 源碼

---

前言

用Express寫的KTV點歌系統，
包括前臺內容和后臺管理系統，
整合Express框架和Mongodb數據庫服務器開發；
用Vue.JS，ElementUI和iViewUI寫的頁面,隨心點歌隨心聽

---

提示：以下是本篇文章正文內容，下面案例可供參考

一、技術棧

后端： Express + Mongodb + jsonwebtoken等等

前端： Vue.JS + ElementUI + iViewUI + Axios等等

二、功能介紹

1.本項目分前臺開發,后臺開發和服務器開發

• 用戶聽歌需要登錄(路由守衛)
• 用戶需要到管理員申請賬號和密碼
• 用戶登錄聽歌(風格點歌,語種點歌,明星點歌,熱門歌曲等等…)
• 剩余時長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 – 格式化日期
| | └── Date.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配置

運行截圖

代碼如下（示例）：

import numpy as np import pandas as pd import matplotlib.pyplot as plt import seaborn as sns import warnings warnings.filterwarnings('ignore') import ssl ssl._create_default_https_context = ssl._create_unverified_context

2.注冊

代碼如下（示例）：

admin.js最下面有個注冊接口// 管理員注冊 router.post("/account/register", (req, res) => {const email = req.body.email;Admin.findOne({email}).then(hasOne => {if(hasOne){return req.status(422).json({status:"422", result:"郵箱被占用"});}else{const username = req.body.username;const password = req.body.password;const identity = req.body.identity ? req.body.identity : null;const date = new Date().format("yyyy/MM/dd HH:mm:ss");const newAdmin = new Admin({email,username,password,identity,date});newAdmin.save().then(() => {res.json({status:"200", result:"注冊成功"})}).catch(err => {console.log(err);res.status(500).json({status:"500", result:"未知錯誤,注冊失敗"})})}}) })--- ## 驗證碼(svg-captcha)```c // 后臺生成驗證碼 router.get("/getCaptcha", (req, res) => {var captcha = svgCaptcha.create({ // 翻轉顏色 inverse: false, // 字體大小 fontSize: 38, // 噪聲線條數 noise: 3, // 寬度 width: 80, // 高度 height: 32, }); // 保存到session,忽略大小寫 req.session = captcha.text.toLowerCase(); console.log(req.session); //0xtg 生成的驗證碼//保存到cookie 方便前端調用驗證res.cookie('captcha', req.session); res.setHeader('Content-Type', 'image/svg+xml');res.send(String(captcha.data));res.end(); })// 前臺獲取驗證碼 --HTML <img width="80" style="background:#EEE9E9;margin-left:30px;" ref="captcha" height="32" src="http://localhost:3001/api/user/getCaptcha" @click="refreshCaptcha">--js // 獲取驗證碼cookie getCookie(cname){var name = cname + "=";var ca = document.cookie.split(';');for(var i=0; i<ca.length; i++){var c = ca[i].trim();if (c.indexOf(name)==0) return c.substring(name.length,c.length);}return ""; }, // 刷新驗證碼 refreshCaptcha(){this.$refs.captcha.src = "http://localhost:3001/api/user/getCaptcha?d=" + Math.random(); },最后用 填寫的驗證碼進行對比

Vue、ElementUI分頁使用

-- html <el-paginationv-if='paginations.total > 0':page-sizes="paginations.page_sizes":page-size="paginations.page_size":layout="paginations.layout":total="paginations.total":current-page.sync='paginations.page_index'@current-change='handleCurrentChange'@size-change='handleSizeChange'> </el-pagination>-- js data(){return{allUsers:[], // 用來存儲最終信息, 被顯示的dom點調用allTableData:[], // 用戶承接分頁設置的數據paginations: { // 分頁組件信息page_index: 1, // 當前位于哪頁total: 0, // 總數page_size: 5, // 1頁顯示多少條page_sizes: [5, 10, 15, 20], //每頁顯示多少條layout: "total, sizes, prev, pager, next, jumper" // 翻頁屬性},} }, methods:{// 獲取當前頁handleCurrentChange(page) {let sortnum = this.paginations.page_size * (page - 1);let table = this.allTableData.filter((item, index) => {return index >= sortnum;});// 設置默認分頁數據this.getAllUsers = table.filter((item, index) => {return index < this.paginations.page_size;});this.getAllUsers = table.filter((item, index) => {return index < this.paginations.page_size;});},// 切換sizehandleSizeChange(page_size) {this.paginations.page_index = 1;this.paginations.page_size = page_size;this.getAllUsers = this.allTableData.filter((item, index) => {return index < page_size;});},// 總頁數setPaginations() {this.paginations.total = this.allTableData.length;this.paginations.page_index = 1;this.paginations.page_size = 5;// 設置默認分頁數據this.getAllUsers = this.allTableData.filter((item, index) => {return index < this.paginations.page_size;});}, }

源碼

https://pan.baidu.com/s/1ghOVb-FnwsR6Sw-_WjfbPw?pwd=2312 提取碼: 2312

總結

以上是生活随笔為你收集整理的ktv点歌系统 Vue +Express+ Mongodb的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。