SpringMVC(3)

通过上面的学习我们知道，默认情况下无论是Spring MVC还是SpringBoot返回的都是现在都是前后端分离的，后端只需要进行返回数据给前端数据即可

@Controller
public class UserController1 {@RequestMapping("/world")@ResponseBodypublic String run(@RequestParam("username") String username){return username;}
}
127.0.0.1:8080/world?username="李佳伟"后端就可以获取到username中的数据了

返回结果给前端:

1)向浏览器返回一个HTML界面

@RequestMapping("/CSS")@ResponseBody
public String GetHTML(String name){return "<h1>你好"+name+"</h1>";}
请求参数的数据类型Contnt-Type:text/html;charset=utf-8

2.给浏览器返回一个JSON格式的数据:

 @RequestMapping("/JS")@ResponseBodypublic Object GetJson(String name){HashMap<String,Object> map=new HashMap<>();map.put("name",name);map.put("currentTime", LocalDateTime.now());return map;}
浏览器上面输入:localhost:8080/JS?name=李佳伟
{"currentTime":"2022-07-17T12:30:34.76","name":"李佳伟"}

package com.example.demo;
import com.fasterxml.jackson.databind.ObjectMapper;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.annotation.PostConstruct;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.DataOutput;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
@Controller
public class UserController {@RequestMapping("/Java100")@ResponseBodypublic void run(String username,String password,Integer ClassID,Integer UserID,HttpServletResponse resp) throws IOException {ObjectMapper objectMapper=new ObjectMapper();User user=new User();user.setUserID(UserID);user.setClassID(ClassID);user.setUsername(username);user.setPassword(password);resp.setContentType("application/json;charset=utf-8");String html= objectMapper.writeValueAsString(user);resp.getWriter().write(html);}
}

实现一个简单的计数器:

前端Text.html: <form action="/sum" method="GET"><span>请输入数字1</span><input type="text" name="s1"><span>请输入数字2</span><input type="text" name="s2"><input type="submit" value="提交"></form>


@Controller
class UserController{@RequestMapping("/sum")@ResponseBodypublic String sum(Integer s1,Integer s2){return "<h1>结果最终为"+(s1+s2)+"</h1><br><a href='/Text.html'>点击回到上个界面</a>";}}

上面我们使用form表单给服务器发送一个GET请求的时候，我们使用Fidder抓包的结果是:自定义的参数放到了querystring里面

GET http://localhost:8080/add?num1=12&num2=23 HTTP/1.1
Host: localhost:8080
Connection: keep-alive
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="8"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.7271 SLBChan/103
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:8080/blog1.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9

当我们使用form表单发送一个POST请求的时候:

 <form action="/add" method="POST"><input type="text" name="num1"><input type="text" name="num2"><input type="submit" value="提交">

下面是给服务器发送的请求:(通过Fidder抓包)

POST http://localhost:8080/add HTTP/1.1
Host: localhost:8080
Connection: keep-alive
Content-Length: 13
Cache-Control: max-age=0
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="8"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:8080
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 SLBrowser/8.0.0.7271 SLBChan/103
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: navigate
Sec-Fetch-User: ?1
Sec-Fetch-Dest: document
Referer: http://localhost:8080/blog1.html
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9num1=2&num2=3

现在我们进行修改一下博客系统的前端页面:

1)小技巧:ctrl+a进行全选，然后ctrl+c进行复制，然后在进行点击SpringBoot项目里面的resource目录下的static目录，在按下crtl+v进行粘贴

2)jquery.getJSON("请求的地址url",{请求的参数}，function(data,status){}；请求成功之后的回调函数)

前端代码:通过ajax发送Http请求:

1)注意我们一定要在方法体内部获取UserName和Password的控件，获取控件里面的内容

2)注意括号的范围不要写错，看看下面Spring自动判空的一些类

  public static boolean hasLength(@Nullable String str) {return str != null && !str.isEmpty();}

   let button=document.querySelector("#submit");button.onclick=function(){//1先拿到用户名和密码控件var username=jQuery("#input1");var password=jQuery("#input2");console.log(username.val());console.log(password.val());
//jQuery里面填写的是id属性,我们可以通过username.val可以得到输入框里面的内容// 2进行非空校验if(jQuery.trim(username.val())==""){alert("请先输入用户名");username.focus();//光标设置到用户名输入框return;}if(jQuery.trim(username.val())==""){alert("请先输入密码");username.focus();return;}// 3发送ajax请求和后端进行交互jQuery.getJSON("/login",{"username":jQuery.trim(username.val()),"password":jQuery.trim(password.val()),//trim方法就是去掉里面的空格},function(data){if(data!=null&&data.succ==200){console.log("后端接口访问成功");if(data.state==1){alert("登陆成功");}else{alert(data.message);}}else{console.log("后端接口访问失败"+data.succ);}});//第一个参数表示请求的地址,第二个参数表示请求的参数,第三个参数表示服务器端返回的一个回调函数}

或者通过这种方式给后端发送AJAX：

 <input type="text" id="username"><div>用户名</div><input type="text" id="password"><div>密码</div><input type="button" value="开始进行登陆" id="Dclick">

<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<body><script>let button=document.querySelector("#Dclick");button.onclick=function(){var username=jQuery("#username");var password=jQuery("#password");console.log(username.val());console.log(password.val());if(jQuery.trim(username.val())==""){alert("请输入用户名");username.focus();return;}console.log("生命"+jQuery.trim(password.val())=="");if(jQuery.trim(password.val())==""){alert("请输入密码");password.focus();return;}jQuery.ajax({url:"hello",type:"POST",data:{"username":username.val(),"password":password.val()},success:function(result,status){console.log(result);console.log(status);}});
}

后端代码:

package com.example.demo;import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import java.util.HashMap;@Controller
public class UserController{@RequestMapping("/hello")@ResponseBodypublic HashMap<String,Object> Login(String username,String password){HashMap<String,Object> result=new HashMap<>();int state=200;//这个表示如果state=200表示访问这个方法是成功的int data=-1;//最终我们要在前端进行参数校验,data=1说明登录成功,data=-1说明登录失败String message="";if(StringUtils.hasLength(username)&&StringUtils.hasLength(password)){//此时发现username不为空,password不为空,况且username和password都等于特定的值,那么说明登陆成功if(username.equals("李佳伟")&&password.equals("12503487")){//说明用户名密码匹配登陆成功data=1;message="登陆成功";}else{//说明用户名密码不匹配,登陆失败message="用户名或者密码失败";}}else{//说明前端传递的username或者password等于空message="前段传递的用户名或者密码为空";}result.put("state",state);result.put("data",data);result.put("message",message);return result;}
}

1)我们可以进行打断点进行调试，比如说咱们输入了用户名和密码之后，点击提交，就会自动来到断点位置，来到了结果;

2)我们可以在Watch里面输入我们要观察的值，比如说我输入了一个data就会显示data具体的值

3)我们还可以点击Watch:输入JSON.parse(result)/JSON.stringfy(result)，就可以把result转化成JSON格式的数据(前提必须是我们输入用户名和密码点击提交之后获取到返回相应的数据(回调函数返回的是一个字符串)之后，才可以把返回的数据转化成JSON格式的字符串)------contentType:application/json;charset=utf-8;

JSON.stringify 方法用于将 JavaScript 值转换为 JSON 字符串，一般回调函数data传输回来的值是一个JSON格式的字符串

JSON.parse() 方法将JSON数据转换为 JavaScript 对象;

下面这个代码:前端给后端发送的数据是: application/x-www-form-urlencoded(假设前端给后端传递的格式数据是application/json;charset=utf-8，只写JSON.stringify(键值对字符串)还是不可以的，必须要指定前端向后端传递的格式的数据)

后端使用参数匹配的方式来进行接收，然后后端给前端返回的数据是一个JSON格式的字符串，但是前段回调函数接受到的是一个字符串，我们可以通过JSON.stringify(data)转化成JSON格式的字符串:

后端代码框架:

1)先看看用户名和密码是否为空，不为空在进行下一步，判断一下用户名和密码是否匹配，匹配登陆成功，不匹配登陆失败

2)如果为空直接登陆失败:
前端传递发送
前端:ajax:
application/x-www-urlencoded
data:{"username":username,"password":password};username="aaa"&password="bbb"后端:就是这么接受application/x-www-urlencoded
@requestMapping("/路由")
public void run(String username,String password){
}
前端给后端发送数据:ajax({
contentType:"application/json;charset=utf-8",
data:JSON.stringfy({"username":username,"password",password});
});{"username":"aaa","password":"bbb"}后端接收数据:
@RequestMappling("/路由")
public void run(@ResponseBody User user
/HashMap<String,String> map
/String username,String Password){
方法体
}
//是用这种方式无法接受到后端传递的参数
@Controller
public class UserController1 {@RequestMapping("/hhhhh")@ResponseBodypublic String run(@RequestBody String username,@RequestBody String password){return username+password;}
}

这里面要注意一个问题:

在Spring里面，通过resp.setContentType进行设置是不会进行生效的:

前端代码:
let button=document.querySelector("#submit");let username=document.querySelector("#input1");let password=document.querySelector("#input2");button.onclick=function(){// console.log(username.value);// console.log(password.value);if(username.value==""||password.value==""){alert("当前的用户名或者密码是空");return;}$.ajax({type:"GET",url:"login?"+"username="+username.value+"&password="+password.value,success:function(data,status){console.log(data);console.log(status);}});}
后端代码:
@Controller
public class UserController {@RequestMapping(value="/login",produces = "text/html;charset=utf-8")@ResponseBodypublic String start(String username, String password, HttpServletResponse resp) throws IOException {return "<h1>"+username+""+password+"</h1>";}@RequestMapping("/cat")@ResponseBodypublic String start(String username,String password){return username+password;}}

SpringMVC中Controller处理response.setContentType() - 知乎

请求转发和请求重定向(不能加@ResponseBody)

1)return不光可以返回一个视图，还可以实现跳转，跳转的方式有两种:请求转发和请求重定向，既然是实现跳转，那么返回的就是一个页面，就不能加上@ResponseBody注解

2)forward是请求转发:是服务器干的----一次请求:服务器返回的格式的数据就是text/html;charset=utf-8，返回的就是一个完整的HTML

3)redirect是请求重定向:是客户端自己干的----两次HTTP请求
//1请求转发:
@Controller
public class UserController2 {@RequestMapping("/forward")public String run(){return "forward:/blog.html";}
}
//2请求转发
@Controller
public class UserController2 {@RequestMapping("/forward2")public void start(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.getRequestDispatcher("/blog.html").forward(req,resp);}}
//3.请求转发:
@Controller
public class UserController2 {@RequestMapping("/forward2")public String start(){return "/Text.html";}
}//4这是请求重定向:
@Controller
public class UserController3 {@RequestMapping("/redriect")public String start(){return "redirect:/blog.html";}
}
//resp.sendRedirect("/blog.html");

他们之间有什么区别？

1)请求转发:这是发生在服务器的内部，当我们的服务器端收到客户端的请求的时候，会先将请求转发给目标地址，再将目标地址返回的结果转发给客户端，电脑搜索栏里面的URL地址是不会发生改变的(浏览器啥也不用干)------是服务器的行为

2)请求重定向:让浏览器重新请求另一个地址，服务器端将请求重新定义到要访问的地址上面，URL地址会发生改变(浏览器自己要干活)(和直接访问浏览器地址是一样的)

3)使用请求转发有可能外部资源时会丢失的，是会访问不到的，但是请求重定向是直接重定向到URL地址了，所以请求重定向和直接访问目标地址的效果是一模一样的，所以是不会存在外部资源丢失的情况

如果说请求转发的资源和转发的页面不在同一个目录下，就会造成外部资源不可以进行访问

4)数据共享不同:请求转发只需要进行一次请求，但是请求重定向是多次请求，因为我们的请求转发是服务器端进行实现的因此在整个交互过程中使用的都是同一个HttpServletRequest和一个HttpServletResponse对象，因此在整个请求的过程中，请求和返回的数据是共享的，但是请求重定向是客户端发送起的两次完全不一样的请求，所以两次请求的数据是不同的

4)Spring是整个Spring框架体系最老的技术了，是整个Spring体系的一个基础，在18年，19年已经不适用了,他是一个IOC框架;用Spring Boot是为了快速开发Spring的一个项目，并不是一个新的技术，它的存在是为了更快更方便的创建Spring，Spring是核心，SpringBoot是辅助核心能够更方便的开发的;

5)Spring MVC使Spring里面的一个模块，spring是有很多模块的，但是Spring MVC只是里面的一个WEB模块，当我们使用HTTP，在浏览器输入地址之后，使用POSTman之后，可以直接映射到我们的程序里面；

@Controller
@RequestMapping("/User")
public class TextController {@RequestMapping("/Java")public String forward(HttpServletResponse resp) throws IOException {// resp.sendRedirect("blog3.html");return "forward:/blog3.html";}@RequestMapping("CC")public String preforward(){return "redirect:/blog3.html";}
}
当我们去进行访问:127.0.0.1:8080/User/Java就会进行请求转发,况且是访问不到外部资源的
但是说我们把上面的User去掉,访问地址127.0.0.1:8080/Java就可以进行访问外部资源了

1)补充一个组合注解:@RestController=@Controller+@ResponseBody

2)@ResponseBody返回的值如果是字符串会转换成text/html,如果返回的是对象那么会转换成application/json返回给前端

3)@ResponseBody可以用来修饰方法或者用来修饰类，修饰类表示类中的所有方法都会返回html或者json，而不是视图

4)Lombok项目是一个java库，它可以自动插入到编辑器和构建工具中，增强java的性能。不要再写另一个getter或equals方法，只要有一个注释，你的类就有一个功能齐全的构建器，自动记录变量等等。

SpringMVC(3)相关推荐

【SpringMVC】概述
概述: SpringMVC:是基于spring的一个框架, 实际上就是spring的一个模块, 专门是做web开发的. 理解是servlet的一个升级 Sp ...
【SpringMVC】基本概念
SpringMVC的基本概念三层架构我们的开发一般都是基于c/s或者b/s架构.在JavaEE开发中,几乎全都是基于B/S架构开发.在B/S架构中,系统标准的三层架构包括:表现层,业务层,持久层. ...
SSM框架整合（Spring+SpringMVC+MyBatis）
输出结果 1.Maven Web项目创建之前有写过Eclipse+Maven创建web项目的帖子,如果需要,请参考这里写链接内容创建好项目之后因为入下图: 2.SSM整合 2.1 引入需要的JAR ...
SpringBoot-web开发(四): SpringMVC的拓展、接管（源码分析）
[SpringBoot-web系列]前文: SpringBoot-web开发(一): 静态资源的导入(源码分析) SpringBoot-web开发(二): 页面和图标定制(源码分析) SpringBo ...
SpringMVC——通俗易懂讲讲Ajax~
聊聊Ajax 一.什么是Ajax 二.iframe标签简单伪造Ajax 三.Ajax的实现 1. 基本概念的了解 Ajax的核心是什么? XMLHttpRequest是什么? Ajax数据传输的数据格 ...
Jackson、FastJson快速入门(整合SpringMVC)
目录 1. 什么是 JSON 2. JSON 语法规则 3. JSON 与 JS 对象的关系 4. JSON 和 JS 对象互转 5. Jackson-数据格式转换 1. 环境搭建 2. 对象转jso ...
RESTful风格及其SpringMVC实现
目录 1.RESTful概念 2.RESTful功能 3.对比:传统方式操作资源 4.SpringMVC实现传统方式操作资源 5.使用RestFul操作资源 6.SpringMVC实现RESTful操 ...
使用注解开发SpringMVC详细配置教程
目录 1.使用注解开发SpringMVC 1.新建一个普通的maven项目,添加web支持 2.在pom.xml中导入相关依赖 3.配置web.xml 4.编写SpringMVC配置文件 1. 自动扫 ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
SpringMVC工作环境搭建配置文件
web.xml配置在服务器端容器启动之前加载配置文件的顺序:context-param>listener>filter>servlet //容器配置application上下文的时 ...

SpringMVC(3)

通过上面的学习我们知道，默认情况下无论是Spring MVC还是SpringBoot返回的都是现在都是前后端分离的，后端只需要进行返回数据给前端数据即可

返回结果给前端:

1)向浏览器返回一个HTML界面

2.给浏览器返回一个JSON格式的数据:

实现一个简单的计数器:

上面我们使用form表单给服务器发送一个GET请求的时候，我们使用Fidder抓包的结果是:自定义的参数放到了querystring里面

当我们使用form表单发送一个POST请求的时候:

下面是给服务器发送的请求:(通过Fidder抓包)

现在我们进行修改一下博客系统的前端页面:

前端代码:通过ajax发送Http请求:

1)注意我们一定要在方法体内部获取UserName和Password的控件，获取控件里面的内容

2)注意括号的范围不要写错，看看下面Spring自动判空的一些类

或者通过这种方式给后端发送AJAX：

后端代码:

1)我们可以进行打断点进行调试，比如说咱们输入了用户名和密码之后，点击提交，就会自动来到断点位置，来到了结果;

2)我们可以在Watch里面输入我们要观察的值，比如说我输入了一个data就会显示data具体的值

JSON.stringify 方法用于将 JavaScript 值转换为 JSON 字符串，一般回调函数data传输回来的值是一个JSON格式的字符串

JSON.parse() 方法将JSON数据转换为 JavaScript 对象;

下面这个代码:前端给后端发送的数据是: application/x-www-form-urlencoded(假设前端给后端传递的格式数据是application/json;charset=utf-8，只写JSON.stringify(键值对字符串)还是不可以的，必须要指定前端向后端传递的格式的数据)

后端使用参数匹配的方式来进行接收，然后后端给前端返回的数据是一个JSON格式的字符串，但是前段回调函数接受到的是一个字符串，我们可以通过JSON.stringify(data)转化成JSON格式的字符串:

后端代码框架:

1)先看看用户名和密码是否为空，不为空在进行下一步，判断一下用户名和密码是否匹配，匹配登陆成功，不匹配登陆失败

2)如果为空直接登陆失败:

请求转发和请求重定向(不能加@ResponseBody)

SpringMVC(3)相关推荐

最新文章

热门文章