小风车吱呀转

摘要： vue-cli版本为4.x 1.在项目根目录创建2个env文件对应——开发环境、生产环境 NODE_ENV = 'development' VUE_APP_BASE_URL='http://192.168.1.8:3000' .env.development NODE_ENV = 'producti 阅读全文

摘要： One. 缺陷：当打开播放器快速切换歌曲时，按下暂停播放，发现歌词和背景音乐都仍在播放，这显示是不符合预期的。 原因：代码watch currentSong的变化以后做清理操作，然后执行audio.play()和获取歌曲。这里就存在一个问题——当我们快速切换的时候，canplay事件触发产生的相关操 阅读全文

摘要： 用户个人中心分为两个部分：用户个人收藏的歌曲列表和用户播放历史列表。 先创建user-center.vue，基本代码如下 <template> <transition name="slide"> <div class="user-center"> <div class="back"> <i clas 阅读全文

摘要： 实现点击垃圾桶，清除所有歌曲列表功能 和之前清除所有搜索历史列表一样，引用confirm组件拦截提示用户的操作 <confirm ref="confirm" text="是否清空播放列表" confirmBtnText="清空"></confirm> 给垃圾桶图标添加点击事件showConfirm 阅读全文

摘要： 点击迷你播放器的列表按钮就会弹出一个当前播放的歌曲列表层，这个列表也有一些功能，比如播放模式的控制，点击歌曲播放，收藏歌曲以及从列表中删除歌曲，点击垃圾桶把歌曲列表清空，甚至还可以添加歌曲到队列。 首先是对首页进行开发，基本代码如下： <template> <transition name="lis 阅读全文

摘要： 搜索历史模块不仅在搜索模块出现，还在后续的添加歌曲模块中出现，多个组件多个模块共用了它，这个数据应该保存在全局的vuex中。 在state.js中添加searchHistory // 搜索历史 searchHistory: [], 有了state就设置它的mutation-types、mutatio 阅读全文

摘要： 当搜索内容时会出现搜索结果列表，将这个结果列表封装成一个组件。这个组件就可以根据搜索的关键词请求服务端数据来检索不同的结果。 其基本的dom结构代码如下： <template> <div class="suggest"> <ul class="suggest-list"> <li class="su 阅读全文

摘要： 通过api获取热门搜索关键词 设置api //search.js import axios from 'axios'; export function getHotKey() { return axios.get('/api/search/hot'); } 在search.vue中使用api获取数据 阅读全文

摘要： 搜索框组件是个基础组件，其结构如下： <template> <div class="search"> <div class="search-box-wrapper"></div> </div> </template> <script> export default { name: 'search', 阅读全文

摘要： 排行榜详情页和之前的歌手详情页、歌单详情页布局类似，除了数据不同之外还多了排行榜排名的样式，整体上还是可以复用之前的组件。 初始化代码： <template> <transition name="slide"> <music-list></music-list> </transition> </te 阅读全文