前后端交互的几种方式
Vue+Springboot 前后端交互的几种方式
前置知识点
用于接收前端参数传递的几个注解
@RequestBody注解
@RequestParam注解
@PathVariable注解
@RequestParam和@PathVariable的区别
@RequestBody的使用
这两篇博客写的非常的详细，看完就会了
什么是Json格式，
前后端交互主要有Json格式、form-data格式等，Json格式为主。
{"ID": 1001,"name": "张三","age": 24
}
1：数据在花括号中
2：数据以"键：值"对的形式出现（其中键多以字符串形式出现，值可取字符串，数值，甚至其他json对象）
3：每两个"键：值"对以逗号分隔（最后一个"键：值"对省略逗号）
像这种遵守上面3点，便可以形成一个json对象。
JavaWeb中的几个类
说实话，没有学过JavaWeb直接上手前后端，看其他大佬的代码总有出现 HttpServletRequest、HttpServletResponse、HttpSession、Model、ModelAndView这几个类，查来查去看的晕头转向。至少对于我来说
这边作为前置知识点简单讲下个人理解，有大佬有什么资料可以推荐给我。
HttpServletRequest和HttpServletResponse 由来
Web服务器收到一个http请求，会针对每个请求创建一个HttpServletRequest和 HttpServletResponse对象，向客户端发送数据找HttpServletResponse,从客户端取数据找HttpServletRequest.
具体可以看这篇博客
所有的信息包括请求的地址，请求的参数，提交的数据，上传的文件客户端的ip甚至客户端操作系统都包含在HttpServletRequest内
HttpServletResponse对象代表服务器的响应。这个对象中封装了向客户端发送数据、发送响应头，发送响应状态码的方法
所以后端Controller层@RequestMapping 映射函数中的参数经常都是HttpServletRequest，可以从前端获取数据。
HttpServletRequest中有一个getsession()方法，这边就引入了对HttpSession类的介绍
HttpSession类的介绍
服务器会为每一个用户 创建一个独立的HttpSession，我们只要知道我们可以从中获取我们需要的数据。下面是主要常用方法
关于Session
Object getAttribute(String name) 获取session对象中名为参数name所指明的属性的值void setAttribute(String name,Object value) 向session中存储数据void removeAttribute(String name ) 从session中删除名为参数name所指明的属性void invalidate（） 使session失效
Model和ModelAndView 这两个类
前面介绍的几个类用于前端向后端传数据，Model 和ModelAndView 主要用于后端向前端传。方法可以自行百度。下面开始正文。
前后端交互的几种方法
第一种：使用HttpServletResponse 后端接受前端数据
测试：下面这种方法获得的是登录的用户，登录的User发送了http请求。
数据库原始数据：
使用postman传Json参数，我们用001用户登录。
运行结果：
登录成功，我们再看delete方式测试输出的UserId
@RequestMapping(value = "/User/getAllUser", method = RequestMethod.DELETE)@ResponseBodyprivate void deleteUser(, HttpServletRequest request)throws Exception{String UserId =(String) request.getSession().getAttribute("UserId");System.out.println(UserId);
// userService.delete(UserId);}
方法二 用使用@RequestParam注解
原始数据库内容：
使用postman发送PUT请求
运行结果：
方法三Json格式给后端传数据
使用JSONObject类
使用方法很简单，在参数中使用@RequestBody注解传递一个JSONObject参数，关于JSONObject类，需要导入阿里的依赖，具体可以看看其他的博客，感觉越底层的东西越值钱。
之后我们需要什么参数，就可以通过params.get方法获取了。
原始数据库：
使用postman发送DELETE请求：
运行结果：
还有几种封装过的方法，比较复杂，有机会学习了再更新。
前后端交互的几种方式相关推荐
- 前后端交互的两种方式
方式一:表单提交 表单(form):表单用于收集用户输入信息,并将数据提交给服务器.是一种常见的与服务端数据交互的一种方式 //1. action:指定表单的提交地址 //2. method:指定表单 ...
- 使用rpc（thrift或protobuf）进行前后端交互的若干种方式
使用http协议进行前后端交互,后端使用http到rpc协议进行转发:https://github.com/lilinxi/pilipili 使用thrift或protobuf等序列化协议构造rest ...
- web服务器与网页表单通信,前端与后端通信的几种方式
只有知道了历史,才能更好的把握现在和未来. 在项目中,通常前端开发主要完成两件事情,一是界面搭建,一是数据交互. 下面是我总结前端与后端交互的几种方式,本文只作简单介绍,不做深入了解. 一.AJAX ...
- [原创]前后端交互的方式整理
前言 本来我只是想整理下前后端如何传输数据这种交互过程,大概流程如下: 前台使用ajax通过get/post等方式提交数据到后端 后端如何获取参数 经过业务处理后,返回前端对应的响应数据 前端接受到响 ...
- 写给刚入门的前端工程师的前后端交互指南
转自原文 写给刚入门的前端工程师的前后端交互指南 作为刚接触前端的不久的童鞋,大家都会兴奋于CSS和JS所带来漂亮界面,然而,前端工程师除了UI重构外,还有非常重要的职责在正确的区域渲染出服务端的数据 ...
- ajax学习----json，前后端交互，ajax
json <script>var obj = {"name": "xiaopo","age": 18,"gender& ...
- java web前后台交互_前后端交互（javaweb）
前段后台交互的学习(Java web) 标签 : 前后端交互 Javaweb 下面介绍了一些关于交互的细节: 请求数据 前端提供请求数据. 在开发中,后台在查询数据库时,需要借助查询条件才能查询到前端 ...
- Vue学习笔记（三） —— 前后端交互
简介 本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...
- 前后端交互之——AJAX提交
前言 学前后端也有一段时间了,一直没有时间整理一下前后端交互方面的知识,想着再回顾一下顺带着整理出自己的学习笔记.可能有些地方写的不是很好,欢迎批评指正!!! 目录 前言 一.AJAX是什么 二.AJ ...
最新文章
- linux查看网络带宽_每天一个Linux命令之~wget命令
- VMware Workstation下安装Linux系统
- Retrofit+RxJava+OkHttp项目中的使用
- ABP Framework 5.0 RC.1 新特性和变更说明
- 【ArcGIS遇上Python】Python批量将多个文件夹下的多个影像数据镶嵌至新栅格
- 如何使用Python操作MySQL数据库
- 华为正式宣布全场景AI计算框架MindSpore开源 降低AI开发门槛
- Oracle分析函数、多维函数和Model函数简要说明，主要针对BI报表统计
- Bailian2748 全排列【全排列】(POJ NOI0202-1750)
- java placeholder_java swing JTextField设置PlaceHolder
- xlrd，xlwt操作Excel实例
- jsp银行排队叫号系统
- docker安装redis并挂载配置文件
- 3月25日E盾网络验证最新修复一机一码E盾网络验证成品源码加密系统
- SEO新手一分钟入门教程
- SpringBoot + uni-app开发企业级图书商城系统
- Ubuntu 20.04制作本地源
- 20 C++ 秒数转换时分秒
- 计算机网络---Cisco Packet Tracer 实验
- 集成学习(二)——Bagging