学习收获Day13

一、手机验证码登录的实现

1.在登录页面调登录接口，此时是不需要向后台传token的 2.用v-model绑定输入的手机号input框，还有输入的验证码input框 3.输入手机号后，点击获取验证码，向后台传手机号参数，，后台接收到验证码后会进行一系列操作，我们不用管 4.点击获取验证码，开始进行倒计时，此时要调获取验证码的接口，告诉后台我要获取验证码，后台就会去拿验证码，，此时用户会接受到验证码，并在输入框输入验证码，这里前端不用管 5.用户输入验证码后点击登录，，此时，要调登录接口，前端要做的事就是把用户输入的验证码传给后台，后台会进行校验，校验无误后，登录成功，就会从登录页面跳转带其他页面，并且后台会给前端返回一个token，这个token在接口里的data能看到，，如果没看到这个token。那就是后台有问题，这时前端要把这个token存下来。存到本地，，每次调其他接口的时候都要取本地token,然后传给后台，，如果传给后台的token是正确的，，就会返回errorcode=0之类的数据，如果token失效了之类的就会返回错误码，此时就要跳转到登录页面重新登录，重新获取token并存到本地。

二、账号密码登录的实现

与手机验证码登录类似，还更简单，不用向后台拿验证码，，，直接用户输入账号密码点击登录后调登录接口，将账号密码传给后台，后台进行校验，，无误后会给前端返回一个token，前端登录成功跳转页面并将token存下来

三、第三方登录

拿微信来说，点击微信登录，，要调微信的API，获取用户的微信信息传给后台，后台校验返回数据

四.如何实现初始进页面的时候，只显示10个商品，不显示展开全部按钮，当商品大于10个的时候，点击展开全部按钮显示所有商品。按钮变成收起按钮，点击收起按钮，只显示10个商品，收起按钮变成展开全部按钮

1.在渲染商品列表的dom结构，加上 v-show=“item.flag" 2.在初始化渲染页面的调接口的地方写上以下方法， initClassfig () { getClassfiy(this.token).then(res =>{ //取分类 this.classfigData = res.data.data for(let i in this.classfigData) { if(i <= 9) { this.classfigData[i].flag = true } else { this.classfigData[i].flag = false }

} })

}, 3.在点击展开事件里写上以下方法 openClassfiy() { console.log(‘展开更多’) this.showMore=!this.showMore

//取分类 for(let i in this.classfigData) { this.classfigData[i].flag=true } },

4。在点击关闭写上以下方法

closeClassfiy() { this.showMore=!this.showMore for(let i in this.classfigData) { if(i <= 9) { this.classfigData[i].flag = true } else { this.classfigData[i].flag = false } } },