SpringMVC：整合 SSM 下篇

Sun 32852023-12-25 10:13

文章目录

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

SpringMVC - 05

整合 SSM 下篇

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

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

一、设计页面

1. 首页：index.jsp

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

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

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

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

功能：增加书。

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

功能：修改书。

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

  • 隐藏域：前端不显示数据，但是也会将数据提交给后台；

  • 空格 ：&nbsp; ；

  • 换行 ：<br> ；

  • 在前端页面取值 用 EL 表达式：{键} ；

  • 所需要的组件可以随时去前端开源工具库 Bootstrap 查找。

二、控制层

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

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

1. 查询全部书

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

说明：

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

2. 增加书

java 复制代码 
// 跳转到增加书籍页面
@RequestMapping("/toAdd")
public String toAdd() {
    return "addBook";
}

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

说明：

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

3. 修改书

java 复制代码 
// 跳转到修改信息页面
@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. 删除书

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

说明：

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

5. 搜索书

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

dao 接口，定义方法：

java 复制代码 
// 搜索
List<Books> searchBooksByName(@Param("bookName") String bookName);

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

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

业务接口：

java 复制代码 
// 搜索
List<Books> searchBooksByName(String bookName);

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

java 复制代码 
public List<Books> searchBooksByName(String bookName) {
    return mapper.searchBooksByName("%" + bookName + "%");
}

控制类：

java 复制代码 
// 搜索书籍
@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} 来显示"未查到"。

查到书的实现效果：

未查到书的实现效果：

三、总结

  1. 前端页面给后端传递数据：

    • 如果是 页面中已经存在的数据，可以用 RestFul 风格传参：

      • 前端 ：请求地址为：/路径/参数的值 ；
      • 后端 ：请求地址为：/路径/{方法中的参数名} ，并且方法的参数前需要加注解 @PathVariable 声明。

    • 如果是需要用户输入后，通过表单提交的数据：

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

四、说明

整合 SSM 上篇：点此进入

整合 SSM 中篇：点此进入

注意：

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

相关推荐
冰之杍27 分钟前
Vscode进行Java开发环境搭建
java·ide·vscode
跳动的梦想家h4 小时前
黑马点评 秒杀下单出现的问题：服务器异常---java.lang.NullPointerException: null（已解决）
java·开发语言·redis
苹果醋34 小时前
前端面试之九阴真经
java·运维·spring boot·mysql·nginx
哎呦没4 小时前
Spring Boot OA：企业办公自动化的高效路径
java·spring boot·后端
真心喜欢你吖4 小时前
Spring Boot与MyBatis-Plus的高效集成
java·spring boot·后端·spring·mybatis
2402_857589364 小时前
企业办公自动化：Spring Boot OA管理系统开发与实践
java·spring boot·后端
G丶AEOM5 小时前
JVM逃逸分析机制
java·jvm
无聊写博客5 小时前
JDK、JRE、JVM的区别
java·开发语言·jvm
message丶小和尚5 小时前
SpringBoot升级全纪录之项目启动
java·spring boot·mybatis
码上一元5 小时前
掌握 Spring 事务管理：深入理解 @Transactional 注解
数据库·spring
热门推荐
01抖音的互联网架构02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04国内外大模型汇总：Open AI大模型、Google大模型、Microsoft大模型、文心一言大模型、通义千问大模型、字节豆包大模型、智普清言大模型05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07非小米电脑下载小米电脑管家08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10单片机与数电模电：探索电子世界的核心领域