vue3 ts 请求封装后端接口

一 首页-广告区域-小程序

首页-广告区域-小程序

GET

/home/banner

在这里插入图片描述

1.1 请求封装 首页-广告区域

home.ts

export const getHomeBannerApi = (distributionSite = 1) => {return http<BannerItem[]>({method: 'GET',url: '/home/banner',data: {distributionSite,},})
}

函数定义：

  • getHomeBannerApi 是一个导出的常量函数。
  • 它接收一个可选参数 distributionSite，默认值为 1。

HTTP 请求配置：

  • method: ‘GET’：指定请求方法为 GET。

  • url: ‘/home/banner’：请求的 URL。

  • data: { distributionSite }：请求的参数。

返回值：

  • 函数返回 http<BannerItem[]>(…) 的结果。
{"msg": "string","result": [{"id": "string","imgUrl": "string","hrefUrl": "string","type": 0}]
}

2 定义返回值类型

/** 首页-广告区域数据类型 */
export type BannerItem = {/** 跳转链接 */hrefUrl : string/** id */id : string/** 图片链接 */imgUrl : string/** 跳转类型 */type : number
}

3 方法调用

const bannerList = ref<BannerItem[]>([])const getBannerData = () => {getHomeBannerApi().then((res) => {bannerList.value = res.result})}

二 猜你喜欢-小程序

在这里插入图片描述

1 封装请求

export const getGuessListApi=((data?:PageParams)=>{return http<PageResult<GuessItem[]>>({method:"GET",url:'/home/goods/guessLike',data})
})

函数定义：

  • getGuessListApi 是一个导出的常量函数。
  • 它接收一个可选参数 data，类型为 PageParams。

HTTP 请求配置：

  • method: ‘GET’：指定请求方法为 GET。

  • url: ‘/home/goods/guessLike’：请求的 URL。

  • data：请求的参数（可选）。

返回值：

  • 函数返回 http<PageResult<GuessItem[]>>(…) 的结果。
  • http 是一个泛型函数，<PageResult<GuessItem[]>> 表示期望的响应数据类型是一个分页结果，其中 data 字段是 GuessItem 数组。

2 返回值类型定义

/** 通用分页结果类型 */
export type PageResult<T> = {/** 列表数据 */items: T[]/** 总条数 */counts: number/** 当前页数 */page: number/** 总页数 */pages: number/** 每页条数 */pageSize: number
}
  • PageResult 是一个泛型类型，T 表示列表中每一项的数据类型。
  • 例如，如果 T 是 GuessItem，那么 items 的类型就是 GuessItem[]。

3 请求值类型定义

export type PageParams = {/** 页码：默认值为 1 */page?: number/** 页大小：默认值为 10 */pageSize?: number
}

4 方法调用

const guessList = ref<GuressItem[]>([]);// 分页参数const pageParams : Required<PageParams> = {page: 1,pageSize: 10}const flag = ref(false)const getGuessLike = (() => {if (flag.value) {return uni.showToast({icon: 'none',title: "没有更多数据了"})}getGuessListApi(pageParams).then(res => {guessList.value = guessList.value.concat(res.result.items)if (pageParams.page < res.result.pages) {pageParams.page++} else {flag.value = true}})})

三 商品详情

在这里插入图片描述

1 请求封装

/*** 商品详情* @param id 商品id*/
export const getGoodsByIdAPI = (id: string) => {return http<GoodsResult>({method: 'GET',url: '/goods',data: { id },})
}

2 返回值类型定义

import type { GoodsItem } from './global'/** 商品信息 */
export type GoodsResult = {/** id */id: string/** 商品名称 */name: string/** 商品描述 */desc: string/** 当前价格 */price: number/** 原价 */oldPrice: number/** 商品详情: 包含详情属性 + 详情图片 */details: Details/** 主图图片集合[ 主图图片链接 ] */mainPictures: string[]/** 同类商品[ 商品信息 ] */similarProducts: GoodsItem[]/** sku集合[ sku信息 ] */skus: SkuItem[]/** 可选规格集合备注[ 可选规格信息 ] */specs: SpecItem[]/** 用户地址列表[ 地址信息 ] */userAddresses: AddressItem[]
}/** 商品详情: 包含详情属性 + 详情图片 */
export type Details = {/** 商品属性集合[ 属性信息 ] */properties: DetailsPropertyItem[]/** 商品详情图片集合[ 图片链接 ] */pictures: string[]
}/** 属性信息 */
export type DetailsPropertyItem = {/** 属性名称 */name: string/** 属性值 */value: string
}/** sku信息 */
export type SkuItem = {/** id */id: string/** 库存 */inventory: number/** 原价 */oldPrice: number/** sku图片 */picture: string/** 当前价格 */price: number/** sku编码 */skuCode: string/** 规格集合[ 规格信息 ] */specs: SkuSpecItem[]
}/** 规格信息 */
export type SkuSpecItem = {/** 规格名称 */name: string/** 可选值名称 */valueName: string
}/** 可选规格信息 */
export type SpecItem = {/** 规格名称 */name: string/** 可选值集合[ 可选值信息 ] */values: SpecValueItem[]
}/** 可选值信息 */
export type SpecValueItem = {/** 是否可售 */available: boolean/** 可选值备注 */desc: string/** 可选值名称 */name: string/** 可选值图片链接 */picture: string
}/** 地址信息 */
export type AddressItem = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number/** 收货地址 id */id: string/** 省市区 */fullLocation: string
}

3 方法调用

  const goods = ref<GoodsResult>()const getGoodsInfo = (() => {getGoodsByIdAPI(query.id).then(res => {goods.value = res.result})})

四 小程序登录

在这里插入图片描述

1 请求封装

export const postLoginWxMinAPI = (data:LoginParams) => {return http<LoginResult>({method: 'POST',url: '/login/wxMin',data,})
}

2 定义请求值类型

/*** 小程序登录* @param data 请求参数*/
type LoginParams={code:string,encryptedData:string,iv:string
}

3 定义返回值类型


//通用的用户信息
type BaseProfile={/** 用户ID */id: number/** 头像  */avatar: string/** 账户名  */account: string/** 昵称 */nickname?: string
}/** 小程序登录 登录用户信息 */
export type LoginResult = BaseProfile & {/** 手机号 */mobile: string/** 登录凭证 */token: string
}
  • LoginResult 是基于 BaseProfile 的扩展类型，使用 &（相当于javaextend继承） 进行类型合并。
  • 它包含了 BaseProfile 的所有字段，并新增了 mobile 和 token 字段。

4 方法调用

  const onGetphonenumber : UniHelper.ButtonOnGetphonenumber = ((e) => {const encryptedData = e.detail!.encryptedData!const iv = e.detail!.iv!postLoginWxMinAPI({code,encryptedData,iv}).then(res => {console.log(res);loginSuccess(res.result)})})const loginSuccess = (profile : LoginResult) => {// 保存会员信息const memberStore = useMemberStore()memberStore.setProfile(profile)// 成功提示uni.showToast({ icon: 'success', title: '登录成功' })setTimeout(() => {// 页面跳转uni.navigateBack()}, 500)}

五 新建地址

在这里插入图片描述

1 请求封装

/*** 添加收货地址* @param data 请求参数*/
export const postMemberAddressAPI = (data: AddressParams) => {return http({method: 'POST',url: '/member/address',data,})
}

2 参数定义

/** 添加收货地址: 请求参数 */
export type AddressParams = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number
}

3 方法调用

// 表单数据

  const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否})
postMemberAddressAPI(form.value)

六 修改地址

1 请求封装

export const putMemberAddressByIdApi=((id:string,data:AddressItem)=>{return http({method:"PUT",url:`/member/address/${id}`,data})
})

2 参数定义

/** 添加收货地址: 请求参数 */
export type AddressParams = {/** 收货人姓名 */receiver: string/** 联系方式 */contact: string/** 省份编码 */provinceCode: string/** 城市编码 */cityCode: string/** 区/县编码 */countyCode: string/** 详细地址 */address: string/** 默认地址，1为是，0为否 */isDefault: number
}export type AddressItem= AddressParams &{id:string,fullLocation:string,
}

3 方法调用

// 表单数据const form = ref({receiver: '', // 收货人contact: '', // 联系方式fullLocation: '', // 省市区(前端展示)provinceCode: '', // 省份编码(后端参数)cityCode: '', // 城市编码(后端参数)countyCode: '', // 区/县编码(后端参数)address: '', // 详细地址isDefault: 0, // 默认地址，1为是，0为否})
putMemberAddressByIdApi(query.id, form.value)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/898844.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

响应式CMS架构优化SEO与用户体验

响应式CMS架构优化SEO与用户体验

内容概要 在数字化内容生态中&#xff0c;响应式CMS架构已成为平衡搜索引擎可见性与终端用户体验的核心载体。该系统通过多终端适配技术&#xff0c;确保PC、移动端及平板等设备的内容渲染一致性&#xff0c;直接降低页面跳出率并延长用户停留时长。与此同时&#xff0c;智能S…
阅读更多...
算法基础篇(1)（蓝桥杯常考点）

算法基础篇(1)（蓝桥杯常考点）

算法基础篇 前言 算法内容还有搜索&#xff0c;数据结构&#xff08;进阶&#xff09;&#xff0c;动态规划和图论 数学那个的话大家也知道比较难&#xff0c;放在最后讲 这期包含的内容可以看目录 模拟那个算法的话就是题说什么写什么&#xff0c;就不再分入目录中了 注意事…
阅读更多...
MyBatis一级缓存和二级缓存

MyBatis一级缓存和二级缓存

介绍 在开发基于 MyBatis 的应用时&#xff0c;缓存是提升性能的关键因素之一。MyBatis 提供了一级缓存和二级缓存&#xff0c;合理使用它们可以显著减少数据库的访问次数&#xff0c;提高系统的响应速度和吞吐量。本文将深入探讨 MyBatis 一级缓存和二级缓存的工作原理、使用…
阅读更多...
C++核心语法快速整理

C++核心语法快速整理

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文主要为学过多门语言玩家快速入门C 没有基础的就放弃吧。 全部都是精华&#xff0c;看完能直接上手改别人的项目。 输出内容 std::代表了这里的cout使用的标准库&#xff0c;避免不同库中的相同命名导致混乱 …
阅读更多...
如何让自动驾驶汽车“看清”世界？坐标映射与数据融合概述

如何让自动驾驶汽车“看清”世界？坐标映射与数据融合概述

在自动驾驶领域，多传感器融合技术是实现车辆环境感知和决策控制的关键。其中，坐标系映射和对应是多传感器融合的重要环节，它涉及到不同传感器数据在统一坐标系下的转换和匹配，以实现对车辆周围环境的准确感知。本文将介绍多传感器融合中坐标系映射和对应的数学基础和实际应…
阅读更多...
Unity Shader 的编程流程和结构

Unity Shader 的编程流程和结构

Unity Shader 的编程流程和结构 Unity Shader 的编程主要由以下三个核心部分组成&#xff1a;Properties&#xff08;属性&#xff09;、SubShader&#xff08;子着色器&#xff09; 和 Fallback&#xff08;回退&#xff09;。下面是它们的具体作用和结构&#xff1a; 1. Pr…
阅读更多...
第十四天- 排序

第十四天- 排序

一、排序的基本概念 排序是计算机科学中一项重要的操作&#xff0c;它将一组数据元素按照特定的顺序&#xff08;如升序或降序&#xff09;重新排列。排序算法的性能通常通过时间复杂度和空间复杂度来衡量。在 Python 中&#xff0c;有内置的排序函数&#xff0c;同时也可以手…
阅读更多...
移除idea External Liraries 中maven依赖包

移除idea External Liraries 中maven依赖包

问题背景 扩展包里面不停的出现已经在POM文件注释的包&#xff0c;其实是没有查询到根源位置。 在IDEA插件中搜索Maven Helper 点击pom.xml文件 会出现扩展插件 定位之后在pom中添加exclusions&#xff0c;如下代码 <dependency><groupId>com.disney.eva.framewo…
阅读更多...
AI革命！蓝耘携手海螺AI视频，打造智能化视频新纪元

AI革命！蓝耘携手海螺AI视频，打造智能化视频新纪元

AI革命&#xff01;蓝耘携手海螺AI视频&#xff0c;打造智能化视频新纪元 前言 在这个信息爆炸的时代&#xff0c;视频已经成为我们获取信息、学习新知识的重要方式。而随着人工智能&#xff08;AI&#xff09;技术的快速发展&#xff0c;AI与视频内容的结合为我们带来了全新的…
阅读更多...
dify1.1.1安装

dify1.1.1安装

1、 按照GitHub上操作 下载源码&#xff0c;没有安装git的&#xff0c;可以下载成zip包&#xff0c; unzip 解压 git clone https://github.com/langgenius/dify.git cd dify cd docker cp .env.example .env2、启动前 &#xff0c;先改下 docker-compose.yaml&#xff0c;…
阅读更多...
ElasticSearch 可观测性最佳实践

ElasticSearch 可观测性最佳实践

ElasticSearch 概述 ElasticSearch 是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理 PB 级别&#xff08;大数据时代&#xff09;的数据。ES 也使用 Java 开…
阅读更多...
Excel处理控件Spire.XLS系列教程：C# 在 Excel 中添加或删除单元格边框

Excel处理控件Spire.XLS系列教程：C# 在 Excel 中添加或删除单元格边框

单元格边框是指在单元格或单元格区域周围添加的线条。它们可用于不同的目的&#xff0c;如分隔工作表中的部分、吸引读者注意重要的单元格或使工作表看起来更美观。本文将介绍如何使用 Spire.XLS for .NET 在 C# 中添加或删除 Excel 单元格边框。 安装 Spire.XLS for .NET E-…
阅读更多...
前端Wind CSS面试题及参考答案

前端Wind CSS面试题及参考答案

目录 标准盒模型与 IE 盒模型的区别是什么？如何通过 box-sizing 属性切换这两种盒模型？ 如何计算一个元素在标准盒模型下的总宽度（包含 margin、padding、border）？ 父元素高度塌陷的原因是什么？请列举至少 3 种清除浮动的方法。 方法一：使用 clear 属性 方法二：使用…
阅读更多...
基于 ECharts 实现动态图表渲染支持10万+数据点实时更新方案

基于 ECharts 实现动态图表渲染支持10万+数据点实时更新方案

引言 实现支持10万数据点实时更新的动态图表渲染确实具有挑战性&#xff0c;尤其是在性能和用户体验方面。以下是一些关键点和应用场景&#xff1a; 关键挑战 性能优化&#xff1a; 渲染性能&#xff1a;大量数据点会导致浏览器渲染压力大&#xff0c;可能引发卡顿。数据处理…
阅读更多...
装饰器模式 (Decorator Pattern)

装饰器模式 (Decorator Pattern)

装饰器模式 (Decorator Pattern) 是一种结构型设计模式，它动态地给一个对象添加一些额外的职责，就增加功能来说，装饰器模式相比生成子类更为灵活。 一、基础 1 意图 动态地给一个对象添加一些额外的职责。 就增加功能来说，装饰器模式相比生成子类更为灵活。 2 适用场景 当…
阅读更多...
【Java】TCP网络编程：从可靠传输到Socket实战

【Java】TCP网络编程：从可靠传输到Socket实战

活动发起人小虚竹 想对你说&#xff1a; 这是一个以写作博客为目的的创作活动&#xff0c;旨在鼓励大学生博主们挖掘自己的创作潜能&#xff0c;展现自己的写作才华。如果你是一位热爱写作的、想要展现自己创作才华的小伙伴&#xff0c;那么&#xff0c;快来参加吧&#xff01…
阅读更多...
蓝桥杯C++基础算法-0-1背包

蓝桥杯C++基础算法-0-1背包

这段代码实现了一个经典的0-1 背包问题的动态规划解法。0-1 背包问题是指给定一组物品&#xff0c;每个物品有其体积和价值&#xff0c;要求在不超过背包容量的情况下&#xff0c;选择物品使得总价值最大。以下是代码的详细思路解析&#xff1a; 1. 问题背景 给定 n 个物品&am…
阅读更多...
html5炫酷的科技感3D文字效果实现详解

html5炫酷的科技感3D文字效果实现详解

炫酷的科技感3D文字效果实现详解 这里写目录标题 炫酷的科技感3D文字效果实现详解项目概述核心技术实现1. 3D文字效果2. 故障艺术效果&#xff08;Glitch Effect&#xff09;3. 动态网格背景4. 扫描线效果5. 粒子效果 性能优化考虑技术难点与解决方案项目总结扩展优化方向 项目…
阅读更多...
车道保持中车道线识别

车道保持中车道线识别

需要让小车保持车道行驶&#xff0c;首先需要进行车道线识别。 也可参看论文&#xff08;上传到资源里&#xff09;&#xff1a;自动驾驶汽车车道检测与预测的技术解析-基于图像处理和Hough变换的方法 1 车道识别流程 想进行车道线识别&#xff0c;并且希望在图像中选择一个特…
阅读更多...
英伟达有哪些支持AI绘画的 工程

英伟达有哪些支持AI绘画的 工程

英伟达在AI绘画领域布局广泛&#xff0c;其自研工具与第三方合作项目共同构建了完整的技术生态。以下是其核心支持AI绘画的工程及合作项目的详细介绍&#xff1a; 一、英伟达自研AI绘画工具 1. GauGAN系列 技术特点&#xff1a;基于生成对抗网络&#xff08;GAN&#xff09;&…
阅读更多...
最新文章

Copyright @ 2022~2023