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

Spring MVC (三) —— 实战演练

news 文章来源：https://blog.csdn.net/liwuqianhzc/article/details/145330282 2025/5/9 14:46:03

项目设计

我们会将前端的代码放入 static 包下：

在这里插入图片描述

高内聚，低耦合

这是我们在实现项目的设计思想，一个项目里存在很多个模块，每一个模块内部的要求类与类、方法与方法要相互配合紧密联系，这就是高内聚，低耦合追求的是不同模块之间的联系不能太高，即使一个模块崩溃了，也不会影响其他模块的正常运行。

Lombok

通过在 MAVEN 中添加 Lombok 依赖，我们可以使用 Lombok 的注解实现对类自动添加 Getter、Setter、toString、equals、hasCode等可以自动由 IDEA 创建的方法，使用注解，提高了代码的美观度，也提高了开发效率。

在这里插入图片描述

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

举个例子：
这是你代码要添加的方法：

public class UserInfo {String name;int gender;int age;public UserInfo() {}public UserInfo(String name, int gender, int age) {this.name = name;this.gender = gender;this.age = age;}public String getName() {return name;}public void setName(String name) {this.name = name;}public int getGender() {return gender;}public void setGender(int gender) {this.gender = gender;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}@Overridepublic String toString() {return "UserInfo{" +"name='" + name + '\'' +", gender=" + gender +", age=" + age +'}';}
}

通过使用 Lombok 注解：就可以实现和上面一样的效果

import lombok.Data;@Data
public class UserInfo {String name;int gender;int age;
}

我们来看一下注解的源码：
在这里插入图片描述
@Data 是类注解

在这里插入图片描述

Getter 和 Setter 可以添加到类上方，这样就是该类下所有的属性都添加 Getter 和 Setter 方法。

也可以单独添加到某些属性上，这样就只对这些指定的属性添加 Getter 和 Setter 方法。

Lombok 的所有的注解都是作用在源码阶段，一旦经过了编译生成了 .class 文件之后，就会将注解删掉，取而代之的是对应的方法。

EditStarters 插件

EditStarters 插件可以导入 Spring 项目需要的依赖。

安装方式：首先点击 File ，点击 Setting ，然后安装下图的点击，搜索 EditStarters ，然后点击 Installed 下载安装即可。

在这里插入图片描述

添加对应的依赖也很简单：
找到 pom 文件，在文件内容下，右键然后点击 Generate
在这里插入图片描述

三层架构

下图是 MVC 架构：

在这里插入图片描述

view 是视图，现在视图不交给后端做，一般是前端处理，Controller 就是后端提供的接口，Model 就是业务处理和数据查询

除此之外，在Java 后端中，我们还有一种新的分层架构：分别是表现层、业务逻辑层、数据层

表现层: 就是展示数据结果和接受用户指令的，是最靠近用户的⼀层；
业务逻辑层: 负责处理业务逻辑 , 里面有复杂业务的具体实现；
数据层: 负责存储和管理与应用程序相关的数据

根据这新三层架构，我们一般会创建三个包与之对应，分别是 controller（类名以 Controller 为结尾，主要是提供给前端的接口）、service (类名以 Service 结尾，存放的是业务逻辑的代码)、dao (类名以 Dao 为结尾，主要存放查询数据的代码)，最后我们会再创建一个包【model、pojo、entity】来存放其他类（例如图书馆里系统有个图书类，包含图书的属性…）

Controller：控制层。接收前端发送的请求，对请求进行处理，并响应数据。
Service：业务逻辑层。处理具体的业务逻辑。
Dao：数据访问层，也称为持久层。负责数据访问操作，包括数据的增、删、改、查。

在这里插入图片描述

MVC 与新三层架构对应如下图所示：
在这里插入图片描述

加法计算器

在这里插入图片描述

前端代码：

<!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>

后端代码：

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/calc")
@RestController
public class CalcController {@RequestMapping("/sum")public String sum(Integer num1, Integer num2) {if(num1 == null || num2 == null) {return "<h1>参数输入有误，请重新检查后再输入</h1>";}int sum = num1 + num2;return "<h1>计算结果为 " + sum + "</h1>";}
}

用户登录

在这里插入图片描述
前端代码：这里使用 JQuery 封装的 ajax 来写前端接口
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="js/jquery.min.js"></script><script>$.ajax({type: "get",url: "/user/getLoginUser",success: function (userName) {$("#loginUser").text(userName);}});</script>
</body></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="js/jquery.min.js"></script><script>function login() {$.ajax({type: "post",url: "/user/login",data: {userName: $("#userName").val(),password: $("#password").val()},success: function (result) {if(result) {location.href = "index.html";} else {alert("账号或者密码错误，请重新输入");}}});}</script>
</body></html>

后端代码：

import jakarta.servlet.http.HttpSession;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RequestMapping("/user")
@RestController
public class UserController {@RequestMapping("/login")public boolean login(String userName, String password, HttpSession session) {if(!StringUtils.hasLength(userName) || !StringUtils.hasLength(password)) {return false;}if("admin".equals(userName) && "admin".equals(password)) {session.setAttribute("name","admin");return true;}return false;}@RequestMapping("/getLoginUser")public String getLoginUserName(HttpSession session) {return (String) session.getAttribute("name");}
}

留言墙

在这里插入图片描述

前端代码：
在这里插入图片描述

<!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="js/jquery.min.js"></script>
<script>load();function load() {$.ajax({type: "get",url: "/message/getList",success: function (messages) {if (messages != null && messages.length > 0) {var finalHtml = "";for (var m of messages) {finalHtml += "<div>" + m.from + "对" + m.to + "说:" + m.message + "</div>";}$(".container").append(finalHtml);}}});}function submit() {//1. 获取留言的内容var from = $('#from').val();var to = $('#to').val();var say = $('#say').val();if (from == '' || to == '' || say == '') {return;}var data = {from: from,to: to,message: say};$.ajax({type: "post",url: "/message/publish",contentType: "application/json",data: JSON.stringify(data),success: function (result) {var jsonObj = JSON.parse(result);if (jsonObj.ok == 1) {//成功//2. 构造节点var divE = "<div>" + from + "对" + to + "说:" + say + "</div>";//3. 把节点添加到页面上$(".container").append(divE);//4. 清空输入框的值$('#from').val("");$('#to').val("");$('#say').val("");} else {//失败alert("留言发布失败");}}});}</script>
</body></html>

后端代码：

import org.example.springbootdemo.test2.model.MessageInfo;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RequestMapping("/message")
@RestController
public class MessageController {private List<MessageInfo> messageInfoList = new ArrayList<>();@RequestMapping(value = "/publish",produces = "text/json")public String publish(@RequestBody MessageInfo messageInfo) {if(!StringUtils.hasLength(messageInfo.getFrom()) || !StringUtils.hasLength(messageInfo.getTo()) ||!StringUtils.hasLength(messageInfo.getMessage())) {return "{\"err\": 0}";}messageInfoList.add(messageInfo);return "{\"ok\": 1}";}@RequestMapping("/getList")public List<MessageInfo> getList() {return messageInfoList;}
}

import lombok.Data;@Data
public class MessageInfo {private String from;private String to;String message;
}

Spring MVC (三) —— 实战演练

项目设计我们会将前端的代码放入 static 包下： 高内聚，低耦合这是我们在实现项目的设计思想，一个项目里存在很多个模块，每一个模块内部的要求类与类、方法与方法要相互配合紧密联系，这就是高内聚，低耦合…...

编程日记 2025/1/26 3:29:00

媒体新闻发稿要求有哪些？什么类型的稿件更好通过？

为了保证推送信息的内容质量，大型新闻媒体的审稿要求一向较为严格。尤其在商业推广的过程中，不少企业的宣传稿很难发布在这些大型新闻媒体平台上。媒体新闻发稿要求有哪些？就让我们来了解下哪几类稿件更容易过审。一、媒体新闻发稿要求有哪…...

编程日记 2025/1/26 3:22:53

【游戏设计原理】82 - 巴斯特原则

巴斯特原则的核心是“对你的玩家好一点”，这一点直击游戏设计的核心——玩家体验。现代游戏设计不仅要注重挑战性，还要关注玩家的情绪波动与行为反应。当玩家因为过高的难度感到挫败甚至愤怒时，他们往往选择退出游戏，而不是迎接…...

编程日记 2025/1/26 3:21:51

DDD架构实战第六讲总结：领域驱动设计中的聚合

云架构师系列课程之DDD架构实战第六讲总结：领域驱动设计中的聚合聚合提升了对象系统的粒度，保证了业务逻辑的完整性，减少了错误产生的概率一、引言本讲将探讨领域驱动设计（DDD）中的重要概念——聚合。聚合是业务完整性的单元，是一个更大力度的封装。在领域驱动设计中…...

编程日记 2025/1/26 3:20:50

vim如何设置自动缩进

:set autoindent 设置自动缩进 :set noautoindent 取消自动缩进 （vim如何使设置自动缩进永久生效：vim如何使相关设置永久生效-CSDN博客）...

编程日记 2025/1/26 3:19:50

C++入门14——set与map的使用

在本专栏的往期文章中，我们已经学习了STL的部分容器，如vector、list、stack、queue等，这些容器统称为序列式容器，因为其底层是线性序列的数据结构，里面存储的是元素本身。而本篇文章我们要来认识一下关联式容器。 &am…...

编程日记 2025/1/26 3:17:48

单片机内存管理剖析

一、概述在单片机系统中，内存资源通常是有限的，因此高效的内存管理至关重要。合理地分配和使用内存可以提高系统的性能和稳定性，避免内存泄漏和碎片化问题。单片机的内存主要包括程序存储器（如 Flash）和数据存储器&a…...

编程日记 2025/1/26 3:15:40

【gopher的java学习笔记】Java中Service与Mapper的关系详解

在后端开发中，Java作为一种广泛使用的编程语言，其架构设计和层次划分对于系统的可维护性、可扩展性和性能有着至关重要的影响。特别是在使用MyBatis等持久层框架时，Service层与Mapper层的关系更是值得深入探讨。本文将从Java Web应用程序的角…...

编程日记 2025/1/26 3:13:36

2025美赛B题完整代码+建模过程

问题一为朱诺市建立一个可持续旅游产业模型。具体要求包括考虑游客数量、总收入，以及为稳定旅游业而实施的措施，明确优化因素和约束条件，并制定额外收入的支出计划，展示这些支出如何反馈到模型中以促进可持续旅游业发展，同时进行敏感性分析，讨论哪些因素最为重要。为了…...

编程日记 2025/1/26 3:12:33

【MySQL】我在广州学Mysql 系列——MySQL用户管理详解

ℹ️大家好，我是练小杰，本博客是春节前最后一篇了，在此感谢大佬们今年的支持！！🙏🙏 接下来将学习MYSQL用户管理的相关概念以及命令~~ 回顾：👉【MYSQL触发器的使用】数据…...

编程日记 2025/1/26 3:03:25

Linux-rt下卡死之hrtimer分析日志超时读过程分析 #define readl_poll_timeout(addr, val, cond, delay_us, timeout_us) \readx_poll_timeout(readl, addr, val, cond, delay_us, timeout_us)34 #define readx_poll_timeout(op, addr, val, cond, sleep_us, timeout_us) \…...

编程日记 2025/1/26 3:01:19

【AI日记】25.01.24

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】【AI日记】【读书与思考】 AI kaggle 比赛：Forecasting Sticker Sales 读书书名：法治的细节作者：罗翔律己 AI：8 小时，良作息：00:30-8:30&…...

编程日记 2025/1/26 3:00:16

React 中hooks之useSyncExternalStore使用总结

1. 基本概念 useSyncExternalStore 是 React 18 引入的一个 Hook，用于订阅外部数据源，确保在并发渲染下数据的一致性。它主要用于： 订阅浏览器 API（如 window.width）订阅第三方状态管理库订阅任何外部数据源 1.1 基…...

编程日记 2025/1/26 2:56:11

C++11新特性之decltype

1.decltype的作用 decltype是C11新增的一个关键字，与auto的功能一样，都是在编译期间推导变量类型的。不了解auto的可以转到——C11新特性之auto。为什么引入decltype？看过上边那篇博客的读者应该知道auto在有些场景中并不适用,所以引入declt…...

编程日记 2025/1/26 2:54:09

二叉树相关oj题 1. 检查两颗树是否相同。

二叉树相关oj题检查两颗树是否相同。OJ链接另一颗树的子树。OJ链接 if(rootnull)易漏掉会导致空指针异常翻转二叉树。OJ链接...

编程日记 2025/1/26 2:52:06

element tbas增加下拉框

使用Tabs 标签页的label插槽，嵌入Dropdown 下拉菜单，实现Tabs 标签页增加下拉切换功能 Tabs 标签页 tab-click"事件"（这个事件当中到拥有下拉框的tab里时，可以存一下Dropdown 第一个菜单的id，实现点击到拥有…...

编程日记 2025/1/26 2:51:03

新浪安卓(Android)开发面试题及参考答案（68道题，9道手撕题）

链表判环，找入口思路：判断是否有环：使用快慢指针，快指针每次走两步，慢指针每次走一步，如果它们相遇，说明有环。找出环入口：当判断出有环后，将慢指针重新指向头节点，然后快慢指针同时以相同速度移动，再次相遇的节点就是环的入口。以下是判断链表是否有环以及找出环…...

编程日记 2025/1/26 2:50:02

Zbrush导入笔刷

Zbrush笔刷目录: ...\Zbrush\ZStartup\BrushPresets...

编程日记 2025/1/26 2:47:59

实战演示：利用ChatGPT高效撰写论文

在当今学术界，撰写论文是一项必不可少的技能。然而，许多研究人员和学生在写作过程中常常感到困惑和压力。幸运的是，人工智能的快速发展为我们提供了新的工具，其中ChatGPT便是一个优秀的选择。本文将通过易创AI创作平台&#xff0c…...

编程日记 2025/1/26 2:43:55

大数据学习之SCALA分布式语言三

7.集合类 111.可变set一 112.可变set二 113.不可变MAP集合一 114.不可变MAP集合二 115.不可变MAP集合三 116.可变map一 package com . itbaizhan . chapter07 //TODO 2. 使用 mutable.Map 前导入如下包 import scala . collection . mutable // 可变 Map 集合 object Ma…...

编程日记 2025/1/26 2:42:54

k8s简介，k8s环境搭建

目录 K8s简介环境搭建和准备工作修改主机名（所有节点）配置静态IP（所有节点）关闭防火墙和seLinux，清除iptables规则（所有节点）关闭交换分区（所有节点）修改/etc/hosts文件&…...

编程日记 2025/1/26 2:40:52

深入理解MySQL事务（万字详）

文章目录什么是事务为什么会出现事务事务的版本支持事务的提交方式事务常见操作方式正常演示 - 证明事务的开始与回滚非正常演示1 - 证明未commit，客户端崩溃，MySQL自动会回滚（隔离级别设置为读未提交）非正常演示2 - 证明commit了…...

编程日记 2025/1/26 2:36:47

微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动

接口数据如上图省市区多级联动，都是使用的一个接口通过传参父类的code。返回我们想要的数据比如获取省就直接不要参数。市就把省得code传给接口，区就把市的code作为参数。 <picker mode"multiSelector" :range"mulSelect1" …...

编程日记 2025/1/26 2:34:44

Go Fx 框架使用指南：深入理解 Provide 和 Invoke 的区别

1. 什么是 Fx 框架？ Fx 是一个基于 Go 语言的依赖注入框架，专注于简化应用程序的生命周期管理和依赖的构建。在复杂的应用程序中，Fx 通过模块化的设计方式将组件连接起来，使开发者能够更高效地管理依赖关系。 Fx 的核心理念是&a…...

编程日记 2025/1/26 2:33:35

VSCode+Continue实现AI辅助编程

Continue是一款功能强大的AI辅助编程插件，可连接多种大模型，支持代码设计优化、错误修正、自动补全、注释编写等功能，助力开发人员提高工作效率与代码质量。以下是其安装和使用方法： 一、安装VSCode 参见： vscode安…...

编程日记 2025/1/26 2:32:28

阿里云服务器在Ubuntu上安装redis并使用

1、redis安装 sudo apt install lsb-release curl gpgcurl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpgecho "deb [signed-by/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.…...

编程日记 2025/1/26 2:25:20

Spring MVC (三) —— 实战演练

项目设计

高内聚，低耦合

Lombok

EditStarters 插件

三层架构

加法计算器

用户登录

留言墙

相关文章：

Spring MVC (三) —— 实战演练

媒体新闻发稿要求有哪些？什么类型的稿件更好通过？

【游戏设计原理】82 - 巴斯特原则

DDD架构实战第六讲总结：领域驱动设计中的聚合

vim如何设置自动缩进

C++入门14——set与map的使用

单片机内存管理剖析

【gopher的java学习笔记】Java中Service与Mapper的关系详解

2025美赛B题完整代码+建模过程

【MySQL】我在广州学Mysql 系列——MySQL用户管理详解

Linux-rt下卡死之hrtimer分析

【AI日记】25.01.24

React 中hooks之useSyncExternalStore使用总结

C++11新特性之decltype

二叉树相关oj题 1. 检查两颗树是否相同。

element tbas增加下拉框

新浪安卓(Android)开发面试题及参考答案（68道题，9道手撕题）

Zbrush导入笔刷

实战演示：利用ChatGPT高效撰写论文

大数据学习之SCALA分布式语言三

k8s简介，k8s环境搭建

深入理解MySQL事务（万字详）

微信小程序使用picker根据接口给的省市区的数据实现省市区三级联动或者省市区街道等多级联动

Go Fx 框架使用指南：深入理解 Provide 和 Invoke 的区别

VSCode+Continue实现AI辅助编程

阿里云服务器在Ubuntu上安装redis并使用

Blazor-Blazor呈现概念

14-6-2C++的list

StarRocks常用命令

激光雷达和相机早期融合