经验总结:使用vue3测试后端接口的模板

news2025/3/1 16:58:37

为了方便在开发中途,比较即时地,测试自己写的接口,是否有BUG,所以整理了这个测试模板。
效果就是可以通过自己编码,比较灵活,比较快得触发接口调用。
下边这个是最核心的模板,然后还有一个写axios调用的,也附在下边了。
另外这样做和纯用html的fetch对比,比较好解决跨域和用户uid的问题,也更实际一点,因为我自个儿实际开发用的也是vue。

<template>
    <div>
        <h1>测试界面</h1>
        <button @click="loadReviewTask">测试函数 (你要测试哪个方法)</button>
        <div v-if="notes">
            <pre>{{ notes }}</pre>
        </div>
    </div>
</template>

<script setup>

import { findReviewTask } from '@/api/sm2';
import { ref } from "vue";
import { ElMessage } from 'element-plus';

const notes = ref(null);
const loadReviewTask = async () => {
    try {
        const response = await findReviewTask();
        console.log(response);
        notes.value=response.data
    } catch (error) {
        ElMessage.error("加载失败");
    }
};
</script>

<style scoped>
button {
    margin-bottom: 10px;
}
</style>

import request from '@/utils/request.js'
const baseURL = '/sm2-service'

// 获取待复习笔记
export const findReviewTask = () => {
  return request.get(`${baseURL}/findReviewTask`);
};
// 更新一条笔记的复习参数
export const updateEF = (data) => {
  return request.post(`${baseURL}/updateEF`,data);
}

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

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

相关文章

简洁的个人地址发布页HTML源码

源码介绍 简洁的个人地址发布页HTML源码,源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果 效果预览 源码获取 简洁的个人地址发布页HTML源码

wav格式的音频压缩,WAV 转 MP3 VBR 体积缩减比为 13.5%、多个 MP3 格式音频合并为一个、文件夹存在则删除重建,不存在则直接建立

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 问题一&#xff1a;wav格式的音频压缩为哪些格式&#xff0c;网络传输给用户播放…

Linux权限 -- 开发工具(一)

文章目录 包管理器yumyum具体操作 Linux编辑器 - vim的使用vimvim的多模式 包管理器yum Linux中安装软件&#xff1a; 1.源码安装 2. 软件包安装 – rpm 3. 包管理器yum(centos) apt/apt-get(ubuntu) 为什么有包管理器&#xff1f; 包管理器会自动帮我们解决包依赖的问题 2. 什…

【leetcode】二分查找专题

文章目录 1.二分查找1.题目2.解题思路3. 解题代码 2.在排序数组中查找元素的第一个和最后一个位置1.题目2.算法原理3. 代码 3.x的平方根1.题目2.代码 4.搜索插入位置1.题目2.解题思路3.解题代码 5.山脉数组的索引1.题目2.解题思路3. 代码 6.寻找峰值1.题目2.解题思路3.代码 7. …

《Python实战进阶》No 7: 一个AI大模型聊天室的构建-基于WebSocket 实时通信开发实战

第7集&#xff1a; 一个AI大模型聊天室的构建-基于WebSocket 实时通信开发实战 在现代 Web 开发中&#xff0c;实时通信已经成为许多应用的核心需求。无论是聊天应用、股票行情推送&#xff0c;还是多人协作工具&#xff0c;WebSocket 都是实现高效实时通信的最佳选择之一。本…

vector习题

完数和盈数 题目 完数VS盈数_牛客题霸_牛客网 一个数如果恰好等于它的各因子(该数本身除外)之和&#xff0c;如&#xff1a;6321。则称其为“完数”&#xff1b;若因子之和大于该数&#xff0c;则称其为“盈数”。 求出2到60之间所有“完数”和“盈数”。 输入描述&#xff…

unity学习59: 滑动条 和 滚动条 滚动区域

目录 1 滑动条 slider 1.1 创建slider 1.2 构成的子物体 1.2.1 找到 某个UI的 方法 1.3 构成的component&#xff0c;主体就是 slider 2 核心属性 2.1 value 2.2 direction 3 作用 3.1 由于是fill back 可以实现血条效果 3.2 可以取得 slider.value 数值 1 滑动条…

基于vue框架的游戏博客网站设计iw282(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,博客信息,资源共享,游戏视频,游戏照片 开题报告内容 基于FlaskVue框架的游戏博客网站设计开题报告 一、项目背景与意义 随着互联网技术的飞速发展和游戏产业的不断壮大&#xff0c;游戏玩家对游戏资讯、攻略、评测等内容的需求日…

UWB人员定位:精准、高效、安全的智能管理解决方案

在现代企业管理、工业生产、安全监测等领域&#xff0c;UWB&#xff08;超宽带&#xff09;人员定位系统正逐步成为高精度定位技术的首选。相较于传统的GPS、Wi-Fi、蓝牙等定位方式&#xff0c;UWB具备厘米级高精度、低延迟、高安全性、抗干扰强等突出优势&#xff0c;能够实现…

在ubuntu 24.04.2 通过 Kubeadm 安装 Kubernetes v1.31.6

文章目录 1. 简介2. 准备3. 配置 containerd4. kubeadm 安装集群5. 安装网络 calico 插件 1. 简介 本指南介绍了如何在 Ubuntu 24.04.2 LTS 上安装和配置 Kubernetes 1.31.6 集群&#xff0c;包括容器运行时 containerd 的安装与配置&#xff0c;以及使用 kubeadm 进行集群初始…

DO-254航空标准飞行器电机控制器设计注意事项

DO-254航空标准飞行器电机控制器设计注意事项 1.核心要求1.1 设计保证等级(DAL)划分1.2生命周期管理1.3验证与确认2.电机控制器硬件设计的关键注意事项2.1需求管理与可追溯性2.2冗余与容错设计2.3验证与确认策略2.4元器件选型与管理2.5环境适应性设计2.6文档与配置管理3.应用…

解决Deepseek“服务器繁忙,请稍后再试”问题,基于硅基流动和chatbox的解决方案

文章目录 前言操作步骤步骤1&#xff1a;注册账号步骤2&#xff1a;在线体验步骤3&#xff1a;获取API密钥步骤4&#xff1a;安装chatbox步骤5&#xff1a;chatbox设置 价格方面 前言 最近在使用DeepSeek时&#xff0c;开启深度思考功能后&#xff0c;频繁遇到“服务器繁忙&am…

python-leetcode-使用最小花费爬楼梯

746. 使用最小花费爬楼梯 - 力扣&#xff08;LeetCode&#xff09; 解法 1&#xff1a;动态规划&#xff08;O(n) 时间&#xff0c;O(n) 空间&#xff09; class Solution:def minCostClimbingStairs(self, cost: List[int]) -> int:n len(cost)dp [0] * (n 1) # 额外多…

ChatGPT 提示词框架

作为一个资深安卓开发工程师&#xff0c;我们在日常开发中经常会用到 ChatGPT 来提升开发效率&#xff0c;比如代码优化、bug 排查、生成单元测试等。 但要想真正发挥 ChatGPT 的潜力&#xff0c;我们需要掌握一些提示词&#xff08;Prompt&#xff09;的编写技巧&#xff0c;并…

【构建工具】Gradle 8中Android BuildConfig的变化与开启方法

随着Gradle 8的发布&#xff0c;Android开发者需要注意一个重要变化&#xff1a;BuildConfig类的生成现在默认被关闭了&#xff01;&#xff01;&#xff01;。这个变化可能会影响许多依赖于BuildConfig的项目&#xff08;别问&#xff0c;问就是我也被影响了&#xff0c;多好用…

性能测试测试策略制定|知名软件测评机构经验分享

随着互联网产品的普及&#xff0c;产品面对的用户量级也越来越大&#xff0c;能抗住指数级增长的瞬间访问量以及交易量是保障购物体验是否顺畅的至关重要的一环&#xff0c;而我们的性能测试恰恰也是为此而存在的。 性能测试是什么呢&#xff1f;性能测试要怎么测呢&#xff1f…

SAP-ABAP:SAP数据库视图(Database View)详解-创建

在SAP系统中&#xff0c;数据库视图&#xff08;Database View&#xff09; 是一种基于物理数据库表的虚拟表&#xff0c;通过关联多个表&#xff08;使用INNER JOIN&#xff09;生成逻辑数据集。它存储在数据库中&#xff0c;但本身不存储数据&#xff0c;仅通过查询动态生成结…

BUG: 解决新版本SpringBoot3.4.3在创建项目时勾选lombok但无法使用的问题

前言 当使用Spring Boot 3.4.3创建新项目时&#xff0c;即使正确勾选Lombok依赖&#xff0c;编译时仍出现找不到符号的错误&#xff0c;但代码中Lombok注解的使用完全正确。 原因 Spring Boot 3.4.3在自动生成的pom.xml中新增了maven-compiler-plugin的配置&#xff0c;该插件…

登录次数限制

文章目录 一、应用场景与设计目的1. 应用场景2. 设计目的 二、功能设计1. 登录限制规则2. 解锁机制3. 适用维度 三、技术实现1. 数据存储2. 逻辑流程3. 实现代码示例4. 动态锁定时间 四、安全增强与扩展1. 防止用户名枚举2. 加入验证码3. 监控与报警4. 分布式支持 五、设计思考…

CMU15445(2023fall) Project #2 - Extendible Hash Index 匠心分析

胡未灭&#xff0c;鬓已秋&#xff0c;泪空流 此生谁料 心在天山 身老沧州 ——诉衷情 完整代码见&#xff1a; SnowLegend-star/CMU15445-2023fall: Having Conquered the Loftiest Peak, We Stand But a Step Away from Victory in This Stage. With unwavering determinati…