Spring Web MVC综合案例

承接上篇文章——Spring Web MVC探秘，在了解Spring Web MVC背后的工作机制之后，我们接下来通过三个实战项目，来进一步巩固一下前面的知识。

一、计算器

效果展示：访问路径：http://127.0.0.1:8080/calc.html

前端代码：（文件名：calc.html）

<!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>
     <!--点击“按钮”后，页面会跳转到calc/sum页面-->
     <form action="calc/sum" method="post">
        <h1>计算器</h1>
        数字1：<input name="num1" type="text"><br>
        数字2：<input name="num2" type="text"><br>
        <!-- 只有<input>标签且具有name属性的内容才会被作为表单参数,传递给后端-->
        <input type="submit" value=" 点击相加 ">
    </form>
</body>

</html>

后端代码：

package com.example.mvc_test1;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/calc")
public class CalcController {
    @RequestMapping("/sum")//访问路径=类路径+方法路径：/calc/sum
    public String sum(Integer num1,Integer num2){
        Integer sum= num1+num2;
        return "计算的结果是："+sum;
    }
}

代码解析：

前端部分：

当用户在num1和num2输入框中输入数字后，点击 “点击相加” 按钮，浏览器会根据<form>标签的action属性（"calc/sum"）和method属性（"post"），将表单数据以POST请求的方式发送到后端对应的/calc/sum路径。

后端部分：

1、后端的CalcController类被@RestController注解标记，表明它是一个处理 RESTful 请求的控制器，并且被@RequestMapping("/calc")映射到/calc路径下。

2、sum方法被@RequestMapping("/sum")注解，意味着它处理/calc/sum路径的请求。

3、当后端发送请求到calc/sum路径时，后端代码从前端参数表单中获取参数num1和num2，赋值给sum方法的两个名称对应的参数num1、num2

4、Integer sum = num1 + num2;：在后端接收到这两个参数后，将它们相加，得到结果sum。
return "计算的结果是：" + sum;：最后，将计算结果以字符串的形式返回给前端，前端会根据响应进行相应的显示或处理。

二、用户登录界面

效果展示：访问路径：http://127.0.0.1:8080/login.html

用户名错误登录：

用户名和密码正确登录：

后端代码：

我们先来分析一下这个”登录界面”的需求，当用户输入用户名和密码之后，后端服务器需要做两件事：

1、判断用户是否进行合法的输入

2、校验用户名和密码是否正确

3、将用户名存入Session中

4、返回用户名给前端，

我们将这四件事封装到两个方法中：login方法和getUser方法

@RestController
@RequestMapping("/user")
public class UserController {

    //login方法：负责1、2、3件事务的完成
    @RequestMapping("/login") //访问路径：/user/login
    public boolean login(String userName,String password,HttpServletRequest request){
        //当用户输入空字符或者没有输入，返回false
        if(!StringUtils.hasLength(userName)||!StringUtils.hasLength(password)){
            return false;
        }else if("admin".equals(userName)&&"admin".equals(password)){//校验用户名和密码是否正确
            //用户名和密码这里都设置为admin
            //登录成功，将用户名设置到Session中
            HttpSession session=request.getSession();
            session.setAttribute("userName",userName);
            return true;
        }
        //其他情况，返回false
        return false;
    }


    //getUser方法,负责第4个事务的完成
    @RequestMapping("/getUser") //访问路径：user/getUser
    public String  getUserName(HttpServletRequest request){
        HttpSession session=request.getSession();//从请求报文中获取Session
        String userName=(String) session.getAttribute("userName");//从Session中获取userName
        return userName;
    }
}

注：StringUtils.hasLength()是一个工具方法，用于检查字符串是否有长度（即不为null且长度大于0）。

前端代码：登录页面（login.html) 和登录成功的页面（index.html)

由于这两个页面的实现，需要引入一个js文件，我们先来讲一下如何有引入？

1、js下载文件网址： https://code.jquery.com/jquery-3.7.1.min.js

2、将刚刚下载的js文件，赋值粘贴到static文件夹下面：

登录页面：login.html

<!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="jquery-3.7.1.min.js"></script>  <!--  引入js文件-->
  <script>
    function login() {
      $.ajax({
        type:"post",//请求类型
        url:"/user/login",//访问后端服务器的user/login
        data:{
          //获取标签的值，赋值给后端指定的参数
          //左边的usrName表示后端/user/login 方法中的参数userName
          //右边userName表示id为userName的标签
          "userName":$("#userName").val(),//val()获取标签的值
          "password":$("#password").val()
        },
        success:function (result){//访问成功，后端返回一个结果，作为function的参数result
          //访问/user/login时，后端会将这个请求交给login方法处理，处理结果返回true或false，表示登录成功与否
          if(result==true){//用户名和密码正确，后端返回true
            location.href="index.html";
          }else{
            alert("用户名或者密码错误");
          }
        }
      });
    }

  </script>
</body>

</html>

登录成功的页面：index.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="jquery-3.7.1.min.js"></script> <!--  引入js文件-->
    <script>
        $.ajax({
            type:"get",
            url:"/user/getUser",
            success:function (userName){//访问成功，后端返回的结果作为function方法的参数
                //访问user/getUser时，后端会将这个请求交给getUser方法处理，结果返回用户名
                $("#loginUser").text(userName);
        }
        });

    </script>
</body>

</html>

前端代码解析：

或许你有一个疑问，用户在输入用户名和密码后，校验工作是在后端中的login方法完成的，那么校验完成后，前端是如何获取后端检验后的结果呢？这其实借助了一个技术——Ajax。

Ajax（Asynchronous JavaScript and XML）即异步 JavaScript 和 XML，是一种创建快速动态网页的技术。

这里截取了login.html前端代码中使用到Ajax的部分代码（省略注释版）：

$.ajax({
    type: "post", 
    url: "/user/login", 
    data: {
        "userName": $("#userName").val(), 
        "password": $("#password").val()
    },
    success: function (result) {
        if (result == true) {
            location.href = "index.html";
        } else {
            alert("用户名或者密码错误");
        }
    }
});

1、 $.ajax({...})：这是 jQuery 的 ajax 函数，用于发起HTTP 请求。

2、type: "post"：指定请求的类型为 POST。这意味着会向服务器发送一个 POST 请求。

3、url: "/user/login"：指定请求的 URL，即要发送请求的后端服务地址，这里会将请求发送到 /user/login 路径。

4、data：这是要发送给服务器的数据，是一个对象。"userName": $("#userName").val()：使用 jQuery 的 $("#userName") 选择器选中 id 为 userName 的元素，并通过 val() 方法获取其值，将其赋值给 userName 属性。

5、"password": $("#password").val()：同理，获取 id 为 password 的元素的值，并将其赋值给 password 属性。

6、success: function (result) {...}：定义请求成功时的回调函数。result：当请求成功后，服务器返回的数据将作为 result 参数传递给该回调函数。

7、if (result == true) {...} else {...}：根据服务器返回的结果进行不同的操作。location.href = "index.html";：如果结果为 true，说明登录成功，将页面重定向到 index.html。alert("用户名或者密码错误");：如果结果不为 true，弹出一个警告框，提示用户用户名或密码错误。

三、留言板

效果展示：访问路径：http://127.0.0.1:8080/messagewall.html

后端代码：

让我们来分析一下这个“留言板”，首先，在打开这个留言板的时候，留言板会加载历史的留言记录，然后，在用户添加新留言之后，点击“提交”，新的留言会添加到页面上。

根据功能，后端代码需要完成两件事：

1、在前端打开这个页面的时候，返回历史留言内容给前端，用于前端加载历史留言内容

2、在用户添加新的留言的时候，将这条新留言存储在后端服务器中

MessageInfo类：

@Data//会自动生成该类的成员的Getter和Setter等方法,需要在pom.xml引入lombok依赖
public class MessageInfo {
    String from;
    String to;
    String say;
}

在pom.xml中引入lombok依赖（@Data注解使用需要）

MessageController类：

@RestController
@RequestMapping("/message")
public class MessageController {
    List<MessageInfo> list=new ArrayList<>();//存放留言内容
    
    //getList方法：返回历史留言内容给前端(访问路径：/message/getList)
    @RequestMapping("/getList")
    public List<MessageInfo> getList(){
        return list;
    }


    
    //publish方法：将用户新添加的留言存在后端服务器中(访问路径：/message/publish)
    //获取用户输入的内容，添加到list，返回一个json字符串
    @RequestMapping(value = "/publish",produces = "application/json")
    //指定该方法返回的数据类型为application/json，表明此方法返回的内容是 JSON 格式。告知前端返回的数据是 JSON 格式。
    public String publish(@RequestBody MessageInfo message){
        if(StringUtils.hasLength(message.from)&&
           StringUtils.hasLength(message.to)&&
           StringUtils.hasLength(message.say)){
            list.add(message);
            return "{\"ok\":1}";//1表示添加成功
        }
        return "{\"ok\":0}";//0表示添加失败

    }
}

前端代码： messagewall.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <style>
        .container {
            width: 350px;
            height: 300px;
            margin: 0 auto;
            /* border: 1px black solid; */
            text-align: center;
        }

        .grey {
            color: grey;
        }

        .container .row {
            width: 350px;
            height: 40px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .container .row input {
            width: 260px;
            height: 30px;
        }

        #submit {
            width: 350px;
            height: 40px;
            background-color: orange;
            color: white;
            border: none;
            margin: 10px;
            border-radius: 5px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>留言板</h1>
        <p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
        <div class="row">
            <span>谁:</span> <input type="text" name="" id="from">
        </div>
        <div class="row">
            <span>对谁:</span> <input type="text" name="" id="to">
        </div>
        <div class="row">
            <span>说什么:</span> <input type="text" name="" id="say">
        </div>
        <input type="button" value="提交" id="submit" onclick="submit()">
        <!-- <div>A 对 B 说: hello</div> -->
    </div>

    <script src="jquery-3.7.1.min.js"></script> <!--  引入js文件-->
    <script>
        //加载历史留言记录
        $.ajax({
            type:"get",
            url:"/message/getList",
            success:function (list){
                for(let msg of list){
                    console.log(1);
                    let divE = "<div>"+msg.from +"对" +msg.to + "说:" + msg.say+"</div>";//拼接留言
                    $(".container").append(divE);//把留言内容添加到页面上
                }
            }
        });
        function submit(){
            //获取留言的内容
            var from = $('#from').val();
            var to = $('#to').val();
            var say = $('#say').val();
            if (from== '' || to == '' || say == '') {
                return;
            }
            //传递留言内容给前端
            $.ajax({
                type:"post",
                url:"/message/publish",
                contentType:"application/json",
                data:JSON.stringify({
                    "from":from,
                    "to":to,
                    "say":say
                }),
                success:function (result){
                    if(result.ok==1){
                        alert("添加成功")
                        //构造节点
                        let divE = "<div>"+from +"对" + to + "说:" + say+"</div>";
                        //把节点添加到页面上
                        $(".container").append(divE);
                        //清空输入框的值
                        $('#from').val("");
                        $('#to').val("");
                        $('#say').val("");
                    }else{
                        alert("添加失败")
                    }
                }
            });

            
        }
        
    </script>
</body>

</html>

前端代码解析：

1、注释“传递留言内容给前端部分”代码：

contentType: "application/json"：告诉后端，我要传给你一个Json字符串的数据。
data: JSON.stringify({...})：将包含from、to、say的对象转换为 JSON 字符串作为请求数据发送给后端，让后端的publish方法中的message接收。

success：function（result）：当后端返回一个json字符串给前端接收时，前端会自动将这个json字符串转换为一个对象，例如这里的publish方法返回的如果是 {“ok”：1} 的json字符串，将其作为参数传送给function时，此时的result就成为了一个包含“ok”属性的对象，其属性值为1。