SpringMVC：整合 SSM 下篇

SpringMVC - 05

整合 SSM 下篇

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

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

一、设计页面

1. 首页：index.jsp

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

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    
    


    

        进入书籍页面
    

效果

2. 展示书页面：showBooks.jsp

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>




    
    
    

    
    

    



    

        

            

            

                
书的清单 -- 显示所有书的信息
            
            


            

                

                    

                        增加书
                          
                        查看全部书
                    

                    

                        ${error}  
                        
                        查找
                    
                
            

            
                    

                

                

                    
书的编号
                    
书的名称
                    
书的数量
                    
详情（放置位置）
                    
操作
                
                

                

                

                        
${book.bookID}
                        
${book.bookName}
                        
${book.bookCounts}
                        
${book.detail}
                        

                            修改
                              |  
                            删除
                        
                    
                
                
            
        
    

效果

3. 增加书页面：addBook.jsp

功能：增加书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>




    
    
    

    
    

    



    

        

            

            

                
增加书
            
            


            

                

                    书的名称
                    
                
                

                    书的数量
                    
                
                

                    详情（放置位置）
                    
                
                

                    
                    核对信息
                
                
            
        
    

效果

4. 修改书页面：updateBook.jsp

功能：修改书。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>




    
    
    

    
    

    



    

        

            

            

                
修改信息
            
            

            

                
                
                

                    书的名称
                    
                
                

                    书的数量
                    
                
                

                    详情（放置位置）
                    
                
                
            
        
    

效果

5. 总结

• 超链接：xxx内容 ；

• 以按钮的样式实现超链接：xxx内容 ，其中 btn-primary 指定按钮的颜色；

• 行内元素：${键} ，可以指定值显示的样式，如颜色、粗细等，如果没有取到值，则不显示；

• 将表单、表格等都放在容器的栅格中：

  ，在容器中可以进行 Bootstrap 的栅格系统设置，学习链接：点此进入；

• 设置导航栏 navbar 时，可以在导航栏中放置容器 container，再在容器中放置表单 form；

• 通过

  可以使得表单下的内容是在一行的，如果表单要提交，则 form 中一定要有 action 和 method 属性，用来指定表单提交的路径以及提交方式，并且还要有提交的按钮： 或 提交 ；

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

• 空格：  ；

• 换行：
；

• 在前端页面取值用 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} 来显示“未查到”。

查到书的实现效果：

未查到书的实现效果：

---

三、总结

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

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

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

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

     • 前端：请求地址为：/路径 不需要加参数，但是输入的数据必须要有 name 属性；
     • 后端：请求地址为：/路径 不需要加参数，但是方法的参数前需要加注解 @RequestParam(“name的值”) 声明，如果参数是一个对象，则可以直接在方法的参数中定义一个对象即可。

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

---

四、说明

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

---

注意：

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