相关推荐
网易云音乐移动端项目实战(分解下)
2024-11-10 16:11

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

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

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

在这里插入图片描述

二、搜索界面样式设置
 

在这里插入图片描述

三、音乐搜索功能实现

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://tiush.xhstdz.com/quote/3686.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://tiush.xhstdz.com/mobile/ , 查看更多   
发表评论
0评