当前位置: 首页 > 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领…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...