通過上面的學習我們知道，默認情況下無論是Spring MVC還是SpringBoot返回的都是現(xiàn)在都是前后端分離的，后端只需要進行返回數(shù)據(jù)給前端數(shù)據(jù)即可

@Controller public class UserController1 {@RequestMapping("/world")@ResponseBodypublic String run(@RequestParam("username") String username){return username;} } 127.0.0.1:8080/world?username="李佳偉"后端就可以獲取到username中的數(shù)據(jù)了

返回結果給前端:

1)向瀏覽器返回一個HTML界面?

@RequestMapping("/CSS")@ResponseBody public String GetHTML(String name){return "<h1>你好"+name+"</h1>";} 請求參數(shù)的數(shù)據(jù)類型Contnt-Type:text/html;charset=utf-8

2.給瀏覽器返回一個JSON格式的數(shù)據(jù):

@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);} }

?

實現(xiàn)一個簡單的計數(shù)器:

前端Text.html: <form action="/sum" method="GET"><span>請輸入數(shù)字1</span><input type="text" name="s1"><span>請輸入數(shù)字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表單給服務器發(fā)送一個GET請求的時候，我們使用Fidder抓包的結果是:自定義的參數(shù)放到了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表單發(fā)送一個POST請求的時候:

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

下面是給服務器發(fā)送的請求:(通過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

現(xiàn)在我們進行修改一下博客系統(tǒng)的前端頁面:

1)小技巧:ctrl+a進行全選，然后ctrl+c進行復制，然后在進行點擊SpringBoot項目里面的resource目錄下的static目錄，在按下crtl+v進行粘貼

2)jquery.getJSON("請求的地址url",{請求的參數(shù)}，function(data,status){}；請求成功之后的回調函數(shù))

前端代碼:通過ajax發(fā)送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發(fā)送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);}});//第一個參數(shù)表示請求的地址,第二個參數(shù)表示請求的參數(shù),第三個參數(shù)表示服務器端返回的一個回調函數(shù)}

或者通過這種方式給后端發(fā)送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;//最終我們要在前端進行參數(shù)校驗,data=1說明登錄成功,data=-1說明登錄失敗String message="";if(StringUtils.hasLength(username)&&StringUtils.hasLength(password)){//此時發(fā)現(xiàn)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格式的數(shù)據(jù)(前提必須是我們輸入用戶名和密碼點擊提交之后獲取到返回相應的數(shù)據(jù)(回調函數(shù)返回的是一個字符串)之后，才可以把返回的數(shù)據(jù)轉化成JSON格式的字符串)------contentType:application/json;charset=utf-8;

JSON.stringify 方法用于將 JavaScript 值轉換為 JSON 字符串，一般回調函數(shù)data傳輸回來的值是一個JSON格式的字符串

JSON.parse() 方法將JSON數(shù)據(jù)轉換為 JavaScript 對象;

下面這個代碼:前端給后端發(fā)送的數(shù)據(jù)是:?application/x-www-form-urlencoded(假設前端給后端傳遞的格式數(shù)據(jù)是application/json;charset=utf-8，只寫JSON.stringify(鍵值對字符串)還是不可以的，必須要指定前端向后端傳遞的格式的數(shù)據(jù))

后端使用參數(shù)匹配的方式來進行接收，然后后端給前端返回的數(shù)據(jù)是一個JSON格式的字符串，但是前段回調函數(shù)接受到的是一個字符串，我們可以通過JSON.stringify(data)轉化成JSON格式的字符串:

后端代碼框架:

1)先看看用戶名和密碼是否為空，不為空在進行下一步，判斷一下用戶名和密碼是否匹配，匹配登陸成功，不匹配登陸失敗

2)如果為空直接登陸失敗:

前端傳遞發(fā)送 前端: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){ } 前端給后端發(fā)送數(shù)據(jù):ajax({ contentType:"application/json;charset=utf-8", data:JSON.stringfy({"username":username,"password",password}); });{"username":"aaa","password":"bbb"}后端接收數(shù)據(jù): @RequestMappling("/路由") public void run(@ResponseBody User user /HashMap<String,String> map /String username,String Password){ 方法體 } //是用這種方式無法接受到后端傳遞的參數(shù) @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() - 知乎

?請求轉發(fā)和請求重定向(不能加@ResponseBody)

1)return不光可以返回一個視圖，還可以實現(xiàn)跳轉，跳轉的方式有兩種:請求轉發(fā)和請求重定向，既然是實現(xiàn)跳轉，那么返回的就是一個頁面，就不能加上@ResponseBody注解

2)forward是請求轉發(fā):是服務器干的----一次請求:服務器返回的格式的數(shù)據(jù)就是text/html;charset=utf-8，返回的就是一個完整的HTML

3)redirect是請求重定向:是客戶端自己干的----兩次HTTP請求

//1請求轉發(fā): @Controller public class UserController2 {@RequestMapping("/forward")public String run(){return "forward:/blog.html";} } //2請求轉發(fā) @Controller public class UserController2 {@RequestMapping("/forward2")public void start(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.getRequestDispatcher("/blog.html").forward(req,resp);}} //3.請求轉發(fā): @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");

他們之間有什么區(qū)別？

1)請求轉發(fā):這是發(fā)生在服務器的內部，當我們的服務器端收到客戶端的請求的時候，會先將請求轉發(fā)給目標地址，再將目標地址返回的結果轉發(fā)給客戶端，電腦搜索欄里面的URL地址是不會發(fā)生改變的(瀏覽器啥也不用干)------是服務器的行為

2)請求重定向:讓瀏覽器重新請求另一個地址，服務器端將請求重新定義到要訪問的地址上面，URL地址會發(fā)生改變(瀏覽器自己要干活)(和直接訪問瀏覽器地址是一樣的)

3)使用請求轉發(fā)有可能外部資源時會丟失的，是會訪問不到的，但是請求重定向是直接重定向到URL地址了，所以請求重定向和直接訪問目標地址的效果是一模一樣的，所以是不會存在外部資源丟失的情況

如果說請求轉發(fā)的資源和轉發(fā)的頁面不在同一個目錄下，就會造成外部資源不可以進行訪問

4)數(shù)據(jù)共享不同:請求轉發(fā)只需要進行一次請求，但是請求重定向是多次請求，因為我們的請求轉發(fā)是服務器端進行實現(xiàn)的因此在整個交互過程中使用的都是同一個HttpServletRequest和一個HttpServletResponse對象，因此在整個請求的過程中，請求和返回的數(shù)據(jù)是共享的，但是請求重定向是客戶端發(fā)送起的兩次完全不一樣的請求，所以兩次請求的數(shù)據(jù)是不同的

4)Spring是整個Spring框架體系最老的技術了，是整個Spring體系的一個基礎，在18年，19年已經不適用了,他是一個IOC框架;用Spring Boot是為了快速開發(fā)Spring的一個項目，并不是一個新的技術，它的存在是為了更快更方便的創(chuàng)建Spring，Spring是核心，SpringBoot是輔助核心能夠更方便的開發(fā)的;

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就會進行請求轉發(fā),況且是訪問不到外部資源的 但是說我們把上面的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)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。