记账页面请求
在记账界面ItemSummary组件中,使用Axios发送请求。 我们分别需要几个变量,items是一个ref值负责标记是否含有记账事件,hasmore是一个ref值默认是false,负责标记是否含有下一页,page同样是ref值负责记录当前页码。
同样html部分也要做出改动:
对数据进行一个mock
阻止多余的请求
进入这个页面时会发现,我们发送了四个请求,但实际上自定义时间那里是不需要做请求的。因为自定义时间在进入的时候并没有选择,所以不应该发送请求。
我们需要阻止这个多余的请求。看一下渲染顺序,TimeLayout组件会渲染四次这个Tab。
在TimeLayout中把这个time改成空,并且不成为必选项
在我们发送请求前进行一个条件判断,如果不存在起始和终止时间就直接返回。
这样我们就阻止了多余的请求。
封装Money以及Datetime
我们会发现时间和金额重复使用,且现在显示的时间不方便用户,金额还有小数点问题。在优化中我们可以把他们封装成一个组件。
Money
目标是使用这样的组件,
具体封装:
成功实现:
Datetime
与Money类似,目标是做成如下样式:
具体封装:
成功实现:
同时watch两个字段
在自定义时间中,每次都要选完开始时间和结束时间确认之后才会发请求。所以需要对选择开始时间和结束时间进行watch。
声明一个临时时间
点击确认时,将临时时间赋值给customTime。
同时watch,用数组把两个属性包含起来即可。然后发送请求。注意需要重置之前的页码items等内容,再发送请求。