vue3+ts 代理的使用

简单封装request.ts

import  axios  from  "axios";

// 1.创建axios对象
const  service=axios.create();

// 2.请求拦截器
service.interceptors.request.use(config=>{
    return  config;
},error=>{
    Promise.reject(error);
})

// 3.响应拦截器
service.interceptors.response.use(response=>{
    // 判断code码
    return  response.data;

},error=>{
    return  Promise.reject(error)
})

export default service;

api请求实例:

import  request  from "@/utils/request";

export const getSliders=()=>{
    return  request({
        url:"/api/slider/getSliders"
    })
}

设置代理 vite-config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    // 配置路径别名
    alias: {
      "@":path.resolve(__dirname,'./src')
    }
  },
  server:{
    proxy:{
      "/api":"http://127.0.0.1:9999/"
    }
  }
})

在页面中使用:

<template>
  <div>
    <el-carousel indicator-position="outside" height="400px">
      <el-carousel-item v-for="item in imgUrls" :key="item">
        <img :src="item.imageUrl" alt="轮播图" class="img" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from "vue";
import { getSliders } from "@/api/slider";

let imgUrls = ref([]);
onBeforeMount(() => {
  getSliders().then((res: any) => {
    console.log(res, "请求结果");
    imgUrls.value = res.data;
  });
});
</script>

<style>
.img {
  width: 100%;
}
</style>

效果图:

在这里插入图片描述

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

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

相关文章

助力打造清洁环境,基于YOLOv7开发构建公共场景下垃圾堆放垃圾桶溢出检测识别系统

公共社区环境生活垃圾基本上是我们每个人每天几乎都无法避免的一个问题&#xff0c;公共环境下垃圾投放点都会有固定的值班时间&#xff0c;但是考虑到实际扔垃圾的无规律性&#xff0c;往往会出现在无人值守的时段内垃圾堆放垃圾桶溢出等问题&#xff0c;有些容易扩散的垃圾比…

HarmonyOS应用程序包-(上)

应用程序包-(上) 1.应用程序包概述 用户应用程序泛指运行在设备的操作系统之上&#xff0c;为用户提供特定服务的程序&#xff0c;简称“应用”。一个应用所对应的软件包文件&#xff0c;称为“应用程序包”。 HarmonyOS提供了应用程序包开发、安装、查询、更新、卸载的管理…

王道考研计算机网络——数据链路层

码元和信号变化是一一对应的 低通&#xff1a;低于最高频率的可以通过 奈氏准则无噪声&#xff0c;香农定理有噪声 给出db&#xff0c;利用公式求出S/N 放到数字信道上传输就是基带信号&#xff0c;放到模拟信道上传输就是宽带信号 把基带信号调制成宽带信号之后&#xff0c;…

微信使用证书退款时候报”请求被中止: 未能创建 SSL/TLS 安全通道

解决方法&#xff1a;IIS-》应用程序池-》高级设置-》进程模块-》加载用户配置文件&#xff0c;设置为True就可以了。

冒泡排序(C语言)

void BubbleSort(int arr[], int len) {int i, j, temp;for (i 0; i < len; i){for (j len - 1; j > i; j--){if (arr[j] > arr[j 1]){temp arr[j];arr[j] arr[j 1];arr[j 1] temp;}}} } 优化&#xff1a; 设置标志位flag&#xff0c;如果发生了交换flag设置…

VD6283TX环境光传感器(1)----获取光强和色温

VD6283TX环境光传感器.1--获取光强和色温 概述视频教学样品申请完整代码下载主要特点硬件准备技术规格系统框图生成STM32CUBEMX串口配置IIC配置X-CUBE-ALS演示结果光强测试表 概述 为了充分利用VD6283TX传感器的特性和功能&#xff0c;本章节重点介绍了如何捕获光强度和相关色…

SQL server 数据库面试题及答案(实操2)

使用你的名字创建一个数据库 创建表&#xff1a; 数据库中有三张表&#xff0c;分别为student,course,SC&#xff08;即学生表&#xff0c;课程表&#xff0c;选课表&#xff09; 问题&#xff1a; --1.分别查询学生表和学生修课表中的全部数据。--2.查询成绩在70到80分之间…

Stable Diffusion模型原理

AI 图像生成引人注目&#xff0c;它能够根据文字描述生成精美图像&#xff0c;这极大地改变了人们的图像创作方式。Stable Diffusion 作为一款高性能模型&#xff0c;它生成的图像质量更高、运行速度更快、消耗的资源以及内存占用更小&#xff0c;是 AI 图像生成领域的里程碑。…

泛微OA xmlrpcServlet接口任意文件读取漏洞(CNVD-2022-43245)

CNVD-2022-43245 泛微e-cology XmlRpcServlet接口处存在任意文件读取漏洞&#xff0c;攻击者可利用漏洞获取敏感信息。 1.漏洞级别 中危 2.影响范围 e-office < 9.5 202201133.漏洞搜索 fofa 搜索 app"泛微-OA&#xff08;e-cology&#xff09;"4.漏洞复现 …

Android 手机对于Arduino蓝牙控制解决方案

1、Android系统概述 ​ Android 系统是 Google 公司基于 Linux 内核开发的移动端操作系统,适用于智能手机智能手表平板电脑等设备&#xff0c;最新的版本为 7.1。Android系统具有免费开源的优势,任何企业与个人都可以查阅公开的 API 文档&#xff0c;并在自己开发的应用中通过调…

【Element】el-select下拉框实现选中图标并回显图标

一、背景 需求&#xff1a;在下拉框中选择图标&#xff0c;并同时显示图标和文字&#xff0c;以便用户可以直观地选择所需的图标。 二、功能实现 <template><div><el-table ref"table" :data"featureCustom2List" height"200"…

实验室安全教育考试管理系统v3.0功能介绍

瑞熙贝通实验室安全练习和在线考试系统&#xff0c;采取线上培训学习与安全考试相结合的教学形式&#xff0c;在学生进入开放实验室之前通过系统对实验的安全与规范有一个系统的认识与学习。通过线上考试系统&#xff0c;为评价学生的实验室安全学习效果提供了快速有效的实验平…

树莓派安装mediapipe方法

MediaPipe 解决方案可跨多个平台使用。 每个解决方案都包含一个或多个模型&#xff0c;您也可以为某些解决方案自定义模型。 以下列表显示了每个受支持平台可用的解决方案以及您是否可以使用 Model Maker 来自定义模型&#xff1a; 在树莓派上安装mediapipe后, python可以支持…

【http】缓存协议

✨ 专栏介绍 在当今互联网时代&#xff0c;计算机网络已经成为了人们生活和工作中不可或缺的一部分。而要实现计算机之间的通信和数据传输&#xff0c;就需要依靠各种网络协议来进行规范和约束。无论是浏览网页、发送电子邮件还是进行在线交流&#xff0c;都离不开各种各样的网…

工具系列:TensorFlow决策森林_(9)自动超参数调整

文章目录 介绍超参数调整算法使用TF Decision Forests进行超参数调整设置在没有自动超参数调整的情况下训练模型使用自动化超参数调整和手动定义超参数训练模型使用自动化超参数调整和自动定义超参数的模型训练&#xff08;推荐方法&#xff09;使用Keras Tuner训练模型 *(替代…

jmeter-set up先登录获取token,再测试

一、何为setup 一种特殊类型的线程组&#xff0c;可用于执行预测试操作&#xff1b;简单来讲就是执行测试线程组前&#xff0c;先执行setup 作用 例如前面&#xff0c;我们说到的&#xff0c;压测之前只用JMeter调用业务接口造数或者通过JDBC操作数据库造数&#xff0c;可以放…

搬运机器人RFID传感器CNS-RFID-01|1S的RS485(MODBUS|HS协议)通讯连接方法

搬运机器人RFID传感器CNS-RFID-01|1S支持RS485通信&#xff0c;可支持RS485&#xff08;MODBUS RTU&#xff09;协议、RS485-HS协议&#xff0c;广泛应用于物流仓储&#xff0c;立库 AGV|无人叉车|搬送机器人等领域&#xff0c;常用定位、驻车等&#xff0c;本篇重点介绍CNS-RF…

IPC之十:使用共享文件进行进程间通信的实例

IPC 是 Linux 编程中一个重要的概念&#xff0c;IPC 有多种方式&#xff0c;常用的 IPC 方式有管道、消息队列、共享内存等&#xff0c;但其实使用广大程序员都熟悉的文件也是可以完成 IPC 的&#xff0c;本文介绍如何使用共享文件实现进程间通信&#xff0c;本文给出了具体的实…

在线文稿演示应用PPTist

PPTist 是一个基于 Vue3.x TypeScript 的在线演示文稿&#xff08;幻灯片&#xff09;应用&#xff0c;还原了大部分 Office PowerPoint 常用功能&#xff0c;支持文字、图片、形状、线条、图表、表格、视频、音频、公式等几种最常用的元素类型&#xff0c;每一种元素都拥有高…

【bug】uniapp一键登录,自定义协议条款是否支持内部路由?

uniapp一键登录的自定义协议条款&#xff0c;不支持内部路由跳转 在uniapp文档上搜一键登录 加二维码之后可以提问