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

SpringMVC：整合 SSM 下篇

news 2025/9/15 7:16:07

文章目录

SpringMVC - 05
整合 SSM 下篇
一、设计页面
- 1. 首页：index.jsp
- 2. 展示书页面：showBooks.jsp
- 3. 增加书页面：addBook.jsp
- 4. 修改书页面：updateBook.jsp
- 5. 总结
二、控制层
- 1. 查询全部书
- 2. 增加书
- 3. 修改书
- 4. 删除书
- 5. 搜索书
三、总结
四、说明
注意：

SpringMVC - 05

整合 SSM 下篇

在上篇的基础上，对界面进行优化，并添加新的功能，如：增加书、修改书、删除书、以及搜索书。

前端页面的设计由前端开源工具库 Bootstrap 完成：官网点此进入。

一、设计页面

1. 首页：index.jsp

功能：提供一个链接，进入展示书的页面。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>首页</title><style>a {text-decoration: none;color: green;font-size: 18px;}h1 {width: 180px;height: 38px;margin: 100px auto;text-align: center;line-height: 38px;background: lightgoldenrodyellow;border-radius: 5px;}</style>
</head>
<body><h1><a href="${pageContext.request.contextPath}/wed/select">进入书籍页面</a></h1>
</body>
</html>

效果

2. 展示书页面：showBooks.jsp

功能：展示所有书，并且提供增加书、修改书以及搜索书的链接。

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>主页面</title>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-12 column"><br><div class="alert alert-success" role="alert"><h3>书的清单 -- 显示所有书的信息</h3></div><br><nav class="navbar navbar-light bg-light"><div class="container-fluid"><form class="form-inline"><a class="btn btn-primary" href="${pageContext.request.contextPath}/wed/toAdd">增加书</a>&nbsp;&nbsp;<a class="btn btn-primary" href="${pageContext.request.contextPath}/wed/select">查看全部书</a></form><form action="${pageContext.request.contextPath}/wed/search" method="get" class="form-inline my-2 my-lg-0"><span style="color: red;font-weight: bold">${error}</span>&nbsp;&nbsp;<input class="form-control mr-sm-2" type="search" placeholder="填入要查找的书" name="searchBookName" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">查找</button></form></div></nav><table class="table table-hover table-striped"><thead><tr><th>书的编号</th><th>书的名称</th><th>书的数量</th><th>详情（放置位置）</th><th>操作</th></tr></thead><tbody><c:forEach var="book" items="${booksList}"><tr><td>${book.bookID}</td><td>${book.bookName}</td><td>${book.bookCounts}</td><td>${book.detail}</td><td><a href="${pageContext.request.contextPath}/wed/toUpdate/${book.bookID}">修改</a>&nbsp; | &nbsp;<a href="${pageContext.request.contextPath}/wed/delete/${book.bookID}">删除</a></td></tr></c:forEach></tbody></table></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

3. 增加书页面：addBook.jsp

功能：增加书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>增加书</title>
</head>
<body>
<div class="container"><div class="row clearfix"><div class="col-md-12 column"><br><div class="alert alert-primary" role="alert"><h3>增加书</h3></div><br><form action="${pageContext.request.contextPath}/wed/add" method="get"><div class="form-group"><label for="bookName">书的名称</label><input type="text" class="form-control" name="bookName" id="bookName" required></div><div class="form-group"><label for="bookCounts">书的数量</label><input type="text" class="form-control" name="bookCounts" id="bookCounts" required></div><div class="form-group"><label for="detail">详情（放置位置）</label><input type="text" class="form-control" name="detail" id="detail" required></div><div class="form-group form-check"><input type="checkbox" class="form-check-input" id="check" required><label class="form-check-label" for="check">核对信息</label></div><input type="submit" class="btn btn-primary" value="提交"></form></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

4. 修改书页面：updateBook.jsp

功能：修改书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %><!doctype html>
<html lang="zh-CN">
<head><!-- 必须的 meta 标签 --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap 的 CSS 文件 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><title>修改信息</title>
</head>
<body>
<div class="container"><div class="row clearfix"><div class="col-md-12 column"><br><div class="alert alert-primary" role="alert"><h3>修改信息</h3></div><br><form action="${pageContext.request.contextPath}/wed/update" method="get"><!-- 隐藏域 --><input type="hidden" name="bookID" value="${Ubook.bookID}"><div class="form-group"><label for="bookName">书的名称</label><input type="text" class="form-control" name="bookName" value="${Ubook.bookName}" id="bookName" required></div><div class="form-group"><label for="bookCounts">书的数量</label><input type="text" class="form-control" name="bookCounts" value="${Ubook.bookCounts}" id="bookCounts" required></div><div class="form-group"><label for="detail">详情（放置位置）</label><input type="text" class="form-control" name="detail" value="${Ubook.detail}" id="detail" required></div><input type="submit" class="btn btn-primary" value="修改提交"></form></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous"></script></body>
</html>

效果

5. 总结

超链接：<a href="${pageContext.request.contextPath}/请求路径">xxx内容</a> ；
以按钮的样式实现超链接：<a class="btn btn-primary" href="${pageContext.request.contextPath}/请求路径">xxx内容</a> ，其中 btn-primary 指定按钮的颜色；
行内元素：<span style="color: green;font-weight: bold">${键}</span> ，可以指定值显示的样式，如颜色、粗细等，如果没有取到值，则不显示；
将表单、表格等都放在容器的栅格中：<div class="container-fluid"> ，在容器中可以进行 Bootstrap 的栅格系统设置，学习链接：点此进入；
设置导航栏 navbar 时，可以在导航栏中放置容器 container，再在容器中放置表单 form；
通过 <form class="form-inline"> 可以使得表单下的内容是在一行的，如果表单要提交，则 form 中一定要有 action 和 method 属性，用来指定表单提交的路径以及提交方式，并且还要有提交的按钮：<input type="submit" class="btn btn-primary" value="提交"> 或 <button type="submit" class="btn btn-outline-success">提交</button> ；
隐藏域：前端不显示数据，但是也会将数据提交给后台；
空格：  ；
换行：<br> ；
在前端页面取值用 EL 表达式：{键} ；
所需要的组件可以随时去前端开源工具库 Bootstrap 查找。

二、控制层

控制层作用：先调用业务层执行业务，后跳转页面。

用户进行的每一个操作都有控制类中的一个方法相对应。

1. 查询全部书

// 查询全部的书籍，并且返回到页面
@RequestMapping("/select")
public String select(Model model) {List<Books> booksList = booksService.selectAllBooks();model.addAttribute("booksList", booksList);return "showBooks";
}

说明：

对象调用业务层 selectAllBooks 方法，查询到全部书，存放在集合中；
用 Model 对象封装要传递给前端的数据，这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象。

2. 增加书

// 跳转到增加书籍页面
@RequestMapping("/toAdd")
public String toAdd() {return "addBook";
}// 添加书籍，并且跳转到主页面
@RequestMapping("/add")
public String add(Books books) {booksService.addBook(books);return "redirect:/wed/select";
}

说明：

当用户在页面点击【增加书】时，执行第一个请求，跳转到增加书的页面；
用户填写完书的信息后，点【提交】，执行第二个请求，先执行增加业务后，重定向到查询全部书的请求（增加完书后再查询一次全部书）。

3. 修改书

// 跳转到修改信息页面
@RequestMapping("/toUpdate/{bookID}")public String toUpdate(@PathVariable int bookID, Model model) {Books books = booksService.selectBook(bookID);model.addAttribute("Ubook", books);return "updateBook";
}// 修改书籍，并且跳转到主页面
@RequestMapping("/update")
public String update(Books books) {booksService.updateBook(books);return "redirect:/wed/select";
}

说明：

当用户在页面点击【修改】时，执行第一个请求，跳转到修改的页面；
- 这里需要知道要修改哪一本书，因此前端要把书的编号信息作为参数传递给后端，这里使用 RestFul 风格传参；
- 跳转页面时，将要修改的书的全部信息封装后，传递给要跳转的页面，这样在修改书的页面中就可以取到并显示原有的信息。
用户修改完书的信息后，点【修改提交】，执行第二个请求，先执行修改业务后，重定向到查询全部书的请求（修改完书后再查询一次全部书）。

4. 删除书

// 删除书籍
@RequestMapping("/delete/{bookID}")
public String delete(@PathVariable int bookID) {booksService.deleteBook(bookID);return "redirect:/wed/select";
}

说明：

当用户在页面点击【删除】时，执行该请求，先执行删除业务后，重定向到查询全部书的请求（删除完书后再查询一次全部书）；
这里需要知道要删除哪一本书，因此前端要把书的编号信息作为参数传递给后端，这里使用 RestFul 风格传参。

5. 搜索书

添加新功能时，要从底层开始依次增加：dao 接口 --> 实现类：编写 sql 语句 --> 业务接口 --> 业务实现类 --> 控制类。

dao 接口，定义方法：

// 搜索
List<Books> searchBooksByName(@Param("bookName") String bookName);

dao 接口实现类，sql 语句使用模糊查询：

<select id="searchBooksByName" parameterType="java.lang.String" resultType="Books">select * from ssmbuild.books where bookName like #{bookName}
</select>

业务接口：

// 搜索
List<Books> searchBooksByName(String bookName);

业务实现类，实现业务方法：

public List<Books> searchBooksByName(String bookName) {return mapper.searchBooksByName("%" + bookName + "%");
}

控制类：

// 搜索书籍
@RequestMapping("/search")
public String search(@RequestParam("searchBookName") String bookName, Model model) {List<Books> booksList = booksService.searchBooksByName(bookName);if (booksList.isEmpty()) {model.addAttribute("error", "未查到");}model.addAttribute("booksList", booksList);return "showBooks";
}

说明：

当用户在页面搜索框内搜索时，执行该请求，执行搜索业务后，将搜索到的书存放在集合中；
用 Model 对象封装要传递给前端的数据，这样前端页面中就可以通过 EL 表达式 {booksList} 来取到集合对象；
在没有搜索到数据时，用 Model 对象封装 error 数据，这样在前端页面中就可以通过 EL 表达式 ${error} 来显示“未查到”。

查到书的实现效果：

未查到书的实现效果：

三、总结

前端页面给后端传递数据：
- 如果是页面中已经存在的数据，可以用 RestFul 风格传参：
  - 前端：请求地址为：/路径/参数的值 ；
  - 后端：请求地址为：/路径/{方法中的参数名} ，并且方法的参数前需要加注解 @PathVariable 声明。
- 如果是需要用户输入后，通过表单提交的数据：
  - 前端：请求地址为：/路径 不需要加参数，但是输入的数据必须要有 name 属性；
  - 后端：请求地址为：/路径 不需要加参数，但是方法的参数前需要加注解 @RequestParam(“name的值”) 声明，如果参数是一个对象，则可以直接在方法的参数中定义一个对象即可。

后端给前端页面传递数据：用 Model 对象封装要传递给前端的数据，这样前端页面中就可以通过 EL 表达式 ${键} 来取到数据。
添加新功能时，要从底层开始依次增加：dao 接口 --> 实现类：编写 sql 语句 --> 业务接口 --> 业务实现类 --> 控制类。
控制类的方法中，重定向不用写项目名。
重定向不能直接访问 WEB-INF 下的资源，但可以通过重定向到请求地址，来间接访问，如：return "redirect:/wed/select" 。
在 SSM 的项目中，在服务器开启时，如果手动更改了数据库的数据，前端显示数据不能同步更新，使用 SpringBoot 可以解决。
要可以看懂前端的代码。
上篇中主要是搭框架，中篇是对上篇的优化总结，下篇中是进行了具体的开发，开发时要逐步完善功能，不断进行改进。

四、说明

整合 SSM 上篇：点此进入
整合 SSM 中篇：点此进入

注意：

前端开源工具库 Bootstrap 官网：https://v4.bootcss.com/，注意使用 Bootstrap 有特定的要求，可以通过中文文档进行学习和使用。

SpringMVC：整合 SSM 下篇

文章目录 SpringMVC - 05整合 SSM 下篇一、设计页面1. 首页：index.jsp2. 展示书页面：showBooks.jsp3. 增加书页面：addBook.jsp4. 修改书页面：updateBook.jsp5. 总结二、控制层1. 查询全部书2. 增加书3. 修改书4. 删除书5. 搜索书…...

编程日记 2023/12/26 3:01:00

[2023-年度总结]凡是过往,皆为序章

原创/朱季谦 2023年12月初，傍晚，在深圳的小南山看了一场落日。那晚我们坐在山顶的草地上，拍下了这张照片——仿佛在秋天的枝头上，结出一颗红透的夕阳。这一天很快就会随着夜幕的降临，化作记忆的碎片，然…...

编程日记 2023/12/26 2:59:59

OpenCV之像素操作

我们首先了解一下什么是像素，计算机中是如何存储图像，以及opencv是如何表示图像的。像素： 像素是指由图像的小方格即所谓的像素(pixel)组成的，这些小方块都有一个明确的位置和被分配的色彩数值，而这些一小方格的颜色…...

编程日记 2023/12/26 2:57:56

Transfer Learning（迁移学习）

1. 什么是迁移学习迁移学习(Transfer Learning)是一种机器学习方法，就是把为任务 A 开发的模型作为初始点，重新使用在为任务 B 开发模型的过程中。迁移学习是通过从已学习的相关任务中转移知识来改进学习的新任务，虽然大多数机器学习算法都…...

编程日记 2023/12/26 2:56:55

NPM 的使用技巧：简化 JavaScript 开发和依赖管理

前言 NPM（Node Package Manager）是 JavaScript 生态系统中最流行的包管理工具之一。本文将介绍一些有用的 NPM 使用技巧，帮助开发者更好地利用 NPM 管理项目依赖、执行脚本、发布自己的包以及解决常见问题。 1. 初始化项目使用 NPM 初始化…...

编程日记 2023/12/26 2:53:52

统计和绘图软件GraphPad Prism mac功能特点

GraphPad Prism mac是一款专业的统计和绘图软件，主要用于生物医学研究、实验设计和数据分析。 GraphPad Prism mac功能和特点数据导入和整理：GraphPad Prism 可以导入各种数据格式，并提供直观的界面用于整理、编辑和管理数据。用户可以轻松…...

编程日记 2023/12/26 2:52:51

WWW 指南-万维网联盟(World Wide Web)

WWW - 万维网联盟 WWW通常称为网络。 web是一个世界各地的计算机网络。电脑在Web上使用标准语言沟通。万维网联盟（W3C）制定了Web标准什么是WWW？ WWW 代表 World Wide Web(万维网)万维网常常被称为网络网络是世界各地的计算机网络网络中…...

编程日记 2023/12/26 2:50:49

Linux网络编程之TCP/IP实现高并发网络服务器设计指南

目录引言： 多进程服务器例程分享： 多线程服务器例程分享： I/O多路复用服务器 select 例程分享： poll 例程分享： epoll 例程分享： 总结建议引言： 随着互联网的迅猛发展&#xff…...

编程日记 2023/12/26 2:48:47

【SpringBoot实战】基于阿里云实现文件上传

【SpringBoot实战】基于阿里云实现文件上传在实际项目开发中，不可避免地会使用到阿里云OSS进行文件存储。尽管阿里云有详细的开发文档，但本篇博客的目的是让我们能够用简明的代码快速实现这个功能。引入依赖 <dependencies><!-- 阿里云oss…...

编程日记 2023/12/26 2:45:44

大数据技术学习笔记（十一）—— Flume

目录 1 Flume 概述1.1 Flume 定义1.2 Flume 基础架构 2 Flume 安装3 Flume 入门案例3.1 监控端口数据3.2 实时监控单个追加文件3.3 实时监控目录下多个新文件3.4 实时监控目录下的多个追加文件 4 Flume 进阶4.1 Flume 事务4.2 Flume Agent 内部原理4.3 Flume 拓扑结构4.3.1 简单…...

编程日记 2023/12/26 2:43:42

电路设计时，继电器线圈、风扇电机绕组等感性负载必须有续流二极管。

续流二极管（也常被称为“自由轮流二极管”或“反向并联二极管”）在感性负载电路中的应用非常重要，尤其是在继电器线圈、风扇电机绕组等设备中。感性负载是指那些在其线圈中会产生感应电动势的负载，例如电动机、变压器和继电器等。当这些设备的电源被切断时，它们的线圈会因…...

编程日记 2023/12/26 2:41:41

Mongodb基础介绍与应用场景

NoSql 解决方案第二种 Mongodb MongoDB 是一款开源高性能无模式的文档型数据库当然它是NoSql数据库中的一种是最像关系型数据库的非关系型数据库首先最需要注意的是无模式的文档型数据库这个需要后面我们看到它的数据才能明白其次是最像关系型数据库的非关系型数据…...

编程日记 2023/12/26 2:37:34

mysql参数配置binlog

官网地址： MySQL :: MySQL Replication :: 2.6.4 Binary Logging Options and Variables 欢迎关注留言，我是收集整理小能手，工具翻译，仅供参考，笔芯笔芯. MySQL 复制 / ... / 二进制日志记录选项和变量 2.6.4 二进…...

编程日记 2023/12/26 2:35:32

pytorch常用的几个函数详解

文章目录 view基本用法自动计算维度保持原始数据不变 t函数功能语法返回值示例注意事项 permute() 函数基本概念permute() 函数的使用 unsqueeze() 函数基本概念unsqueeze() 函数的使用 squeeze() 函数基本概念squeeze() 函数的使用 transpose() 函数基本概念transpose() 函数的…...

编程日记 2023/12/26 2:34:31

Linux下安装Flume

1 下载Flume Welcome to Apache Flume — Apache Flume 下载1.9.0版本 2 上传服务器并解压安装 3 删除lib目录下的guava-11.0.2.jar （如同服务器安装了hadoop，则删除，如没有安装hadoop则保留这个文件，否则无法启动flume&#…...

编程日记 2023/12/26 2:33:30

20231225使用BLE-AnalyzerPro WCH升级版BLE-PRO蓝牙分析仪抓取BLE广播数据

20231225使用BLE-AnalyzerPro WCH升级版BLE-PRO蓝牙分析仪抓取BLE广播数据 2023/12/25 20:05 结论：硬件蓝牙分析仪不一定比手机端的APK的效果好！ 亿佰特E104-2G4U04A需要3片【单通道】，电脑端的UI为全英文的。 BLE-AnalyzerPro WCH升级版B…...

编程日记 2023/12/26 2:28:25

.net6使用Sejil可视化日志

（关注博主后，在“粉丝专栏”，可免费阅读此文） 之前介绍了这篇.net 5使用LogDashboard_.net 5logdashboard rootpath-CSDN博客这篇文章将会更加的简单，最终的效果都是可视化日志。在程序非常庞大的时候&…...

编程日记 2023/12/26 2:26:23

代码 import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.math.BigDecimal; import java.util.ArrayList; import java.util.Iterator; import java.util.List; import java.util.Objects;public class 大数据导出为insert {public …...

编程日记 2023/12/26 2:25:21