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

Spring Web MVC综合案例

news 来源：原创 2025/6/17 3:31:03

承接上篇文章——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探秘，在了解Spring Web MVC背后的工作机制之后，我们接下来通过三个实战项目，来进一步巩固一下前面的知识。一、计算器效果展示：访问路径：http://127.0.0.1:8080/calc.html 前端代码&a…...

编程日记 2025/5/31 0:52:53

OpenCV相机标定与3D重建(60)用于立体校正的函数stereoRectify()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述为已校准的立体相机的每个头计算校正变换。 cv::stereoRectify 是 OpenCV 中用于立体校正的函数，它基于已知的相机参数和相对位置&am…...

编程日记 2025/6/3 3:15:41

SDL2基本的绘制流程与步骤

SDL2（Simple DirectMedia Layer 2）是一个跨平台的多媒体库，它为游戏开发和图形应用提供了一个简单的接口，允许程序直接访问音频、键盘、鼠标、硬件加速的渲染等功能。在 SDL2 中，屏幕绘制的流程通常涉及到窗口的创建、渲染目标的设置、图像的绘制、事件的处理等几个步骤。…...

编程日记 2025/6/3 9:06:43

计算机网络（42）远程终端协议TELNET

前言 Telnet（Telecommunication Network Protocol）是一种网络协议，属于TCP/IP协议族，主要用于提供远程登录服务。一、概述 Telnet协议是一种远程终端协议，它允许用户通过终端仿真器连接到远程主机，并在远程…...

编程日记 2025/6/2 3:09:53

重拾Python学习，先从把python删除开始。。。

自己折腾就是不行啊，屡战屡败，最近终于找到前辈教我第一步删除Python 先把前阵子折腾的WSL和VScode删掉。还是得用spyder，跟matlab最像，也最容易入手。从VScode上搞python，最后安装到appdata上，安装插…...

编程日记 2025/5/27 10:18:03

51c大模型~合集106

我自己的原文哦~ https://blog.51cto.com/whaosoft/13115290 #GPT-5、 Opus 3.5为何迟迟不发新猜想：已诞生，被蒸馏成小模型来卖「从现在开始，基础模型可能在后台运行，让其他模型能够完成它们自己无法完成的壮举——就像一个老…...

编程日记 2025/6/4 15:15:23

node安装教程及环境配置

1.下载安装包下载的网址：Node.js — Download Node.js 根据自己电脑系统及位数选择，电脑是Windows系统、64位、想下载稳定版的.msi（LTS为长期稳定版）这里选择windows64位.msi格式安装包。 .msi和.zip格式区别： .msi…...

编程日记 2025/6/4 16:45:47

Temp123

MapDB：的持久化机制，以及源码分析和摘取 1、spark streaming--struct streaming 基于时间间隔攒批 2、kafka-connect-hdfs 控制 flush.size 和 interval.ms控制攒批 - 完全自研攒批机制 - 使用 embeded 版 https://lxblog.com/qianwen/share?shar…...

编程日记 2025/6/4 12:22:26

YOLO系列代码

Test-Time Augmentation TTA (Test Time Augmentation)是指在test过程中进行数据增强。其思想非常简单，就是在评测阶段，给每个输入进行多种数据增广变换，将一个输入变成多个输入，然后再merge起来一起输出，形成一种ens…...

编程日记 2025/6/2 21:32:41

2025.1.16——一、NewsCenter

题目来源：攻防世界 NewsCenter 目录一、题目二、sqlmap解题——bp抓包存为txt文件进行爆破 step 1：search框内随便输入，进行抓包 step 2：抓包后，存到txt文件，进行sqlmap step 3：-r获取文…...

编程日记 2025/6/4 8:18:30

Java中的继承

引入继承 Java中使用类对实体进行描述，类经过实例化之后的产物对象，就可以用来表示现实中的实体，描述的事物错综复杂，事物之间可能会存在一些关联，因此我们就需要将他们共性抽取，面向对象的思想中提出了继…...

编程日记 2025/6/1 19:49:58

vue3+ts+uniapp 微信小程序（第一篇）—— 微信小程序定位授权，位置信息权限授权

文章目录简介一、先看效果1.1 授权定位前，先弹出隐私协议弹框1.2 上述弹框点击同意，得到如下弹框1.3 点击三个点，然后点设置 1.4 在1.2步骤下，无论同意或者拒绝二、manifest.json 文件配置三、微信公众平台配置3.1 登录进入微信…...

编程日记 2025/6/4 9:49:02

1.新建项目安装库 npm init -y npm install -D playwright npm install -D playwright/test npm install typescript ts-node types/node npx playwright install 项目目录 2.编写代码 package.json {"name": "pom_playwright","version": …...

编程日记 2025/6/4 1:29:10

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式

三台 Centos7.9 中 Docker 部署 Redis 哨兵模式 1. 环境规划2. 配置 Docker Compose3. 配置 Redis 密码和持久化4. 配置哨兵5. 启动服务6. 验证 Redis 哨兵模式7. 注意事项 1. 环境规划三台服务器的角色分配如下： IP Address容器端口角色192.168.15.128redis-mas…...

编程日记 2025/5/30 18:06:32

JSON数据格式的序列化和反序列化jackson针对首字母小学的字段返回序列化后第2个大写字母也变成小写的问题处理

SpringBoot类属性”第二个字母大写“反序列化问题。key第二个字母大写会被转成小写 , 这个为 jackson 的bug。后台 : String pName; public String getPName() { return pName; } 前台 : { pname : xxx } 解决方案： 使用JsonProperty("pName")…...

编程日记 2025/5/28 5:35:54

Android wifi列表中去自身的热点

Android wifi列表中去自身的热点一、前言 Android wifi列表中能搜索到自身的热点wifi？ 正常手机上都不会出现这个问题；可能是系统底层已经做了过滤处理。现实开发中Android设备的Wifi能搜索到自身热点也可能会存在。比如基于两个单独的wifi双模组硬…...

编程日记 2025/6/2 4:33:02

Elasticsearch：Jira 连接器教程第二部分 - 6 个优化技巧

作者：来自 Elastic Gustavo Llermaly 将 Jira 连接到 Elasticsearch 后，我们现在将回顾最佳实践以升级此部署。在本系列的第一部分中，我们配置了 Jira 连接器并将对象索引到 Elasticsearch 中。在第二部分中，我们将回顾一些最佳实…...

编程日记 2025/5/31 18:06:06

单线性激光扫描、多线性激光扫描？激光扫描三维重建算法环节

分类都属于激光扫描技术，但它们在光源的数量和工作方式上存在一些差异。单线性激光扫描： 单线性激光扫描使用单个线状光源进行扫描。光源沿一个方向移动，将一条直线上的目标进行扫描。这种方式适用于需要获取目标表面在一个维度上的信息的…...

编程日记 2025/6/2 0:20:01

git 常用命令 git archive

git archive 是 Git 中用于创建一个包含指定提交或分支中所有文件的归档文件（如 .tar 或 .zip）的命令。这个命令非常适合用于分发项目快照、备份代码库或导出特定版本的文件。 git archive --formatzip --outputproject.zip HEAD …...

编程日记 2025/6/2 19:05:16

CMD批处理命令入门（6）——常用的特殊字符

CMD批处理命令入门（6）——特殊字符本章内容主要学习要点：重定向符 >、>>命令管道符 |组合命令 &、&&、||转义字符 ^变量引导符 %界定符 "" 本章内容主要学习要点： >、>>重定向符| 命令…...

编程日记 2025/5/31 8:32:02

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6）

大模型WebUI：Gradio全解11——Chatbot：融合大模型的多模态聊天机器人（6） 前言本篇摘要11. Chatbot：融合大模型的多模态聊天机器人11.6 为LLM Agent构建UI11.5.1 使用代理构建1. 使用transformers.agents的实际示例2. 使…...

编程日记 2025/6/3 20:57:41

【算法】前缀和

前缀和 1.【模板】前缀和2.最大子段和3.【模板】二维前缀和4.激光炸弹前缀的核心思想是预处理，可以在暴力枚举的过程中，快速查询出某一段区间内的和，从而优化时间复杂度。是经典的用空间替换时间的做法。 1.【模板】前缀和【模板】前缀和…...

编程日记 2025/6/1 19:39:50

android Recyclerview viewholder统一封装

Recyclerview holder 统一封装 ViewHolder类 import android.annotation.SuppressLint import android.content.Context import android.graphics.Color import android.graphics.drawable.GradientDrawable import android.os.Build import android.os.CountDownTimer import…...

编程日记 2025/6/3 16:14:15

一、计算器

二、用户登录界面

三、留言板

相关文章：