获取猜你喜欢数据,类型定义和列表渲染

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
}
复制代码

 

 

 到这里数据就定义完成了下面就可以渲染了

就按照这样改:

 看一下效果:

 

posted @   艾鑫4646  阅读(7)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 记一次.NET内存居高不下排查解决与启示
点击右上角即可分享
微信分享提示