获取猜你喜欢数据,类型定义和列表渲染
1.封装获取猜你喜欢数据API
2.组件挂载完毕调用API
这个是接口文档:
下面:
组件内部获取数据,我们其他的都是在index.vue里面获取的:
我们来看一下数据,可以看到数据很多(items商品信息):
定义数据类型:
这里的分页我们其他地方也会用到,因此我们把他定义成一个通用的类型,知识列表数据有变化
商品类型,也就是Items类型
通用分页结果类型如下,新建 `src/types/global.d.ts` 文件: ```ts /** 通用分页结果类型 */ export type PageResult<T> = { /** 列表数据 */ items: T[] /** 总条数 */ counts: number /** 当前页数 */ page: number /** 总页数 */ pages: number /** 每页条数 */ pageSize: number } ``` 猜你喜欢-商品类型如下,存放到 `src/types/home.d.ts` 文件: ```typescript /** 猜你喜欢-商品类型 */ export type GuessItem = { /** 商品描述 */ desc: string /** 商品折扣 */ discount: number /** id */ id: string /** 商品名称 */ name: string /** 商品已下单数量 */ orderNum: number /** 商品图片 */ picture: string /** 商品价格 */ price: number }
到这里数据就定义完成了下面就可以渲染了
就按照这样改:
看一下效果:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示