【WEEK4】 【DAY2】Integrating SSM Framework: Overview and Adding Data 【English Version】
2024.3.19 Tuesday
目录
7.4. Feature to Query All Books
7.4.1. Create BookController.java
7.4.2. Write index.jsp
package P17.controller;
import P17.project.Books;
import P17.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping("/book")
public class BookController {
// The controller calls the service layer
@Autowired
@Qualifier("BookServiceImplement")
private BookService bookService;
// Query all books and return to a book display page
@RequestMapping("/allBook")
public String list(Model model){
List<Books> list = bookService.queryAllBook(); // Call the service layer method to query all books
model.addAttribute("list",list); // Return the query to the frontend
return "allBook"; // Return to allBook.jsp
}
}
7.4.2.1. Initial Version (To Verify Code Logic is Correct)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Homepage</title>
</head>
<body>
<h3>
<%--The content inside ${} is the absolute path--%>
<a href="${pageContext.request.contextPath}/book/allBook">Enter Book Display Page</a>
</h3>
</body>
</html>
7.4.2.2. Final Version (Query Books Feature)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Homepage</title>
<style>
a{ <%--Specifically modify the title name to 'a'--%>
text-decoration: none; <%--Remove the default underline of tag 'a' titles--%>
color: black; <%--Change title color to black--%>
font-size: 18px; <%--Change the font size of the title--%>
}
h3{<%--Tag selector: modify the style of all tags on the page--%>
<%--Specifies the "space" length, width, and position for the title to appear--%>
width: 180px; <%--The width is 10 times a single character, so a line can accommodate 10 characters--%>
height: 38px;
margin: 100px auto; <%--Margin 100px, centered with auto--%>
text-align: center; <%--Text centered--%>
line-height: 38px; <%--Line height equal to font height--%>
background: aquamarine;
border-radius: 5px;
}
</style>
</head>
<body>
<h3>
<%--The content inside ${} is the absolute path--%>
<a href="${pageContext.request.contextPath}/book/allBook">Enter Book Display Page</a>
</h3>
</body>
</html>
Reference link: https://zhuanlan.zhihu.com/p/352965852
7.4.3. Create Book List Page allBook.jsp
7.4.3.1.Initial Version (To Verify Code Logic is Correct)
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Book Display Page</title>
</head>
<body>
<h1>Book Display</h1>
</body>
</html>
7.4.3.2. Final Version (Query Books Feature)
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Book Display Page</title>
<%--Beautify the page with Bootstrap--%>
<%--Import online Bootstrap--%>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <%--Container--%>
<div class="row clearfix"> <%--Mark bar, clear float--%>
<div class="col-md-12 column">
<div class="page-header"> <!--Adds space for content tagged as h1 (separates it from other parts)-->
<h1>
<small>Book List - Display All Books</small>
</h1>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped"> <%--Darken the color when the mouse hovers over a row--%>
<thead>
<tr> <%--Table header--%>
<th>Book ID</th>
<th>Book Name</th>
<th>Book Count</th>
<th>Book Details</th>
</tr>
</thead>
<%--Books queried from the database are iterated over from this list using foreach--%>
<tbody>
<%--c:forEach automatically imports the tag (first line)--%>
<c:forEach var="book" items="${list}">
<tr>
<td>${book.bookID}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
References and more: https://blog.csdn.net/hehe1954/article/details/130664501
7.4.4. Remember to configure Tomcat, import lib
(Didn’t pay attention to the resolution when saving the pictures, they’re too blurry now…)
7.4.5. Run the Application
7.4.5.1. Initial Version (To Verify Code Logic is Correct)
http://localhost:8080/SSMbuild_war_exploded/
After clicking: http://localhost:8080/SSMbuild_war_exploded/book/allBook
7.4.5.2. Final Version (Query Books Feature)
http://localhost:8080/SSMbuild_war_exploded/
http://localhost:8080/SSMbuild_war_exploded/book/allBook
7.5. Adding Book Functionality
7.5.1. Modify BookController.java
package P17.controller;
import P17.project.Books;
import P17.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Qualifier;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.awt.print.Book;
import java.util.List;
@Controller
@RequestMapping("/book")
public class BookController {
// The controller calls the service layer
@Autowired
@Qualifier("BookServiceImplement")
private BookService bookService;
// Query all books and return to a book display page
@RequestMapping("/allBook")
public String list(Model model){
List<Books> list = bookService.queryAllBook(); // Call the business layer method, query all books
model.addAttribute("list",list); // Return the query to the frontend
return "allBook"; // Return to allBook.jsp
}
// Jump to add book page
@RequestMapping("/toAddBook")
public String toAddPaper(){
return "addBook";
}
// Request to add a book
@RequestMapping("/addBook")
public String addBook(Books books){
System.out.println("addBook=>"+books); // Print logs
bookService.addBook(books);
return "redirect:/book/allBook"; // Redirect to @RequestMapping("/allBook") request
}
}
7.5.2. Modify allBook.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Book Display Page</title>
<%--Beautify the page with Bootstrap--%>
<%--Import online Bootstrap--%>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <%--Container--%>
<div class="row clearfix"> <%--Mark bar, clear float--%>
<div class="col-md-12 column">
<div class="page-header"> <!--Add space for the content tagged as h1 (separate it from other parts)-->
<h1>
<small>Book List - Display All Books</small>
</h1>
</div>
</div>
<div class="row">
<div class="col-md-4 column">
<%--Should add a request -> to be processed by BookController.java--%>
<a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">Add New Book</a>
<%--Create a button--%>
</div>
</div>
</div>
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-hover table-striped"> <%--Darken the color when the mouse hovers over a row--%>
<thead>
<tr> <%--Table header--%>
<th>Book ID</th>
<th>Book Name</th>
<th>Book Count</th>
<th>Book Details</th>
</tr>
</thead>
<%--Books are queried from the database and iterated from this list using foreach--%>
<tbody>
<%--c:forEach will automatically import the tag (first line)--%>
<c:forEach var="book" items="${list}">
<tr>
<td>${book.bookID}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
7.5.3. Create New Page addBook.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Add New Book</title>
<%-- <meta name="viewport" content="width=device-width, initial-scale=1.0">--%>
<%--Beautify the page with Bootstrap--%>
<%--Import online Bootstrap--%>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container"> <%--Container--%>
<div class="row clearfix"> <%--Mark bar, clear float--%>
<div class="col-md-12 column">
<div class="page-header"> <!--Add space for the content tagged as h1 (separate it from other parts)-->
<h1>
<small>Add New Book</small>
</h1>
</div>
</div>
</div>
<%--Book form--%>
<form action="${pageContext.request.contextPath}/book/addBook" method="post">
Book Name：<input type="text" name="bookName"><br><br><br>
Book Count：<input type="text" name="bookCounts"><br><br><br>
Book Details：<input type="text" name="detail"><br><br><br>
<input type="submit" value="Add">
<%--The above operation to add a book should be recognizable -> Modify BookController.java--%>
</form>
</div>
</body>
</html>
7.5.4. Running the Application
7.5.4.1. Issues Encountered
- The first issue encountered (seemingly resolved suddenly without any changes)
- 404
Reason: Added an extra } after the path addBook, causing the path after clicking “Submit” in “Add Book” to change to http://localhost:8080/SSMbuild_war_exploded/book/addBook%7D
- 400
Reason: Not all information was completely filled out
7.5.4.2. Final Version
http://localhost:8080/SSMbuild_war_exploded/ (No change in the homepage)
http://localhost:8080/SSMbuild_war_exploded/book/allBook
http://localhost:8080/SSMbuild_war_exploded/book/toAddBook
After clicking “Submit”, returned to
http://localhost:8080/SSMbuild_war_exploded/book/allBook
