【毕业设计】基于SSM的KTV点歌系统设计与实现

快来打我* 2024-03-30 11:21 70阅读 0赞

#### 文章目录 ####

*  1 前言
 *  2 简介
 *   *  2.1 JaveWeb点歌系统设计
 *  3 开发环境
 *  4 系统功能
 *  5 项目设计结构
 *  6 技术实现
 *   *  6.1 管理员注册接口
     *  6.2 系统日志
     *  6.3 验证码实现
     *  6.4 歌曲于图片内容上传
     *  6.5 Vue、ElementUI分页使用
     *  6.6 后台管理系统
     *  6.7 前台点歌界面
 *  7 最后

## 1 前言 ##

Hi，大家好，学长今天向大家介绍 一个java web项目

**基于SSM的KTV点歌系统设计与实现**

大家可用于 毕业设计

适合专业：计算机科学与工程、软件工程、物联网、信管、数媒、大数据、等

## 2 简介 ##

想了解一下各端项目的同学可以看看，空余时间写了个类似KTV点歌系统的小项目，本项目包含前端、后端、移动端三端应用，这里和大家交流交流，有兴趣的可以看看，欢迎讨论。

### 2.1 JaveWeb点歌系统设计 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16]

## 3 开发环境 ##

后端： Express + Mongodb + spring boot等等

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

## 4 系统功能 ##

*  用户听歌需要登录(路由守卫)
 *  用户需要到管理员申请账号和密码
 *  用户登录听歌(风格点歌,语种点歌,明星点歌,热门歌曲等等…)
 *  剩余时长30分钟提醒,到时间自动下机
 *  管理员对歌曲的增删改查
 *  管理员给用户开户,可以选择上机的时间
 *  管理员查看订单,删除订单,搜索订单
 *  管理员收藏歌曲,推荐到ktv推荐歌曲

## 5 项目设计结构 ##

-- 服务器基本架构
    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文件

## 6 技术实现 ##

### 6.1 管理员注册接口 ###

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:"未知错误,注册失败"})
                        })
                }
            })
    })

**用postman注册或者其他工具进行管理员注册**

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 6.2 系统日志 ###

/** 
    *
    *  @author: Mr_Wei 
    *  @version: 1.0.0 
    *  @description: 格式化日期
    *  @Date: 2019/10/16 09:32
    *
    */ 
    
    Date.prototype.format = function(format) {
        
        var o = {
        
    		"M+": this.getMonth() + 1, //月份
    		"d+": this.getDate(), //日
    		"H+": this.getHours(), //小时
    		"m+": this.getMinutes(), //分
    		"s+": this.getSeconds(), //秒
    		"q+": Math.floor((this.getMonth() + 3) / 3), //季度
    		"f+": this.getMilliseconds() //毫秒
    	};
    	if (/(y+)/.test(format))
    		format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    	for (var k in o)
    		if (new RegExp("(" + k + ")").test(format))
    			format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    	return format;
    }
    
    export default Date.prototype.format
    
    
    然后我们使用其格式日期
    require(Date);
    // const now = new Date().format("yyyy/MM/dd HH:mm:ss.S");
    const now = new Date().format("yyyy/MM/dd HH:mm:ss");

### 6.3 验证码实现 ###

svg-captcha验证码的运用,防止暴力破解密码,加强安全性.

// 后台生成验证码
    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();
    },

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 2]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 3]

### 6.4 歌曲于图片内容上传 ###

封装歌曲方法uploadMusic.js

/** 
    *
    *  @author: Mr_Wei 
    *  @version: 1.0.0 
    *  @description: 封装上传音乐方法
    *  @Date: 2019/10/16 08:35
    *
    */ 
    
    const fs = require('fs');
    const path = require('path');
    const formidable = require('formidable');  // 文件处理库
    const formatTime = require('silly-datetime');  // 格式化数据
    
    module.exports = (req, res) => {
        
        
        let form = new formidable.IncomingForm();  //创建上传表单
        form.encoding = 'utf-8';  // 设置编码格式
        form.uploadDir = path.join(__dirname, '../static/music'); // 设置上传目录(这个目录必须先创建好)
        form.keepExtensions = true;  // 保留文件后缀名
        form.maxFieldsSize = 20 * 1024 *1024; // 设置文件大小
    
        /* 格式化form数据 */
        form.parse(req, (err, fields, files) => {
        
            let file = files.file;
            /* 获取异常 */
            if(err) {
        
                return res.status(500).json({
        'status': 500, result: '服务器内部错误'});
            }
            if(file.size > form.maxFieldsSize) {
        
                fs.unlink(file.path);
                return res.status(412).json({
        'status': 412, result: '音频不能超过20M'});
            }
    
            /* 存储后缀名 */
            let extName = '';
            switch (file.type) {
        
                case 'audio/mp3':
                    extName = 'mp3';
                    break;
            }
            if(extName.length == 0) {
        
                fs.unlink(file.path);
                return res.status(412).json({
        'status': 412, result: '只支持mp3格式音频'});
            }
            /* 拼接新的文件名 */
            let time = formatTime.format(new Date(), 'YYYYMMDDHHmmss');
            let num = Math.floor(Math.random() * 8999 + 10000);
            let songName = `${
        time}_${
        num}.${
        extName}`;
            let newPath = form.uploadDir + '/' + songName;
    
            /* 更改名字和路径 */
            fs.rename(file.path, newPath, (err) => {
        
                if(err) {
        
                    return res.status(500).json({
        'status': 500, result: '音频上传失败'});
                } else {
        
                    return res.send({
        'status': 200, 'msg': '音频上传成功', result: {
        src: songName}});
                }
            })
            
        })
    };

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 4]

### 6.5 Vue、ElementUI分页使用 ###

-- html
    <el-pagination
        v-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;
            });
        },
        // 切换size
        handleSizeChange(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;
            });
        },
    }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 5]

### 6.6 后台管理系统 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 6]

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 7]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 8]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 9]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 10]

### 6.7 前台点歌界面 ###

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 11]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 12]

## 7 最后 ##

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/8271b8433c454129a15ffedbe7e326b3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/f40465d63f33437c8941a6e8b91c3921.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/241cfad020d4459fb54a085fbfa03675.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/4e3d5151a461491aa7ec9967c7ec1968.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/b91e9b7d809e4e04af8e5bc01345dc43.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6660ef4d297e4702aaa85002a7c8445e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/686112ac5c794f75ad811562226d94f7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/bb7205cb90124330a03d2a57616781d2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c6919703dc8347b0bc87069640d99b36.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2265ab3ddceb478da06e06c5cd7fe73f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 10]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/dda06b6d1bb64a928f619b45f327d5ce.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 11]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/9278896abd664bd084e4f499298f1fd3.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbWF0aG9yLXNpbm9y_size_20_color_FFFFFF_t_70_g_se_x_16 12]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7aaadd4b564e495fbe399a2c65ed4aba.png