IT@程序员猿媛互联网科技Web前端之路

仿网易云Project (vue-CLI+一些很常用的插件+项目

2019-07-08  本文已影响12人  蓝海00

效果图

gif gif gif

GitHub地址即项目搭建本地说明

需要使用网易云的接口 所以先克隆接口
https://github.com/Binaryify/NeteaseCloudMusicApi
npm install 下载全部依赖包
node app.js node启动项目
仿网易云Project地址
https://github.com/LanHai1/palyer
npm run serve 开启服务 <根据终端提示开启网页即可>
/* 项目中有很详细的注视 供参考 */

项目总结

axios <接口资源请求>
iscroll <滚动插件>

this.$options.filters.过滤器名字

父组件里面需要给子组件设置ref
再通过父组件的方法中使用 this.$refs.(ref的值).(子组件的方法名)()

/*mian.js 导入 axios*/
import axios from "axios";
/*全局配置axios*/
Vue.prototype.$axios = axios;

/*组件中直接this.$axios 使用即可*/
string.split(/\n/)
string.split(/[\s\n]/)
string.substr(0, str.length - 1)
 translateDate: function(current_date) {
      let date = new Date(current_date);
      let datetime =
        date.getFullYear() +
        "-" +
        (date.getMonth() + 1 >= 10
          ? date.getMonth() + 1
          : "0" + (date.getMonth() + 1)) +
        "-" +
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
        " " +
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
        ":" +
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes());
      return datetime;
    }
var audio = document.getElementById("bgMusic");
 
//播放(继续播放)
audio.play();
 
//暂停
audio.pause();
 
//停止
audio.pause();
audio.currentTime = 0;
 
//重新播放
audio.currentTime = 0;
audio.play();
/*需要为这个元素设置宽度*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
    formatTime(time) {
      // 分钟
      const minutes = parseInt((time % (1000 * 60 * 60)) / (1000 * 60));
      // 秒
      const seconds =
        Math.ceil((time % (1000 * 60)) / 1000) == 10
          ? Math.ceil((time % (1000 * 60)) / 1000)
          : Math.ceil((time % (1000 * 60)) / 1000) > 10
          ? Math.ceil((time % (1000 * 60)) / 1000)
          : "0" + Math.ceil((time % (1000 * 60)) / 1000);
      return minutes + ":" + seconds;
    }
    formatSinger(singer) {
      let allSinger = "";
      singer.forEach(val => {
        allSinger += val.name + "/";
      });
      // 删除字符串的最后一个字符
      return allSinger.substr(0, allSinger.length - 1);
    }
    formatLyric(val) {
      // 从尾部查找
      if (val.lastIndexOf("]") != "-1") {
        // 返回索引位置到字符串的结尾
        return val.slice(val.lastIndexOf("]") + 1);
      } else {
        return val;
      }
    }
上一篇 下一篇

猜你喜欢

热点阅读