美文网首页
前端与spring交互数据的处理和接收基础方式

前端与spring交互数据的处理和接收基础方式

作者: 青色沙丘 | 来源:发表于2022-04-22 11:33 被阅读0次

1.Query Params传参方式

query params就是最简单的问号传参方式,而spring接受参数方式有以下几种不需要额外第三方包。

  • 支持类型: url
  • 支持请求类型: get
  • 支持的Content-Type: all
  • 请求示例:/test/get?id=12345
@RestController
@RequestMapping("/test")
public class TestController {
    private static Logger log = LogManager.getLogger(TestController.class);

    @RequestMapping(value = "/get", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public ResultVO getInfo(String id, @RequestParam("id") String tid, HttpServletRequest request) {


        String rid = request.getParameter("id");

        log.info("String id:"+id+";@RequestParam(\"id\"):"+tid+";request.getParameter:"+rid);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
}
/* PS:
new ResultVO(ResultStatusCode.SUCCESS)是自己封装的JSON对象和枚举,就不展示了。
Controller使用了@RestController这个是只返回json数据不能跳转页面,
@Controller是能跳转页面默认不返回json,需要在对应的方法加上@ResponseBody注解。
@RequestMapping 同时支持get和post,没做区分。
区分的话自主控制@RequestMapping (value =  "/get" , method = {RequestMethod. POST ,RequestMethod. GET })
*/

前端传参:


image.png

后台接收:


image.png

2.占位符传参方式

统一资源定位符(又称URL)是一种资源命名或定位格式,用于指定或寻址资源。 URL在Web上非常流行,在Web上使用URL格式寻址或标识网站和Web资源。
2000年Roy Fielding博士在其博士论文中提出REST(Representational State Transfer)风格的软件架构模式后,REST就基本上迅速取代了复杂而笨重的SOAP,成为Web API的标准了。
RESTful作为目前最流行的 API 设计规范,一定有着它独有的魅力:强大、简介、易上手。

  • 支持类型: url
  • 支持请求类型: get
  • 支持的Content-Type: all
  • 请求示例:/test/get/{id}
    @RequestMapping(value = "/get/{id}", produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
    public ResultVO getInfoPath(@PathVariable("id") String id) {

        log.info("String id:"+id);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

/*
PS:这种RESful的API设计规范确实有它的独到之处,作为互联网展示信息来说它是非常简介好用的。
但是如果对企业应用的增删改来说,它的安全性不友好了。
如:post提交修改信息时修改地址栏占位符修改了其他数据的信息,/update/user/0001,body中包含要修改的用户数据,地址栏直接改为/update/user/0002是不是也把0002用户的信息也修改了呢?
如果修改密码重置密码也使用RESful占位符的设计,那只要登录的用户就可以把其他用户密码给修改或重置了。这里假设的是稍微有点网络知识的人,要说懂开发会debug的,抓包的,还会http测试软件和发包的人
让他来搞破坏找漏洞还是很容易的。
*/

前端传参:


image.png

后台接收:


image.png

3.表单提交

以前的form表单和formData是ajax2.0(XMLHttpRequest Level2)新提出的接口,利用FormData对象可以将form表单元素的name与value进行组合,实现表单数据的序列化。
而x-www.form-urlencoded是post默认数据传输格式,跟Query Params传参方式一样。

  • 支持类型: Body
  • 支持请求类型: Post/Put/Delete/Patch
  • 支持的Content-Type: form-data,x-www.form-urlencoded
  • 请求示例: 好几种
    @RequestMapping(value = "/add", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO add(String name, @RequestParam("name") String rpname,String age, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");

        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
//文件流和字段
    @RequestMapping(value = "/addFile", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUserFile(String name, @RequestParam("name") String rpname, String age, MultipartFile pic, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");
        log.info("pic:"+pic.getSize());
        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

    @RequestMapping(value = "/addUser", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUser(User user,HttpServletRequest request) {
        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }
//PS:对象接收时,变量名不影响接收,不需要user.name,不要加@RequestBody,form表单不是json对象。

1.参数值接收:

前端传参:


image.png

后端接收:


image.png

2.对象接收:

前端传参:


image.png

后端接收:


image.png image.png

3.文件流和参数对象接收:

前端传参:


image.png

后端接收:


image.png

前端传参:


image.png
后端接收:
image.png
image.png

4.json对象接收!!!!注意这个是json对象,不是json字符串

ajax/axios传输json对象,适用于GET和POST请求,且此时contentType必须为application/x-www-form-urlencoded; charset=UTF-8,ajax会自动将json对象转化为&连接的key=value格式的数据。axios需要指定传参params,而GET请求就跟Query Params传参方式一样的,POST请求就放入post请求体中。

  • 支持类型: Body
  • 支持请求类型: Get/Post/Put/Delete/Patch
  • 支持的Content-Type: application/x-www-form-urlencoded; charset=UTF-8
  • 请求示例: 好几种
    @RequestMapping(value = "/addUser", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    public ResultVO addUser(User user, HttpServletRequest request) {
        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }


    @RequestMapping(value = "/addJSONObj", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    @ResponseBody
    public ResultVO addJSON(String name, @RequestParam("name") String rpname, String age, @RequestParam("age") String rpage, HttpServletRequest request) {

        String rname = request.getParameter("name");
        String rage = request.getParameter("age");
        log.info("String name:" + name + ";@RequestParam(\"name\"):" + rpname + ";request.getParameter:" + rname);
        log.info("String age:" + age + ";@RequestParam(\"age\"):" + rpage + ";request.getParameter:" + rage);

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

前端传参:

image.png
image.png
image.png
后台接收:这里要注意了,传json对象后台是对嵌套json对象不友好,要是有嵌套得自己处理很麻烦,所以传输json对象一般是简单json对象
image.png

5.json字符串接收!!!!注意这个是json字符串,不是json对象别弄混了,前端要把对象转字符串的。

      ajax/axios传输json字符串,是前端js把json对象字符串序列化到内存然后以http协议通过网络传输到后台,而spring使用网络套接字把传过来的序列化的json对象进行反序列化转换为java对象使用注解@RequestBoydy。而以前使用java原生HttpServlet 需要通过request.getInputStream()获取数据然后使用JSONObject来反序列化。

ajax需要自己转字符串,asios使用data传参会默认给转成json字符串

Servlet的框架是由两个Java包组成:javax.servlet和javax.servlet.http。 在javax.servlet包中定义了所有的Servlet类都必须实现或扩展的的通用接口和类,在javax.servlet.http包中定义了采用HTTP[通信协议]的HttpServlet类。spring也是基于Servlet的框架的

什么是序列化和反序列化
对象的序列化就是把对象转化成字节序列进行发送、存储,反序列化在接收和读取的时候把字节序列转化成对象。

  • 支持类型: Body
  • 支持请求类型: Post/Put/Delete/Patch
  • 支持的Content-Type: application/json; charset=UTF-8
  • 请求示例: 好几种
    @RequestMapping(value = "/addJSONStr", produces = MediaType.APPLICATION_JSON_UTF8_VALUE, method = RequestMethod.POST)
    @ResponseBody
    public ResultVO addJSONStr(@RequestBody User user, HttpServletRequest request) {

        log.info("String user:" + user.toString());

        return new ResultVO(ResultStatusCode.SUCCESS);
    }

前端传参:


image.png image.png

后台接收:这是json字符串用对象接收,也可以使用Map等。springboot项目添加spring-boot-starter-web依赖,默认提供了Jackson用于解析json,da大部分人使用om.alibaba.fastjson

通过关键字段@RequestBody,标明这个对象接收json字符串,然后自己使用Gson、fastjson等自己解析转对象

image.png
通过@RequestBody注解对象接收,则需要添加一些json解析器,Spring Boot做了自动化配置,只需要添加jackson、gson、fastjson依赖就起作用,但是如果对时间转换则需要自己写个Bean。转载至:springboot中的json、gson、fastjson如何使用与日期格式转换 image.png
image.png

相关文章

  • 前端与spring交互数据的处理和接收基础方式

    1.Query Params传参方式 query params就是最简单的问号传参方式,而spring接受参数方式...

  • 第二集 初识php

    今天任务: php基本语法,处理数据方式,流程,与数据库交互,与前端交互。 将澳洲源码导入,开始尝试阅读,并在本地...

  • FLASK AJAX前后端数据交互

    基础知识 POST GET AJAX前端传送和接收 Flask后端接收处理和返回

  • 3、Django获取前端接口传参

    我们日常应用中,前端通过接口和后端进行数据交互,后端接收到前端的传参后,根据参数进行对应的逻辑处理,然后返回对应的...

  • 前端ajax与后端Spring MVC控制器数据交互方式

    前端ajax与后端Spring MVC控制器有以下五种数据交互方式。(前台使用了dhtmlxGrid,后端使用了f...

  • 前端体系

    B/S架构 和 C/S架构 前端 页面加载 交互 后端 接收请求 处理请求 响应请求 MVC、链式处理、模板引擎 ...

  • Vue项目使用WebSocket技术

    【基础】为什么使用WebSocket? 前端和后端的交互模式最常见的就是前端发数据请求,后端响应传输数据之前端进行...

  • protobuf基础教程

    前端protobuf入门 此文只讲述web前端与后端使用protobuf进行数据交互的基础与入门教学,更加详细的内...

  • 学习前端总的方法

    前端主要的功能就是用来展示数据的和与用户进行交互的。 所以,前端最主要的部分就是数据的展示、事件的处理、外加一点逻...

  • 三层架构

    UI(表示层): 主要是指与用户交互的界面.用于接收用户输入的数据和显示处理后用户需要的数据. BLL(业务逻辑层...

网友评论

      本文标题:前端与spring交互数据的处理和接收基础方式

      本文链接:https://www.haomeiwen.com/subject/bzriertx.html