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,在net文件下新建index.js,封装InternalPsot请求: 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(XML External Entity)攻击是一种利用XML解析器漏洞的攻击。在这种攻击中,攻击者通过在XML文件中插入恶意实体来触发解析器加载…...
vscode登录租的新服务器
1.connect to…… 选择 connect current window to host 2.configure SSH Host 选择本地配置文件 打开配置文件,把主机名端口号写进去 再返回vscode远程登录页面,左侧栏就会出现这个主机名了。...
Verilog参数定义与仿真模块中的参数修改
文章目录 参数方式定义参数的优势rtl模块中的参数定义模块名后定义参数parameter定义参数 仿真模块中的参数修改例化时修改defparam修改 总结与说明附录:测试代码 参数方式定义参数的优势 当一个模块被另一个模块引用例化时,高层模块可以对低层模块的参…...
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后,出现项目…...
使用U3D、pico开发VR(二)——添加手柄摇杆控制移动
一、将unity 与visual studio 相关联 1.Edit->Preference->External tool 选择相应的版本 二、手柄遥控人物转向和人物移动 1.添加Locomotion System组件 选择XR Origin; 2.添加Continuous Move Provider(Action-based)组件 1>…...
【FPGA项目】图像采集及显示(2)详细设计方案
目录 前言 一、视频流采集设计 二、DDR3缓存控制 三、FIFO 设计 四、VGA显示器驱动设计...
查找排序部分习题 242. 有效的字母异位词 74. 搜索二维矩阵 1. 两数之和 167.两数之和 II
242. 有效的字母异位词 给定两个字符串 s 和 t ,编写一个函数来判断 t 是否是 s 的字母异位词。 注意:若 s 和 t 中每个字符出现的次数都相同,则称 s 和 t 互为字母异位词。 class Solution(object):def isAnagram(self, s, t):""…...
MATLAB算法实战应用案例精讲-【优化算法】冠状病毒优化算法(COVIDOA)(附MATLAB代码实现)
目录 前言 知识储备 1 冠状病毒群体免疫优化算法...
React查询、搜索类功能的实现
React查询、搜索类功能的实现 查询之类的如果是通过向列表接口中发送对应参数来查询的,那么在默认输出时,在useEffect钩子中的请求中可以先为需要查询的请求参数设初始的state,也就是null或者未定义,这样的话初始请求的还是整个列…...
k8s搭建EFK日志系统
搭建 EFK 日志系统 前面大家介绍了 Kubernetes 集群中的几种日志收集方案,Kubernetes 中比较流行的日志收集解决方案是 Elasticsearch、Fluentd 和 Kibana(EFK)技术栈,也是官方现在比较推荐的一种方案。 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.二叉树中的最大路径和
每天一题,防止痴呆 题目示例分析思路1题解1 👉️ 力扣原文 题目 二叉树中的 路径 被定义为一条节点序列,序列中每对相邻节点之间都存在一条边。同一个节点在一条路径序列中 至多出现一次 。该路径 至少包含一个 节点,且不一定经…...
【微服务保护】
文章目录 Sentinel流量控制流控模式流控效果 隔离和降级线程隔离熔断降级 授权规则和规则持久化 微服务雪崩问题: 微服务中,服务间调用关系错综复杂,一个微服务往往依赖于多个其它微服务。服务D有 故障进而导致服务A有故障,进而导…...
【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 指定的图窗作为当前图窗,并将其显示在其他所有图窗的上面。 figure(n) 查找 Nu…...
2023八股每日一题(九月份)
9月13日 Q:JDK、JRE、JVM之间的区别 A: JDK(Java SE Development Kit),Java标准开发包,它提供了编译、运⾏Java程序所需的各种⼯具和资源,包括Java编译器、Java运⾏时环境,以及常⽤的Java类库等JRE( Java…...
分布式链路追踪--SkyWalking7.0.0+es7.0.0
分布式链路追踪–SkyWalking 微服务的出现,的确解决了一些业务痛点,但是也造成了新的问题比如随着调用链的拉长,如果想要知道请求为什么这么慢,这个请求到底经历了哪些环节,又依赖了哪些东西,在微服务架…...
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,\, ", , \[, \]…...
【JavaEE】-- HTTP
1. HTTP是什么? HTTP(全称为"超文本传输协议")是一种应用非常广泛的应用层协议,HTTP是基于TCP协议的一种应用层协议。 应用层协议:是计算机网络协议栈中最高层的协议,它定义了运行在不同主机上…...
1.3 VSCode安装与环境配置
进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件,然后打开终端,进入下载文件夹,键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
【git】把本地更改提交远程新分支feature_g
创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
Caliper 配置文件解析:config.yaml
Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...
第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词
Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵,其中每行,每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid,其中有多少个 3 3 的 “幻方” 子矩阵&am…...
Kafka入门-生产者
生产者 生产者发送流程: 延迟时间为0ms时,也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于:异步发送不需要等待结果,同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
