vue+element实现美观大方好看的音乐网站,仿照咪咕音乐网

vue+element实现美观大方好看的音乐网站,仿照咪咕音乐网

目录

一、前言

二、首页实现及效果图

1.效果图

 2.项目结构、设计说明

 3.顶部菜单

 4.首页轮播图

 5.歌单推荐

 

三、歌单实现 

1.效果图

 2.轮播图动态切换效果

3.歌单详情

四、 专辑

1.专辑首页-效果图

 2.专辑详情-效果图

 五、榜单

1.榜单-效果图

2.歌曲详情

六、歌手列表

1. 列表效果图

2.歌手详情

七、登录页

1.效果图

 2.源码实现

八、总结


一、前言

项目在线预览:点击访问

咪咕音乐网,最近看到其官网,第一感觉真的很美观大方,有被它惊艳到。所以作者忍不住做了一版仿照咪咕音乐的demo。

与音乐相关的demo,之前也发过一篇关于QQ音乐的demo,可以访问:

《vue+element高度仿照QQ音乐,完美实现PC端QQ音乐》

二、首页实现及效果图

1.效果图

 

 

 2.项目结构、设计说明

 项目以vue项目创建,前端某些元素使用element,项目启动执行的命令为:

  1. npm install
  2. npm run dev

结构如下截图,项目已经集成和实现了需要请求后端接口的一切功能,所以无须花费精力去考虑前端如何去对接后端和接口,可以把一切精力放在实现前端界面设计上来。

这样不懂后端的伙伴也省心省力,接口请求只需按照模板去copy就好,无非就是get/post/delete/put等请求方式和参数传递的差别,当然不明白的可以细问作者。

项目结构还是分为:顶部+具体功能显示容器+底部,页面存放于src/page目录下,看目录命名就能明白其含义,具体功能页面在views目录下。

路由在router目录中,全局布局公用样式在styles,比如整个项目框架左右空间布局,最小宽度等。

路由权限也是很重要的一个功能,为permission.js,所有页面跳转都会经过其拦截,有人问,路由权限有什么用,好说,比如订单页面或个人中心页面吧,肯定是需要登录才能访问的,首页却是无需登录即可访问的,那么就可以在permission.js里面获取登录token,有token即表示已经登录,可以访问订单或个人中心页面,否则跳转登录页等。

 3.顶部菜单

顶部菜单分为两级菜单,交互为鼠标聚焦触发

源码实现:

<template>
  <div id="header">
    <div class="contain-box header">
      <h1 class="logo">
        <a href="https://music.migu.***" title="咪咕音乐 music.migu.***">
          <img src="../../../public/img/logo.png" alt="咪咕音乐 放厮听·趣玩乐">
        </a>
      </h1>
      <div class="header-left">
        <ul class="nav-container">
          <li class="nav-item on" data-nav-type="music" @mouseover="onMouseOver(1)">
            <a class="header-tag" target="">
              <span>音乐</span>
            </a>
          </li>
          <li class="nav-item " data-nav-type="video" @mouseover="onMouseOver(2)">
            <a class="header-tag" target="">
              <span>现场</span>
            </a>
          </li>
          <li class="nav-item " data-nav-type="vip">
            <a class="header-tag vip" target="">
              <span>会员中心</span>
            </a>
          </li>
          <li class="nav-item " data-nav-type="yyr">
            <a class="header-tag" target="_blank">
              <span>破壳平台</span>
            </a>
          </li>
          <li class="nav-item " data-nav-type="app">
            <a class="header-tag" target="_blank">
              <span>客户端下载</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="header-right">
        <div class="search smallinp show">
          <div class="ipt">
            <input type="text" id="search_ipt" auto***plete="off" placeholder="搜索歌曲、歌手、MV">
            <span class="btn-search">
            <i class="el-icon-search"></i>
            </span>
          </div>
          <ul class="J_search_list" id="J_search_list"></ul>
        </div>
        <div id="J-user-info" class="default-user show">
          <a id="J_login">
            <img src="../../../public/img/no-login.png" alt="" class="default-avatar">
          </a>
        </div>
      </div>


    </div>

    <div class="sub-header">
      <div class="contain-box">
        <ul class="music show" :style="subMenuIndex===1?'display: block;':'display: none;'">
          <li class="on">
            <a>首页</a>
          </li>
          <li class="">
            <a>歌单</a>
          </li>
          <li class="">
            <a>专辑</a>
          </li>
          <li class="">
            <a>榜单</a>
          </li>
          <li class="">
            <a>歌手</a>
          </li>
          <li class="">
            <a>彩铃</a>
          </li>
        </ul>
        <ul class="video hide" :style="subMenuIndex===2?'display: block;':'display: none;'">
          <li class="">
            <a>首页</a>
          </li>
          <li class="">
            <a>演唱会</a>
          </li>
          <li class="">
            <a>独家放送</a>
          </li>
          <li class="">
            <a>MV</a>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
      data() {
        return {
          subMenuIndex: 1,//子菜单显示
        };
      },
      mounted() {
      },
      methods: {
        onMouseOver(index){//鼠标聚焦显示二级菜单
          this.subMenuIndex = index;
        }
      }
    };
</script>

 4.首页轮播图

轮播图使用element的走马灯效果,element好处就是简单方便使用。

Element - The world's most popular Vue UI framework

 

 5.歌单推荐

模仿官方样式,鼠标聚焦显示播放按钮,同时显示音波震动效果

 

源码实现

<div id="playlist" class="section contain-box">
      <div class="container section-header">
        <h2 class="title">歌单推荐</h2>
        <a class="more">更多<i class="iconfont el-icon-arrow-right"></i></a>
      </div>
      <div class="container">
        <div class="wrapper-contain">
          <div class="wrapper-items">
            <div class="item-contain" v-for="(item,index) in re***mends" :key="index">
              <div class="thumb">
                <div class="item-box">
                  <a class="img-box">
                    <img :src="item.img"  :alt="item.name" class="img-block lazy-img img-full">
                  </a>
                  <span class="playlist-play btn-play">
                    <img class="cf-play" src="../../../public/img/btn-play.png">
                  </span>
                  <p class="item-play***t"><i class="iconfont el-icon-headset" style="font-size: 16px;line-height: 24px;"></i>{{item.listenNum}}</p>
                </div>
                <div class="item-info">
                  <a class="item-title">{{item.name}}</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="album" class="section contain-box">
      <div class="container section-header">
        <h2 class="title">新碟上架</h2>
        <a class="more">更多<i class="iconfont el-icon-arrow-right"></i></a>
      </div>
      <div class="container">
        <div class="wrapper-items">
          <div class="item-contain" v-for="(item,index) in newDiskList" :key="index">
            <div class="thumb">
              <div class="item-box">
                <a class="img-box">
                  <img :src="item.img" :alt="item.name" class="img-block lazy-img img-full">
                </a>
                <i class="album-cover"></i>
                <span class="album-play btn-play"><img class="cf-play" src="../../../public/img/btn-play.png"></span>
                <span class="update-time">2023-04-20</span>
              </div>
              <div class="item-info">
                <p class="album-name name-block">
                  <a>{{item.name}}</a>
                </p>
                <p class="singer block-name-next">
                  <a>那英</a>
                  / <a>马伊琍</a>
                  / <a>许一鸣</a>
                  / <a>田园</a>
                  / <a>董冬冬</a>
                  / <a>白宇</a>
                  / <a>A-Lin</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div id="digitalAlbum" class="section">
      <div class="container section-header contain-box">
        <h2 class="title">数字专辑</h2>
        <a class="more">更多<i class="iconfont el-icon-arrow-right"></i></a>
      </div>
      <div class="back-wrapper" style="padding: 21px 0;">
        <div class="container contain-box">
          <div class="wrapper-items">
            <div class="item-contain" v-for="(item,index) in digitalAlbumList">
              <div class="thumb">
                <div class="item-box">
                  <a class="img-box">
                    <img :src="item.img" :alt="item.name" class="img-block lazy-img img-full">
                  </a>
                  <i class="album-cover"></i>
                  <span class="update-time">2023-04-30</span>
                </div>
                <div class="item-info">
                  <p class="album-name name-block">
                    <a>{{item.name}}</a>
                  </p>
                  <p class="singer block-name-next">
                    <a>朝简</a>
                    / <a>窦唯</a>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

 数据构造源码:

javascript"><script>
  export default {
    data() {
      return {
        banners:[//轮播图
          require('../../../public/img/230517091951259_1400x350_5713.jpg'),
          require('../../../public/img/23051910364536_1400x350_3748.jpg'),
          require('../../../public/img/230519104200186_1400x350_6951.jpg'),
          require('../../../public/img/230519105837175_1400x350_329.jpg'),
          require('../../../public/img/230519105101366_1400x350_2796.jpg'),
          require('../../../public/img/230519132656314_1400x350_6114.jpg'),
          require('../../../public/img/23051613414308_1400x350_1883.jpg')
        ],
        re***mends:[//推荐
          {name:'〔骑行在路上〕无限循环,解压必备',img:require('../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg'),listenNum:'198.2w'},
          {name:'粤语回忆录|回忆杀里的经典记录',img:require('../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg'),listenNum:'155.6w'},
          {name:'学习纯音 | 凝神静气,思维跃升',img:require('../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg'),listenNum:'119.2w'},
          {name:'宅家小调丨平凡小事促成美好日常',img:require('../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg'),listenNum:'95.8w'},
          {name:'散步减压丨远离繁华,走向空旷',img:require('../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg'),listenNum:'93.5w'},
          {name:'驾车:希望不辜负理想也不辜负热爱',img:require('../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg'),listenNum:'93.2w'},
          {name:'〔骑行在路上〕无限循环,解压必备',img:require('../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg'),listenNum:'198.2w'},
          {name:'粤语回忆录|回忆杀里的经典记录',img:require('../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg'),listenNum:'155.6w'},
          {name:'学习纯音 | 凝神静气,思维跃升',img:require('../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg'),listenNum:'119.2w'},
          {name:'宅家小调丨平凡小事促成美好日常',img:require('../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg'),listenNum:'95.8w'},
          {name:'散步减压丨远离繁华,走向空旷',img:require('../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg'),listenNum:'93.5w'},
          {name:'驾车:希望不辜负理想也不辜负热爱',img:require('../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg'),listenNum:'93.2w'}
        ],
        newDiskList:[//新碟上架
          {name:'《龙城》影视原声带',img:require('../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg')},
          {name:'瞧!你这小脾气 影视剧原声带',img:require('../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg')},
          {name:'泰版《放羊的星星》原声带',img:require('../../../public/img/ASa375961663661da5a832***028de468a9.jpg')},
          {name:'鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒',img:require('../../../public/img/AS99df91468fcb4791943ef12808449191.jpg')},
          {name:'《声生不息·宝岛季》第5期',img:require('../../../public/img/AS8e621***6f42ee7f29d146771bd505032.jpg')},
          {name:'《龙城》影视原声带',img:require('../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg')},
          {name:'瞧!你这小脾气 影视剧原声带',img:require('../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg')},
          {name:'泰版《放羊的星星》原声带',img:require('../../../public/img/ASa375961663661da5a832***028de468a9.jpg')},
          {name:'鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒',img:require('../../../public/img/AS99df91468fcb4791943ef12808449191.jpg')},
          {name:'《声生不息·宝岛季》第5期',img:require('../../../public/img/AS8e621***6f42ee7f29d146771bd505032.jpg')}
        ],
        digitalAlbumList:[//数字专辑
          {name:'神女赋',img:require('../../../public/img/AM85***6100766e75b3e8115973ad1316ca.jpg')},
          {name:'琵琶行',img:require('../../../public/img/AM8f61951fa2888ed88f64c724d3057c23.jpg')},
          {name:'宋词',img:require('../../../public/img/AMd388fa758ff8baaa5bc236aa96c69887.jpg')},
          {name:'元曲',img:require('../../../public/img/AM5176573d3745c183aa1cbad23479ef8f.jpg')},
          {name:'DREAMS',img:require('../../../public/img/AMeb1420713a4a582e7e681ffc75048038.jpg')},
        ],
        rankingBanner:[//顶部小轮播图
          require('../../../public/img/small-banner1.jpg'),
          require('../../../public/img/small-banner2.jpg'),
          require('../../../public/img/small-banner3.jpg')
        ]
      };
    },
    mounted() {
    },
    methods: {
    }
  };
</script>

 

三、歌单实现 

1.效果图

 2.轮播图动态切换效果

轮播图左右动态切换,使用JavaScript事件setInterval方法每隔3毫秒,递增或递减left边距变化来实现

setInterval动态切换效果源码:

<script>
  export default {
    data() {
      return {
        bannerLeft: 0,
        moreLeft: 0,//左右移动轮播图-最大值
        move: false,
        banners:[
          {img:require('../../../public/img/4aa0fcf9-69f8-45b0-ba77-ce6ad96b25c2.jpg'),listenNum:'159.1w',name:'【煲耳机无损精选】你要的白噪音,粉红噪音都在这里'},
          {img:require('../../../public/img/6d69b614-c898-41a1-80fc-3bb410900e6e.jpg'),listenNum:'247.1w',name:'90后回忆向丨学生时代听过的那些流行歌'},
          {img:require('../../../public/img/d9033323-69e4-43aa-b2d1-d055716259ad.jpg'),listenNum:'66.8w',name:'经典|用电影配乐讲故事'},
          {img:require('../../../public/img/b2081de7-720b-4ef0-8a03-3ee5cf6f5694.jpg'),listenNum:'91.9w',name:'轻摇旋律丨让疲惫无处可藏'},
          {img:require('../../../public/img/84a7786f-649f-4e22-a3a1-ebc52e4c1bdc.jpg'),listenNum:'0.7w',name:'国际天后 · CoCo李玟'},
          {img:require('../../../public/img/e84de956-bc96-4c49-8a7a-d658dcd57048.jpg'),listenNum:'78.7w',name:'开口就能让你爱上欧美流行歌曲'},
          {img:require('../../../public/img/f240e2f2-1365-460c-a8c8-15bc566d55c3.jpg'),listenNum:'62.2w',name:'别把遗憾,推给来日方长'},
          {img:require('../../../public/img/72f481e7-8a80-4368-8511-932c5f90d881.jpg'),listenNum:'57.4w',name:'古风| 朗朗盛世 共悦未来'}
        ],
        showMore: false,
        menuIndex: 1,//选中的菜单
        data:[
          {name:'华语R&B:悦耳律动,指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'},
          {name:'国风| 青鸟踏沧浪,随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'},
          {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'},
          {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'},
          {name:'特立独行|小众宝藏,等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9***5-fc7874393d07.jpg'),listenNum:'137.7w'},
          {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'},
          {name:'华语R&B:悦耳律动,指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'},
          {name:'国风| 青鸟踏沧浪,随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'},
          {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'},
          {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'},
          {name:'特立独行|小众宝藏,等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9***5-fc7874393d07.jpg'),listenNum:'137.7w'},
          {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'},
          {name:'华语R&B:悦耳律动,指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'},
          {name:'国风| 青鸟踏沧浪,随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'},
          {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'},
          {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'},
          {name:'特立独行|小众宝藏,等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9***5-fc7874393d07.jpg'),listenNum:'137.7w'},
          {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'}
        ]
      };
    },
    mounted() {
      this.moreLeft = -((this.banners.length - 6) * 217);
    },
    methods: {
      getMoreBanner(index){//左右移动轮播图-查看更多
        if(this.move){
          return;
        }
        if(index === 1){//左移
          if(this.bannerLeft === 0){
            return;
          }
          let end = this.bannerLeft + 217;
          let that = this;
          let inter = setInterval(function(){
            that.move = true;
            that.bannerLeft++;
            if(that.bannerLeft >= end){
              clearInterval(inter);
              that.move = false;
            }
          },3);
        }else if(index === 2){//右移
          if(this.bannerLeft <= this.moreLeft){
            return;
          }
          let end = this.bannerLeft - 217;
          let that = this;
          let inter = setInterval(function(){
            that.move = true;
            that.bannerLeft--;
            if(that.bannerLeft <= end){
              clearInterval(inter);
              that.move = false;
            }
          },3);
        }
      }
    }
  };
</script>

3.歌单详情

 

四、 专辑

1.专辑首页-效果图

 2.专辑详情-效果图

 五、榜单

1.榜单-效果图

2.歌曲详情

 

六、歌手列表

1. 列表效果图

2.歌手详情

七、登录页

1.效果图

 

 2.源码实现

<template>
    <div id="body">
        <div style=";width: 100%;height: 100%;overflow: hidden;">
          <div @click="homePage" style="cursor: pointer;" class="page_one_title"></div>
            <div :class="modalType === 'login'?'login-modal':'register-modal'">
                <div class="login-title">{{modalType === 'login'?'登录':'欢迎注册'}}</div>
                <el-form class="form"
                         v-show="modalType === 'login'"
                         :rules="loginRules"
                         ref="loginForm"
                         :model="loginForm"
                         label-width="0">
                    <el-form-item prop="username">
                        <el-input
                                placeholder="请输入用户名/手机号"
                                prefix-icon="el-icon-mobile-phone"
                                v-model="loginForm.username">
                        </el-input>
                    </el-form-item>

                    <el-form-item prop="password">
                        <el-input
                                type="password"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-lock"
                                v-model="loginForm.password">
                        </el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click.native.prevent="handleLogin" class="login-submit">登录</el-button>
                    </el-form-item>
                    <div style="text-align: center;">
                        没有账号?<span style="cursor: pointer;color: #df1f20;" @click="changeModalType('register')">注册</span>
                    </div>
                </el-form>

                <el-form class="form"
                         v-show="modalType === 'register'"
                         :rules="registerRules"
                         ref="registerForm"
                         :model="registerForm"
                         label-width="0">
                    <el-form-item prop="username">
                        <el-input
                                placeholder="请输入用户名"
                                prefix-icon="el-icon-mobile-phone"
                                v-model="registerForm.username">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input
                                placeholder="请输入手机号"
                                prefix-icon="el-icon-mobile-phone"
                                v-model="registerForm.phone">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                                type="password"
                                placeholder="请输入密码"
                                prefix-icon="el-icon-lock"
                                v-model="registerForm.password">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="validCode">
                        <el-input placeholder="请输入验证码" v-model="registerForm.validCode">
                            <el-button slot="append" @click="sendValidCode">发送短信验证码</el-button>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width: 100%;" @click.native.prevent="handleRegister" class="login-submit">注册</el-button>
                    </el-form-item>
                    <div v-if="modalType !== 'login'" style="text-align: center;font-size: 14px;">
                        已有账号?<span style="cursor: pointer;color: #df1f20;" @click="changeModalType('login')">登录</span>
                    </div>
                </el-form>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                loading: true,
                modalType: 'login',
                loginForm: {
                    username:'',//用户名
                    password: "",//密码
                },
                registerForm: {
                    username:'',//用户名
                    phone: "",//手机号
                    password: "",//密码
                    validCode:'',//验证码
                },
                loginRules: {
                    username: [
                        {required: true, message: "请输入用户名/手机号", trigger: "change"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "change"}
                    ]
                },
                registerRules: {
                    username: [
                        {required: true, message: "请输入用户名", trigger: "change"}
                    ],
                    phone: [
                        {required: true, message: "请输入手机号", trigger: "change"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "change"},
                        {min: 1, message: "密码长度最少为6位", trigger: "change"}
                    ],
                    validCode: [
                        {required: true, message: "请输入验证码", trigger: "change"}
                    ]
                },
            };
        },
        mounted() {
        },
        methods: {
            changeModalType(type){
                this.modalType = type;
                this.$refs.loginForm.resetFields();
                this.$refs.registerForm.resetFields();
            },
            homePage(){
                this.$router.push({path: '/'});
            },
            handleLogin() {//登录
                let that = this;
                that.$refs.loginForm.validate(valid => {
                    if (valid) {
                        const loading = that.$loading({
                            lock: true,
                            text: '登录中,请稍后。。。',
                            spinner: "el-icon-loading"
                        });
                        //延时1秒模拟请求效果
                        setTimeout(function(){
                            that.$notify({
                                title: '提示',
                                message: '登录成功',
                                type: 'su***ess'
                                //duration: 0//为0则不会自动关闭
                            });
                            that.$router.push({'path':'/'});
                            loading.close();
                        },1000)
                    }
                });
            },
            //发送验证码
            sendValidCode(){
                this.$refs.registerForm.validate(valid => {//表单验证
                })
            },
            handleRegister() {//注册
                let that = this;
                that.$refs.registerForm.validate(valid => {
                    if (valid) {
                        const loading = that.$loading({
                            lock: true,
                            text: '注册中,请稍后。。。',
                            spinner: "el-icon-loading"
                        });
                        //延时1秒模拟请求效果
                        setTimeout(function(){
                            that.$notify({
                                title: '提示',
                                message: '注册成功,请登录',
                                type: 'su***ess'
                                //duration: 0//为0则不会自动关闭
                            });
                            that.modalType = 'login';
                            loading.close();
                        },1000)
                    }
                });
            }
        }
    }
</script>

八、总结

关注作者,及时了解更多好项目!

作者主页也有更多好项目分享!

获取源码或如需帮助,可通过博客后面名片+作者即可!

其他作品集合:

  1. 《vue实现功能完整的购物商城,商品零食、电商通用商城》
  2. 《vue+element实现蔬菜、水果、电商商城》
  3. 《vue+element简单实现电商商城网站,模仿小米电商商城》
  4. 《vue实现美观大方的动漫、cos、帖子类型网站》
  5. 《vue实现好看的相册、图片网站》
  6. 《高度仿PC版《微信读书》,好看的小说、读书网站》
  7. 《vue+element实现非常好看的鲜花网站商城,页面完整,样式美观》
  8. 《vue+elementui+springboot前后端分离实现通用商城管理后台》
  9. 《微信小程序日记、微信小程序个人空间、个人日记》
  10. 《vue+element模仿腾讯视频电影网站》
  11. 《vue+element高度仿照QQ音乐,完美实现PC端QQ音乐》
  12. 《vue+element详细完整实现个人博客、个人网站》
  13. 《vue+elementui+springboot前后端分离实现学校帖子网站,学校大作业》
  14. 《vue+elementui实现U袋网-完整版》
  15. 《vue+element+electron仿微信实现》
  16. 《vue+element模仿电商商城,前后端分离实现,下单微信扫码支付》
  17. 《electron+vue+elementui实现类似QQ窗口靠边自动边缘隐藏》
  18. 《微信小程序仿唯聚时代,微信小程序商城》
  19. 《jquery+bootstrap完整丰富样式开发框架源码,各种现成样式简单易用》
  20. 《html+css响应式旅游主题网站模板,旅游网站,企业文化新闻类网站》
  21. 《css+html各种动态、动画、3D相册等7件套》
  22. 《仿华为电商商城,官网,华为超级新品日demo,大屏霸气且简洁》
  23. 《vue+element简单实现商城网站首页,模仿电商商城》
  24. 《vue+elementui实现非常好看的博客、网站首页,网站模板》
  25. 《elementui+vue实现经典管理系统布局框架,拿来即用》
  26. 《简系统登录页模板html+vue+elementui》
  27. 《vue+elementui完美实现博客、网站、个人网站,高仿“张凯博客”》
  28. 《vue+elementui完美实现后台管理系统的左、右、顶部菜单布局》
  29. 《html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐》
  30. 《后端使用springboot+maven+shiro+mybatis+mysql,前端使用H-ui.admin_v3.1.3.1,快速实现管理后台功能》
  31. 《springboot+thymeleaf+maven+html+css实现精美大方好看官网模板完整源码》
  32. 《html+css实现好友列表,类似QQ群聊成员列表》
转载请说明出处内容投诉
CSS教程_站长资源网 » vue+element实现美观大方好看的音乐网站,仿照咪咕音乐网

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买