文章目录
- 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> <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> <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> | <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 有特定的要求,可以通过中文文档进行学习和使用。