网易云音乐移动端项目实战(分解下)

一、搜索页面与历史搜索记录

二、搜索界面样式设置

三、音乐搜索功能实现

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 改了一下