SpringBoot3 + Vue3 由浅入深的交互 基础交互教学2

目录

一、这篇文章是基础交互教学系列的续作

二、发送请求时,携带发送的数据json格式的参数:data

三、携带token请求头,进行JWT校验

四、实现throw抛出异常,并交互显示在前端的界面


一、这篇文章是基础交互教学系列的续作

大家可以看看我之前的文章,里面有详细的搭建环境过程:

SpringBoot3 + Vue3 由浅入深的交互 基础交互教学_springboot和vue怎么交互-CSDN博客

二、发送请求时,携带发送的数据json格式的参数:data

之前只是讲解了如何路径参数的方式发起和响应请求,这次将会讲解通过json格式参数发起和响应请求:

以登录界面为例,将向后端发送表单

首先通过ref创建form的表单

const form = ref({username:'',password:'',
})

 用户在输入账号和密码后,通过点击登录按钮,触发登录的事件:

const handleLogin = async () => {const response = await apiUserLoginService(form.value);if (response && response.code === 200) {const token = response.data;// 存储token到localStoragelocalStorage.setItem('token', token);ElMessage({ type: 'success', message:  '登录成功!' });router.push('/home');} };

 发现没有,直接传入的是表单的值:

在api/userApis.js中:

这里将定义前端发送的数据请求方法和数据

import request from '@/utils/request.js'export const apiUserLoginService = (data)=>{return request.post('/user/login',data)
}

 后端的代码,接收请求的参数使用的是@RequestBody注解

    @PostMapping("/login")public Result<String> loginByPassword(@RequestBody UserLoginForm userLoginForm){String token  = userService.loginByPassword(userLoginForm);return !StringUtil.isNullOrEmpty(token) ? Result.success(token):Result.fail(ResultCodeEnum.FAIL);}

其中UserLoginForm类定义的变量,对应着前端form表单发送过来的参数名username和password

@Data
public class UserLoginForm {private String username;private String password;}

三、携带token请求头,进行JWT校验

在登录的时候存入token的参数

const handleLogin = async () => {const response = await apiUserLoginService(form.value);if (response && response.code === 200) {const token = response.data;// 存储token到localStoragelocalStorage.setItem('token', token);ElMessage({ type: 'success', message:  '登录成功!' });router.push('/home');} };

修改utils/request.js中的代码:

使每次请求如果存在token则会携带token进行校验

import axios from "axios";
import { ElMessage } from "element-plus";const baseURL = '/api';const token = localStorage.getItem("token");
const instance = axios.create({baseURL,headers: {"Content-Type": "application/json","Authorization":token || []},
})instance.interceptors.response.use(result=>{return result.data;},err=>{ElMessage({ type: 'warning', message: err.response.data.message});return Promise.reject(err);})export default instance;

关于JWT后端校验的代码,大家可以看看我之前写的JWT认证校验这篇文章,里面有更详细的讲解,这里我就不多赘述了

JWT 认证校验 从理论到实战(登录校验)_jwt签名校验-CSDN博客

四、实现throw抛出异常,并交互显示在前端的界面

 throw抛出异常,大家想必在项目中经常使用吧,还是以登录为例:

如果登录的用户不存在,则会抛出用户不存在的异常 

        //1.判断用户是否存在User user = selectUserByName(username);if(user == null){throw new BusinessRuntimeException(ResultCodeEnum.ACCOUNT_NOT_EXIST);}

直接抛出异常,前端是无法获取到的,这时需要创建一个全局异常类,将捕获到的异常返回给前端,这样前端就可以通过异常的信息进行显示

exception/GlobalException中,定义了处理自定义抛出的异常类BusinessRuntimeException,并捕获到的异常将返回给前端

@ControllerAdvice
public class GlobalException {// 处理 BusinessRuntimeException@ExceptionHandler(BusinessRuntimeException.class)public ResponseEntity<Object> handleBusinessException(BusinessRuntimeException ex, WebRequest request) {Map<String, Object> body = new HashMap<>();body.put("message", ex.getResultCodeEnum().getMsg());body.put("code",ex.getResultCodeEnum().getCode());return new ResponseEntity<>(body, HttpStatus.BAD_REQUEST);}
}

然后前端就只需要将该异常进行显示出来,提示用户即可完成了交互 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/482776.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UIE与ERNIE-Layout:智能视频问答任务初探

内容来自百度飞桨ai社区UIE与ERNIE-Layout&#xff1a;智能视频问答任务初探&#xff1a; 如有侵权&#xff0c;请联系删除 1 环境准备 In [2] # 安装依赖库 !pip install paddlenlp --upgrade !pip install paddleocr --upgrade !pip install paddlespeech --upgrade In …

Tomcat新手成长之路:安装部署优化全解析(下)

接上篇《Tomcat新手成长之路&#xff1a;安装部署优化全解析&#xff08;上&#xff09;》: link 文章目录 7.应用部署7.1.上下文7.2.启动时进行部署7.3.动态应用部署 8.Tomcat 类加载机制8.1.简介8.2.类加载器定义8.3.XML解析器和 Java 9.JMS监控9.1.简介9.2.启用 JMX 远程监…

vue项目部署到github pages后页面显示不出来??

问题&#xff1a; 当我们在命令行执行 npm run build 后&#xff0c;项目的目录下会生成一个 dist 文件夹&#xff0c;它里面又包含一个 static 文件夹和一个 index.html 文件&#xff0c;这是 webpack 最终打包好的文件 项目上传到仓库后发现页面为空&#xff0c;找不到文件路…

用 React 编写一个笔记应用程序

这篇文章会教大家用 React 编写一个笔记应用程序。用户可以创建、编辑、和切换 Markdown 笔记。 1. nanoid nanoid 是一个轻量级和安全的唯一字符串ID生成器&#xff0c;常用于JavaScript环境中生成随机、唯一的字符串ID&#xff0c;如数据库主键、会话ID、文件名等场景。 …

“指标管理系统”是什么?企业如何搭建指标管理系统?

在当今数字化时代&#xff0c;数据已成为企业决策的重要依据。然而&#xff0c;海量数据中如何筛选出关键指标&#xff0c;并对其进行有效管理&#xff0c;成为了众多企业面临的难题。为此&#xff0c;指标管理系统应运而生&#xff0c;它旨在帮助企业规范化定义、统一管理和高…

数学建模——Topsis法

数模评价类&#xff08;2&#xff09;——Topsis法 概述 Topsis:Technique for Order Preference by Similarity to Ideal Solution 也称优劣解距离法&#xff0c;该方法的基本思想是&#xff0c;通过计算每个备选方案与理想解和负理想解之间的距离&#xff0c;从而评估每个…

LuaForWindows_v5.1.5-52.exe

Releases rjpcomputing/luaforwindows GitHub #lua C:\Users\Administrator\Desktop\test.lua print("Hello lua&#xff01;") print("ZengWenFeng 13805029595")

HTTP协议详解:从HTTP/1.0到HTTP/3的演变与优化

深入浅出&#xff1a;从头到尾全面解析HTTP协议 一、HTTP协议概述 1.1 HTTP协议简介 HTTP&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;是互联网上应用最广泛的通信协议之一。它用于客户端与服务器之间的数据传输&#xff0c;尤其是在Web…

AI高中数学教学视频生成技术:利用通义千问、MathGPT、视频多模态大模型,语音大模型,将4个模型融合 ,生成高中数学教学视频,并给出实施方案。

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下AI高中数学教学视频生成技术&#xff1a;利用通义千问、MathGPT、视频多模态大模型&#xff0c;语音大模型&#xff0c;将4个模型融合 &#xff0c;生成高中数学教学视频&#xff0c;并给出实施方案。本文利用专家模…

AOSP的同步问题

repo sync同步时提示出错: error: .repo/manifests/: contains uncommitted changesRepo command failed due to the following UpdateManifestError errors: contains uncommitted changes解决方法&#xff1a; 1、cd 进入.repo/manifests cd .repo/manifests2、执行如下三…

Makefile 入门指南:构建自动化编译流程

个人主页&#xff1a;chian-ocean 文章专栏 前言 make 和 Makefile 是编译和构建软件项目时非常常用的工具和文件&#xff0c;它们通常配合使用来自动化项目的编译过程。 make 定义&#xff1a;make 是一个构建自动化工具&#xff0c;用于根据项目文件的依赖关系自动完成编译…

FCBP 认证考试要点摘要

理论知识 数据处理与分析&#xff1a;包括数据的收集、清洗、转换、存储等基础操作&#xff0c;以及数据分析方法&#xff0c;如描述性统计分析、相关性分析、数据挖掘算法等的理解和应用 。数据可视化&#xff1a;涉及图表类型的选择与应用&#xff0c;如柱状图、折线图、饼图…

类和对象下

目录 1. 赋值运算符重载 1.1 运算符重载 1.2 赋值运算符重载 1.3 日期类的实现 1.4 const修饰成员变量 2. 构造函数之初始化列表 3. 类型转换 3. static成员 4. 友元 5. 内部类 6. 日期差 1. 赋值运算符重载 1.1 运算符重载 当运算符被用于类类型的对象时&#x…

oracle RAC各版本集群总结和常用命令汇总

oracle RAC学习 RAC介绍 RAC&#xff1a;高可用集群&#xff0c;负载均衡集群&#xff0c;高性能计算集群 RAC是⼀种⾼可⽤&#xff0c;⾼性能&#xff0c;负载均衡的share-everything的集群 8i:内存融合雏形 内存融合雏形&#xff08;Oracle Parallel Server&#xff09;…

今天我们来聊聊Maven中两个高级的概念—— 插件和目标

插件&#xff08;plugin&#xff09; Maven的核心是一个插件执行框架;所有的工作都是由插件完成的。 Maven中Plugin分为两种类型&#xff1a; build类型Plugin只能在build阶段执行&#xff0c;在POM中需要在 <build/> 标签下进行配置。 reporting类型&#xff1a;在si…

[每周一更]-(第125期):模拟面试|NoSQL面试思路解析

文章目录 39|Elasticsearch 高可用:怎么保证 Elasticsearch 的高可用?1. Elasticsearch 的节点有什么角色?一个节点可以扮演多个角色吗?2. 在实践中,怎么合理安排不同节点扮演的角色?3. 什么是候选主节点和投票节点?投票节点可以被选为主节点吗?为什么要引入投票节点?…

【人工智能】Transformers之Pipeline(二十七):蒙版生成(mask-generation)

​​​​​​​ 目录 一、引言 二、蒙版生成&#xff08;mask-generation&#xff09; 2.1 概述 2.2 facebook/sam-vit-base 2.3 pipeline参数 2.3.1 pipeline对象实例化参数 2.3.2 pipeline对象使用参数 2.3.3 pipeline对象返回参数 2.4 pipeline实战 2.5 模型排…

蓝牙设备驱动开发

文章目录 一、蓝牙协议架构二、蓝牙协议的HCI传输层三、编程框架 一、蓝牙协议架构 蓝牙是无线数据和语音传输的开放式标准&#xff0c;它将各种通信设备、计算机及其终端设备、各种数字数据系统、甚至家用电器采用无线方式联接起来。它的传输距离为10cm&#xff5e;10m&#…

【Linux】开启你的Linux之旅:初学者指令指南

Linux相关知识点可以通过点击以下链接进行学习一起加油&#xff01; 在 Linux 开发中&#xff0c;GDB 调试器和 Git 版本控制工具是开发者必备的利器。GDB 帮助快速定位代码问题&#xff0c;Git 则提供高效的版本管理与协作支持。本指南将简明介绍两者的核心功能与使用技巧&…

你还没有将 Siri 接入GPT对话功能吗?

由于各种原因&#xff0c;国内ios用户目前无缘自带 AI 功能&#xff0c;但是这并不代表国内 ios 无法接入 AI 功能&#xff0c;接下来手把手带你为iPhone siri 接入 gpt 对话功能。 siri 接入 chatGPT 暂时还无法下载 ChatGPT app&#xff0c;或者没有账号的读者可以直接跳到…