vue3封装接口

在src下面创建一个文件夹任意名称

我拿这个名字举例子了apiService

相当于创建一个新的文件

// 封装接口
// apiService.js
import axios from 'axios';

// 接口前缀
const API_BASE_URL = '前缀';


接口后缀

export const registerUser = async (fileData) => {
  try {
    const response = await axios.post(`${API_BASE_URL}/index/index`, fileData);
    return response.data;
  } catch (error) {
    console.error('Error uploading file:', error);
    throw error;
  }
};

export const registerUsers = async (fileData) => {
  try {
    const response = await axios.post(`${API_BASE_URL}/index/indexs`, fileData);
    return response.data;
  } catch (error) {
    console.error('Error uploading file:', error);
    throw error;
  }
};

用到的页面

<template>
 <div>
  <div @click="handleLogin">点击获取数据</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
 </div>
</template>

<script setup>
import { ref } from 'vue';
import { registerUser } from "../apiService/apiService.js";

const credentials = ref({/* 数据 */});

// 示例:用户登录
const handleLogin = async () => {
  try {
    const response = await registerUser(credentials.value);
    console.log('index信息:', response);
  } catch (error) {
    console.error('Login failed:', error);
  }
};


</script>

大致就是这样了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

eclipse中maven的配置

Maven下载地址&#xff1a;https://maven.apache.org/download.cgi 下载完成以后解压到非中文目录&#xff0c;建议放一个比较大的盘符下&#xff0c;因为Maven会一直从网上更新各种库存放在这个目录下&#xff0c;慢慢的会变得很大。 Maven环境变量配置 创建环境变量 在桌…

file-saver 的使用

简介 FileSaver.js 是在客户端保存文件的解决方案&#xff0c;非常适合在客户端生成文件的 Web 应用程序 基本使用 以下内容基于官方文档&#xff0c;官方文档传送门https://gitcode.net/mirrors/eligrey/FileSaver.js 注意&#xff1a;存在文件保存的大小限制&#xff0c;具…

1688API接口系列,商品详情数据丨搜索商品列表丨商家订单类丨1688开放平台接口使用方案

1688商品详情接口是指1688平台提供的API接口&#xff0c;用于获取商品详情信息。通过该接口&#xff0c;您可以获取到商品的详细信息&#xff0c;包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口&#xff0c;您需要先申请1688的API权限&#xff0c;并获取ac…

Nginx【通俗易懂】《上篇》

目录 1.什么是Nginx&#x1f495;&#x1f495;&#x1f495; 2.Nginx的基本目录&#x1f495;&#x1f495;&#x1f495; 3.基本原理图 &#x1f495;&#x1f495;&#x1f495; 4.Nginx配置 &#x1f495;&#x1f495;&#x1f495; 5.日志的分析 &#x1f495;&…

Matlab数学建模算法之小波神经网络详解

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 &#x1f510;#### 防伪水印——左手の明天 ####&#x1f510; &#x1f497; 大家…

Linux6-配置网络、源码包的编译和安装

配置 linux 网络 配置主机名 修改/etc/hostname 配置文件&#xff0c;永久配置主机名 [rootlocalhost ~]# vim /etc/hostname svr7.tedu.cn [rootlocalhost ~]# cat /etc/hostname svr7.tedu.cn [rootlocalhost ~]# reboot #重启生效命令行永久修改主机名 [rootlocalhost ~…

vivado时序方法检查11

TIMING-47 &#xff1a; 同步时钟之间的伪路径、异步时钟组或仅最 大延迟数据路径约束 在 <clock_group> 与 <clock_group> 这两个时钟之间设置了 <message_string> 时序约束 &#xff08; 请参阅 VivadoIDE 的“ Timing Constraint ”窗口中的约束位…

Docker部署开源分布式任务调度平台DolphinScheduler并实现远程访问办公

文章目录 前言1. 安装部署DolphinScheduler1.1 启动服务 2. 登录DolphinScheduler界面3. 安装内网穿透工具4. 配置Dolphin Scheduler公网地址5. 固定DolphinScheduler公网地址 前言 本篇教程和大家分享一下DolphinScheduler的安装部署及如何实现公网远程访问&#xff0c;结合内…

整合,降价,官司……2023休闲零食行业大变局

休闲零食行业正从暗战走向明战。 11月27日&#xff0c;宁波广源聚亿投资有限公司&#xff08;以下简称“广源聚亿”&#xff09;因被投企业宜春赵一鸣食品科技有限公司&#xff08;以下简称“赵一鸣”&#xff09;在双方合作期内&#xff0c;刻意隐瞒公司重大事项&#xff0c;…

什么叫应用加速,什么情况需要用到应用加速

应用加速的定义 应用加速依赖节点之间的高速通道、转发集群及智能路由技术&#xff0c;实现各地用户的就近接入&#xff0c;通过高速通道直达源站区域&#xff0c;帮助业务解决用户访问卡顿或者延迟过高的问题。使用高速网络和全球范围内的节点技术&#xff0c;确保传输时间和…

1829_org-mode的标记语法

org-mode的标记语法 Grey 全部学习汇总&#xff1a; GitHub - GreyZhang/g_org: my learning trip for org-mode 如果用org-mode来做笔记&#xff0c;现在看起来还是有一些短板让我觉得不是很方便。不过&#xff0c;我发现采用这种方式整理信息的时候会有较为深度的思考。因…

flstudio21.3完整高级版怎么下载?有哪些新功能

flstudio高级版是一款适用于广泛领域的音频编辑软件。它支持多通道混音器和VST插件&#xff0c;包括数百种乐器和效果插件。它还为您提供了一个乐谱编辑器&#xff0c;需要对不同乐器的节奏进行必要的编辑。Flstudio具有许多内置电子合成声音&#xff0c;可提供更广泛的电子声音…

MySQL - 表达式With as 语句的使用及练习

目录 8.1 WITH AS 的含义 8.2 WITH AS语法的基本结构如下&#xff1a; 8.3 练习题1 8.4 牛客练习题 8.1 WITH AS 的含义 WITH AS 语法是MySQL中的一种临时结果集&#xff0c;它可以在SELECT、INSERT、UPDATE或DELETE语句中使用。通过使用WITH AS语句&#xff0c;可以将一个查…

荒野大镖客emp.dll文件丢失怎么办?6种有效修复方法教你如何解决问题

在计算机运行软件游戏的使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到emp.dll&#xff0c;无法继续执行代码”。这个问题的出现往往会导致程序无法正常运行&#xff0c;给用户带来困扰。本文将详细介绍emp.dll丢失的原因、对电脑的影响以…

力扣思维题/经典面试题——下一个排序

https://leetcode.cn/problems/next-permutation/description/ 字节面试题&#xff0c;非常经典的逻辑思维题 1、找到第一个下降点&#xff0c;说明这个点可以变得稍微大一点以至于让整个排列变得更加大 为什么&#xff0c;仔细想想&#xff0c;后面都是倒序了怎么都不可能变得…

Blender学习--制作带骨骼动画的机器人

1. 首先创建一个机器人模型 时间关系&#xff0c;这部分步骤有时间补充 2. 然后为机器人创建一副骨架 时间关系&#xff0c;这部分步骤有时间补充 3.骨骼绑定 切换到物体模式&#xff0c;选中机器人头部&#xff0c;Shift选中骨骼&#xff0c;切换到姿态模式&#xff0c;&am…

Linux系统调试课:I2C tools调试工具

文章目录 一、如何使用I2C tools测试I2C外设1、I2C tools概述: 2、下载I2C tools源码:3、编译I2C tools源码: 4、i2cdetect 5、i2cget 6、i2cdump

校园圈子系统丨交友丨地图找伴丨二手市场等功能丨源码交付支持二开丨APP小程序H5三端交付!

校园圈子系统是一款专为校园生活设计的智能应用&#xff0c;拥有丰富多样的功能模块&#xff0c;提供全方位的服务。无论您是师生还是校友&#xff0c;我们都为您打造了一个与校园紧密相连的交流平台。 通过校园圈子系统&#xff0c;您可以方便地浏览校内最新动态&#xff0c;包…

【BUG】微信小程序扫码获取不到scene参数的bug修复

问题描述&#xff1a; 扫码后获取不到scene&#xff0c;必须点击“重新进入小程序”才可以 错误原因&#xff1a; 微信小程序的二维码扫描分为两种情况&#xff1a; 冷启动&#xff1a;当用户首次扫描二维码或在后台无该小程序运行实例时打开小程序&#xff0c;此时可以通过…

PAD平板签约投屏-高端活动的选择

传统的现场纸质签约仪式除了缺乏仪式感之外还缺少互动性&#xff0c;如果要将签约的过程投放到大屏幕上更是需要额外的硬件设备成本。相比于传统的纸质签约仪式&#xff0c;平板现场电子签约的形式更加的新颖、更富有科技感、更具有仪式感。 平板签约投屏是应用于会议签字仪式的…