当前位置: 首页 > news >正文

axios请求设置request umijopenai生产前端请求 ts状态全局 v-if v-else 与动态js变量

axios请求

安装

npm install axios

全局自定义请求

集中处理设置 集体通用请求

example

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});

请求前

请求后

拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);});

前后端交互

@umijs/openai插件

可以由后端kf4j文档 自动生成前端代码

npm i --save-dev @umijs/openapi

在根目录添加配置文件

import { generateService } from '@umijs/openapi'generateService({requestLibPath: "import request from '@/request'",schemaPath: 'http://localhost:8123/api/v2/api-docs',serversPath: './src',
})

pack.json设置

//  what;
//  自己添加openapi服务 设置要执行哪些代码
//    使用 node 运行openapi.config.js js文件"openapi": "node openapi.config.js",

bug1 后端未启动

fetch openapi error: FetchError: request to http://localhost:8123/api/v2/api-docs failed, reason: at ClientRequest.<anonymous> (D:\project\pioneak-picture-frontend\node_modules\node-fetch\lib\index.js:1501:11)

bug2 axios基础网址设置错误

const myAxios = axios.create({baseURL: 'http://localhost:8123',timeout: 60000,withCredentials: true,
});

全局状态管理

某一个信息多个页面共享数据

Pinia更新与共享

import { defineStore } from "pinia";
import { ref } from "vue";export const useLoginUserStore = defineStore("loginUser", () => {const loginUser = ref<any>({userName: "未登录",});async function fetchLoginUser() {// todo 由于后端还没提供接口,暂时注释// const res = await getCurrentUser();// if (res.data.code === 0 && res.data.data) {//   loginUser.value = res.data.data;// }/*what:测试用户登录loginUser常量 设置对象内容 3s后设置app.vue 中 使用 LoginUserStore.fetchLoginUser() 设置loginUser value 在vue动态响应 <div v-if="loginUserStore.loginUser.id">判断到了id*/setTimeout(() =>{loginUser.value = {userName: "测试用户", id: 1}},3000)}function setLoginUser(newLoginUser: any) {loginUser.value = newLoginUser;}return { loginUser, setLoginUser, fetchLoginUser };
});

使用状态全局

const LoginUserStore = useLoginUserStore()
LoginUserStore.fetchLoginUser()

在组件中使用状态全局对象与对象信息

<div v-if="loginUserStore.loginUser.id">{{loginUserStore.loginUser.userName ?? '无名'}}</div><div v-else><a-button type="primary" href="/user/login">登录</a-button></div>
const loginUserStore = useLoginUserStore()

相关文章:

axios请求设置request umijopenai生产前端请求 ts状态全局 v-if v-else 与动态js变量

axios请求 安装 npm install axios全局自定义请求 集中处理设置 集体通用请求 example const instance axios.create({baseURL: https://some-domain.com/api/,timeout: 1000,headers: {X-Custom-Header: foobar} });请求前 请求后 拦截器 // 添加请求拦截器 axios.in…...

SparkSQL全之RDD、DF、DS ,UDF、架构、资源划分、sql执行计划、调优......

1 SparkSQL概述 1.1 sparksql简介 Shark是专门针对于spark的构建大规模数据仓库系统的一个框架Shark与Hive兼容、同时也依赖于Spark版本Hivesql底层把sql解析成了mapreduce程序&#xff0c;Shark是把sql语句解析成了Spark任务随着性能优化的上限&#xff0c;以及集成SQL的一些…...

深入理解Linux内存缓存:提升性能的关键

在深入探索 Linux 系统的奇妙世界时&#xff0c;内存管理无疑是一个至关重要的领域。而在 Linux 内存体系中&#xff0c;Cache 扮演着举足轻重的角色。它就像是一位默默奉献的幕后英雄&#xff0c;为系统的高效运行立下汗马功劳。那么&#xff0c;Linux 内存中的 Cache 究竟是什…...

STM32-FOC-SDK包含以下关键知识点

STM32-FOC-SDK&#xff08;Field-Oriented Control - Software Development Kit&#xff09;是专为STM32微控制器设计的一套软件开发工具&#xff0c;用于实现电机控制的磁场定向控制&#xff08;Field Oriented Control&#xff0c;简称FOC&#xff09;。STM32是一款基于ARM C…...

sql调优:优化响应时间(优化sql) ; 优化吞吐量

Sql性能调优的目的 1.优化响应时间>>优化sql 经过调优后&#xff0c;执行查询、更新等操作的时候&#xff0c;数据库的反应速度更快&#xff0c;花费的时间更少。 2.优化吞吐量 即“并发”, 就是“同时处理请求”的能力。 优化sql 尽量将多条SQL语句压缩到一句>…...

【Mybatis】如何简单使用mybatis-plus,以及MybatisGenerator自动生成或者实现SQL语句

前言 &#x1f31f;&#x1f31f;本期讲解关于mybatis中SQL自动生成的相关知识介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;…...

Halcon 车牌识别-超精细教程

车牌示例 流程: 读取图片转灰度图阈值分割,找车牌内容将车牌位置设置变换区域形状找到中心点和弧度利用仿射变换,斜切车牌旋转转正,把车牌抠出来利用形态学操作拼接车牌号数字训练ocr开始识别中文车牌 本文章用到的算子(解析) Halcon 算子-承接车牌识别-CSDN博客 rgb1_to_gray…...

LeetCode 25 - K 个一组翻转链表

LeetCode 25 - K 个一组翻转链表 这道题是一个典型的链表操作题&#xff0c;考察我们对链表的精确操作&#xff0c;包括反转链表、分组处理、递归和迭代的结合应用等。还可以通过变体问题延伸到优先队列操作、归并、分块等&#xff0c;这使得它成为面试中的高频考题之一。 题目…...

一文读懂智能硬件定位:开启智能时代的精准导航

一、智能硬件定位是什么 &#xff08;一&#xff09;基本概念阐述 智能硬件定位&#xff0c;本质上是智能硬件依托一系列特定技术手段&#xff0c;精准测定自身所处地理位置的过程。这一实现过程离不开诸多关键技术的支撑。传感器堪称其中的 “排头兵”&#xff0c;像加速度计…...

夸父工具箱(安卓版) 手机超强工具箱

如今&#xff0c;人们的互联网活动日益频繁&#xff0c;导致手机内存即便频繁清理&#xff0c;也会莫名其妙地迅速填满&#xff0c;许多无用的垃圾信息悄然占据空间。那么&#xff0c;如何有效应对这一难题呢&#xff1f;答案就是今天新推出的这款工具软件&#xff0c;它能从根…...

Html5学习教程,从入门到精通,HTML5 列表语法知识点及案例代码(11)

HTML 列表语法知识点及案例代码 一、HTML 列表类型 HTML 提供了三种列表类型&#xff1a; 无序列表 (Unordered List)&#xff1a;使用 <ul> 标签定义&#xff0c;列表项使用 <li> 标签定义。默认情况下&#xff0c;列表项前面会显示黑色圆点。有序列表 (Ordere…...

内核进程调度队列(linux的真实调度算法) ─── linux第13课

目录 内核进程调度队列的过程 一个CPU拥有一个runqueue(运行队列在内存) 活动队列(active) 过期队列(expired) active指针和expired指针 重绘runqueue linux内核O(1)调度算法 总结 补充知识: 封装链式结构的目的是: 仅使用封装链式结构可以得到全部的task_struct的信…...

16.7 LangChain LCEL 极简入门:Prompt + LLM 的黄金组合

LangChain LCEL 极简入门:Prompt + LLM 的黄金组合 关键词:LCEL 基础示例、Prompt 模板设计、LLM 集成、链式调用、LangChain 快速上手 1. 基础架构解析:Prompt → LLM → Output 1.1 核心组件交互流程 #mermaid-svg-pv3fH3mEKyE4TNaF {font-family:"trebuchet ms&qu…...

Spring线程池学习笔记

Spring提供了多种方式来配置和使用线程池&#xff0c;最常见的是通过TaskExecutor和ThreadPoolTaskExecutor。 Spring线程池 TaskExecutor 接口 TaskExecutor 是Spring框架中的一个接口&#xff0c;它是对Java的Executor接口的简单封装。它的主要目的是为了提供一个统一的接口…...

ArcGIS操作:08 计算shp面积并添加到属性表

1、打开属性表 注意&#xff1a;计算面积前&#xff0c;需要把shp的坐标系转化为投影坐标系&#xff08;地理坐标系用于定位、投影坐标系用于测量&#xff09; 2、创建字段 3、编辑字段名、类型 4、选择字段&#xff0c;计算几何 5、选择属性、坐标系、单位...

安卓音频框架混音器

在 Android 音频框架中&#xff0c;混音器&#xff08;Mixer&#xff09; 是 AudioFlinger 服务的核心组件之一&#xff0c;负责将多个音频流&#xff08;来自不同应用或系统组件&#xff09;混合为统一的输出流&#xff0c;再传输到音频硬件设备&#xff08;如扬声器、耳机等&…...

左值引用与指针的区别

很多朋友遇到过这个问题&#xff1a;左值引用与指针有哪些区别&#xff1f;脑子里闪过很多答案&#xff0c;但大部分都是各自的定义&#xff0c;真要说他们两个有什么区别&#xff0c;有的时候还这是说不上来。本文针对这个问题进行归纳总结&#xff0c;希望对大家有所帮助。 …...

Linux基础使用和程序部署

目录 1.Linux 1.2 Linux的环境搭配 1.2.1 使用云服务器 1.2.2使用终端软件连接到Linux 1.3. Linux 常用命令 1. ls&#xff1a;列出当前目录中的文件和子目 2.pwd&#xff1a;显示当前工作目录的路径 3.cd&#xff1a;改变工作目录&#xff0c;将当前的工作目录改变到指定目…...

Linux驱动开发之串口驱动移植

原理图 从上图可以看到RS232的串口接的是UART3&#xff0c;接下来我们需要使能UART3的收发功能。一般串口的驱动程序在内核中都有包含&#xff0c;我们配置使能适配即可。 设备树 复用功能配置 查看6ull如何进行uart3的串口复用配置&#xff1a; 设备树下添加uart3的串口复用…...

计算机毕业设计SpringBoot+Vue.js美食推荐系统商城(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...

boost::filesystem::path文件路径使用详解和示例

boost::filesystem::path 是 Boost 库中用于跨平台操作文件路径的类&#xff0c;封装了路径的拼接、分割、提取、判断等常用功能。下面是对它的使用详解&#xff0c;包括常用接口与完整示例。 1. 引入头文件与命名空间 #include <boost/filesystem.hpp> namespace fs b…...

HTTPS证书一年多少钱?

HTTPS证书作为保障网站数据传输安全的重要工具&#xff0c;成为众多网站运营者的必备选择。然而&#xff0c;面对市场上种类繁多的HTTPS证书&#xff0c;其一年费用究竟是多少&#xff0c;又受哪些因素影响呢&#xff1f; 首先&#xff0c;HTTPS证书通常在PinTrust这样的专业平…...