网易云音乐移动端项目实战(分解下)
一、搜索页面与历史搜索记录
二、搜索界面样式设置
三、音乐搜索功能实现
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://sjzytwl.xhstdz.com/quote/3686.html 物流园资讯网 http://sjzytwl.xhstdz.com/ , 查看更多