当前位置：首页 > news >正文

Spring Web MVC综合案例

news 2025/11/13 19:38:02

承接上篇文章——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。

Spring Web MVC综合案例

一、计算器

二、用户登录界面

三、留言板

相关文章：

Spring Web MVC综合案例

微软预测 AI 2025，AI Agents 重塑工作形式

lvgl性能调优

CSS实现实现票据效果 mask与切图方式

STL--list（双向链表）

ZooKeeper 中的 ZAB 一致性协议与 Zookeeper 设计目的、使用场景、相关概念（数据模型、myid、事务 ID、版本、监听器、ACL、角色）

“深入浅出”系列之C++：（11）推荐一些C++的开源项目

《重生到现代之从零开始的C++生活》—— 类和对象2

“UniApp的音频播放——点击视频进入空白+解决视频播放器切换视频时一直加载的问题”——video.js、video-js.css

【Pandas】pandas Series transform

【博客之星2024年度总评选】年度回望：我的博客之路与星光熠熠

飞牛使用docker部署Watchtower 自动更新 Docker 容器

【Block总结】TAdaConv时序自适应卷积，轻量高效的时间建模卷积|即插即用

Spring Boot 项目启动报错 “找不到或无法加载主类” 解决笔记

CSS 网络安全字体

Linux高并发服务器开发第十五天（fork函数）

【人工智能】Python中的自动化机器学习（AutoML）：如何使用TPOT优化模型选择

探秘自然地理：从太阳到地球的奇妙之旅与灾害预警

go语言zero框架通过chromedp实现网页在线截图的设计与功能实现

AI发展困境：技术路径与实践约束的博弈

stm32G473的flash模式是单bank还是双bank？

大话软工笔记—需求分析概述

【人工智能】神经网络的优化器optimizer（二）：Adagrad自适应学习率优化器

使用分级同态加密防御梯度泄漏

376. Wiggle Subsequence

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

【单片机期末】单片机系统设计

DBAPI如何优雅的获取单条数据

Reasoning over Uncertain Text by Generative Large Language Models

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比