前文
第一篇
第二篇
基础操作
上篇博客我们知道了如何获取Session内容以及传输数组,json,对象,集合等的传送和获取
这节课我们可以从上篇的结束开始,其实Spring对Session进行了进一步的封装,我们可以使用其他的方式也可以读取和设置Session(更简洁的方式)
1.直接使用HTTPSession
@RequestMapping("/r16") public String getR(HttpSession session) { String name = (String) session.getAttribute("name"); return "name:"+name; }
2.使用注解方式
@RequestMapping("/r17") public String getR2(@SessionAttribute("name")String name) { return "name:"+name; }
3.获取Header信息
@RequestMapping("/r18") public String getHeader(HttpServletRequest request){ String UserAgent = request.getHeader("User-Agent"); return "获取信息UserAgent:"+UserAgent; }
4.@Controller与@RestController的区别与演示
我们可以理解为@RestController = @Controller + @ResponseBody
这里我们又要谈到MVC的事情了
我们知道这里的C指的是Controller
@RestController是一个复合注解
@Controller 含义是定义一个控制器,交给Spring管理
@ResponseBody 表示返回的是一个非视图内容,可以是html/text内容
我们可以理解为Controller默认是返回一个视图html页面
然后加上@ResponseBody注解时返回一个html/text内容
所以我们之前使用@RestController返回的就是一个text内容
我们可以先尝试一下
我们如果直接使用RequestController来修饰类,这里显示就是默认使用text表示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>这是一个测试</h1> </body> </html>@RequestMapping("/r19") public String getIndex(){ return "index_test.html"; }
这里如果我们去掉@RequestBody这里就可以看到一个正常的html页面
@Controller public class RequestController1 { @RequestMapping("/r20") public String hello() { return "/index_test.html"; }
这里如果使用的@Controller就是直接返回一个html页面,如果找不到文件就直接报错
@Controller public class RequestController1 { @RequestMapping("/r20") public String hello() { return "/idex_test.html"; } }
我们只是将文件名修改了一下,并没有返回字符串而是直接报错了
注:这里如果放的是html代码也会被识别
5.返回json对象
@RequestMapping("r21") @ResponseBody public HashMap<String,String> getJson() { HashMap<String,String> map = new HashMap<>(); map.put("a","b"); map.put("c","d"); map.put("e","f"); return map; }注意:这里的@RequestBody一定要加上
这里是我们抓包的结果
6.设置状态码
其实我们可以看到平常200OK的页面情况可以转成任意的状态码
这里我们也可以侧面知道状态码是不一定靠谱的
这里其实是设置成功的,却返回了这个内容
这也就意味着我们设置header中的任何字段其实都是可以获取的
2.简单前后端交互小练习
1.加法器
开始是这个页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="calc/sum" method="post"> <h1>计算器</h1> 数字1：<input name="num1" type="text"><br> 数字2：<input name="num2" type="text"><br> <input type="submit" value=" 点击相加 "> </form> </body> </html>我们希望可以得到返回一个结果的页面
这里涉及到的最重要的就是设计URL,设计参数等等,也就是接口设计
我们这里设计URL为 /calc/sum
参数则是两个Integer数字,接下来我们开始从后端实现接口
@RequestMapping("/calc") @RestController public class CalcController { @RequestMapping("/sum") public String sum(Integer num1, Integer num2) { Integer sum = num1 + num2; return "计算结果是"+sum; }
2.实现登录页面的跳转
设计接口
后端只负责返回数据
首先我们这里是为了实现一个html页面的跳转,设置账号密码都是admin,最后来进行跳转
输入成功则
输入失败则
我们先来实现后端代码
1.设计接口
对于第一个前端页面
设置url : /user/login
参数 userName,password
返回 true false 表示密码正确或者失败
对于第二个前端页面
url:/user/index
无参数
返回值是userName
2.编写代码
后端主要是获取两个输入框中的值进行判断,然后提供一个用户名信息
所以这里我们使用session来进行传递,session进行获取就行
后端代码
@RestController @RequestMapping("/user") public class UserController { @RequestMapping("/login") public Boolean login(String userName, String password, HttpSession session){ if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) { return false; } //判断账号密码是否正确 if("admin".equals(userName) && "admin".equals(password)) { //设置Session session.setAttribute("userName",userName); return true; } return false; } @RequestMapping("/index") public String getUserName(@SessionAttribute("userName") String userName) { return userName; } }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> </head> <body> <h1>用户登录</h1> 用户名：<input name="userName" type="text" id="userName"><br> 密码：<input name="password" type="password" id="password"><br> <input type="button" value="登录" onclick="login()"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> function login() { $.ajax({ url:"user/login", type:"post", data:{ userName:$("#userName").val(), password:$("#password").val() }, //http响应成功回调函数 success:function(result){ if(result==true){ location.href="index.html" }else { alert("用户名或密码错误"); } } }); } </script> </body> </html>另一个页面只需要接收返回数据即可
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>用户登录首页</title> </head> <body> 登录人: <span id="loginUser"></span> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script> $.ajax({ url:"user/index", type:"get", success:function (result){ $("#loginUser").text(result) } }); </script> </body> </html>然后我们就可以得到想要的结果了
