基于VUE+Element-ui的个人博客实现.zip

# vue-element-ui-blog 基于VUE+Element-ui的个人博客实现 [演示地址](http://106.52.104.235/) 当前更新: 不知为什么图片显示不出来，就不放效果图了，可以到演示地址查看（pc端噢） ## 播放控制组件 ### 1、引入vuex 在这之前，我们先来看看我们的`store`里需要管理的内容。 刚刚已经说过，播放控制组件与歌曲信息组件是需要数据的交互的，如  所以我们创建一个`store`来对它们需要同步的信息进行管理，我们在项目的src文件夹下新建一个`vuex`文件夹，并在里面新建个`store.js`文件，我们之后就在这个文件里写状态管理的代码了。 1. 下载vuex ： ```npm install vuex --save``` 2. 在`store.js`里添加下面内容，刚入门的小伙伴可以和我一样使用下面这个模板，这样的格式看起来会比较清晰。 这里推荐一个文章 [Vue.js——十分钟入门Vuex](https://www.jianshu.com/p/a804606ad8e9) ```javascript import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = { } const getters = { } const mutations = { } const actions = { } export default new Vuex.Store({ state, getters, mutations, actions }) ``` 我们这里主要用到的属性就`state`和`mutations`。 `state`就是Vuex中的公共的状态, 相当于我们组件里的`data`属性，用于保存所有组件的公共数据，下面就来看看我们需要的公共数据 ```javascript const state = { playList: [], //播放列表 playContent: {}, //当前播放的歌曲信息 current: "" //当前歌曲的播放进度 } ``` - 播放列表：在歌曲列表中点击播放或者添加时，就更新播放列表，而播放控制部分的循环模式也是需要通过播放列表来实现的 - 播放信息：不管是在歌词页面还是播放控制组件上都需要进行展示 - 播放进度：控制歌词滚动以及播放进度条的更新 接下来我们需要用到`mutaions`属性，它相当于我们组件中的`methods`，当我们在这里可以处理组件提交的事件，然后对state的值进行一个更新修改。 ```javascript const mutations = { //获取当前播放歌曲的信息 setContent(state, payload) { state.playContent = payload state.playList.indexOf(payload)==-1?state.playList.push(payload):"" }, //获取当前播放歌曲的歌词 setLyric(state, payload) { state.playContent.lyric = payload }, //设置当前播放歌曲的进度 setCurrent(state, payload) { state.current = Math.ceil(payload) }, //从播放列表中移除歌曲 removeSong(state, payload) { let index = state.playList.indexOf(payload) state.playList.splice(index, 1) }, //往播放列表中加入歌曲 addSong(state, payload) { let index = state.playList.indexOf(payload) state.playList.indexOf(payload)==-1?state.playList.push(payload):"" } } ``` 到这里，我们对`store`的设置已经结束，下面就回到播放控制组件的实现上 ### 2、播放控制 为了能在不同页面下都能够控制歌曲的播放，我将该组件挂载在根组件下，并设置`fixed`定位把它固定在底部，如果担心影响其他内容的浏览，可以给它设置个透明度，用到的时候在通过个`hover`把它显示出来就好了。 （1）data 下面看一下我们组件需要的数据 ```javascript data() { return { playStatus: false, //播放状态，用来控制播放、暂停按钮的显示 Timer: "", //定时器，我们需要实时监听到歌曲的播放进度 currentBar: 0, //进度条长度，默认为0，根据歌曲进度同步更新 currentText: "00:00", //进度条旁边的播放时间，同样要实时更新 durationText: "00:00", //当前歌曲的播放时长 listShow: false, //控制播放列表的显示 loopStyle: "list" //not:单曲播放 list:列表循环 single:单曲循环 random:随机循环 }; } //从store中获取 computed: { //当前播放信息 songContent() { return this.$store.state.playContent; }, //播放列表信息 playList() { return this.$store.state.playList; } } ``` 如果直接获取`store`中的数据时，当`state`改变时，组件是不会同步更新的，所以我们需要把他们放到`computed`属性下，这样当数据有变化时，`computed`下的函数会重新执行，从而达到实时更新的效果。 然后我们再用`watch`对播放信息进行一个监听，当他发生改变的时候，说明需要进行一个重新播放功能 ```javascript watch: { songContent() { this.playSong(this.songContent); //传入当前播放歌曲对象 } } ``` 对数据的监听获取部分已经完成，接下来我们开始在`methods`里进行功能函数的实现 （1） **初始化播放信息** 对播放控件上的信息进行一个初始化渲染 ```javascript //初始化播放歌曲 playSong(obj) { this.durationText = obj.dt; this.playStatus = true; this.currentText = "00:00"; this.currentBar = 0; let song_url = "https://api.imjad.cn/cloudmusic/?type=song&id=" + obj.id; this.getSong(song_url); //获取歌曲资源 } //获取歌曲资源并播放 getSong(url) { this.$axios .get(url) .then( res => ( (this.$refs.audio.src = res.data.data[0].url), this.setTimer() //设置定时器 ) ) .catch(function(err) { console.log(err); }); } ``` 然后我们在`audio`标签里设置`autoplay`，当src改变时就会自动播放 ```html <audio ref="audio" autoplay></audio> ``` （2） **更新进度条** 开始播放后我们需要设置一个定时器，用以更新进度条 ```javascript //设置定时器 setTimer() { this.clearTimer(); //先清除上一个定时器 this.Timer = setInterval(this.updateCurrent, 1000); }, //清除定时器 clearTimer() { clearInterval(this.Timer); this.Timer = ""; } ``` 三元表达式用上瘾了... 还是简单解释一下吧 进度条用的是element-ui的`<el-slider>`标签，进度值0-100 ```html <el-slider v-model="currentBar" :show-tooltip="false" @click.native="skipBar"></el-slider> ``` 当进度条等于100时，也就是歌曲播放结束时，进行循环方式的判断，然后按照当前循环方式进行相应的歌曲切换。如果歌曲还在播放中，就通过`this.$refs.audio.currentTime`获取播放进度，最后还要更新`store`里的播放进度。 ```javascript //更新进度条 updateCurrent() { this.currentBar == 100 ? (this.clearTimer(),this.loopStyle == "not" ? this.notLoop() : this.loopStyle == "list" ? this.listLoop() : this.loopStyle == "single" ? this.singleLoop() : this.randomLoop() ) : (this.currentBar = (this.$refs.audio.currentTime / this.$refs.audio.duration) * 100), (this.currentText = this.formatTime(this.$refs.audio.currentTime)), //formatTime()是对播放时间进行一个格式化 this.$store.commit("setCurrent", this.$refs.audio.currentTime); } //格式化播放时间 formatTime(string) { var m = parseInt(string / 60); var s = parseInt(string % 60); m >= 10 ? m : (m = "0" + m); s >= 10 ? s : (s = "0" + s); return m + ":" + s; } ``` （3） **不同的播放方式** 在播放控制组件内还有个播放暂停功能，播放列表上也会有切换歌曲播放的按钮，这几种播放的前置条件都不完全相同