基于Vue与Spring Boot的前后端分离音乐网站播放器系统的设计与实现

摘要
本文介绍了一个基于前后端分离技术的音乐网站播放器系统，该系统包括音乐网站播放器、音乐网站管理系统以及音乐网站后台。前端部分采用了Vue框架，后端则使用了Spring Boot、MyBatis-Plus和MySQL数据库。前端安装教程详细说明了Node.js环境的搭建过程，推荐使用特定版本的Node.js以避免潜在的bug，并提供了项目运行的具体步骤，包括安装运行环境和启动项目。后端安装教程则涵盖了Maven仓库的配置、数据库的创建与脚本执行、配置文件的修改以及静态资源的放置等关键步骤。此外，还针对前台运行时可能遇到的“webpack-dev-server不是内部或外部命令”的问题提供了解决方案，并指出了因Node.js环境问题导致的另一种错误及其解决方法，即通过修改copyWebpackPlugin配置中的静态资源路径来解决问题。

关键词：音乐网站播放器；前后端分离；Vue；Spring Boot；MySQL

目录
第一章 绪论 - 7 -
1.1开发背景 - 7 -
1.2开发意义 - 7 -
第二章 系统分析 - 8 -
2.1系统的需求分析 - 8 -
2.2系统开发设计思想 - 8 -
2.3系统开发步骤 - 8 -
2.4系统的主要技术 - 9 -
2.4.1 B/S系统的三层体系结构 - 9 -
2.4.2系统架构 - 10 -
2.5系统的运行环境和开发平台 - 12 -
2.5.1硬件设备及操作系统 - 12 -
2.5.2系统开发工具 - 13 -
2.5.3开发工具简介 - 13 -
第三章 系统设计 - 15 -
3.1系统流程 - 15 -
3.2系统功能模块的划分 - 16 -
3.2.1用户管理 - 16 -
3.2.3音乐管理 - 16 -
3.2.5系统管理 - 16 -
3.2.6歌手管理 - 16 -
3.2.7歌单管理 - 16 -
3.2.8客户端首页 - 17 -
3.2.9歌单 - 17 -
3.2.10歌手 - 17 -
3.2.11我的音乐 - 17 -
3.2.12数据分析 - 17 -
3.3数据库设计 - 17 -
3.3.1数据库需求分析 - 17 -
3.3.2数据库的逻辑设计 - 17 -
第四章 系统实现 - 21 -
4.1主要界面实现 - 21 -
4.1.1用户登陆 - 22 -
4.1.2首页-数据分析 - 22 -
4.1.3用户管理 - 23 -
4.1.4歌手管理 - 23 -
4.1.5歌单管理 - 24 -
4.1.6客户端首页 - 24 -
4.1.7歌单 - 24 -
4.1.8歌手 - 25 -
4.1.9我的音乐 - 25 -
4.2主要功能程序的实现 - 26 -
4.2.1首页-数据分析 - 26 -
第五章 软件测试 - 36 -
5.1软件测试的目的和原则 - 36 -
第六章 总结 - 38 -
致谢 - 39 -

<template>
    <div class="my-music">
        <div class="album-slide">
            <div class="album-img">
                <img :src="attachImageUrl(avator)">
            </div>
            <ul class="album-info">
                <li>昵称:{{username}}</li>
                <li>性别:{{userSex}}</li>
                <li>生日：{{birth}}</li>
                <li>故乡：{{location}}</li>
            </ul>
        </div>
        <div class="album-content">
            <div class="album-title">
                个性签名：{{introduction}}
            </div>
            <div class="songs-body">
                <album-content :songList="collectList">
                    <template slot="title">我的收藏</template>
                </album-content>
            </div>
        </div>
    </div>
</template>

<script>
import {mixin} from '../mixins';
import {mapGetters} from 'vuex';
import {getUserOfId,getCollectOfUserId,songOfSongId} from '../api/index';
import AlbumContent from "../components/AlbumContent";

export default {
    name: 'my-music',
    mixins: [mixin],
    components:{
        AlbumContent
    },
    data(){
        return {
            avator: '',       //用户头像
            username: '',     //昵称
            userSex: '',      //性别
            birth: '',        //生日
            location: '',     //故乡
            introduction: '', //签名
            collection: [],     //收藏的歌曲列表
            collectList: [],    //收藏的歌曲列表（带歌曲详情）
        }
    },
    computed:{
        ...mapGetters([
            'listOfSongs',      //当前播放列表
            'userId',           //当前登录用户id
        ])
    },
    mounted(){
        this.getMsg(this.userId);
        this.getCollection(this.userId);
    },
    methods:{
        getMsg(userId){
            getUserOfId(userId)
                .then(res =>{
                    this.avator = res.avator;
                    this.username = res.username;
                    if(res.sex==0){
                        this.userSex = '女';
                    }else if (res.sex==1){
                        this.userSex = '男';
                    }
                    this.birth = this.attachBirth(res.birth);
                    this.location = res.location;
                    this.introduction = res.introduction;                    
                })
                .catch(err => {
                    console.log(err);
                })
        },
        //获取我的收藏列表
        getCollection(userId){
            getCollectOfUserId(userId)
                .then(res =>{
                        this.collection = res;
                        //通过歌曲id获取歌曲信息   
                        for(let item of this.collection){
                            this.getSongsOfIds(item.songId);
                        }             
                    })
                .catch(err => {
                    console.log(err);
                })
        },
        //通过歌曲id获取歌曲信息   
        getSongsOfIds(id){
            songOfSongId(id)
                .then(res =>{
                        this.collectList.push(res);
                    })
                .catch(err => {
                    console.log(err);
                })
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/my-music.scss';
</style>