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

javaEE-14.spring MVC练习

article 2026/4/14 0:47:47

1.加法计算器

需求分析:

前端页面代码:

后端代码实现功能:

调整前端页面代码:

进行测试:

2.用户登录

需求分析:

定义接口:

1.登录数据校验接口:

2.查询登录用户接口:

前端代码:

后端代码:

调整前端代码:

测试/查错因

后端:

前端:

lombok工具

1.引入依赖:

2.使用

3.原理

3.留言板

需求分析:

接口定义:

前端代码:

后端代码:

前端代码完善功能:

1.加法计算器

需求: 输⼊两个整数, 点击"点击相加"按钮, 显⽰计算结果

在项⽬开发前,根据需求先约定好前后端交互接⼝,双⽅按照接⽂档进⾏开发.

接⼝⽂档通常由服务提供⽅来写,交由服务使⽤⽅确认,也就是客⼾端.

接⼝⽂档⼀旦写好,尽量不要轻易改变. 如若需要改变,必须要通知另⼀⽅知晓

需求分析:

加法计算器功能,对两个整数进⾏相加, 需要客⼾端提供参与计算的两个数,服务端返回这两个整数计算的结果.

基于上述分析,定义接口(这里的接口不是java初阶的interface接口,而是前后端交互的路径接口):

1.请求路径:calc/sum

2.请求方法:get/post

3.接口描述:计算两个整数相加

请求参数:

参数名	类型	描述
num1	Integer	参与计算的第一个参数
num2	Integer	参与计算的第二个参数

响应数据:

Content-Type: text/html

响应内容: 计算机计算结果: 8

前端页面代码:

<!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><form action="calc/sum" method="post"><h1>计算器</h1>数字1：<input name="num1" type="text"><br>数字2：<input name="num2" type="text"><br><input type="submit" value=" 点击相加 "></form>
</body></html>

浏览器测试页面是否正常:路径以static为根目录进行遍历

前端代码正常.

后端代码实现功能:

package com.springmvc.test;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")
@RestController
public class calcController {@RequestMapping("/sum")public String getSum(Integer num1,Integer num2){Integer sum=num1+num2;return "计算器计算结果为:"+sum;}
}

通过Postman对后端代码进行测试:

通过响应结果可以看到后端代码正常.

调整前端页面代码:

添加访问url和请求⽅式

进行测试:

点击相加:

2.用户登录

需求:⽤⼾输⼊账号和密码,后端进⾏校验密码是否正确

1. 如果不正确,前端进⾏⽤⼾告知

2. 如果正确,跳转到⾸⻚.⾸⻚显⽰当前登录⽤⼾

3. 后续再访问⾸⻚,可以获取到登录⽤⼾信息

需求分析:

1.登录界面:通过账号和密码,校验输入的账号和密码是否正确,并告诉前端.

2.首页:告知前端当前登录⽤⼾. 如果当前已有⽤⼾登录, 返回登录的账号,如果没有,返回空

定义接口:

1.登录数据校验接口:

请求路径：/user/login

请求⽅式：POST

接⼝描述：校验账号密码是否正确

请求参数:

参数名	类型
userName	String
password	String

响应数据:

Content-type: text/html

响应内容 : true //账号密码验证成功

false//账号密码验证失败

2.查询登录用户接口:

请求路径：/use/index

请求⽅式：get

接⼝描述：查询当前登录的用户

请求参数:无

响应数据:

Content-type: text/html

响应内容 :zhangsan

前端代码:

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login() {}</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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script></script>
</body></html>

后端代码:

由于要在首页中获取登录人的用户名,因此,在登录方法中,要设置SessionId,将登录信息保存下来,在获取登录人信息时,进行返回.

注意:

1.对数据的校验可以通过:StringUtils.hasLength()方法来进行校验.

StringUtils.hasLength()是Spring提供的⼀个⼯具⽅法,判断字符串是否有值,字符串为null或者""时,返回false,其他返回true.

2. 使用equals方法的时候,建议将常量放在前面,变量放在后面.(防止出现空指针异常)

package com.springmvc.test;import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.bind.annotation.SessionAttribute;@RestController
@RequestMapping("/user")
public class loginController {@RequestMapping("/login")public Boolean login(String userName, String password, HttpSession session){
//        1.数据校验//法一:
//        if(userName==null || userName.length()==0 || password==null || password.length()==0){
//               return false;
//        }//法二if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)){return false;}//判断:
//       使用equals方法时,通常将常量写在前面,目的:防 useraName为null,报空指针异常if("zhangsan".equals(userName) && "123456".equals(password)){session.setAttribute("userName",userName);return true;}return false;}@RequestMapping("/index")public String getUserName(@SessionAttribute("userName")String userName){return userName;}
}

调整前端代码:

对于前端⽽⾔, 当点击登录按钮时, 需要把⽤⼾输⼊的信息传递到后端进⾏校验, 后端校验成功,则跳转到⾸⻚:index.html, 后端校验失败,则直接弹窗


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>function login() {$.ajax({// URL:url:"user/login",// 请求方法:type:"post",// 参数data:{userName:$("#userName").val(),password:$("#password").val()},// http响应成功:success:function(result){if(result==true){location.href="index.html";}else{alert("密码错误!");}}});}</script>

页面跳转3种方法:

window.location.href="index.html";

window.loction.assign( "index.html");

window.location.replace( "index.html");

通常把window. 省略,常用前两种方法.

index.html:


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>$.ajax({url:"user/index",type:"get",success:function(name){$("#loginUser").text(name);}});
</script>

测试/查错因

后端:

代码功能完成后,

1>.可通过Postman进行测试,

2>.若测试能通过,后续再出现问题几乎就不是后端问题了.

3>.若没有通过,可能是后端有缓存,刷新Maven:clean,然后重启spring,再次测试.

4>.若还是出错,可以通过看日志的方法,(看不懂,可以上网查)

5>.通过debug,打断点的方法,进行调试

前端:

1>.通过打日志的方法 : console.log() / alert()方法

2>.前端打断点:

lombok工具

lombok是一个java工具库,通过添加注解,简化java代码的开发.

1.引入依赖:

通过在pom.xml文件中导入依赖:

 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><scope>annotationProcessor</scope></dependency>

快捷引入方式:要先下载一个插件:EditStarter

然后选择pom文件,右键:选择生成->EditStarter

->选择lombok进行添加就行:

注意: 不是所有的依赖都能从EditStarter添加,依赖不在的时候,还有从Maven仓库去找,再粘贴依赖代码.

还可以在创建项目的时候,勾选lombok工具包:

若创建的时候,没有勾选,在开发的时候也可以再添加:选中pom文件,点击编辑启动器,进行添加.(这个和上面的通过EditStarter方法相同)

2.使用

在写一些对象类的时候,通过⼀些注解的⽅式,可以帮助我们消除⼀些冗⻓代码,使代码看起来简洁⼀些

比如user类:

@Data注解,可以帮助我们自动完成一些方法:getter(),setter(),toString(),equals()等.

@Data这个注解的功能比较强大,lombok还有一些更细粒度的注解:

@Data = @Getter+@Setter+@ToString+@EqualsAndHashCode +@RequiredArgsConstructor + @NoArgsConstructor

3.原理

添加@Data注解后,可以看idea运行后反编译的class文件:

class文件中就能看到 lombok实现的代码了

java程序的运行原理:

加上lombok后:

3.留言板

需求: 界⾯如下图所⽰

1. 输⼊留⾔信息,点击提交.后端把数据存储起来.

2. ⻚⾯展⽰输⼊的表⽩墙的信息

需求分析:

后端需要提供两个服务

1. 提交留⾔:⽤⼾输⼊留⾔信息之后,后端需要把留⾔信息保存起来

2. 展⽰留⾔:⻚⾯展⽰时,需要从后端获取到所有的留⾔信息

接口定义:

1.发表留言接口:

请求:body为JSON格式.

请求路径：/message/publish

请求⽅式：POST

接⼝描述：校验数入格式是否正确

请求参数:

参数名	类型
from	String
to	String
say	String

响应数据:true:输入格式正确

false:格式错误

前端代码:

<!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="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
<!--提交信息-->function submit(){}
//    
</script>
</body></html>

后端代码:

定义信息对象MessageInfo类:

package com.model;import lombok.Data;@Data
public class MessageInfo {private String from;private String to;private String say;
}

创建messageController类:

package com.springmvc.test;import ch.qos.logback.core.util.StringUtil;
import com.model.MessageInfo;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/message")
public class messageWallController {//留言集合:List<MessageInfo> messageInfos=new ArrayList<>();/***发表留言* @param messageInfo* @return*/@RequestMapping("/publish")public Boolean publish(MessageInfo messageInfo){
//        1.数据校验if(!StringUtils.hasLength(messageInfo.getFrom())|| !StringUtils.hasLength(messageInfo.getTo())|| !StringUtils.hasLength(messageInfo.getSay())){return false;}messageInfos.add(messageInfo);return true;}/*** 返回浏览信息* @return*/@RequestMapping("/getList")public List<MessageInfo> getList(){return messageInfos;}}

前端代码完善功能:


<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
<!--提交信息-->function submit(){//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();// 前端数据校验if (from== '' || to == '' || say == '') {return;}// 构造ajax请求$.ajax({url:"message/publish",type:"post",data:{from:from,to:to,say:say},success:function(result){if(result){//2. 构造节点var divE = "<div>"+from +"对" + to + "说:" + say+"</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");}else{alert("输入信息格式有误!");}}});}
//     获取提交结果集合:$.ajax({url:"message/getList",type:"get",success:function(messageInfos){//将提交的所有信息进行字符串拼接:var finalHtml="";for(var messageInfo of messageInfos){finalHtml+="<div>"+messageInfo.from +"对" + messageInfo.to + "说:" + messageInfo.say+"</div>";}//     发送信息给后端$(".container").append(finalHtml);}});</script>

前后端参数对应关系:

javaEE-14.spring MVC练习

目录 1.加法计算器需求分析: 前端页面代码: 后端代码实现功能: 调整前端页面代码: 进行测试: 2.用户登录需求分析: 定义接口: 1.登录数据校验接口: 2.查询登录用户接口: 前端代码: 后端代码: 调整前端代码: 测试/查错因后端: 前端: lombok工具 1.引入依赖…...

编程日记 2026/4/11 19:33:41

rabbitmq五种模式的实现——springboot

rabbitmq五种模式的实现——springboot 基础知识和javase的实现形式可以看我之前的博客代码地址：https://github.com/9lucifer/rabbitmq4j-learning 一、进行集成 （一）Spring Boot 集成 RabbitMQ 概述 Spring Boot 提供了对 RabbitMQ 的自…...

编程日记 2026/4/6 7:35:17

23. AI-大语言模型-DeepSeek赋能开发-Spring AI集成

文章目录前言一、Spring AI 集成 DeepSeek1. 开发AI程序2. DeepSeek 大模型3. 集成 DeepSeek 大模型1. 接入前准备2. 引入依赖3. 工程配置4. 调用示例5. 小结 4. 集成第三方平台（已集成 DeepSeek 大模型）1. 接入前准备2. POM依赖3. 工程配置4. 调用示例…...

编程日记 2026/4/8 18:07:08

Educational Codeforces Round 174 (Rated for Div. 2)（ABCD）

A. Was there an Array? 翻译： 对于整数数组 ，我们将其相等特征定义为数组 ，其中，如果数组 a 的第 i 个元素等于其两个相邻元素，则 ；如果数组 a 的第 i 个元素不等于其至少一个相邻元素，则 …...

编程日记 2026/4/4 13:12:59

如何在本机上模拟IP地址

如何在本机上模拟IP地址前言在某些开发或测试场景中，我们可能需要在本机上模拟一个指定的 IP 地址，并让局域网内的其他设备能够通过该 IP 访问本机提供的服务（如 Web 服务）。本文将详细介绍如何在 Windows 和 macOS 系统上实…...

编程日记 2026/4/5 15:48:10

C++二叉树：数据的“家族树”与高效检索的奥秘

C二叉树：数据的“家族树”与高效检索的奥秘开篇小故事：图书馆的“智能目录” 想象一座古老的图书馆，藏书百万，却能在几秒内找到任意一本书。秘密在于它的“智能目录系统”——一本巨大的家族树状手册： 每本书按主题…...

编程日记 2025/9/16 1:54:11

深入解析 Vue 项目中的缓存刷新机制：原理与实战

目录前言1. Demo2. 知识拓展前言在 Vue 项目中，缓存通常用于存储用户信息、角色权限、系统设置等，以提高页面加载速度并减少 API 请求这里使用 web-storage-cache 作为封装的本地存储工具，支持 localStorage 和 sessionStorage 方式存储…...

编程日记 2025/12/27 11:28:39

【嵌入式Linux应用开发基础】进程间通信(1)：管道

目录一、管道的基本概念二、管道的工作原理三、管道的类型 3.1. 匿名管道（Anonymous Pipe） 3.2. 命名管道（Named Pipe，FIFO） 四、管道的读写规则 4.1. 匿名管道的读写规则 4.2. 命名管道的读写规则五、管…...

编程日记 2026/4/8 6:15:01

【DeepSeek】Mac m1电脑部署DeepSeek

一、电脑配置个人电脑配置二、安装ollama 简介：Ollama 是一个强大的开源框架，是一个为本地运行大型语言模型而设计的工具，它帮助用户快速在本地运行大模型，通过简单的安装指令，可以让用户执行一条命令就在本地运…...

编程日记 2026/4/8 9:18:37

DHCP详解，网络安全零基础入门到精通实战教程！

一、DHCP简介 DHCP(Dynamic Host Configuration Protocol),动态主机配置协议，是一个应用层协议。当我们将客户主机ip地址设置为动态获取方式时，DHCP服务器就会根据DHCP协议给客户端分配IP，使得客户机能够利用这个IP上网。 DHCP前身是BOOTP&am…...

编程日记 2026/4/4 23:01:14

蓝桥杯篇---IAP15F2K61S2中断

文章目录前言简介中断源1.外部中断2.定时器中断3.串口中断4.ADC中断5.PCA中断6.SPI中断7.PWM中断中断优先级中断相关寄存器1.IE2.IP3.TCON4.SCON 中断使用步骤1.配置中断源2.使能中断3.设置优先级4.编写中断服务程序5.清除中断标志示例代码：外部中断使用示例代码…...

编程日记 2025/12/1 13:00:57

【Prometheus】prometheus结合pushgateway实现脚本运行状态监控

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全…...

编程日记 2026/4/6 15:57:19

立创实战派ESP32-S3烧录小智AI指南

小智 AI 聊天机器人-开源项目介绍本项目是一个开源项目，主要用于教学目的。我们希望通过这个项目，能够帮助更多人入门 AI 硬件开发，了解如何将当下飞速发展的大语言模型应用到实际的硬件设备中。无论你是对 AI 感兴趣的学生，还是…...

编程日记 2026/4/9 1:58:33

深度学习的集装箱箱号OCR识别技术，识别率99.9%

集装箱箱号OCR识别技术是一项结合计算机视觉和规则校验的复杂任务，以下是其关键要点及实现思路的总结： 1、集装箱号结构：11位字符，格式为公司代码(3字母)和序列号(6数字)以及校验码(1数字)和尺寸/类型代码(可选)，例如…...

编程日记 2026/4/9 0:04:36

使用 PyTorch 实现标准卷积神经网络（CNN）

卷积神经网络（CNN）是深度学习中的重要组成部分，广泛应用于图像处理、语音识别、视频分析等任务。在这篇博客中，我们将使用 PyTorch 实现一个标准的卷积神经网络（CNN），并介绍各个部分的作用。什…...

编程日记 2025/11/29 12:14:04

Casbin 权限管理介绍及在 Go 语言中的使用入门

引言在现代软件开发过程中，权限管理是一个至关重要的环节，它关系到系统的安全性和用户体验。Casbin 是一个强大的访问控制库，支持多种访问控制模型，如 ACL（访问控制列表）、RBAC（基于角色的访问…...

编程日记 2025/6/15 9:33:06

如何在Windows下使用Ollama本地部署DeepSeek R1

参考链接： 通过Ollama本地部署DeepSeek R1以及简单使用的教程（超详细） 【DeepSeek应用】DeepSeek R1 本地部署（OllamaDockerOpenWebUI） 如何将 Chatbox 连接到远程 Ollama 服务：逐步指南首先需要安装oll…...

编程日记 2026/4/8 12:34:25

【分布式理论12】事务协调者高可用：分布式选举算法

文章目录一、分布式系统中事务协调的问题二、分布式选举算法1. Bully算法2. Raft算法3. ZAB算法三、小结与比较一、分布式系统中事务协调的问题在分布式系统中，常常有多个节点（应用）共同处理不同的事务和资源。前文【分布式理论9】分布式…...

编程日记 2026/4/9 1:51:26

详细介绍Tess4J的使用：从PDF到图像的OCR技术实现

在当今的数字化时代，OCR（光学字符识别）技术被广泛应用于文档扫描、图片文字识别以及其他自动化数据提取任务。Tesseract作为一款强大的开源OCR引擎，在处理图像和PDF中的文本提取方面具有非常高的准确度和效率。本文将详细介绍如何…...

编程日记 2025/11/9 22:45:33

postgres源码学习之简单sql查询

postgres源码学习之sql查询 sql查询的主流程读取sql解析sql重写sql获得执行计划执行查询操作结果返回 sql查询的主流程参考postgres的处理流程由上一节，我们可以看到，当有新的连接通过权限认证之后，将进入等待接收sql语句，并执…...

编程日记 2026/4/8 6:16:33

C#项目05-猜数字多线程

本项目利用多线程，通过点击按钮猜数字， 知识点线程基本概念进程:一组资源，构成一个正在运行的程序，这些资源包括地址空间、文件句柄以及程序启动需要的其他东西的载体。线程:体现一个程序的真实执行情况， 线…...

编程日记 2026/4/8 14:19:48

前端504错误分析

前端出现504错误（网关超时）通常是由于代理服务器未能及时从上游服务获取响应。以下是详细分析步骤和解决方案： 1. 确认错误来源 504含义：代理服务器（如Nginx、Apache）在等待后端服务响应时超时。常见架构：前端 → 代理服务器 → 后端服务，问题通常出在代理与后端之间。…...

编程日记 2026/2/18 20:37:20

《C语言动态顺序表:从内存管理到功能实现》

1.顺序表 1.1 概念顺序存储的线性表，叫顺序表。 1.2顺序表存放的实现方式可以使用数组存储数据，可以实现逻辑上相连，物理内存上也相连。也可以使用malloc在堆区申请一片连续的空间，存放数据，实现逻辑上相连&#…...

编程日记 2026/4/4 16:10:15

通过API 调用本地部署 deepseek-r1 模型

如何本地部署 deepseek 请参考（windows 部署安装大模型 DeepSeek-R1） 那么实际使用中需要开启API模式，这样可以无拘无束地通过API集成的方式，集成到各种第三方系统和应用当中。上遍文章是基于Ollama框架运行了deepSeek R1模型…...

编程日记 2026/4/9 14:54:11

1.应用场景主要用于学习与使用DeepSeek解决问题, 提高效率. 2.学习/操作 1.文档阅读文档 DeepSeek -- 官网, 直接使用 --- 代理网站 --- 极客智坊 https://poe.com/DeepSeek-R1 https://time.geekbang.com/search?qdeepseek -- 搜索deepseek的资料资料 20250209DeepSeekC…...

编程日记 2026/3/14 1:04:15

DeepSeek和ChatGPT的全面对比

一、模型基础架构对比（2023技术版本） 维度DeepSeekChatGPT模型家族LLAMA架构改进GPT-4优化版本参数量级开放7B/35B/120B闭源175B位置编码RoPE NTK扩展ALiBiAttention机制FlashAttention-3FlashAttention-2激活函数SwiGLU ProGeGLU训练框架DeepSpeedMeg…...

编程日记 2025/12/2 7:41:07