首页 > 其他分享 >获取猜你喜欢数据,类型定义和列表渲染

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

时间:2024-01-24 13:25:20浏览次数:28  
标签:string ts 渲染 商品 number 列表 类型定义 类型 数据

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
}

 

 

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

就按照这样改:

 看一下效果:

 

标签:string,ts,渲染,商品,number,列表,类型定义,类型,数据
From: https://www.cnblogs.com/aixin52129211/p/17984454

相关文章

  • 路由策略(前缀列表,策略工具-filter-policy,策略工具-Router-policy,双点双向路由重发布)
    1.前缀列表默认是拒绝,如果没写允许,就都是拒绝Greater-equal26less-equal32从子网掩码26-32被匹配,其他的被拒绝2.策略工具1:filter-policy(过滤策略)Export只对引入的路由,,对引入的路由在过滤,是不是发给我的邻居使用,import对所有路由器都可用*ospf:import*R1传......
  • 前端歌谣-第六十五课-express之服务端渲染和客户端渲染
    前言我是歌谣微信公众号关注前端小歌谣一起学习前端知识今天继续给大家讲解服务端渲染和客户端渲染静态资源的讲解案列index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,init......
  • 「云渲染C4D」C4D如何进行云渲染?
    云渲染C4D的过程可现实一键式完成,目前云渲染平台随着技术的发展,平台的使用越发容易操作,无论是渲染文件的传输性、安全性、高效性都有较大的提升,本次为大家简单说明下关于云渲染操作方法。(图源网络)C4D云渲染流程第一步:准备渲染文件通过本地电脑上完成个人建模,确保C4D项目文件......
  • 无涯教程-CSS - 列表(List)
    本章教您如何使用CSS控制listtype,position,style等。无涯教程有以下五个CSS属性,可用于控制列表-list-style-type      : 设置列表项标志的类型。list-style-position  : 设置列表中列表项标志的位置。list-style-image    : 将图象设置为列表......
  • 获取前台分类数据,数据类型和渲染
    1.封装获取前来分类数据API接口文档 把这个接口写入程序 接下来主页调用 验证是否获取数据成功 ......
  • 获取轮播图数据,数据类型定义并渲染
    1.封装获取轮播图数据API2.页面初始化调用API下面根据接口文档写代码1.定义轮播图数据类型2.指定类型并传值给子组件3.渲染轮播图数据根据接口文档类型声明:存放路径:`src/types/home.d.ts````ts/**首页-广告区域数据类型*/exporttypeBannerItem={/**跳转链接*/......
  • 在命令提示符下输入"certutil /?"来查看完整的命令参数列表和使用说明。
    在命令提示符下输入"certutil/?"来查看完整的命令参数列表和使用说明。-dump:转储配置信息或文件-dumpPFX:转储PFX结构-asn:解析ASN.1文件-decodehex:解码十六进制编码的文件-decode:解码Base64编码的文件-encode:将文件编码为Base64-deny:拒绝挂起的请求-resub......
  • 【C++入门到精通】C++入门 —— 类和对象(初始化列表、Static成员、友元、内部类、匿名
     目录一、初始化列表⭕初始化列表概念⭕初始化列表的优点⭕使用场景⭕explicit关键字二、Static成员⭕Static成员概念......
  • 性价比之选:寻找成本最低的云渲染服务平台
    ​在数字创作的天空中,选择一个既经济又高效的云渲染服务平台像是在寻找一片成本最低、性能最优的金矿,本篇将指引您如何慧眼识别,从众多云渲染解决方案中挑选出最符合预算且不牺牲渲染质量的服务。在数字艺术、游戏开发、影视制作,乃至建筑可视化等众多行业,高质量的三维渲染已成为......
  • Flutter框架渲染流程与使用
    转自:https://www.cnblogs.com/zhou--fei/p/17068412.html Flutter简述Flutter是一个UI框架,可以进行移动端(iOS,Android),Web端,桌面端开发,它是一个跨平台解决方案。Flutter的特点:美观,快速,高效,开放。美观:Flutter内置了美丽的MaterialDesign和Cupertinowidget,方便开发出美......