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

【多种不同提交方式】通过springboot实现与前端网页数据交互(非常简洁快速)

news 来源：原创 2025/8/17 8:26:20

【多种不同提交方式】通过springboot实现与前端网页数据交互

提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是springboot的使用。前后每一小节的内容是存在的有：学习and理解的关联性。【帮帮志系列文章】：每个知识点，都是写出代码和运行结果且前后关联上的去分析和说明（能大量节约您的时间）。

所有文章都*不会*直接把代码放那里，让您自己去看去理解。我希望我的内容对您有用而努力~

本文章是系列文章，技术栈内容为：【springboot+vue】【前后分离】
【详细图文，实操步骤分享，节约时间版】。最终完成一个商业化项目。内容有：
springboot知识
mybatisPlus知识
vue知识
node.js知识

本小节的内容是：
springboot篇章之： 2.实现与前端网页数据交互
本小节-附一个小节(建议观看)（保证主要章节内容篇幅不大，且不繁琐）：
apiPost工具的安装及使用
因为我们无法：直接通过浏览器来实现post、put、delete等方式的提交，有postMan等等很多网页测试工具,最后选择是：apiPost国内的比较简洁方便

上一小节是: springboot篇章之： 1.创建idea工程
基于电脑的jdk1.8通过idea创建springboot2.x版本
现在springboot是3.x以上版本，jdk版本至少要求17.但是很多时候我们电脑是jdk1.8(求稳定性和安全性)。文本分享本机电脑1.8的jdk。idea如何非常简洁快速的创建springboot

文章目录

【多种不同提交方式】通过springboot实现与前端网页数据交互
前言
一、创建项目结构
二、发送及接受数据
- get提交
- post提交
- put提交
- delete提交
说明
总结

前言

您已经创建好了一个springboot项目，且运行没有环境报错
文章开头有链接，能快速创建一个springboot项目，且那篇文章也有附小节，分享了关于idea创建项目的时候，会遇到的各种问题。

一、创建项目结构

web服务器项目，会创建对应的包，使其不同功能的代码，放到不同的包里面。dao关联数据库，service业务逻辑，controller关联网页数据，model/pojo/entity实体模板,utils工具类

在这里插入图片描述

二、发送及接受数据

在controller包里面创建一个类，这个类的功能就是关联前端网页数据
在这里插入图片描述

//类的最上面 添加一个注解@RestController
//@RestController 表示 这个类里面的所有方法 返回的都是数据//@Controller这个注解添加到类上面，表示这个类属于控制器：
//			类里面的方法返回的可能是   需要跳转网页的名字[那你后台项目就得折腾网页]
//当前系列文章 是前后分离(快速手搓成型)(后台项目没有网页)
//  		当前没有多余的内容来分享网页(越多内容怕越会看晕)[如需看，请查阅帮志其他文章]@RestController
public class BbzController {}

get提交

发送数据：
先在类里面写方法

@RequestMapping("/hello")
@RequestMapping(value = "/hello",method = RequestMethod.GET)
@GetMapping(value = "/hello")
public String helloBoot(){return "你好，帮帮志";
}//注意：：：：：  三个@注解描述的事情，一模一样。  代码三选一即可(三个同时要报错哦~)
//对应的  网页地址是 ： localhost:8080/hello

网页输入地址 localhost:8080/hello 得到后台的数据
因为我们在类的上面写了@RestController。表示方法的返回值，都是给前端的数据。后面我们数据会复杂，前端vue.js根据key来取，在放不同位置就可以了
在这里插入图片描述

方法上面的注解(value = “/hello”) 和网页 localhost:8080 /hello
所以：这个是对应的。您可以修改为实际的业务名称如：/login（登陆） /register（注册）
所以：您可以在类里面写很多很多个不同的方法，上面注解一样(但是指定不同的网页地址)，注解后面的value=单词不一样。网址拼接不同的地址(/单词)，不同网址它就执行不同的方法。
localhost:8080/hello
localhost:8080/login
localhost:8080/register

接收数据：

//注解看习惯，三选一  get提交
@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String helloBoot01(String name){ //形参namereturn "你好"+name;
}

手动输入网址为：http://localhost:8080/hello?name=bangbangzhi
？后面是参数=值，参数的名字对应方法形参的名字

网站输入？带数据，后台接受到之后，拼接到字符串又return显示到了网页
在这里插入图片描述

多个参数用&隔开
手动输入网址为：http://localhost:8080/hello?name=bangbangzhi&age=18&gender=男&…
get传数据给服务器很常见，它也是明文显示到网址上。一般搜索使用。
所以：各位可以打开一个百度/哔哩/京东啥的，任意搜索，观察网址，?左边的是地址?右边的是参数，多个用&隔开的

//http://localhost:8080/hello?name=bangbangzhi&age=18&gender=男@RequestMapping(value = "/hello",method = RequestMethod.GET)
public String helloBoot01(String name,int age,String gender){//数据会自动放到这些形参里面  数据就在后台代码层面了//怎么用，就看代码怎么写了。传过来了随便用(一般交给service业务判断 最后给dao操作数据库)nameagegender  //都是字符串，为什么这里是男 而不是bangbangzhi  //因为方法(参数单词)  和网页地址参数单词  一模一样return "你好";
}

post提交


@RequestMapping(value = "/helloPost",method = RequestMethod.POST)
@PostMapping(value = "/helloPost")  //注意注解变了  二选一
public String postHello(){return "你好，帮帮志";  //方法体和刚才一模一样//但是现在的逻辑是：//页面发送一个post请求，地址是helloPost//进入这个方法，返回一些数据给前端网页  
}

直接在网页输入网址无法提交为post请求
直接在网页输入网址是get提交
我们可以做一个网页(如果您会)：
method=“get/post” 可以指定不同的提交方式，我同时写两个，肯定是要报错的，此处是演示。
action=“就是提交到后台的地址，当前为：/helloPost”，对应刚才写的代码。
在这里插入图片描述
最好是，使用网页测试工具(它有很多很多不同的提交方式+参数填写+地址填写+请求头+一口气来个100个(压力测试)…+不完)，还能看各种返回结果：
文章开头有安装下载使用分享文章的链接

代码方法写完，启动项目。填写地址，选择post，点击发送
在测试工具看结果，不用开网页了
在这里插入图片描述
我拖拽到一起截的屏。
代码+post方式+地址+返回的结果

在工具里面添加参数名和参数值在点击发送。
后台接收参数的方式和刚才一模一样。(对应好单词一致)
还有很多不同的参数写法(单词不一致带注解，直接用对象来接收等等)，在另一个springmvc文章里面，此处我们快速去实现前后分离,节约时间。不然的话，光是这些后台框架，就可以分享很多很多+前端的脚手架，，那...对吧~

put提交

@PutMapping(value = "/helloPost")  //注意注解变了
public String putHello(String name){System.out.println(name); //接受数据，交给其他方法(业务层)return "你好，帮帮志";//返回处理结果 ，可以被if else封装不同的结果返回
}

delete提交

@DeleteMapping(value = "/helloPost")  //注意注解变了
public String deleteHello(String name){System.out.println(name);return "你好，帮帮志";
}

说明

文章标题：
通过springboot实现与前端网页数据交互

只要您的get提交是通的能运行，其他的请求方式都是可以运行的。
就两个地方不一样：
1.前端提交的方式不同(当前我们是用测试工具来实现，后期用vue代码)
2.类里面的方法上面注解不一样。
根据不同的网页提交方式，执行不同的注解，对应不同的方法，方法里面的方法体是各自的功能

后面的提交方式，您看我的内容。可能觉得比较鸡肋，没有啥区别。那是：
当前我没有任何的业务逻辑

get提交是搜索用明文显示在网址里面
post提交是新增/上传资源用内容在请求头里面，一般是隐式的
put提交是修改/更新用
delete提交是删除某个资源
根据不同提交方式，执行不同的逻辑(也是一种约定:前端同事，后台同事，测试同事，xx同事，一下能明白这个需要处理什么)
【前后分离，可能后台同事连页面长什么样，都没见过,根据设计概要写好接口和参数】

并且我们还可以用一些前端技术或者后台技术来封装我们的web项目，比如：只要是delete提交。就需要验证…或者记录… 。只要是xxx提交，就需要验证是否。。。
在代码管理和功能管理，会更加的细致和方便。

总结

说明一下：整个这个系列实现前后分离的springboot+vue项目。序号文章一共也就10几篇，只有核心图文重点操作步骤来实现这个目标(基本上您边看边写：一个小时或者一上午就能跟着一起手搓一个前后分离项目，然后您可以自行添加功能和内容在您项目里面)

其他扩展细节知识点，本系列省略了(或者有链接)如：
controller其实是springmvc的，springmvc+spring很多内容本系列就不再赘述，可以去帮帮志其他系列文章查阅，有的~

（会陆续更新非常多的IT技术知识及泛IT的电商知识，可以点个关注，共同交流。ღ( ´･ᴗ･` )比心）
（也欢迎评论，提问。我会依次回答~）