网易云音乐移动端项目实战(分解下)
一、搜索页面与历史搜索记录
二、搜索界面样式设置
三、音乐搜索功能实现
1.引用了playlist.vue的代码样式,更改了循环的数组对象 2.对象的获取方式还是和之前在store文件下的index.js中的一样,换了个接口 3.数组去重并且将对象转换为数组 4.slice的应用
SearchTop.vue
store 下的index.js
Search.vue
四、历史按钮与搜索内容播放
1.给历史项添加一个点击事件触发方法,该方法获取到关键词后,重新触发执行搜索框回车后执行的函数事件。 2.点击播放按钮,传入当前的item,及索引值。触发公共库中的push方法,将音乐列表对应的值修改到playlist上面,修改索引值
SearchTop.vue
五、进入个人中心的权限判断实现
router下index.js
topNav.vue 导航中我的跳转点击事件
17素材网 搜索手机页面 login.vue
登录失败页面 输入自己的网易云账号密码测试 登录成功页面
六、根据网易接口实现登录进入个人中心
1.通过点击事件触发方法,传给接口账号密码进行判断实现登录功能,进行页面跳转,跳转页面之前进行路由守卫 login.vue
store文件的index.js
router下的index.js
login.vue 1.保存历史信息,加载页面之前进行更新
App.vue
七、实现个人中心
17素材网
me.vue
显示了用户图片
login.vue 改了一下
以上就是本篇文章【网易云音乐移动端项目实战(分解下)】的全部内容了,欢迎阅览 ! 文章地址:http://changmeillh.xhstdz.com/quote/3686.html
栏目首页
相关文章
动态
同类文章
热门文章
网站地图
返回首页 物流园资讯移动站 http://changmeillh.xhstdz.com/mobile/ , 查看更多