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

重新运行




展示出