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

SpringBoot3+Vue3(2)-前端基本页面配置-登录界面编写-Axios请求封装-后端跨越请求错误

前端:

清理文件

main.js
 

刷新后页面上什么都没有了
 

App.vue就留这


1.基本页面配置

新建Vue组件 单页面,考路由才操作。

 


1.前端根目录下安装路由
 

2.创建路由文件夹

main.js中添加路由配置

App.vue 添加上路由

welcomeView.vue

浏览器刷新,路由生效

新建登录页面

1.添加页面

2.添加到路由中

网页刷新,出现登录界面
 

界面编写: 按官网走

vite.config.js中添加插件配置


 

添加图片组件

2.登录界面编写

输入框
 

导入icon包,并引用

出来的效果


3.Axios请求封装

安装  axios

在package.json中查看是否已经安装好了

 

数据交互?
 

内部使用:
url,  数据,请求头,成功失败,错误回调函数

配置.then 成功请求后:then 
返回code
code  操作成功了=200
失败的原因:

默认的失败原因,状态码。 定位错误。
怎么关联到上面的defaultFailure()
EleMessage.warning 弹窗
跨域错误

error   错误
failure 失败

内部封装,并不post外部。

token 本地 过期时间
浏览器关了后就再次登录  Localstory
存储
自定义变量:
库变量
 


 store:localstoreage 一直存储  ;sessionstorage:存储会话
勾选:“记住我“,存本地;io?
未勾选:存会话。
变量 localstorage 和sessionstorage 全局?

 



1.暴露出去:


 

登录成功

表单校验


点击后往前端服务器丢的。


改成后端服务器地址


4.跨域请求错误
 

创建跨域过滤器
优先级 :数字越小越高:-100
-100:安全。
跨域在安全优先级前。


添加常量

设置优先级为-102

配置文件中,手动配置优先级

响应头添加跨域信息:所有请求直接放行

正确的界面如下:

前面为任何地址

指定地址如下:


存储空间查看




登录成功需要显示出提示框

main.js

重新运行




展示出


相关文章:

SpringBoot3+Vue3(2)-前端基本页面配置-登录界面编写-Axios请求封装-后端跨越请求错误

前端: 清理文件 main.js 刷新后页面上什么都没有了 App.vue就留这 1.基本页面配置 新建Vue组件 单页面,考路由才操作。 1.前端根目录下安装路由 2.创建路由文件夹 main.js中添加路由配置 App.vue 添加上路由 welcomeView.vue 浏览器刷新&…...

Android Framework学习八:SystemServer及startService原理

文章目录 SystemServer、SystemServiceManger、SystemService、serviceManager的关系SystemServer进程的执行包含的ServiceSystemServer启动服务的流程startService Framework学习系列文章 SystemServer、SystemServiceManger、SystemService、serviceManager的关系 管理机制&a…...

远程访问家里的路由器:异地访问内网设备或指定端口网址

在一些情况下,我们可能需要远程访问家里的路由器,以便进行设置调整或查看网络状态等,我们看看怎么操作? 1.开启远程访问 在路由本地电脑或手机,登录浏览器访问路由管理后台,并设置开启WEB远程访问。 2.内…...

大语言模型 17 - MCP Model Context Protocol 介绍对比分析 基本环境配置

MCP 基本介绍 官方地址: https://modelcontextprotocol.io/introduction “MCP 是一种开放协议,旨在标准化应用程序向大型语言模型(LLM)提供上下文的方式。可以把 MCP 想象成 AI 应用程序的 USB-C 接口。就像 USB-C 提供了一种…...

python生成requirements.txt文件

方法一:只生成项目所用到的python包(常用) 首先安装pipreqs pip install pipreqs 然后进入到你所在的项目根目录,运行以下命令: pipreqs ./ --encodingutf-8 方法二:把本地所有安装包写入文件 pip freeze > requirements.txt …...

如何在PyCharm2025中设置conda的多个Python版本

前言 体验的最新版本的PyCharm(Community)2025.1.1,发现和以前的版本有所不同。特别是使用Anaconda中的多个版本的Python的时候。 关于基于Anaconda中多个Python版本的使用,以及对应的Pycharm(2023版)的使用,可以参考…...

StepX-Edit:一个通用图像编辑框架——论文阅读笔记

一. 前言 代码:https://github.com/stepfun-ai/Step1X-Edit 论文:https://arxiv.org/abs/2504.17761 近年来,图像编辑技术发展迅速,GPT- 4o、Gemini2 Flash等前沿多模态模型的推出,展现了图像编辑能力的巨大潜力。 这…...

vue原生table表格实现动态添加列,一行添加完换行继续添加。el-select输入框背景颜色根据所选内容不同而改变

效果如下 动态添加列 代码如下 <template><div class"table-container"><button click"addColumn">添加列</button><div class"scroll-container"><div class"table-grid"><div v-for"(r…...

maven之pom.xml

MAVEN 1、基础配置​2、项目信息3、依赖管理​4、构建配置​5、继承与聚合​6、仓库与SCM​7、其他高级配置​ Maven的pom.xml文件是项目的核心配置文件&#xff0c;用于定义项目结构、依赖关系和构建过程 https://www.runoob.com/maven/maven-pom.html 1、基础配置​ **<…...

深度学习Y8周:yolov8.yaml文件解读

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 本周任务&#xff1a;根据yolov8n、yolov8s模型的结构输出&#xff0c;手写出yolov8l的模型输出、 文件位置&#xff1a;./ultralytics/cfg/models/v8/yolov8.…...

充电桩APP的数据分析:如何用大数据优化运营?

随着新能源汽车的普及&#xff0c;充电桩作为基础设施的核心环节&#xff0c;其运营效率直接影响用户体验和行业可持续发展。充电桩APP积累了海量用户行为、充电记录、设备状态等数据&#xff0c;如何利用这些数据优化运营成为关键课题。大数据分析能够帮助运营商精准定位问题、…...

shell脚本之函数详细解释及运用

什么是函数 通俗地讲&#xff0c;所谓函数就是将一组功能相对独立的代码集中起来&#xff0c;形成一个代码块&#xff0c;这个代码可 以完成某个具体的功能。从上面的定义可以看出&#xff0c;Shell中的函数的概念与其他语言的函数的 概念并没有太大的区别。从本质上讲&#…...

校平机的原理、应用及发展趋势

一、校平机的定义与作用 校平机&#xff08;Leveling Machine&#xff09;是一种用于矫正金属板材、带材或卷材表面平整度的工业设备。其核心功能是通过机械作用消除材料内部残余应力&#xff0c;修正材料在加工、运输或存储过程中产生的弯曲、波浪形、翘曲等缺陷&#xff0c;…...

NFM算法解析:如何用神经网络增强因子分解机的特征交互能力?

在推荐系统和广告点击率预测等场景中&#xff0c;特征交叉&#xff08;Feature Interaction&#xff09;是提升模型效果的关键。传统的因子分解机&#xff08;FM&#xff09;通过二阶特征交互取得了显著效果&#xff0c;但其线性建模方式和有限阶数限制了模型的表达能力。今天&…...

Python人工智能算法 模拟退火算法:原理、实现与应用

模拟退火算法&#xff1a;从物理启发到全局优化的深度解析 一、算法起源与物理隐喻 模拟退火算法&#xff08;Simulated Annealing, SA&#xff09;起源于20世纪50年代的固体退火理论&#xff0c;其核心思想可追溯至Metropolis等人提出的蒙特卡罗模拟方法。1983年&#xff0c…...

服务器网络配置 netplan一个网口配置两个ip(双ip、辅助ip、别名IP别名)

文章目录 问答 问 # This is the network config written by subiquity network:ethernets:enp125s0f0:dhcp4: noaddresses: [192.168.90.180/24]gateway4: 192.168.90.1nameservers:addresses:- 172.0.0.207- 172.0.0.208enp125s0f1:dhcp4: trueenp125s0f2:dhcp4: trueenp125…...

FTP与NFS服务详解

一、FTP服务 &#xff08;一&#xff09;Linux下FTP客户端管理工具 1. ftp工具 安装命令&#xff1a;yum install ftp -y连接服务器&#xff1a;ftp 服务器IP&#xff0c;输入账号密码登录。常用命令&#xff1a; 命令说明ls查看远程目录文件put上传单个文件到远程服务器get…...

算法中的数学:欧拉函数

1.相关定义 互质&#xff1a;a与b的最大公约数为1 欧拉函数&#xff1a;在1~n中&#xff0c;与n互质的数的个数就是欧拉函数的值 eg&#xff1a; n1时&#xff0c;欧拉函数的值为1&#xff0c;因为1和1是互质的 n2是&#xff0c;值为2&#xff0c;因为1和2都是互质的 积性函数&…...

如果有三个服务实例部署在三台不同的服务器上,这三个服务实例的本地缓存,是存储一模一样的数据?还是各自只存一部分?

✅ 答案是&#xff1a;通常每个服务实例都会独立地缓存它自己访问过的数据&#xff0c;这些数据可能是相同的&#xff0c;也可能是不同的&#xff0c;取决于请求的内容。 &#x1f4cc; 举个例子说明 假设你有一个商品详情页的服务&#xff0c;部署了 3 个服务实例&#xff08…...

Coze工作流-选择器的用法

上集回顾 上集教程我们学习了什么是变量以及变量类型的用法。即什么时候用什么变量类型 教程简介 本教程将带大家学习工作流的选择和问答模块 工作流类型选择 在Coze中&#xff0c;工作流是智能体的核心逻辑单元。根据任务复杂度&#xff0c;可选择两种模式&#xff1a; 类…...

《AI工程技术栈》:三层结构解析,AI工程如何区别于ML工程与全栈工程

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

uni-app使用大集

1、手动修改页面标题 uni.setNavigationBarTitle({title: 修改标题 }); 2、单选 不止有 radio-group&#xff0c;还有 uni-data-checkbox 数据选择器 <!-- html部分 --> <uni-data-checkbox v-model"sex" :localdata"checkboxList"></u…...

链表day3

链表定义 struct ListNode{int val;ListNode *next; //next是一个指针变量&#xff0c;存储的是地址&#xff0c;是ListNode类型的地址ListNode(int x) : val(x),next(nullptr){} //也就是说ListNode必须接受一个int x&#xff0c;next指针默认为nullptr&#xff0c;值由外部指…...

C++23关联容器的异质擦除重载 (P2077R2)介绍

文章目录 一、基本概念二、原理重载机制类型转换 三、优势提高查找效率提升程序整体性能避免不必要的初始化确保系统实时性 四、应用场景高性能计算大型对象管理实时系统 五、代码示例六、相关图片材料结构与微观图像半导体研究图示与图表科学图表芯片与电路板 一、基本概念 在…...

Flink架构概览,Flink DataStream API 的使用,FlinkCDC的使用

一、Flink与其他组件的协同 Flink 是一个分布式、高性能、始终可用、准确一次&#xff08;Exactly-Once&#xff09;语义的流处理引擎&#xff0c;广泛应用于大数据实时处理场景中。它与 Hadoop 生态系统中的组件可以深度集成&#xff0c;形成完整的大数据处理链路。下面我们从…...

AI加速芯片全景图:主流架构和应用场景详解

目录 一、为什么AI芯片如此重要? 二、主流AI芯片架构盘点 三、不同芯片在训练与推理中的部署逻辑 四、真实应用案例解读 五、AI芯片发展趋势预测 AI芯片的选择,是AI系统能否高效运行的关键。今天笔者就从架构角度出发,带你系统了解主流AI加速芯片的种类、优劣对比及实际…...

Ubuntu22.04 系统安装Docker教程

1.更新系统软件包 #确保您的系统软件包是最新的。这有助于避免安装过程中可能遇到的问题 sudo apt update sudo apt upgrade -y 2.安装必要的依赖 sudo apt install apt-transport-https ca-certificates curl software-properties-common -y 3.替换软件源 原来/etc/apt/s…...

更新ubuntu软件源遇到GPG error

BUG背景 执行sudo apt update后遇到类似下列报错&#xff1a; E: The repository https://download.docker.com/linux/ubuntu bionic Release no longer has a Release file. N: Updating from such a repository cant be done securely, and is therefore disabled by defau…...

vue调后台接口

1.1 什么是 axios Axios 是一个基于 promise 的 HTTP 库&#xff0c;可以用来发送网络请求。它可以在浏览器和 node.js 中使用&#xff0c;本质上是对原生 XMLHttpRequest 的封装&#xff0c;符合最新的 ES 规范&#xff0c;支持 Promise API&#xff0c;能够拦截请求和响应&am…...

Ubuntu学习记录

冷知识补充 1.VMware官网安装后&#xff0c;会有两个软件&#xff0c;一个收费&#xff08;pro&#xff09;(功能更多&#xff0c;可以一次运行多个虚拟机)&#xff08;尽管2024年最新版本的也免费了&#xff09;一个免费(player)。 2.ubuntu打开终端快捷键&#xff1a;ctrlal…...

【音频】如何解析mp3文件

解析和播放MP3文件涉及两个主要步骤:解码(将MP3压缩数据转换为原始PCM音频)和播放(将PCM数据通过音频设备输出)。以下是不同平台和编程语言的实现方法: 一、MP3文件结构基础 MP3文件由多个**帧(Frame)**组成,每帧包含固定时长的音频数据(通常为26ms)。每个帧包含:…...

学习笔记:黑马程序员JavaWeb开发教程(2025.4.9)

12.16 异常处理 定义一个类&#xff0c;加上注解RestControllerAdvice&#xff0c;即定义了一个全局异常处理器 再方法上加上注解ExceptionHandler&#xff0c;通过注解当中的value属性来指定捕获那个类型的异常 完成Filter、interceptor、异常处理代码实操 Filter Filter里…...

【音频】wav文件如何解析编码格式(压缩格式)?

要确定一个WAV文件的编码格式&#xff0c;可以通过以下几种方法实现&#xff0c;包括使用操作系统自带工具、专业音频软件或编程解析文件头信息。以下是详细说明&#xff1a; 一、通过文件属性查看&#xff08;Windows/macOS&#xff09; 1. Windows系统 步骤&#xff1a; 右…...

【Django系统】Python+Django携程酒店评论情感分析系统

Python Django携程酒店评论情感分析系统 项目概述 这是一个基于 Django 框架开发的酒店评论情感分析系统。系统使用机器学习技术对酒店评论进行情感分析&#xff0c;帮助酒店管理者了解客户反馈&#xff0c;提升服务质量。 主要功能 评论数据导入&#xff1a;支持导入酒店…...

OpenCv高阶(十六)——Fisherface人脸识别

文章目录 前言一、Fisherface人脸识别原理1. 核心思想&#xff1a;LDA与Fisher准则2. 实现步骤(1) 数据预处理(2) 计算类内散布矩阵 SW对每个类别&#xff08;每个人&#xff09;计算均值向量 μi&#xff1a;(3) 计算类间散布矩阵 SB(4) 求解投影矩阵 W(5) 降维与分类 3. Fish…...

数据库与Redis数据一致性解决方案

在写数据时保证 Redis 和数据库数据一致,可采用以下方案,需根据业务场景权衡选择: 1. 先更新数据库,再更新 Redis 步骤: 写入 / 更新数据库数据。删除或更新 Redis 缓存。适用场景:读多写少,对缓存一致性要求不高(短暂不一致可接受)。风险:若第二步失败,导致缓存与…...

Python面试题

Python面试题 Python面试题回答1. Python面向对象的三个特征&#xff1f;多态如何实现和使用2. is 和 的区别&#xff1f;3. GIL了解吗&#xff1f;说说4. 可变类型和不可变类型&#xff1f;5. yield用法&#xff1f;6. 深拷贝和浅拷贝区别&#xff1f;7. Python中的线程8. 生…...

力扣周赛置换环的应用,最少交换次数

置换环的基本概念 置换环是排列组合中的一个概念&#xff0c;用于描述数组元素的重排过程。当我们需要将一个数组转换为另一个数组时&#xff0c;可以把这个转换过程分解为若干个 “环”。每个环代表一组元素的循环交换路径。 举个简单例子 假设原数组 A [3, 2, 1, 4]&…...

差分数组 - 对区间内元素的统一操作

目录 概念 题单 1 拼车 2 将区间分为最少组数 3 字母移位 4 使数组中的所有元素都等于零 5 零数组变换Ⅰ 6 最大化城市的最小电量 概念 差分数组&#xff0c;顾名思义&#xff0c;就是由原数组的相邻元素作差而得到的差值组成的新的数组。 对于原数组 a [ 1 , 3 , 5 …...

线上问题排查

一&#xff1a;CPU飙高问题排查过程 遇到这种问题&#xff0c;首先是登录到服务器&#xff0c;看一下具体情况。 定位进程&#xff1a;top命令&#xff0c;查看CPU占用情况定位线程&#xff1a;top -Hp 1893命令&#xff0c;查看各个线程的CPU使用情况定位代码&#xff1a;pr…...

计及可再生能源不确定性的经济优化调度方法

目前&#xff0c;计及可再生能源不确定性的经济调度方法主要有随机优化、鲁棒优化和区间优化。 随机优化&#xff1a;可再生能源输出被定义为一个已知概率分布的随机变量。 难以同时保证计算精度和效率。 1-场景法 场景生成 基于随机变量概率分布进行采样&#xff1a;蒙特…...

支持向量机(SVM):分类与回归的数学之美

在机器学习的世界里&#xff0c;支持向量机&#xff08;Support Vector Machine&#xff0c;简称 SVM&#xff09;是一种极具魅力且应用广泛的算法。它不仅能有效解决分类问题&#xff0c;在回归任务中也有着出色的表现。下面&#xff0c;就让我们深入探索 SVM 如何在分类和回归…...

用户刷题记录日历——签到表功能实现

MySQL实现 在数据库中设计一张签到表&#xff0c;记录用户每次签到的日期及其他相关信息。然后通过时间范围查询得到用户的签到记录。 CREATE TABLE user_sign_in (id BIGINT AUTO_INCREMENT PRIMARY KEY, -- 主键&#xff0c;自动递增userId BIGINT NOT NULL, …...

C语言中的内存函数

目录 1 memcpy()函数的基本信息及功能&#xff08;1&#xff09; void * destination&#xff08;2&#xff09; const void * source&#xff08;3&#xff09; size_t num 1.2 memcpy()函数实战演练1.3 memcpy()函数的模拟实现1.3.1 my_memcpy()函数定义及参数1.3.2 my_memcp…...

本特利内华达330103-00-03-05-02-05毫米接近传感器

描述 3300 XL 8 mm近程传感器系统包括:一个3300 XL 8 mm探头、一根3300 XL延长电缆1和一个3300 XL近程传感器2。 该系统提供的输出电压与探针尖端和观察到的导电表面之间的距离成正比&#xff0c;可以测量静态(位置)和动态(振动)值。该系统的主要应用是流体膜轴承机器的振动和位…...

啤酒游戏与系统思考

今天&#xff0c;与上海地产集团的伙伴们一同体验经典的系统思考沙盘模拟——“啤酒游戏”。虽然大家身处房地产行业&#xff0c;但也会惊讶地发现&#xff0c;啤酒游戏的核心理念对任何行业都适用&#xff0c;尤其是站在全局的角度&#xff0c;做出精准决策。 每次进行啤酒游戏…...

id分页遍历数据漏行问题

令入参id为0 while(true){ select * from table where id>#{id} order by id asc limit 100; 取结果集中最大id作为下次查询的入参 其他操作 } 这个算法一般没问题&#xff0c;但在主从数据系统中&#xff0c;主库写&#xff0c;查询从库遍历数据时&#xff0c;出现了…...

【Vue3】Vue3工程的创建 及 开发者工具的安装

目录 一、创建Vue3工程的方式 方法一 方法二 二、区分Vue3 和 Vue2的构建 观察main.js vue3不向下兼容&#xff0c;也就是说Vue3不支持Vue2的写法&#xff01; JavaScript 的模块导入有两种常见写法&#xff1a; 三、安装Vue3的开发者工具 总结不易~本章节对我有很大的…...

docker exec -it abc bash

当然可以&#xff01;让我们详细解析一下 docker exec -it abc bash 这个命令的各个部分及其作用。 命令概述 docker exec -it abc bash这个命令用于在已经运行的 Docker 容器 abc 中启动一个新的交互式终端会话。具体来说&#xff0c;它会执行容器内的 bash 命令&#xff0c…...

基于AI大语言模型的历史文献分析在气候与灾害重建中的技术-以海南岛千年台风序列重建为例

随着人工智能技术的飞速发展&#xff0c;大语言模型如GPT、BERT等在自然语言处理领域取得了显著成果。这些模型不仅提高了文本数据的处理和理解效率&#xff0c;还为历史灾害研究提供了全新的视角和方法。本文将深入探讨基于AI大语言模型的历史文献分析在气候与灾害重建领域中的…...