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/sumpublic 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/loginpublic boolean login(String userName,String password,HttpServletRequest request){//当用户输入空字符或者没有输入，返回falseif(!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;}//其他情况，返回falsereturn false;}//getUser方法,负责第4个事务的完成@RequestMapping("/getUser") //访问路径：user/getUserpublic String  getUserName(HttpServletRequest request){HttpSession session=request.getSession();//从请求报文中获取SessionString userName=(String) session.getAttribute("userName");//从Session中获取userNamereturn 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/logindata:{//获取标签的值，赋值给后端指定的参数//左边的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){//用户名和密码正确，后端返回truelocation.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。