前后端交互的几种方式

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 主要用于后端向前端传。方法可以自行百度。下面开始正文。

前后端交互的几种方法

第一种:使用HttpServletRequest 后端接受前端传来的session信息

测试:下面这种方法获得的是登录的用户,登录的User发送了http请求。

数据库原始数据:
在这里插入图片描述
使用postman传Json参数,我们用001用户登录。
在这里插入图片描述

运行结果:
登录成功
登录成功,我们再看delete方式测试输出的UserId

 	@RequestMapping(value = "/User/getAllUser", method = RequestMethod.DELETE)
    @ResponseBody
    private 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请求:
在这里插入图片描述

运行结果:
在这里插入图片描述

还有几种封装过的方法,比较复杂,有机会学习了再更新。

  • 29
    点赞
  • 240
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值