卡比记账项目——Axios请求记账页面

126 阅读2分钟

记账页面请求

在记账界面ItemSummary组件中,使用Axios发送请求。 我们分别需要几个变量,items是一个ref值负责标记是否含有记账事件,hasmore是一个ref值默认是false,负责标记是否含有下一页,page同样是ref值负责记录当前页码。

截屏2022-11-26 12.09.21.png

同样html部分也要做出改动:

截屏2022-11-26 12.09.47.png

截屏2022-11-26 12.09.55.png 对数据进行一个mock

截屏2022-11-26 12.10.06.png

阻止多余的请求

进入这个页面时会发现,我们发送了四个请求,但实际上自定义时间那里是不需要做请求的。因为自定义时间在进入的时候并没有选择,所以不应该发送请求。 截屏2022-11-26 12.11.00.png

我们需要阻止这个多余的请求。看一下渲染顺序,TimeLayout组件会渲染四次这个Tab。

在TimeLayout中把这个time改成空,并且不成为必选项 截屏2022-11-26 12.22.03.png

截屏2022-11-26 12.22.45.png

在我们发送请求前进行一个条件判断,如果不存在起始和终止时间就直接返回。

截屏2022-11-26 12.24.38.png 这样我们就阻止了多余的请求。 截屏2022-11-26 12.23.57.png

封装Money以及Datetime

我们会发现时间和金额重复使用,且现在显示的时间不方便用户,金额还有小数点问题。在优化中我们可以把他们封装成一个组件。

Money

目标是使用这样的组件, 截屏2022-11-26 12.33.40.png

具体封装: 截屏2022-11-26 12.41.30.png 成功实现: 截屏2022-11-26 12.41.08.png

Datetime

与Money类似,目标是做成如下样式:

截屏2022-11-26 12.44.02.png 具体封装: 截屏2022-11-26 12.44.22.png

成功实现: 截屏2022-11-26 12.44.40.png

同时watch两个字段

在自定义时间中,每次都要选完开始时间和结束时间确认之后才会发请求。所以需要对选择开始时间和结束时间进行watch。

声明一个临时时间

截屏2022-11-26 15.21.25.png 点击确认时,将临时时间赋值给customTime。

截屏2022-11-26 15.22.18.png

同时watch,用数组把两个属性包含起来即可。然后发送请求。注意需要重置之前的页码items等内容,再发送请求。

截屏2022-11-26 15.23.18.png