项目练习-头条新闻Day05-反馈面板完善、子向父传递数据、拦截器处理token过期

75 阅读2分钟

1.反馈二级面板及常见错误调试

1.1一级面板标签准备ActionSheet 动作面板---挂载到body上面

注意书写的位置:

image.png

image.png 此时的效果并没有完全出来,找问题属于的类型

image.png 原因是挂载位置 指定挂载位置----将其挂载到body上 弹出层默认挂载到组件所在位置,可以通过 get-container 属性指定挂载位置。

1.2二级面板数据切换----点击反馈垃圾内容数据切换

实现步骤:1.监听点了哪一个标签 2.给点击到标签实现二级面板 组件自带的事件select

image.png 如何使用?---步骤 1.判断点击了哪个 if (action.name === '反馈垃圾内容') {} 2.切换到actions数组里面的数据 由于不想散落在逻辑页面里,所以在api/report.js定义2个变量

image.png

image.png

1.3点击返回一级数据

1.3.1点击返回一级数据

目标:二级反馈数据出现,取消按钮文字要换成返回 使用变量

image.png

数据实现---点击返回切换到上一层事件cancel取消事件和事件方法

image.png

1.3.2恢复一级数据

此时会有bug,回保留所选的二级状态 // 手动关闭面板-防止下次点击时保留所选的二级状态 onClose() { this.actions = firstActions this.cancelText = '取消' }

image.png

2.不感兴趣功能实现

2.1.不喜欢功能接口方法

接口文档:

image.png 接口方法:

image.png 尽量将接口调用放到一个位置,此处在父组件中调用该接口,使用子向父传递数据---传递不喜欢文章的id 子向父传递参数----$emit('自定义事件名',传递的参数) 子组件: image.png 父组件绑定自定义事件:

image.png

image.png 组件间通信方式:juejin.cn/post/684490…

2.1.举报文章功能的实现

过程跟上一个类似,注意里面的传参 接口: image.png 使用:

image.png

3.拦截器---响应拦截器&请求拦截器

拦截器本质上是个函数

3.1响应拦截器--处理token过期问题

引入路由:不难直接使用this.router(因为this不是vue组件对象无法调用this.router(因为this不是vue组件对象无法调用router),需要直接引入

image.png

3.2请求拦截器---统一携带headers

目标:统一携带token,判断本地有token再携带,判断具体api/index.js如果里面没有携带Authorization,再添加进去

image.png

4.try&catch

如果使用try+catch自己处理错误,内部抛出的错误就不会想控制台抛出打印错误,而是交给你的catch内自定义错误//try补货同步代码异常