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

Nuxt3 axios封装使用axios接口请求

news 来源：原创 2025/6/27 3:44:40

一、先安装axios npm install add axios

封装请求request.ts文件

import axios from 'axios'
import { ElMessage, Message } from "element-plus"
import {getToken} from './token.js'
const service = axios.create({baseURL:'/api',//本地使用
})
service.interceptors.request.use(config => {const token = getToken()//登录后获取tokenif(token){config.headers.token = `${token}`}return config},err => {return Promise.reject(err)})
service.interceptors.response.use(response => {if (response.data.code != 200) {return Promise.reject(response.data)} else {return response.data}},error => {console.log('error:', error)if(error.response){if(error.response.status == 304){ElMessage({message: error.response.data.msg,type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 400){ElMessage({// message: response.data.message,message:'请求参数错误,状态码400!',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 401){ElMessage({// message: response.data.message,message:'您还未登录或登录过期，请先登录！',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 403){ElMessage({message: '您没有权限访问资源！',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 404){ElMessage({message: '请求资源不存在！',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 405){ElMessage({message: '请求地址错误',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 500){ElMessage({message: '服务器错误！状态码500',// message:Response.data.message,type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 503){ElMessage({message: '服务器维修中，请稍后再试！状态码503',type: 'error',duration: 2000 //提示持续2秒})}else if(error.response.status == 504){ElMessage({message: '网关超时！状态码504',type: 'error',duration: 2000 //提示持续2秒})}else{ElMessage({message: '未知错误！状态码：'+error.response.data.code,type: 'error',duration: 2000 //提示持续2秒})}}else{ElMessage({message: '请求错误！请求服务器无响应！',type: 'error',duration: 2000 //提示持续2秒})}return Promise.reject(error.response)})export default service

如果需要使用token，则写一个token.js文件，需要安装js-cookie,自行安装

import Cookie from 'js-cookie'const TokenKey = 'token'export function getToken() {return localStorage.getItem(TokenKey)
}export function setToken(token) {return Cookie.set(TokenKey, token)
}export function removeToken() {return localStorage.removeItem(TokenKey)
}

2.如果项目是前后端分离的，服务请求接口要请求后端给的接口，则需要开启请求代理

在nuxt.config.ts文件中

export default defineNuxtConfig({.................其他配置vite:{server: {proxy: {'/api': {//后端的请求接口http://xxx.xxx.xxxx/api'target: 'http://xxx.xxx.xxxx', // 目标服务器地址changeOrigin: true, // 启用代理时，改变源地址// 其他可选配置...//写这段代码可以看到后端真正的代理请求接口bypass(req, res, options: any) {const realUrl = options.target + (options.rewrite ? options.rewrite(req.url) : '');console.log('realUrl:', realUrl); // 在终端显示res.setHeader('A-Real-Url', realUrl); // 添加响应标头(A-Real-Url为自定义命名)，在浏览器中显示}}}}},
})

Nuxt3 axios封装使用axios接口请求

一、先安装axios npm install add axios 封装请求request.ts文件 import axios from axios import { ElMessage, Message } from "element-plus" import {getToken} from ./token.js const service axios.create({baseURL:/api,//本地使用 }) service.interceptor…...

编程日记 2025/6/27 3:44:40

东方通TongWeb替换Tomcat的踩坑记录

一、背景由于信创需要，原来项目的用到的一些中间件、软件都要逐步替换为国产品牌，决定先从web容器入手，将Tomcat替换掉。在网上搜了一些资料，结合项目当前情况，考虑在金蝶AAS和东方通TongWeb里面选择，后又…...

编程日记 2025/6/23 7:51:14

引用类型集合的深拷贝，无需手动写循环：Apache Commons Lang (SerializationUtils)

在java中，我们如果想要对引用类型的集合进行深拷贝。有一种方式，就是调用SerializationUtils Apache Commons Lang (SerializationUtils) Apache Commons Lang 提供了 SerializationUtils 类，可以利用 Java 的序列化机制来进行集合及其元素…...

编程日记 2025/6/26 18:30:26

高阶函数：JavaScript 编程中的魔法棒

在JavaScript的世界里，高阶函数是一种强大的工具，它允许我们将函数作为参数传递或将函数作为返回值。这种特性使得JavaScript代码更加灵活和强大。本文将深入探讨高阶函数的定义、用法以及在实际项目中的最佳实践，帮助大家更好地理解和应用这…...

编程日记 2025/6/20 20:11:55

HuggingGPT Solving AI Tasks with ChatGPT and its Friends in Hugging Face 论文解读

1. 引言近年来，大型语言模型（LLMs）如ChatGPT在自然语言处理领域取得了惊人的进展，展现出强大的语言理解、生成和推理能力。然而，当前的LLMs仍然存在一些局限性，例如无法处理复杂信息（如视觉和…...

编程日记 2025/6/2 4:01:20

使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图

可以使用 ADB (Android Debug Bridge) 工具来截取 Android 设备的屏幕截图。以下是具体的操作步骤： 1. 连接设备确保 Android 设备通过 USB 或网络连接到电脑，并运行以下命令检查连接状态： adb devices2. 截取屏幕截图运行以下命令将设…...

编程日记 2025/6/26 1:12:45

router.resolve 方法

router.resolve 方法在前端路由库（如 Vue Router）中用于解析路由信息。它接受一个路由对象或路径，并返回一个包含解析后的路由信息的对象。这个对象通常包含 href、route、location 等属性。用法总结方法签名： router.resolve(…...

编程日记 2025/6/25 5:05:00

linux 安装 Jenkins 教程

前言 Jenkins 是一个开源的自动化服务器，广泛用于持续集成（Continuous Integration，CI）和持续交付（Continuous Delivery，CD）领域。它帮助开发者自动化软件构建、测试、部署等过程，从…...

编程日记 2025/6/24 14:52:09

Vue3 使用 render 渲染函数透传组件

背景我们透传组件的时候可能会用 slot，本文讲述的是另一种方式 props render 函数方式。当然具体的看业务场景。实现父组件 <AComp customComponent: () > {return h(UserAuthorization) }> </AComp>子孙组件 // 定义 render 组件&#xff…...

编程日记 2025/6/23 16:17:51

MongoDB 分片

MongoDB 分片 MongoDB 分片是一种数据库架构，用于将大量数据分布存储在多个服务器上。这种设计允许数据库扩展，以处理大量数据和高吞吐量操作。分片通过将数据集分割成小块，称为分片，并将这些分片分布到多个服务器上来工作。每个…...

编程日记 2025/6/26 20:49:35

Chrome webdriver下载-避坑

WebDriver以原生的方式驱动浏览器，不需要调整环境变量。一、window版 1.chrome和chromedriver下载地址： Chrome for Testing availability 我下载的是如下两个安装包，解压即可。 2.导包 pip install selenium然后用python代码引用即可…...

编程日记 2025/6/24 23:35:35

【MFC】如何读取rtf文件并进行展示

tf是微软的一个带格式的文件，比word简单，我们可以用写字板等程序打开编辑。下面以具体实例讲解如何在自己程序中展示rtf文件。首先使用VS2022创建一个MFC的工程。 VIEW类需要选择richview类，用于展示，如下图： 运行效…...

编程日记 2025/6/23 12:14:38

基于wifipumpkin3的AP伪造

一、软硬件需求利用wifipumpkin-3进行AP伪造需要kali系统，还需要一张支持在kali的环境下能够支持AP伪造的无线网卡，如果是针对特定的无线网的话，再来第二张网卡的话更好用来转发流量更好。对于wifipumpkin-3的安装使用可以分为两种方式&…...

编程日记 2025/6/26 12:42:47

docker xxxx is using its referenced image ea06665f255d

Error response from daemon: conflict: unable to remove repository reference “registrxxxxxx” (must force) - container 9642fd1fd4a0 is using its referenced image ea06665f255d 这个错误表明你尝试删除的镜像正在被一个容器使用，因此无法删除。要解决这…...

编程日记 2025/6/27 23:56:49

svm支持向量机

支持向量机（SVM） 1. SVM 的核心思想支持向量机（Support Vector Machine, SVM）是一种监督学习算法，用于分类和回归任务。其目标是找到一个超平面，将数据点分为不同类别，同时最大化分类间隔&a…...

编程日记 2025/6/4 2:50:26

MySQL数据类型

MySQL数据库中的常用数据类型数值型： ①整型 ②小数类型定点型浮点型字符型： ①短的文本:char varchar ②长的文本:text blob(二进制) 日期型 ①数值型整数应该知道的知识点 ①设置无符号和有符号 create table t_int( t1 int; #②默认有符…...

编程日记 2025/6/26 16:35:12

【深度学习】热力图绘制

热力图（Heatmap）是一种数据可视化方法，通过颜色来表示数据矩阵中的数值大小，以便更直观地展示数据的分布和模式。热力图在许多领域中都有应用，尤其在统计分析、机器学习、数据挖掘等领域，能够帮助我们快速识…...

编程日记 2025/6/26 8:04:52

高效Python开发工具PyCharm v2024.3全新发布，进一步提升编码体验！

JetBrains PyCharm是一种Python IDE，其带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具。此外，该IDE提供了一些高级功能，以用于Django框架下的专业Web开发。立即获取PyCharm v2024.3正式版 Python 针对dataclass_transfor…...

编程日记 2025/6/24 21:26:02

Ubuntu 安装 Samba Server

在 Mac 上如何能够与Ubuntu 服务器共享文件夹，需要在 Ubuntu 上安装 Samba 文件服务器。本文将介绍如何在 Ubuntu 上安装 Samba 服务器从而达到以下目的： Mac 与 Ubuntu 共享文件通过用户名密码访问安装 Samba 服务 sudo apt install samba修改配置文…...

编程日记 2025/6/25 7:13:28

WPF 实现鼠标点击取消 TextBox 光标

WPF 实现鼠标点击取消 TextBox 光标原始需求：TextBox 控件光标取消后运行特定功能函数所遇问题：若无相关事件，则除了点击其他控件等方式外，无法准确取消光标解决思路：通过捕获 TextBox 控件外鼠标点击或鼠标移…...

编程日记 2025/6/21 5:45:16

cron服务执行定时任务

参考链接 cron表达式在线解析：quartz/Cron/Crontab表达式在线生成工具-BeJSON.com 定时任务运行时报错解决方法运行脚本报权限不够问题： 可以在脚本文件夹下直接执行如下指令运行RequestAPI.sh 脚本 ./RequestAPI.sh 如果出现权限不够问…...

编程日记 2025/6/25 21:09:59

Go 语言与时间拳击理论下的结对编程：开启高效研发编程之旅

一、引言结对编程作为一种软件开发方法，在提高代码质量、增强团队协作等方面具有显著优势。而时间拳击理论为结对编程带来了新的思考角度。本文将以 Go 语言为中心，深入探讨时间拳击理论下的结对编程。在当今软件开发领域，高效的开发方法和…...

编程日记 2025/6/27 19:40:47

【收藏】Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路在项目开发的时候，有一个需求是限制相机倾斜角，也就是鼠标中键调整视图俯角时，不能过大，一般 pitch 角度范围在 0 至 -90之间，-90刚好为正俯视。在网上查阅了很多资料，发现并没有一个合适的…...

编程日记 2025/6/26 22:38:38

PostgreSQL的学习心得和知识总结（一百六十四）|深入理解PostgreSQL数据库之在 libpq 中支持负载平衡

目录结构注：提前言明本文借鉴了以下博主、书籍或网站的内容，其列表如下： 1、参考书籍：《PostgreSQL数据库内核分析》 2、参考书籍：《数据库事务处理的艺术：事务管理与并发控制》 3、PostgreSQL数据库仓库…...

编程日记 2025/6/23 5:01:18

TÜLU 3: Pushing Frontiers inOpen Language Model Post-Training

模型：https://huggingface.co/allenai 技术报告：https://allenai.org/papers/tulu-3-report.pdf 数据集：https://huggingface.co/collections/allenai/tulu-3-datasets-673b8df14442393f7213f372 GitHub：https://github.com/al…...

编程日记 2025/6/22 7:00:57

Pytest-Bdd-Playwright 系列教程（14）：Docstring 参数

Pytest-Bdd-Playwright 系列教程（14）：Docstring 参数前言一、什么是docstring?二、基本语法三、主要特点四、实际例子五、注意事项六、使用建议总结前言在自动化测试的过程中，我们经常需要处理复杂的测试数据或需要输入多行文…...

编程日记 2025/6/24 8:06:25

Docker部署WebRTC-Streamer

文章目录 WebRTC-Streamer概述Docker部署WebRTC-StreamerVue使用WebRTC-Streamer一些问题 WebRTC-Streamer概述 WebRTC-Streamer是一个基于WebRTC技术的流媒体传输工具，它可以通过Web浏览器实现实时音视频流的传输和播放。它提供了一种简单而强大的方式&#xff…...

编程日记 2025/6/25 5:27:20

linux-16 关于shell（十五）date，clock，hwclock，man，时间管理，命令帮助

想显示一下当前系统上的时间该怎么显示？有一个命令叫做date，来看date命令，如下图， 第一个星期几对吧？然后是月日小时分钟秒，最后一个是年对吧？CST指的是它的时间格式，我这个可以先姑…...

编程日记 2025/6/24 23:00:11

厦门凯酷全科技有限公司深耕抖音电商运营

在数字经济飞速发展的今天，抖音电商平台以其独特的社交属性和庞大的用户基础，迅速成为众多品牌和商家的新战场。在这个充满机遇与挑战的市场中，厦门凯酷全科技有限公司凭借其专业的服务、创新的理念和卓越的执行力，成为了抖音电商…...

编程日记 2025/5/29 6:53:26

C++多线程实战：掌握图像处理高级技巧

文章结尾有最新热度的文章，感兴趣的可以去看看。本文是经过严格查阅相关权威文献和资料，形成的专业的可靠的内容。全文数据都有据可依，可回溯。特别申明：数据和资料已获得授权。本文内容，不涉及任何偏颇观点，用中立态度客观事实描述事情本身导读在当今的计算世界中，…...

编程日记 2025/6/23 22:14:51

CityEngine实践——常用cga文件解析系列（2）

上回书说到了： 3、RULES/COMPONENTS/MASSING/SUBURBAN_BLOCK DETACHED_HOUSES.CGA ROWHOUSES.CGA SEMI_DETACHED_HOUSES.CGA 4、RULES/COMPONENTS/MASSING/URBAN_BLOCK MONOBLOCK.CGA PERIMETER_8_SHAPE.CGA PERIMETER_MULTIPART.CGA 这个cga挺有意思&#xff0c…...

编程日记 2025/6/22 20:19:46

【人工智能】因果推断与数据分析：用Python探索数据间的因果关系

解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界因果推断是数据科学领域的一个重要方向，旨在发现变量间的因果关系，而不仅仅是相关性。本篇文章将从因果推断的理论基础出发，介绍因果关系的定义与建模方法，涵盖因果图（Causal Graph）、d-分离、反事实估计等…...

编程日记 2025/6/26 8:19:58

depth wisepoint wise

文章目录 1. Description2. code 1. Description point wise 1. function: for the separated pixel without pixel confusion 2. kernel size : 3x3 ,star matrix [[0,0,0],[0,1,0],[0,0,0]] depth wise 1. fuction: for the separated channel without channel confusion 2.…...

编程日记 2025/6/24 17:52:10

AI大模型学习笔记｜神经网络与注意力机制（逐行解读）

来源分享链接：通过网盘分享的文件：详解神经网络是如何训练的链接: https://pan.baidu.com/s/12EF7y0vJfH5x6X-0QEVezg 提取码: k924 内容摘要：本文深入探讨了神经网络与注意力机制的基础，以及神经网络参数训练的过程。以鸢尾花数…...

编程日记 2025/6/25 4:17:08

2025软考中级《数据库系统工程师》案例模拟题合集

1.【说明】某销售企业正在实施电商平台项目，主要功能模块包括用户中心、商品中心、交易中心、支付中心、营销中心等。其中支付中心模块包括了一个账户表：Account (ano, aname, balance)，其中属性含义分别为：账户号，账户…...

编程日记 2025/6/22 16:13:11

12.10深度学习_经典神经网络_GoogleNet自我理解

为了更清晰地展示 GoogLeNet 中每个卷积层及其相关参数，我们可以将这些信息整理成表格形式。这不仅有助于理解每一层的输入和输出尺寸，还能直观地看到卷积核的数量、大小、步长以及填充方式等关键参数。以下是 GoogLeNet 前几层（包括两个卷积…...

编程日记 2025/6/24 6:18:01

CTFshow-命令执行(Web58-77)

CTFshow-命令执行(Web58-77) Web58 <?php if(isset($_POST[c])){$c $_POST[c];eval($c); }else{highlight_file(__FILE__); }Warning: system() has been disabled for security reasons in /var/www/html/index.php(17) : eval()d code on line 1 本题对于passthru&…...

编程日记 2025/6/27 2:20:13

android全局拖拽效果实现startDragAndDrop

有多种方式实现全角拖拽，我们基于系统标准的api startDragAndDrop 来做介绍实现步骤： 一、应用的的拖拽 1.1 通过长按触发 holder.itemView.setOnLongClickListener(new View.OnLongClickListener() {Overridepublic boolean onLongClick(View v) {C…...

编程日记 2025/6/22 19:39:08

MySQL之索引与事务

一、索引索引是一种特殊的文件，包含着对数据表里所有记录的引用指针。可以对表中的一列或多列创建索引，并指定索引的类型，各类索引有各自的数据结构实现。索引主要的目的是为了加快查找速度作用 1、数据库中的表、数据、索引之间的关系&am…...

编程日记 2025/6/26 12:47:00

【OpenCV】基于分水岭算法的图像分割

介绍分水岭算法（Watershed Algorithm）是一种基于形态学的图像分割方法，它模仿了地理学中的分水岭概念。在图像处理中，分水岭算法通过模拟水流从山顶流向谷底的过程来分割图像，其中局部极小值点被视为“山谷”&#x…...

编程日记 2025/6/25 1:24:29

深度学习：CPU和GPU算力

一、算力 “算力”（Computing Power）通常是指计算机或计算系统执行计算任务的能力。它是衡量系统处理数据、运行算法以及执行计算任务效率的重要指标。根据上下文，算力可以在以下几种场景中具体化： 1. 单机算力 CPU算力&#x…...

编程日记 2025/6/24 5:27:09

android studio 模拟器不能联网？

模拟器路径： C:\Users\Administrator\AppData\Local\Android\Sdk\emulator\emulator.exe.关闭所有AVD设备实例导航至： C:\Users\userName\AppData\Local\Android\Sdk\emulator查看模拟器名称 AdministratorDESKTOP-6JB1OGC MINGW64 ~/AppData/Local/…...

编程日记 2025/6/25 6:06:12

php.ini 文件上传/执行时间/部分配置新手教程

1、上传文件大小配置一般需要同时配置“upload_max_filesize”、“post_max_size”，配置格式如下： file_uploads On ;是否允许HTTP文件上传 upload_max_filesize 2M ;设置单个文件上传的最大尺寸 post_max_size 8M ;设置 POST 请求体的最大尺寸&am…...

编程日记 2025/6/25 23:28:47

大模型Qwen面试内容整理-应用场景与案例分析

Qwen模型凭借其强大的自然语言理解和生成能力，在多个实际应用场景中得到了广泛应用。以下是Qwen模型的主要应用场景及一些典型的案例分析，展示了它如何解决具体问题和带来实际价值。智能对话系统 ● 应用场景 ○ 客服机器人：Qwen被用于开发智能客服机器人，能够理解客户的问…...

编程日记 2025/6/25 11:19:35

网易游戏分享游戏场景中MongoDB运行和分析实践

在游戏行业中，数据库的稳定和性能直接影响了游戏质量和用户满意度。在竞争激烈的游戏市场中，一个优秀的数据库产品无疑能为游戏的开发和后期的运营奠定良好的基础。伴随着MongoDB在不同类型游戏场景中的应用越来越广泛，许多知名的游戏公司都在…...

编程日记 2025/6/22 5:24:56

子查询与嵌套查询

title: 子查询与嵌套查询 date: 2024/12/13 updated: 2024/12/13 author: cmdragon excerpt: 子查询和嵌套查询是关系型数据库中强大的查询工具，允许用户在一个查询的结果中再进行查询。通过使用子查询，用户能够简化复杂的SQL语句，增强查询的灵活性和可读性。本节将探讨子…...

编程日记 2025/6/23 16:27:03

智星云技术文档：GPU测速教程

安装gpu burn git clone https://github.com/wilicc/gpu-burn cd gpu-burn/ make测试 ./gpu_burn 60100.0% procd: 14280 (7373 Gflop/s) - 13390 (6997 Gflop/s) - 15912 (7110 Gflop/s) - 13184 (7055 Gflop/s) - 13464 (7369 Gflop/s) - 13974 (7351 Gflop/s) - 16626 (7…...

编程日记 2025/6/25 1:54:17

相关文章：