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

Axios请求封装

安装axios,在net文件下新建index.js,封装InternalPsot请求:

function  internalPost(url,data,header,success,failure,error=defaultError()){axios.post(url,data,{headers:header}).then(({data})=>{if (data.code===200){success(data.data)}else {failure(data.message,data.code,url)}}).catch(err=>error(err))}

由于之前后端统一封装了返回数据,可以通过 code来判断状态

编写默认的failure和error方法:

const defaultFailure=(message,code,url)=>{console.warn(`请求地址:${url},状态码:${code},错误信息:${message}`)ElMessage.warning(message)
}const defaultError=(err)=>{console.error(err)ElMessage.warning('发生了一些错误,请联系管理员')
}

封装InternalGet请求:

function  internalGet(url,header,success,failure,error=defaultError()){axios.get(url,{headers:header}).then(({data})=>{if (data.code===200){success(data.data)}else {failure(data.message,data.code,url)}}).catch(err=>error(err))
}

封装login请求:

function  login(username,password,remember,success,failure=defaultFailure()){internalPost('/api/auth/login',{username:username,password:password},{'Content-Type':'application/x-www-form-urlencoded'},(data)=>{ElMessage.success(`登陆成功,欢迎${data.username}来到我们的系统`)success(data)},failure)
}

由于后端使用了jwt,登录后服务器会发送token,我们需要将token保存,退出登陆时需要将token删除,编写保存token函数:

function storeAccessToken(token,remember,expire){const authObj={token:token,expire:expire}const str=JSON.stringify(authObj)if (remember){localStorage.setItem(authItemName,str)}else{sessionStorage.setItem(authItemName,str)}
}

如果用户勾选remember,存入localstorage,不勾选存入sessionstorage

后续访问页面时需要获取token,编写takeaccesstoken函数:

function takeAccessToken(){const Storage=localStorage.getItem(authItemName)||sessionStorage.getItem(authItemName)if (!Storage)return nullconst authObj=JSON.parse(str)if(authObj.expire<=new Date()){deleteAccessToken()ElMessage.warning('登录状态已过期,请重新登录')return null}return authObj.token
}

删除token:

function  deleteAccessToken(){localStorage.removeItem(authItemName)sessionStorage.removeItem(authItemName)
}

在login的返回数据处理中加入:

storeAccessToken(data.token,data.remember.data.expire)

暴露组件:export {login}

在登陆页面绑定:

 <el-button @click="userLogin"  style="width: 270px" type="success" plain>立即登录</el-button>
function userLogin(){formRef.value.validate((valid)=>{if (valid){login(form.username,form.password,form.remember).then(res=>{})}})
}

增加输入框规则

<el-form :model="form" :rules="rule" ref="formRef">const formRef=ref()
const rule={username: [{required:true,message:'请输入用户名'}],password:[{required:true,message:'请输入密码'}]
}const form =reactive({username:'',password:'',remember:false
});

添加后端基础url:

axios.defaults.baseURL="http://localhost:8080"

Access to XMLHttpRequest at ‘http://localhost:8080/api/auth/login’ from origin ‘http://localhost:5173’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

控制台报错跨域请求错误,在下一节中解决

相关文章:

Axios请求封装

安装axios&#xff0c;在net文件下新建index.js&#xff0c;封装InternalPsot请求&#xff1a; function internalPost(url,data,header,success,failure,errordefaultError()){axios.post(url,data,{headers:header}).then(({data})>{if (data.code200){success(data.dat…...

Pikachu靶场——XXE 漏洞

文章目录 1. XXE1.1 查看系统文件内容1.2 查看PHP源代码1.3 查看开放端口1.4 探测内网主机 1. XXE 漏洞描述 XXE&#xff08;XML External Entity&#xff09;攻击是一种利用XML解析器漏洞的攻击。在这种攻击中&#xff0c;攻击者通过在XML文件中插入恶意实体来触发解析器加载…...

vscode登录租的新服务器

1.connect to…… 选择 connect current window to host 2.configure SSH Host 选择本地配置文件 打开配置文件&#xff0c;把主机名端口号写进去 再返回vscode远程登录页面&#xff0c;左侧栏就会出现这个主机名了。...

Verilog参数定义与仿真模块中的参数修改

文章目录 参数方式定义参数的优势rtl模块中的参数定义模块名后定义参数parameter定义参数 仿真模块中的参数修改例化时修改defparam修改 总结与说明附录&#xff1a;测试代码 参数方式定义参数的优势 当一个模块被另一个模块引用例化时&#xff0c;高层模块可以对低层模块的参…...

Android studio升级Giraffe | 2022.3.1 Patch 1踩坑

这里写自定义目录标题 not "opens java.io" to unnamed module错误报错信息解决 superclass access check failed: class butterknife.compiler.ButterKnifeProcessor$RScanner报错报错信息解决 Android studio升级Giraffe | 2022.3.1 Patch 1后&#xff0c;出现项目…...

使用U3D、pico开发VR(二)——添加手柄摇杆控制移动

一、将unity 与visual studio 相关联 1.Edit->Preference->External tool 选择相应的版本 二、手柄遥控人物转向和人物移动 1.添加Locomotion System组件 选择XR Origin&#xff1b; 2.添加Continuous Move Provider&#xff08;Action-based&#xff09;组件 1>…...

【FPGA项目】图像采集及显示(2)详细设计方案

目录 前言 一、视频流采集设计 二、DDR3缓存控制 三、FIFO 设计 四、VGA显示器驱动设计...

查找排序部分习题 242. 有效的字母异位词 74. 搜索二维矩阵 1. 两数之和 167.两数之和 II

242. 有效的字母异位词 给定两个字符串 s 和 t &#xff0c;编写一个函数来判断 t 是否是 s 的字母异位词。 注意&#xff1a;若 s 和 t 中每个字符出现的次数都相同&#xff0c;则称 s 和 t 互为字母异位词。 class Solution(object):def isAnagram(self, s, t):""…...

MATLAB算法实战应用案例精讲-【优化算法】冠状病毒优化算法(COVIDOA)(附MATLAB代码实现)

目录 前言 知识储备 1 冠状病毒群体免疫优化算法...

React查询、搜索类功能的实现

React查询、搜索类功能的实现 查询之类的如果是通过向列表接口中发送对应参数来查询的&#xff0c;那么在默认输出时&#xff0c;在useEffect钩子中的请求中可以先为需要查询的请求参数设初始的state&#xff0c;也就是null或者未定义&#xff0c;这样的话初始请求的还是整个列…...

k8s搭建EFK日志系统

搭建 EFK 日志系统 前面大家介绍了 Kubernetes 集群中的几种日志收集方案&#xff0c;Kubernetes 中比较流行的日志收集解决方案是 Elasticsearch、Fluentd 和 Kibana&#xff08;EFK&#xff09;技术栈&#xff0c;也是官方现在比较推荐的一种方案。 Elasticsearch 是一个实…...

LuatOS-SOC接口文档(air780E)-- fonts - 字体库

fonts.list(tp) 返回固件支持的字体列表 参数 传入值类型 解释 string 类型, 默认 u8g2, 还可以是lvgl 返回值 返回值类型 解释 table 字体列表 例子 -- API新增于2022-07-12 if fonts.list thenlog.info("fonts", "u8g2", json.encode(fonts…...

[Java·算法·困难]LeetCode124.二叉树中的最大路径和

每天一题&#xff0c;防止痴呆 题目示例分析思路1题解1 &#x1f449;️ 力扣原文 题目 二叉树中的 路径 被定义为一条节点序列&#xff0c;序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点&#xff0c;且不一定经…...

【微服务保护】

文章目录 Sentinel流量控制流控模式流控效果 隔离和降级线程隔离熔断降级 授权规则和规则持久化 微服务雪崩问题&#xff1a; 微服务中&#xff0c;服务间调用关系错综复杂&#xff0c;一个微服务往往依赖于多个其它微服务。服务D有 故障进而导致服务A有故障&#xff0c;进而导…...

【MATLAB第78期】基于MATLAB的VMD-SSA-LSTM麻雀算法优化LSTM时间序列预测模型

【MATLAB第78期】基于MATLAB的VMD-SSA-LSTM麻雀算法优化LSTM时间序列预测模型 一、LSTM data xlsread(数据集.xlsx);% [x,y]data_process(data,15);%前15个时刻 预测下一个时刻 %归一化 [xs,mappingx]mapminmax(x,0,1);xxs; [ys,mappingy]mapminmax(y,0,1);yys; %划分数据 n…...

分类预测 | MATLAB实现SSA-FS-SVM麻雀算法同步优化特征选择结合支持向量机分类预测

分类预测 | MATLAB实现SSA-FS-SVM麻雀算法同步优化特征选择结合支持向量机分类预测 目录 分类预测 | MATLAB实现SSA-FS-SVM麻雀算法同步优化特征选择结合支持向量机分类预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 MATLAB实现SSA-FS-SVM麻雀算法同步优化特征选择结…...

唤醒手腕 Matlab 游戏编程常用技术知识点详细教程(更新中)

Figure 窗口初始化 figure 使用默认属性值创建一个新的图窗窗口。生成的图窗为当前图窗。f figure(___) 返回 Figure 对象。可使用 f 在创建图窗后查询或修改其属性。figure(f) 将 f 指定的图窗作为当前图窗&#xff0c;并将其显示在其他所有图窗的上面。 figure(n) 查找 Nu…...

2023八股每日一题(九月份)

9月13日 Q&#xff1a;JDK、JRE、JVM之间的区别 A&#xff1a; JDK(Java SE Development Kit)&#xff0c;Java标准开发包&#xff0c;它提供了编译、运⾏Java程序所需的各种⼯具和资源&#xff0c;包括Java编译器、Java运⾏时环境&#xff0c;以及常⽤的Java类库等JRE( Java…...

分布式链路追踪--SkyWalking7.0.0+es7.0.0

分布式链路追踪–SkyWalking ​ 微服务的出现&#xff0c;的确解决了一些业务痛点&#xff0c;但是也造成了新的问题比如随着调用链的拉长&#xff0c;如果想要知道请求为什么这么慢&#xff0c;这个请求到底经历了哪些环节&#xff0c;又依赖了哪些东西&#xff0c;在微服务架…...

web:[RoarCTF 2019]Easy Calc

题目 进入页面是一个计算器的页面 随便试了一下 查看源代码看看有什么有用的信息 访问一下这个calc.php 进行代码审计 <?php error_reporting(0); if(!isset($_GET[num])){show_source(__FILE__); }else{$str $_GET[num];$blacklist [ , \t, \r, \n,\, ", , \[, \]…...

成电计算机复试面试:如何用一份‘心机’简历引导老师提问,并提前准备好答案?

计算机复试策略&#xff1a;如何用结构化简历设计引导面试走向 站在电子科技大学计算机复试的考场外&#xff0c;大多数考生都在反复背诵技术概念和项目细节&#xff0c;却很少有人意识到——面试本质上是一场精心设计的对话博弈。那些最终获得高分的考生&#xff0c;往往不是知…...

从v4l2-ctl命令到media拓扑:手把手教你调试RK3568上的OV8858摄像头图像

RK3568平台OV8858摄像头深度调试实战&#xff1a;从硬件链路到图像优化的全流程解析 当你在RK3568平台上调试OV8858摄像头时&#xff0c;是否遇到过这样的场景&#xff1a;设备树配置看似正确&#xff0c;但摄像头输出的图像却出现花屏、颜色异常或干脆没有信号&#xff1f;作为…...

MedGemma-X智能助手实测:像住院总医师一样分析X光片

MedGemma-X智能助手实测&#xff1a;像住院总医师一样分析X光片 1. 重新定义影像诊断&#xff1a;从工具到助手 在放射科的日常工作中&#xff0c;我们习惯了与各种CAD&#xff08;计算机辅助诊断&#xff09;系统打交道。它们像精确但沉默的尺子&#xff0c;能在图像上标出可…...

告别桌面图标混乱:NoFences让你的数字空间井然有序

告别桌面图标混乱&#xff1a;NoFences让你的数字空间井然有序 【免费下载链接】NoFences &#x1f6a7; Open Source Stardock Fences alternative 项目地址: https://gitcode.com/gh_mirrors/no/NoFences 你是否曾打开电脑就被满屏散乱的图标淹没&#xff1f;工作文件…...

ESP32S3-Cam + MPU6050 DMP移植避坑实录:从编译报错到姿态数据稳定输出的完整流程

ESP32S3-Cam与MPU6050 DMP移植实战&#xff1a;从编译报错到稳定姿态解算的全流程解析 当ESP32S3-Cam遇上MPU6050的DMP&#xff08;数字运动处理器&#xff09;功能&#xff0c;本应是物联网项目中实现低成本姿态检测的完美组合。但实际移植过程中&#xff0c;开发者往往会遭遇…...

终极指南:如何用btcrecover找回你忘记的比特币钱包密码 [特殊字符]️

终极指南&#xff1a;如何用btcrecover找回你忘记的比特币钱包密码 &#x1f5dd;️ 【免费下载链接】btcrecover An open source Bitcoin wallet password and seed recovery tool designed for the case where you already know most of your password/seed, but need assist…...

Shiny框架终极指南:输入控件与输出渲染的完美交互原理

Shiny框架终极指南&#xff1a;输入控件与输出渲染的完美交互原理 【免费下载链接】shiny Easy interactive web applications with R 项目地址: https://gitcode.com/gh_mirrors/sh/shiny Shiny是R语言生态中一款强大的交互式Web应用框架&#xff0c;它让数据科学家和分…...

Optick多线程性能分析:游戏引擎中的并发性能优化实战

Optick多线程性能分析&#xff1a;游戏引擎中的并发性能优化实战 【免费下载链接】optick C Profiler For Games 项目地址: https://gitcode.com/gh_mirrors/op/optick Optick是一款专为游戏开发打造的C性能分析工具&#xff0c;能够精准捕捉多线程应用中的性能瓶颈&…...

GLM-4-9B-Chat-1M与Dify平台集成:无代码长文本处理系统搭建

GLM-4-9B-Chat-1M与Dify平台集成&#xff1a;无代码长文本处理系统搭建 1. 引言 想象一下&#xff0c;你手头有一份200页的法律合同需要快速审核&#xff0c;或者需要分析整本学术专著的核心观点&#xff0c;甚至要处理多语言的长篇商业文档。传统的人工处理方式耗时耗力&…...

炉石传说自动化脚本终极指南:从3小时到3分钟的游戏体验革命

炉石传说自动化脚本终极指南&#xff1a;从3小时到3分钟的游戏体验革命 【免费下载链接】Hearthstone-Script Hearthstone script&#xff08;炉石传说脚本&#xff09;&#xff08;2024.01.25停更至国服回归&#xff09; 项目地址: https://gitcode.com/gh_mirrors/he/Heart…...