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

javaEE-14.spring MVC练习

news 2025/11/26 14:22:59

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.引入依赖…...

编程日记 2025/2/24 3:37:50

HTML/CSS中并集选择器

1.作用:选中多个选择器对应的元素,又称:分组选择器所谓并集就是或者的含义. 2.语法:选择器1,选择器2,选择器3,......选择器n 多个选择器通过,连接,此处,的含义就是:或. .rich,.beauty{color: blue;} 3.注意事项 1.并集选择器,我们一般竖着写 2.任何形式的选择器,都可以作为并…...

编程日记 2025/2/24 3:33:32

可编辑35页PPT | DeepSeek如何赋能职场应用

DeepSeek作为一款基于人工智能技术的多模态AI工具，近年来在职场应用中迅速崭露头角，以其强大的功能和高效的表现赢得了广泛的赞誉。DeepSeek融合了文本生成、图像创作、数据分析与可视化等多种功能，为职场人士提供了前所未有的便利和效率提升…...

编程日记 2025/2/24 3:30:24

CSS `transform` 属性详解：打造视觉效果与动画的利器

CSS transform 属性详解：打造视觉效果与动画的利器引言一、transform 属性简介二、平移（Translation）三、旋转（Rotation）四、缩放（Scale）五、倾斜（Skew）六、组合变换&am…...

编程日记 2025/2/24 3:26:13

Windows使用docker部署fastgpt出现的一些问题

文章目录 Windows使用docker部署FastGPT出现的一些问题1.docker部署pg一直重启的问题2.重启MongoDB之后一直出现“Waiting for MongoDB to start...”3.oneapi启动不了failed to get gpt-3.5-turbo token encoder Windows使用docker部署FastGPT出现的一些问题 1.docker部署pg一…...

编程日记 2025/2/24 3:14:47

Spring Boot中如何使用Thymeleaf模板引擎

Thymeleaf 是一个现代化的服务器端 Java 模板引擎，在 Spring Boot 项目中使用它可以方便地将 Java 代码和 HTML 页面进行整合，生成动态的 Web 页面。以下将详细介绍在 Spring Boot 中如何使用 Thymeleaf 模板引擎。 1. 添加依赖如果你使用的是 Maven 项目，在 pom.xml 中添…...

编程日记 2025/2/24 3:13:23

C/C++跳动的爱心

系列文章序号直达链接1C/C李峋同款跳动的爱心2C/C跳动的爱心3C/C经典爱心4C/C满屏飘字5C/C大雪纷飞6C/C炫酷烟花7C/C黑客帝国同款字母雨8C/C樱花树9C/C奥特曼10C/C精美圣诞树11C/C俄罗斯方块小游戏12C/C贪吃蛇小游戏13C/C孤单又灿烂的神14C/C闪烁的爱心15C/C哆啦A梦16C/C简单…...

编程日记 2025/2/24 3:12:19

Element UI中messageBox怎么区分点击取消按钮关闭弹窗，和点击右上角x号以及点击遮罩层关闭按钮

在某些场景下，我们可能需要区分点击取消按钮关闭 messageBox 和点击X号、遮罩层关闭 messageBox 。实现： 将 distinguishCancelAndClose 设置为 true，这个属性的意思是：是否将取消（点击取消按钮）与关闭&…...

编程日记 2025/2/24 3:11:06

Websocket——心跳检测

1. 前言：为什么需要心跳机制？ 在现代的实时网络应用中，保持客户端和服务端的连接稳定性是非常重要的。尤其是在长时间的网络连接中，存在一些异常情况，导致服务端无法及时感知到客户端的断开，可能造成不必要…...

编程日记 2025/2/24 3:05:37

Javascript使用Sodium库实现 aead_xchacha20poly1305_ietf加密解密，以及与后端的密文交互

Node.js环境安装 sodium-native (其他库可能会出现加密解密失败，如果要使用不一样的库，请自行验证) npm install sodium-native 示例代码，使用的是 sodium-native v4.3.2 (其他版本可能会有变化，如果要使用，请自行验…...

编程日记 2025/2/24 3:04:26

视频mp4垂直拼接水平拼接

视频mp4垂直拼接水平拼接 pinjie_v.py import imageio import numpy as np import os import cv2def pinjie_v(dir1,dir2,out_dir):os.makedirs(out_dir, exist_okTrue)# 获取目录下的所有视频文件video_files_1 [f for f in os.listdir(dir1) if f.endswith(.mp4)]video_fi…...

编程日记 2025/2/24 2:56:14

跟着李沐老师学习深度学习（十二）

循环神经网络序列模型序列数据实际中很多数据是有时序结构的比如：电影的评价随时间变化而变化拿奖后评分上升，直到奖项被忘记看了很多好电影后，人们的期望变高季节性:贺岁片、暑期档导演、演员的负面报道导致评分变低核心思想&#…...

编程日记 2025/2/24 2:55:09

MFC中CString的Format、与XML中的XML_SETTEXT格式化注意

1、在MFC中导入 "msxml6.dll"，并使用其中的XML_SETTEXT函数，此调用在进行格式化的时候，调用的还是CString.Format()函数！ 2、用double类型的数据，格式化整形数%d之前，必须将double强转为int&…...

编程日记 2025/2/24 2:54:04

如何设计合理的树状结构表：平衡查询效率与维护效率

树状结构广泛应用于数据建模中，例如商品分类、组织架构、权限管理等场景。合理设计树形结构的数据库表，能够有效提升查询效率和维护效率。本文将探讨如何在设计时平衡这两者，详细介绍常用的几种树状结构存储方式及其适用场景。一、树状…...

编程日记 2025/2/24 2:50:00

Springboot的简单推荐实现

以springboot 推荐社团招新为例子使用 Spring Boot 构建社团招新推荐系统，用户注册后选择兴趣，系统根据兴趣推荐社团。实现包括用户注册、兴趣选择和基于标签匹配的推荐算法。系统使用 JPA 管理数据库，Spring Security 确保安全&#xff0…...

编程日记 2025/2/24 2:48:53

SpringBoot速成概括

视频：黑马程序员SpringBoot3Vue3全套视频教程，springbootvue企业级全栈开发从基础、实战到面试一套通关_哔哩哔哩_bilibili 图示：...

编程日记 2025/2/24 2:47:49

springboot多实例部署时，@Scheduled注释的方法重复执行

问题：springboot多实例部署时，Scheduled注释的方法重复执行在 Spring Boot 中要实现 Redis 的SET NX EX命令，可以借助 Spring Data Redis 来完成。SET NX EX命令用于在键不存在时设置键值对，并同时设置过期时间。 <dependen…...

编程日记 2025/2/24 2:46:45

蓝桥杯15 填空题

1.握手问题： 思路：首先当所有人都握过手，由于一次握手相当于两个人都握手过，所以容易发现这是一个组合问题，为（50*49）/2，而其中有7个人没有相互握过手，那么减去&#xff…...

编程日记 2025/2/24 2:43:38

快速入门——第三方组件element-ui

学习自哔哩哔哩上的“刘老师教编程”，具体学习的网站为：10.第三方组件element-ui_哔哩哔哩_bilibili，以下是看课后做的笔记，仅供参考。第一节组件间的传值组件可以有内部Data提供数据，也可由父组件通过prop方式传…...

编程日记 2025/2/24 2:41:35

力扣-贪心-455 分发饼干

思路用小饼干去喂胃口小的孩子，不满足条件的时候，去喂胃口稍微大点的孩子，尽可能多满足孩子 class Solution { public:int findContentChildren(vector<int>& g, vector<int>& s) {sort(g.begin(), g.end());sort(s.b…...

编程日记 2025/2/24 2:37:29

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。特征提取与优化从复杂的光学数据中自…...

编程新知 2025/11/24 8:08:56

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如中文，英文，日语），语音情感（如开心，悲伤）&#x…...

编程新知 2025/11/17 0:21:11

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。数据倾斜的主要表现部分节点内存使用率远高于其他节…...

编程新知 2025/11/26 5:41:12

算法笔记2

1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2025/11/23 14:13:25

HDFS分布式存储 zookeeper

hadoop介绍狭义上hadoop是指apache的一款开源软件用java语言实现开源框架，允许使用简单的变成模型跨计算机对大型集群进行分布式处理（1.海量的数据存储 2.海量数据的计算）Hadoop核心组件 hdfs（分布式文件存储系统）&a…...

编程新知 2025/11/25 2:56:34

A2A JS SDK 完整教程：快速入门指南

目录什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/9/29 5:00:25