• Spring MVC下篇

    书接上回Spring MVC上篇,前面介绍了Spring MVC的服务器如何获得用户的请求,那么今天就来介绍一下服务器如何将响应返回给客户端!

    在这里插入图片描述

    目录

    🍓 3.服务器将结果返回给用户（前端）

    🍉 3.1.返回一个静态页面

    先创建一个静态页面test.html:
    在这里插入图片描述

    <body>
    <h1>Hello,Testh1>
body>

    • 1
    • 2
    • 3

    写服务器端的代码:

    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class TestController {

    @RequestMapping("/hello")
    public String func(){
        return "/test.html";
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    此时由于没有加@ResponseBody注解,因此就会先从静态页面里面去找有没有这个页面存在,发现有就会直接返回这个静态页面了!

    在这里插入图片描述
    在这里插入图片描述
    响应里面正是这个页面!

    🍉 3.2.返回 text/html

    如果加上@ResponseBody就会直接返回字符串,而不是页面里面的内容了

    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RequestMapping;
@ResponseBody
@Controller
public class TestController {

    @RequestMapping("/hello")
    public String func(){
        return "/test.html";
    }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    在这里插入图片描述
    在这里插入图片描述

    🍉 3.3.返回JSON对象

    这里实现一个登录功能,前端使用ajax来发送请求,后端返回json给前端
    先来写一个前端页面:

    
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">
    <script src="js/jquery.min.js">script>
    <title>Documenttitle>
    <script>
        // ajax 提交
        function mysub(){
            // 1.判空
            var username = jQuery("#username").val();
            var password = jQuery("#password").val();
            if(jQuery.trim(username)==""){
                alert("请先输入用户名！");
                username.focus(); // 光标重制到此元素
                return;
            }
            if(jQuery.trim(password)==""){
                alert("请先输入密码！");
                password.focus(); // 光标重制到此元素
                return;
            }
            jQuery.ajax({
                url:"/login",
                type:"POST",
                contentType:"application/json",
                data:JSON.stringify({"username":username,
            "password":password}),
                success:function(result){
                    alert(JSON.stringify(result));
                }
            });
        }
    script>
head>
<body>
<div style="text-align: center;">
    <h1>登录h1>
    用户：<input id="username">
    <br>
    密码：<input id="password" type="password">
    <br>
    <input type="button" value=" 提交 " onclick="mysub()" style="margin-top: 20px;margin-left: 50px;">
div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    
import com.example.demo.model.User;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;

import java.util.HashMap;

@ResponseBody
@Controller
public class TestController {

    @RequestMapping("/login")
    public HashMap<String, Object> login3(@RequestBody User userInfo) {
        HashMap<String, Object> result = new HashMap<String, Object>();
        int state = 200;
        int data = 0; // 等于 1，登录成功，否则登录失败
        String msg = "未知错误";
        if (StringUtils.hasLength(userInfo.getUsername()) && StringUtils.hasLength(userInfo.getPassword())) {
            if (userInfo.getUsername().equals("zhangsan") && userInfo.getPassword().equals("123")) {
                data = 1;
                msg = "";
            } else {
                msg = "用户名或密码失败！";
            }
        } else { // 参数为空
            msg = "非法参数";
        }
        result.put("state", state);
        result.put("data", data);
        result.put("msg", msg);
        return result;
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34

    再访问这个页面:
    在这里插入图片描述

    在这里插入图片描述
    这里后端是需要使用@RequestBody来进行接收参数的

    🍉 3.4.请求转发或请求重定向

    在Java中实现页面跳转就是这两种方式:litchi:

    🍫 请求转发:

    两种方式:

    1. 直接返回一个静态页面在这里插入图片描述
    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class TestController {
    @RequestMapping("fw")
    public String myForward(){
        return "forward:/test.html";
    }
}    

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述
    请求转发其实是服务器端的行为(这里forward也是可以省略的)!
    2. 使用request对象来进行跳转

    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


//@ResponseBody
@Controller
public class TestController {
    @RequestMapping("fw1")
    public void myForward1(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.getRequestDispatcher("/test.html").forward(request,response);
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    🍫 请求重定向

    1. 访问静态页面
    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
public class TestController {

    @RequestMapping("/rd")
    public String myRedirect(){
        return "redirect:/test.html";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    在这里插入图片描述
    在这里插入图片描述
    发现这里的请求是有两个的,直接访问rd,就是一个302的临时重定向,然后页面就会跳转到test页面了!
    2. 使用response对象来进行跳转

    import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


//@ResponseBody
@Controller
public class TestController {
    @RequestMapping("rd1")
    public void myRedirect1(HttpServletResponse response) throws IOException {
        response.sendRedirect("test.html");
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述
    也是同样的效果!

    🍫 请求转发和请求重定向的区别

    • 定义不同:请求转发是发生在服务端程序内部的,而请求重定向指的是服务器端接收到客户端的请求之后，会给客户端返回了一个临时响应头然后进行跳转的;
    • 跳转方不同:请求转发是服务器端的行为,而请求重定向是客户端的行为;
    • 数据共享不同:请求转发在整个的交互过程中是共享同一个 Request 请求对象和一个 Response 响应对象,而请求重定向客户端发送两次完全不同的请求，所以两次请求中的数据是不同的;
    • 最终 URL 地址不同:请求转发过程中地址是一直不变的,而请求重定向地址是会发生改变的;
    • 代码实现不同:通过上述的代码也是可以看出来代码确实是有差异的!

    在这里插入图片描述

  • 相关阅读:
    uniapp开发微信、支付宝小程序订阅消息
    JavaScript 界的巨大动荡 微软提议：将 TypeScript 作为注释
    【2022CSPJ普及组】T1.第一题乘方pow
    Spring之IOC入门
    阿里云智能总裁张建锋：保护客户数据安全是第一原则
    那些编程中遇到的常见英文缩写
    Julia编程基础
    Leetcode 509. 斐波那契数
    c#装饰器模式详解
    python基础知识之函数的定义及用法
  • 原文地址：https://blog.csdn.net/qq_58266033/article/details/126084284