1.技術介紹
java+springBoot+spring+mysql+mybatis+Vue
開發工具：eclipse或IDEA
2.主要功能說明：
1）用戶
2）管理員
網站前臺功能：
注冊、登錄、首頁、歌手、榜單、我的音樂、個人中心
后臺管理功能：
首頁圖標展示、用戶管理、歌手管理、歌單管理、歌曲管理、音樂類型管理
3.部門代碼展示:
```java
<template>
? <div class="login-wrap">
? ? <div class="ms-title">音樂網站后臺管理登錄界面</div>
? ? <div class="ms-login">
? ? ? <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
? ? ? ? <el-form-item prop="username">
? ? ? ? ? <el-input v-model="ruleForm.username" placeholder="用戶名"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <el-form-item prop="password">
? ? ? ? ? <el-input type="password" v-model="ruleForm.password" placeholder="密碼"></el-input>
? ? ? ? </el-form-item>
? ? ? ? <div class="login-btn">
? ? ? ? ? <el-button type="primary" @click="submitForm">登錄</el-button>
? ? ? ? </div>
? ? ? </el-form>
? ? </div>
? </div>
</template>
<script>
import {mixin} from "../mixins/index";
import {getLoginStatus} from "../api/index";
export default{
? mixins:[mixin],
data:function(){
? return {
? ? ruleForm:{
? ? ? username: "admin",
? ? ? password: "123"
? ? },
? ? rules:{
? ? ? username:[
? ? ? ? {required:true,message:"請輸入用戶名",trigger:"blur"}
? ? ? ],
? ? ? password:[
? ? ? ? {required:true,message:"請輸入密碼",trigger:"blur"}
? ? ? ]
? ? }
? };
},
methods:{
? submitForm(){
? ? ? let params = new URLSearchParams();
? ? ? params.append("name",this.ruleForm.username);
? ? ? params.append("password",this.ruleForm.password);
? ? ? getLoginStatus(params)
? ? ? ? .then((res) =>{
? ? ? ? ? if(res.code == 1){
? ? ? ? ? ? localStorage.setItem('userName',this.ruleForm.username);
? ? ? ? ? ? this.$router.push("/Info");
? ? ? ? ? ? this.notify("登錄成功","success");
? ? ? ? ? }else{
? ? ? ? ? ? this.notify("登錄失敗","error");
? ? ? ? ? }
? ? ? ? });
? }
}
}
</script>
<style scoped>
.login-wrap {
? position: relative;
? background: url("../assets/img/background.jpeg");
? background-attachment: fixed;
? background-position: center;
? background-size: cover;
? width: 100%;
? height: 100%;
}
.ms-title {
? position: absolute;
? top: 50%;
? width: 100%;
? margin-top: -230px;
? text-align: center;
? font-size: 30px;
? font-weight: 600;
? color: #fff;
}
.ms-login{
? position: absolute;
? left: 50%;
? top: 50%;
? width: 300px;
? height: 160px;
? margin: -150px -175px;
? padding: 40px;
? border-radius: 5px;
? background: rgba(74, 206, 134, 0.984);
}
.login-btn {
? text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
}
</style>
```
4.系統演示地址：
鏈接：https://pan.baidu.com/s/1ew2ONMoMfLmZXdzxynizCA
提取碼：fk96
