收集表单项数据,event对象传参
登录流程
1.收集表单项数据
2.前端验证
1)验证用户信息(账号,密码)是否合法
2) 前端验证不通过就提示用户,不需要发请求给后端
3)前端验证通过了,发请求(携带账号,密码)给服务器端
3.后端验证
1)验证用户是否存在
2)用户不存在直接返回,告诉前端用户不存在
3)用户存在需要验证密码是否正确
4)密码不正确返回给前端提示密码不正确
5)密码正确返回给前端数据,提示用户登录成功(会携带用户的相关信息)
我们需要实时监测这个表单信息,我们用bindinput
在这里我们要说一下target和currentTarget的区别。
而我们想要搞懂这个,我们需要知道事件委托
1.什么是事件委托
将子元素的事件委托(绑定)给父元素
2.事件委托的好处
1.减少绑定的次数
2.后期新添加的元素也可以享用之前委托的事件
3.事件委托的原理
冒泡
4.触发事件的是谁?
子元素
5.如何找到触发事件的对象
event.target
6.target和currentTarget的区别
currentTarget要求绑定事件的元素一定是触发事件的元素
之前我们也观察到了,可以通过id给event来传参
这个[type]的意思是如果我们要修改一个对象中的属性,可以使用[]
除了这个方式也可以通过data-的方式传值
那么我们啥时用id还是data-传值?
就看你传入的是多个数据还是唯一数据。唯一就用id,不唯一就用data
前端验证实现
后端验证实现
现在用这个接口会出现网络拥挤的现象,可以换一个接口使用Binaryify/NeteaseCloudMusicApi: 网易云音乐 Node.js API service (github.com)
网易API需要上GitHub上下载最新版本并部署,要不会报网络拥挤错误
现在应该是501手机错误 和502密码错误实测
网易云音乐 NodeJS 版 API (binaryify.github.io)
神头鬼脸,我看到了文档里面说可以游客登录
就这样ok了,后面的问题,后面在说
本地存储,个人中心,登录界面交互
这里要注意的是我们这个是一个tab界面需要用switchTab
看文档,知道调用游客登录会返回useId,而想要进入/user/detail就必须要传入useId,这里我们就写死传进去
当然数据也是能存储到本地上
然后去读这个数据
但是没有效果,那就是setData发生了错误,因此读出来的是一个JSON对象。而且onLoad,在小程序一加载就保留下来了,而且我们用的navto会保存当前的数据。解决方案就是:onShow,获取是reLaunch跳转(这里采用这种方式)
看这就加载成功了
用户播放记录展示
定义一个获取用户播放记录的功能函数
然后就有数据了,之后就渲染到页面上面
数据就有了,然后写样式
样式写好了,效果还可以
完善用户播放记录
播放记录并不是都有的
像我们没有登录,那肯定是没有播放记录的。或者,我登录了但是没有播放音乐,那肯定就没有啊
就是用wx:if来控制是否显示播放记录recentPlayList.lenght>0就显示,否则就不显示
项目管理