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>

大致就是这样了

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

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

相关文章

透析跳跃游戏

关卡名 理解与贪心有关的高频问题 我会了✔️ 内容 1.理解跳跃游戏问题如何判断是否能到达终点 ✔️ 2.如果能到终点&#xff0c;如何确定最少跳跃次数 ✔️ 1. 跳跃游戏 leetCode 55 给定一个非负整数数组&#xff0c;你最初位于数组的第一个位置。数组中的每个元素代表…

微信商家收款码扣多少手续费

很多人想申请低手续费率的收款码不知从何下手&#xff0c;在参考了大量博客教学之后&#xff0c;终于搞懂了详细流程以及注意事项。在此记录一下。我申请的是一个只需要0.2%费率的微信收款码&#xff0c;申请时间是2022年2月12日。申请之前只需要准备营业执照和法人身份z&#…

验证二叉搜索树[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个二叉树的根节点root&#xff0c;判断其是否是一个有效的二叉搜索树。有效 二叉搜索树定义如下&#xff1a; 【1】节点的左子树只包含 小于 当前节点的数。 【2】节点的右子树只包含 大于 当前节点的数。 【3】所有左子树和右…

Leetcode 40 组合总和 II

题意理解&#xff1a; 每个数字在每个组合中只能使用 一次 数字可以重复——>难点&#xff08;如何去重&#xff09; 每个组合和target 求组合&#xff0c;对合限制&#xff0c;考虑回溯的方法。——将其抽象为树结构。 树的宽度——分支大小 树的深度——最…

Spring IoC和DI

目录 一. Spring是什么 IoC DI 二. IoC&DI的使用 IoC 1.Controller&#xff08;控制器存储&#xff09; 2.Service&#xff08;服务存储&#xff09; 3.Repository&#xff08;仓库存储&#xff09; 4.Componemt&#xff08;组件存储&#xff09; 5.Configuratio…

解决Could not establish connection to : XHR failed

解决Could not establish connection to : XHR failed 问题描述 用vscode用远程连接服务器时总报上面的错误&#xff0c;用xshell和Xftp和vscode终端都可以连上&#xff0c;但是用vscode的ssh连接缺总报错&#xff0c;导致无法连接服务器进行代码调试 一、原因 原因可能是在…

Go json 差异比较 json-diff(RFC6902)

Go json 差异比较 json-diff(RFC 6902) 毕业设计中过程中为了比较矢量图的差异而依据 RFC 6902 编写的一个包&#xff0c;现已开源&#xff1a; Json-diff 使用 go get -u github.com/520MianXiangDuiXiang520/json-diff序列化与反序列化 与官方 json 包的序列化和反序列化不…

AcWing 95. 费解的开关(递推)

题目链接 活动 - AcWing 本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向有一定编程基础的同学。https://www.acwing.com/problem/content/97/ 题解 只要第一行开关的状态确定&#xff0c;则所有开关的状态都可以被推出来。第一行开关总共有种操…

jemeter,同一线程组内,调用cookie实现接口关联

取cookie方式参考上一篇&#xff1a;jemeter&#xff0c;取“临时重定向的登录接口”响应头中的cookie-CSDN博客 元件结构 登录后要执行的接口为“api/get_event_list/”&#xff0c;在该HTTP请求下创建HTTP信息头管理器&#xff0c;配置如下&#xff1a; 执行测试后&#xff0…

【ensp实践】eNSP实战篇(4)用eNSP实验来认识什么是OSPF及OSPF配置?

OSPF目录 写在前面涉及知识一、什么是OSPF&#xff1f;二、OSPF特性&#xff08;优缺点&#xff09;2.1 OSPF优点2.2 OSPF缺点 三、OSPF实验3.1 打开ensp&#xff0c;添加设备3.2 建立连线3.3 配置及ospf命令【核心】3.3.1 配置PC机3.3.2 设置命令 3.4 验证效果3.4.1、验证OSPF…

使用JLink仿真器实现调试打印的N种方法

方法一&#xff1a;使用MCU的串口 这是最古老也是最简单的方法。 电脑上面插一个USB转TTL&#xff0c;然后与MCU的UART_RX/UART_TX/GND连接起来。PC端再打开一个串口调试助手。两边的波特率一致&#xff0c;就可以收到MCU发过来的打印信息了。 方法二&#xff1a;使用JLink仿…

【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法

近日&#xff0c;阿里云人工智能平台PAI与华南理工大学朱金辉教授团队合作在自然语言处理顶级会议EMNLP2023上发表了BeautifulPrompt的深度生成模型&#xff0c;可以从简单的图片描述中生成高质量的提示词&#xff0c;从而使文生图模型能够生成更美观的图像。BeautifulPrompt通…

Android--Jetpack--Databinding源码解析

慢品人间烟火色&#xff0c;闲观万事岁月长 一&#xff0c;基本使用 关于databinding的基本使用请看之前的文章 Android--Jetpack--Databinding详解-CSDN博客 二&#xff0c;xml布局解析 分析源码呢&#xff0c;主要就是从两方面入手&#xff0c;一个是使用&#xff0c;一个…

STM32F407-14.1.0-01高级定时器简介

TIM1 和 TIM8 简介 高级控制定时器&#xff08;TIM1 和 TIM8&#xff09;包含一个 16 位自动重载计数器&#xff0c;该计数器由可编程预分频器驱动。 此类定时器可用于各种用途&#xff0c;包括测量输入信号的脉冲宽度&#xff08;输入捕获&#xff09;&#xff0c;或者生成输出…

微软NativeApi-NtQuerySystemInformation

微软有一个比较实用的Native接口&#xff1a;NtQuerySystemInformation&#xff0c;具体可以参考微软msdn官方文档&#xff1a;NtQuerySystemInformation&#xff0c; 是一个系统函数&#xff0c;用于收集特定于所提供的指定种类的系统信息。ProcessHacker等工具使用NtQuerySys…

Javascript 数组array赋值与取值

Javascript 数组array赋值与取值 目录 Javascript 数组array赋值与取值 一、数组元素的赋值 1、在创建Array对象时直接赋值 2、利用Array对象的元素下标对数组进行赋值 二、数组元素的获取 一、数组元素的赋值 对数组元素赋值共有2种方法&#xff1a; &#xff08;1&am…

每日一题,头歌平台c语言题目

任务描述 题目描述:输入一个字符串&#xff0c;输出反序后的字符串。 相关知识&#xff08;略&#xff09; 编程要求 请仔细阅读右侧代码&#xff0c;结合相关知识&#xff0c;在Begin-End区域内进行代码补充。 输入 一行字符 输出 逆序后的字符串 测试说明 样例输入&…

【LVGL】STM32F429IGT6(在野火官网的LCD例程上)移植LVGL官方的例程(还没写完,有问题 排查中)

这里写目录标题 前言一、本次实验准备1、硬件2、软件 二、移植LVGL代码1、获取LVGL官方源码2、整理一下&#xff0c;下载后的源码文件3、开始移植 三、移植显示驱动1、enable LVGL2、修改报错部分3、修改lv_config4、修改lv_port_disp.c文件到此步遇到的问题 Undefined symbol …

react中img引入本地图片的方式

在html文件中,可以直接<img src=./roadBook.png /> 但是在jsx文件中,不支持这种写法 必须这样写 在css样式中 App.css .img{background: url(./img/roadBook.png) }App.js import ./App.css;<div className=img></div> 1.基于es6Module //导入 import…

node14升级node16之后,webpack3项目无法启动处理

node从14升级到16之后&#xff0c;项目就无法启动了&#xff0c;研究了webpack3升级5&#xff0c;研究好几个小时都无法启动&#xff0c;最后发现&#xff0c;微微升级几个版本就可以了。webpack还是3 版本改了好多个的&#xff0c;但是不确定具体是哪几个起作用的&#xff0c;…