vue3封装接口

news2024/11/17 23:33:35

在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>

大致就是这样了

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Node CLI 之 Yargs (2)

什么是 yargs&#xff1f; yargs 是一个用于处理命令行参数的 Node.js 库 安装 yargs npm install yargs简单例子 不定义任何选项&#xff0c;直接便可以使用 定义命令 const yargs require(yargs)yargs.command(hello, Prints hello world, (yargs) > {}, (argv) >…

栈(深入理解栈是什么)

这里写目录标题 栈概念栈的初始化栈的溢出函数的栈帧函数的返回 栈 概念 英文&#xff1a;stack&#xff0c;也叫做堆栈。 特点&#xff1a;先进后出。 栈的两个基本操作&#xff0c;也就是入栈和出栈。都是通过SP指针来维护。C语言中的函数的局部变量&#xff0c;传递的实参…

datav-实现轮播表,使用updateRows方法-无缝衔接加载数据

前言 最近在做大屏需求的时候&#xff0c;遇到一个轮播数据的需求&#xff0c;查看datav文档发现确实有这个组件 但这个组件只提供了一次加载轮播的例子&#xff0c;虽然提供了轮播加载数据updateRows方法 但是文档并没有触发事件&#xff0c;比如轮播完数据触发事件&#xf…

RocketMQ-RocketMQ高性能核心原理节点(流程图)

NamesrvServer启动流程图&#xff1a; namesrvServer启动简图&#xff1a; Broker服务启动过程流程图 Broker服务启动过程流程简图 整体RPC框架流程如下图 client: DefaultMQProducer

CTF刷题记录

刷题 我的md5脏了KFC疯狂星期四坤坤的csgo邀请simplePHPcurl 我的md5脏了 g0at无意间发现了被打乱的flag&#xff1a;I{i?8Sms??Cd_1?T51??F_1?} 但是好像缺了不少东西&#xff0c;flag的md5值已经通过py交易得到了&#xff1a;88875458bdd87af5dd2e3c750e534741 flag…

2024美赛备战1--数据处理(数据预处理,异常值处理,预测模型,插值拟合 *****必看****)

1.数据预处理 所谓数据预处理&#xff0c;就是指在正式做题之前对数据进行的一些处理。在有些情 况下&#xff0c;出题方提供的数据或者网上查找的数据并不能直接使用&#xff0c;比如缺少数据甚 至是异常数据&#xff0c;如果直接忽略缺失值&#xff0c;或者没发现异常数据&am…

idea java 创建 hellword 项目

1.概要 建立一个最简单的工程&#xff0c;开始编码。 2.试验过程 2.1 创建的过程很简单&#xff0c;除了第一个窗口选择“java 模块”&#xff0c;其他的都是下一步。 2.2 还有就是刚创建的工程什么都没有需要&#xff0c;自己创建一个启动的类和启动函数。 2.3 运行和运行…

随机生成验证码的jar包

这是已经开发好的验证码&#xff0c;咱们直接调用接口&#xff0c;拿过来直接用就可以了 链接&#xff1a;https://pan.baidu.com/s/1QMPhW5UzxmhIa7THFab5hw 提取码&#xff1a;6666 下面演示一下&#xff1a; 首先创建一个Code来先生成随机验证码&#xff0c;然后传…

一个音乐能够做成二维码吗?音乐的活码制作技巧

一个音乐能够做成二维码后展示吗&#xff1f;现在以二维码为载体来储存内容的方式越来越常见&#xff0c;比如图片、文件、视频、音频都可以做成二维码展示&#xff0c;人们也更习惯去扫码获取内容。音频作为日常工作生活中常用的一种内容&#xff0c;可以用音频二维码生成器来…

如何在Word中简洁地插入代码

如何在Word中简洁地插入代码 背景&#xff1a; ​ 最近在一写一些论文或者报告的时候&#xff0c;需要将源代码放在论文的最后&#xff0c;有一个很头疼的问题&#xff0c;如果直接把代码从编辑器复制到word中&#xff0c;就变成了下面这个样子&#xff1a; 这有点丑陋啊&…

2023-12学习笔记

1.NonNull要手动写无参构造器 这是一个我今天研究了很久的问题&#xff0c;开始不知道原因是在这里&#xff0c;还在那想是不是Data覆盖了无参构造&#xff0c;结果当然不是。先说下解决历程 1.问题起因 通过RequestBody接收前端报文的时候报错&#xff0c;大致是说我构造方…

【算法提升—力扣每日一刷】五日总结【12/06--12/10】

2023/12/06 力扣每日一刷&#xff1a;206. 反转链表 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5] 输出&#xff1a;[5,4,3,2,1]示例 2&#xff1a; 输入&#xff1a;head [1,2…

马云说的AI电商真的要来了?AR技术虚拟试穿公司ZERO10引入AI人工智能模型,未来试衣间就应这样!

ZERO10 是一家提供虚拟试穿体验的公司&#xff0c;他们基于自家的 AR 技术&#xff0c;提供高度逼真且顶尖的虚拟试穿体验。与现有的技术不同&#xff0c;他们的生成式人工智能试穿技术只需要 1-5 张用户照片&#xff0c;就可以实现虚拟试穿。这种方法为规模化应用提供了巨大机…

jquery手写广告轮播图,无限循环功能

说明 在很多情况下&#xff0c;我们都需要开发广告轮播图&#xff0c;当我们进行页面的功能开发时&#xff0c;采用轮播图来实现也行&#xff0c;但是很多情况下&#xff0c;我们只需要简单的控制轮播循环轮播展示即可&#xff0c;所以用jq开开发广告轮播波&#xff0c;自定义…

NR重写console.log 增加时间信息

如题&#xff0c;默认console.log输出的日志是13位的时间戳&#xff0c;然后不方便查看与对比代码运行点的耗时&#xff0c;我们可以简单地重写 console.log方法&#xff0c;增加自定义时间戳格式&#xff0c;如下是增加时间&#xff08;时&#xff0c;分&#xff0c;秒&#x…

dirmap 工具学习

dirmap 1.1 工具的下载路径1.2 工具的安装流程1.3 工具的详细使用参数说明测试实验 1.1 工具的下载路径 dirmap 是一个高级 web 目录扫描工具&#xff0c;基于 python3 开发、运行&#xff0c;功能将会强于 DirBuster、Dirsearch、cansina、御剑。 github 下载地址 1.2 工具…

日本服务器:确保其稳定性的几个要点

​  在租用日本服务器时&#xff0c;用户们大多一定会关注它的稳定性&#xff0c;其实这些顾及都是正常的。毕竟&#xff0c;网站要想正常运行&#xff0c;保障服务器稳定是关键。本文将讨论有关如何保障日本服务器稳定性的一些有用技巧&#xff0c;希望对您有所帮助。 1.注重…

西工大网络空间安全学院计算机系统基础实验二(清楚实验框架及phase_1)

首先&#xff0c;将自己的实验包从Windows系统中使用scp命令传到Linux虚拟机中。而要想传到Linux虚拟机中&#xff0c;第一步就是要确定Linux虚拟机的IP地址&#xff0c;如 图1&#xff1a;确定Linux虚拟机的IP地址 所示。接着使用scp命令将实验包从Windows系统传送到Linux虚拟…

Linux系统的各项命令

文章目录 Linux系统的目录结构Linux路径的描述方式Linux命令入门**什么是命令、命令行**Linux命令基础格式 ls命令入门HOME目录和工作目录ls命令的参数和选项ls命令的 -a选项ls命令的 -l选项ls命令选项的组合使用ls选项和参数的组合使用ls命令的 -h选项 目录切换相关命令&#…

迅为RK3568开发板使用OpenCV处理图像(颜色转换)

1 颜色转换 本小节代码在配套资料“iTOP-3568 开发板\03_【iTOP-RK3568 开发板】指南教程 \04_OpenCV 开发配套资料\05”目录下&#xff0c;如下图所示&#xff1a; cv2.cvtColor()函数功能&#xff1a; 将一幅图像从一个色彩空间转换到另一个色彩空间。 函数原型&#xff…