3.学习前后端关联

目录

1.接口类型

2.错误状态码

3.如何定义路由

4.那如何要求前端传入一个JSON数据呢?

4.解决前后端口不同源,跨域问题

1.使用@CrossOrigin

2.直接复制代码使用 

5.用户登录校验


1.接口类型

POST(新增数据)、PUT(更新更改数据)、GET(查询)、DELET(删除数据)

(put和post请求类似)

两种使用方式:

(1)@RequestMapping(method = RequestMethod.POST),可以指定不同的请求方法

(2)固定类型 @PutMapping() 、@PostMapping()

1.使用postman检查接口时,post方法的参数应该使用query

2.使用delete时,一般与路径参数注解搭配使用@PathVariable,路由中需要绑定传入的参数

使用postman时,就不能使用JSON格式了,而是需要将id绑定在url中

3.四种类型,方法未指定类型时,默认使用get

2.错误状态码

200:成功

400:接口参数错误(后端需要JSON,前端却传了url参数)

404:接口路径或者接口参数错误

405:接口请求类型错误(通过浏览器地址栏请求只能通过get,通过post就会报如下错误)

          因此就需要使用postman,设置请求方法就可以了。

500:查看IDEA控制台具体报错信息

未处理空时:

post发送请求,报错500,控制台显示为空指针异常:

控制台:

优化代码:

再次发从空数据,控制台提示了:

post接口测试通过:

3.如何定义路由

注意:每个controller类上都要有@controller注解

@RestController = @controller +@ResponseBody,它的作用是返回JSON数据类型

要访问上图中的hello方法,在页面中应写的url:  http://localhost:8080?web/hello

4.那如何要求前端传入一个JSON数据呢?

1.给参数列表加上@RequestBody就搞定了。

那么使用postman时,如何设置JSON类型参数呢?

2.那么JSON数据可以传入一个ids的列表吗

JSON可以包含数组,数组却不能包含JSON。

JSON可以直接传入一个数组,不需要键值对。通过此方法,我们可以实现后端DELLETE的批量删除。

4.解决前后端口不同源,跨域问题

什么是跨域问题?

当前端和后端项目同时启动时,使用的是不同的端口,就会出现访问错误,这就是跨域问题。

1.使用@CrossOrigin

1.在vue命令行界面安装 npm axios -S

2.使用mounted(),等页面加载好之后再去请求数据

3.给controller类中加注解@CrossOrigin

2.直接复制代码使用 

方法1太过于累赘,很麻烦。大家可以直接使用方法2创建一个类,无脑复制即可。

5.用户登录校验

1.自行编码检验

 if(user.getUsername() == null || user.getUsername().isEmpty()){return Result.error("数据输入不合法");}

2.使用util自带的包进行检验

导入依赖:

 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.18</version>
</dependency>

在controller中:

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

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

相关文章

Anaconda和Python是什么关系?

Anaconda和Python相当于是汽车和发动机的关系&#xff0c;你安装Anaconda后&#xff0c;就像买了一台车&#xff0c;无需你自己安装发动机和其他零配件&#xff0c;而Python作为发动机提供Anaconda工作所需的内核。 简单来说&#xff0c;Anaconda是一个集成了IDE、Notepad、P…

网络层介绍,IP地址分类以及作用

IP地址组成&#xff1a; TTL&#xff1a;生存时间 基于ICMP报文 特殊地址&#xff1a; 0.0.0.0-0.255.255.255 1.代表未指定的地址 默认路由 DHCP下发地址的时候&#xff0c;发个报文给DHCP服务器 临时用0.0.0.0借用地址&#xff0c;未指定地址。 2.全网地址&#xff1a;目…

阐述el-dropdown(下拉菜单)的基本知识

目录 1. 基本知识2. Demo3. 实战 1. 基本知识 el-dropdown是一个常用的UI组件&#xff0c;用于创建下拉菜单&#xff0c;通常用于实现各种交互式菜单、导航栏或下拉选项 确保安装Element UI库&#xff0c;它包含了el-dropdown组件 npm install element-ui # 或者 yarn add e…

配置Web运行环境与第一个网页

安装与配置Web环境: 如下使用了VSC作为web的运行环境。 下面是VSC的官网点击进入:Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/download 1.下载 进入官网后可以看到有windows&#xff0c;linux&#xff0c;还有苹果按照自己的系统下载&…

Node Sass does not yet support your current environment

项目运行时报错&#xff1a;Node Sass does not yet support your current environment 原因是node版本过高。 解决办法&#xff1a; 使用nvm管理node版本&#xff0c;&#xff08;如何安装nvm&#xff1f;请点击跳转&#xff09; 具体步骤如下&#xff1a; 1.查看当前node…

Element UI中日期选择日(date-picker)等其他选择器下拉显示错位、位置错误解决

省流版 给选择器加上唯一key&#xff08;下面的想看就看&#xff09; 问题复现 需求是用一个下拉切换时间维度的选择&#xff0c;分别为年度、季度、月度&#xff0c;但是开发的时候发现&#xff0c;当切换的时候&#xff0c;视图可正常切换&#xff0c;但点击选择时却发现选…

Vue 2 组件发布到 npm 的常见问题解决

按照 Vue 2 组件打包并发布到 npm 的方法配置项目后&#xff0c;项目在实际开发过程中&#xff0c;随着代码写法的多样性增加而遇到的各种打包问题&#xff0c;本文将予以逐一解决&#xff1a; 本文目录 同时导出多个组件 样式表 import 问题解决 Json 文件 import 问题解决…

图论最短路径以及floyd算法的MATLAB实现

图论是数学的一个分支&#xff0c;起源于18世纪。1736年&#xff0c;数学家欧拉通过解决“哥尼斯堡七桥问题”&#xff0c;将问题抽象成点和线的关系&#xff0c;并通过理论分析得出结论&#xff0c;这个过程标志着图论的产生&#xff0c;欧拉也因此被称为“图论之父”。图论研…

智慧城市解决方案大全:标准规范顶层设计指南、整体解决方案、厂商售前宣讲PPT、招投标、智慧城市白皮书等全套680份,一次性打包下载

关键词&#xff1a;智慧城市&#xff0c;智慧城市解决方案&#xff0c;智慧城市发展的前景与趋势&#xff0c;智慧城市概念主力流出&#xff0c;智慧城市项目包括哪些方面&#xff0c;智慧城市项目方案&#xff0c;智慧城市宣传片&#xff0c;智慧城市白皮书&#xff0c;智慧城…

MySQL之MVCC如何实现可重复读和提交读

(/≧▽≦)/~┴┴ 嗨~我叫小奥 ✨✨✨ &#x1f440;&#x1f440;&#x1f440; 个人博客&#xff1a;小奥的博客 &#x1f44d;&#x1f44d;&#x1f44d;&#xff1a;个人CSDN ⭐️⭐️⭐️&#xff1a;Github传送门 &#x1f379; 本人24应届生一枚&#xff0c;技术和水平有…

教程3_图像的轮廓

目录 目标 1. 特征矩 2、轮廓质心 3. 轮廓面积 4. 轮廓周长 5. 轮廓近似 6. 轮廓凸包 7. 边界矩形 7.1.直角矩形 7.2. 旋转矩形 8. 最小闭合圈 9. 拟合一个椭圆 10. 拟合直线 目标 在本文中&#xff0c;我们将学习 - 如何找到轮廓的不同特征&#xff0c;例如面积&…

【Java】LinkedList vs. ArrayList:Java中的数据结构选择

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

uniapp开发小程序遇到的问题,持续更新中

一、uniapp引入全局scss 在App.vue中引入uni.scss <style lang"scss">/* #ifndef APP-NVUE */import "uni.scss";/* #endif */ </style>注意&#xff1a;nvue页面的样式在编译时&#xff0c;有很多样式写法被限制了&#xff0c;容易报错。所…

【C++ leetcode】双指针(专题完结)

15. 三数之和 题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意&#xff1a;答案中不可以包含重复的…

面试经典150题【101-110】

文章目录 面试经典150题【101-110】9.回文数61.加一172.阶乘后的069.x的平方根50.Pow(x,n)149.直线上最多的点数52.N皇后II120.三角形最小路径和64.最小路径和63.不同路径II 面试经典150题【101-110】 6道偏数学的题和4道二维dp 9.回文数 一开始想转为字符串再判断。后来发现…

信号处理--基于混合CNN和transfomer自注意力的多通道脑电信号的情绪分类的简单应用

目录 关于 工具 数据集 数据集简述 方法实现 数据读取 ​编辑数据预处理 传统机器学习模型(逻辑回归&#xff0c;支持向量机&#xff0c;随机森林) 多层感知机模型 CNNtransfomer模型 代码获取 关于 本实验利用结合了卷积神经网络 (CNN) 和 Transformer 组件的混合…

windows下powershell与linux下bash美化教程(使用starship)

starship美化教程 Win11 Powershell 安装 在命令行使用下面命令安装 # 安装starship winget install starship将以下内容添加到 Microsoft.PowerShell_profile.ps1&#xff0c;可以在 PowerShell 通过 $PROFILE 变量来查询文件的位置 Invoke-Expression (&starship i…

web学习笔记(四十五)Node.js

目录 1. Node.js 1.1 什么是Node.js 1.2 为什么要学node.js 1.3 node.js的使用场景 1.4 Node.js 环境的安装 1.5 如何查看自己安装的node.js的版本 1.6 常用终端命令 2. fs 文件系统模块 2.1引入fs核心模块 2.2 读取指定文件的内容 2.3 向文件写入指定内容 2.4 创…

yarn按包的时候报错 ../../../package.json: No license field

运行 yarn config list 然后运行 yarn config set strict-ssl false 之后yarn就成功了

基于SpringBoot“网上选课系统”设计和实现(源码定制以及咨询!!)

博主介绍&#xff1a;✌全网粉丝10W,B站项目阿龙、csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、华为云获奖者&#xff0c;“程序员阿龙”✌ 主要内容&#xff1a;SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python&#xff0c;MYSQL、Hodpoo…