# SSM整合：添加書籍功能 ###### tags: `ssm整合` ### 1.在BookController中，添加toAddPaper跟addBook方法 ```java= @Controller @RequestMapping("/book") public class BookController { //controller調 service層 @Autowired @Qualifier("BookServiceImpl") private BookService bookService; //查詢全部的書籍，並返回到一個書籍展示頁面 @RequestMapping("/allBook") public String list(Model model){ List<Books> list = bookService.queryAllBook(); model.addAttribute("list",list); return "allBook"; } //跳轉到增加書籍頁面 @RequestMapping("/toAddBook") public String toAddPaper(){ return "addBook"; } //添加書籍的請求 @RequestMapping("/addBook") public String addBook(Books books){ System.out.println("addBook=>"+books); bookService.addBook(books); return "redirect:/book/allBook"; //重定向到我們的 @RequestMapping("/allBook")請求： } } ``` ### 2.allBook.jsp中添加"新增書籍"的按鈕 ```htmlembedded= <div class="row"> <div class="col-md-4 column"> <%--toAddBook--%> <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook">新增書籍</a> </div> ``` #### 呈現畫面(左上方的"新增書籍") ![](https://i.imgur.com/OOz5v8n.png) ### 3.新增toAddPaper方法中，所要跳轉的addBook頁面 此頁面中，要提供書籍名稱、書籍數量、書籍描述等資訊，輸入後會新增到資料庫中，並直接跳回到主頁 #### 注意name中的名稱，必須與該類別中的屬性名稱完全相符，否則會傳輸失敗 ```htmlembedded= <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <div class="page-header"> <h1> <small>新增書籍</small> </h1> </div> </div> </div> <form action="${pageContext.request.contextPath}/book/addBook" method=""> <div class="form-group"> <label>書籍名稱：</label> <%--required：此欄位必須填寫--%> <input type="text" name="bookName" class="form-control" required> </div> <div class="form-group"> <label>書籍數量：</label> <input type="text" name="bookCounts" class="form-control" required> </div> <div class="form-group"> <label>書籍描述：</label> <input type="text" name="detail" class="form-control" required> </div> <div class="form-group"> <input type="submit" class="form-control" value="添加"> </div> </form> </div> </body> </html> ``` #### required是用來提示用戶必須輸入資料，否則無法提交 ```htmlembedded= <input type="text" name="bookName" class="form-control" required> ``` ![](https://i.imgur.com/pvP3hho.png) ### 4.測試 #### 填寫書籍資料 ![](https://i.imgur.com/ifMGj2N.png) #### 提交後，跳轉到主頁 #### 書籍成功添加列表中 ![](https://i.imgur.com/JvwiMgZ.png)