天天看點

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

系列文章

SSM之SpringMVC 01 —— SpringMVC原理及概念、Hello SpringMVC 注解版和配置版

SSM之SpringMVC 02 —— Controller和RestFul風格、轉發和重定向、資料處理和亂碼問題、Json

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)

SSM之SpringMVC 04 —— Ajax、攔截器、檔案上傳和下載下傳

文章目錄

  • 系列文章
  • 7、整合SSM
    • 7.1、資料庫
    • 7.2、基本環境搭建
    • 7.3、MaBatis層
    • 7.4、Spring層
    • 7.5、SpringMVC層

7、整合SSM

開發環境:

  • IDEA 2019.3
  • MySQL 5.7.33
  • Tomcat 9.0.43
  • Maven 3.3.9

要求:熟練掌握MySQL資料庫、Spring、JavaWeb、MyBatis,以及簡單前端(這裡用到bootstrap美化界面,我們隻需明白前端如何給後端傳資料以及如何從後端拿資料,用${})

源碼下載下傳:https://pan.baidu.com/s/16fNpMkGeXZud-U58Z5y67g 提取碼: q3eq

效果圖:

1、首頁

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

2、書籍清單頁面

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

3、添加書籍頁面

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

4、删除書籍

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

5、修改書籍

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

6、查詢書籍

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM
SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

7.1、資料庫

CREATE DATABASE `ssmbuild`;

USE `ssmbuild`;

DROP TABLE IF EXISTS `books`;
CREATE TABLE `books` (
    `bookID` INT(10) NOT NULL AUTO_INCREMENT COMMENT '書id',
    `bookName` VARCHAR(100) NOT NULL COMMENT '書名',
    `bookCounts` INT(11) NOT NULL COMMENT '數量',
    `detail` VARCHAR(200) NOT NULL COMMENT '描述',
    KEY `bookID` (`bookID`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

INSERT INTO `books`(`bookID`,`bookName`,`bookCounts`,`detail`)VALUES
(1,'Java',1,'從入門到放棄'),
(2,'MySQL',10,'從删庫到跑路'),
(3,'Linux',5,'從進門到進牢');
           

7.2、基本環境搭建

完整項目結構:

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

1、建立Maven項目,SSMproject,添加Web支援。

2、導入相關依賴

<!-- 常用包 -->
<!-- lombok簡化pojo -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <version>1.18.12</version>
</dependency>
<!-- Junit測試 -->
<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
</dependency>
<!-- LOG4J日志 -->
<dependency>
    <groupId>log4j</groupId>
    <artifactId>log4j</artifactId>
    <version>1.2.17</version>
</dependency>


<!-- Spring 相關 -->
<!-- SpringMvc架構 -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>5.1.9.RELEASE</version>
</dependency>
<!-- Spring AOP-->
<dependency>
    <groupId>org.aspectj</groupId>
    <artifactId>aspectjweaver</artifactId>
    <version>1.9.6</version>
</dependency>
<!-- Spring 連接配接資料庫 -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>5.3.3</version>
</dependency>
<!-- spring整合mybatis -->
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis-spring</artifactId>
    <version>2.0.6</version>
</dependency>



<!-- Servlet-JSP相關 -->
<!-- Servlet API -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>servlet-api</artifactId>
    <version>2.5</version>
</dependency>
<!-- JSP API -->
<dependency>
    <groupId>javax.servlet.jsp</groupId>
    <artifactId>jsp-api</artifactId>
    <version>2.2</version>
</dependency>
<!-- JSTL表達式 -->
<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
    <version>1.2</version>
</dependency>


<!-- 資料庫相關 -->
<!-- MyBatis包 -->
<dependency>
    <groupId>org.mybatis</groupId>
    <artifactId>mybatis</artifactId>
    <version>3.5.2</version>
</dependency>
<!-- MySQL驅動 -->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.47</version>
</dependency>
<!-- 資料庫連接配接池 -->
<dependency>
    <groupId>com.mchange</groupId>
    <artifactId>c3p0</artifactId>
    <version>0.9.5.2</version>
</dependency>
           

3、建立基本結構和架構配置

  • com.zcy.pojo
  • com.zcy.dao
  • com.zcy.service
  • com.zcy.controller
  • mybatis-config.xml
    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE configuration
            PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
            "http://mybatis.org/dtd/mybatis-3-config.dtd">
    <configuration>
        
    </configuration>
               
  • spring-dao.xml(spring整合dao)
  • spring-service.xml(spring整合dao)
  • spring-controller.xml(spring整合dao)
  • applicationContext.xml(将dao、service、controller合并到同一個檔案)

    上面四個的配置相似

    <?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans"
           xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
           xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/springbeans.xsd">
        
    </beans>
               

7.3、MaBatis層

MyBatis層主要操作資料庫,旗下有Dao層(直接操作資料)的接口+對應mapper以及Service層的(調用Dao層) 接口+實作類。

1、資料庫配置檔案 database.properties

#如果使用MySQL8.0以上,需要在url配置時區:&serverTimezone=Asia/Shanghai
jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssmbuild?useSSL=false&useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
jdbc.username=root
jdbc.password=123456
           

2、IDEA連接配接資料庫(注意Advanced裡配置serverTimezone=Asia/Shanghai)

SSM之SpringMVC 03 —— 整合SSM(簡單圖書系統)系列文章7、整合SSM

3、編寫MyBatis的核心配置檔案(mybatis-config.xml)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<!-- 資料源交給Spring連接配接,這裡就不用配置了  -->
    <!-- 别名 -->
    <typeAliases>
        <package name="com.zcy.pojo"/>
    </typeAliases>
    <!-- 注冊Mapper -->
    <mappers>
        <mapper class="com.zcy.dao.BooksMapper"/>
    </mappers>

</configuration>
           

4、編寫資料庫對應的實體類(com.zcy.pojo.Books)

//這裡使用了lombok插件
package com.zcy.pojo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Books {
    private int bookID;
    private String bookName;
    private int bookCounts;
    private String detail;
}
           

5、編寫Dao層的Mapper接口

package com.zcy.dao;

import com.zcy.pojo.Books;
import org.apache.ibatis.annotations.Param;

import java.util.List;

public interface BookMapper {
    //增加一本書
    int addBook(Books books);

    //删除一本書
    int deleteBookByID(@Param("bookID") int id);

    //更新一本書
    int updateBook(Books books);

    //查詢一本書
    Books queryBookByID(@Param("bookID") int id);

    //查詢全部書
    List<Books> queryAllBook();

    //查詢一類書
    List<Books> queryBookByName(@Param("bookName") String bookName);
}
           

6、編寫接口對應的BooksMapper.xml。(要有前面導入的MyBatis包才有效)

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.zcy.dao.BookMapper">
    <!-- 增加一本書(bookID是自增,可以省略)-->
    <insert id="addBook" parameterType="books">
        insert into books (bookName,bookCounts,detail)
         values (#{bookName},#{bookCounts},#{detail});
    </insert>

    <!-- 删除一本書(int的别名是_int,Integer的别名是int,自動裝箱)-->
    <delete id="deleteBookByID" parameterType="int">
        delete from books where bookID = #{bookID}
    </delete>

    <!-- 更新一本書-->
    <update id="updateBook" parameterType="books">
        update books
        set bookName=#{bookName},bookCounts=#{bookCounts},detail=#{detail}
        where bookID=#{bookID}
    </update>

    <!-- 查詢一本書-->
    <select id="queryBookByID" parameterType="int" resultType="books">
        select * from books where bookID=#{bookID}
    </select>

    <!-- 查詢全部書-->
    <select id="queryAllBook" resultType="books">
        select * from books
    </select>

    <!-- 查詢一類書-->
    <select id="queryBookByName" parameterType="string" resultType="books">
        select * from books where bookName = #{bookName}
    </select>

</mapper>
           

7、編寫Service層的接口和實作類

接口:

package com.zcy.service;

import com.zcy.pojo.Books;

import java.util.List;

public interface BookService {
    //增加一本書
    int addBook(Books books);

    //删除一本書
    int deleteBookByID(int id);

    //更新一本書
    int updateBook(Books books);

    //查詢一本書
    Books queryBookByID(int id);

    //查詢全部書
    List<Books> queryAllBook();

    //查詢一類書
    List<Books> queryBookByName(String bookName);
}
           

實作類:

package com.zcy.service;

import com.zcy.dao.BookMapper;
import com.zcy.pojo.Books;

import java.util.List;

public class BookServiceImpl implements BookService {
    //Service層隻需調用DAO層,要有set方法才能注入
    private BookMapper bookMapper;
    public void setBookMapper(BookMapper bookMapper) {
        this.bookMapper = bookMapper;
    }


    public int addBook(Books books) {
        return bookMapper.addBook(books);
    }

    public int deleteBookByID(int id) {
        return bookMapper.deleteBookByID(id);
    }

    public int updateBook(Books books) {
        return bookMapper.updateBook(books);
    }

    public Books queryBookByID(int id) {
        return bookMapper.queryBookByID(id);
    }

    public List<Books> queryAllBook() {
        return bookMapper.queryAllBook()   ;
    }

    public List<Books> queryBookByName(String bookName) {
        return bookMapper.queryBookByName(bookName);
    }
}
           

7.4、Spring層

1、配置Spring來整合MyBatis層的Dao接口、mapper.xml以及Service層的接口、實作類。這裡的資料源使用C3P0(資料源可以自己選,前面用的是Spring自帶的資料源)。

2、編寫相關配置檔案spring-dao.xml ,将MyBatis層下的Dao層整合進來。

建議對比一下之前Spring學習中整合MyBatis的配置檔案。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 配置整合MyBatis Dao -->
    <!-- 1. 關聯資料庫配置檔案database.properties  -->
    <context:property-placeholder location="classpath:database.properties"/>

    <!-- 2. 資料庫連接配接池(代替了mybatis-config.xml的environment)
            c3p0(自動化、可自動加載配置檔案并設定到對象中)、dbcp(半自動化、不能自動連接配接)
            之前Spring項目中用的是自帶的 DriverManagerDataSource
        -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <!-- 配置連接配接池屬性(不同資料源的屬性名稱不同) -->
        <property name="driverClass" value="${jdbc.driver}"/>
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>

        <!-- c3p0連接配接池的私有屬性 -->
        <!-- 最大/小連接配接數量 -->
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
        <!-- 關閉連接配接後不自動commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 擷取連接配接逾時時間(10秒) -->
        <property name="checkoutTimeout" value="10000"/>
        <!-- 當擷取連接配接失敗重試次數 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>

    <!-- 3. 配置sqlSessionFactoryBean(用于生成SqlSession的) -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!-- 注入資料源 -->
        <property name="dataSource" ref="dataSource"/>
        <!-- 關聯MyBatis核心配置檔案 -->
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <!-- 4. 掃描Dao接口包,可以動态實作Dao接口注入到Spring容器。
            在Spring項目中,我們使用的是SqlSessionTemplate來手動注入,
            或者繼承SqlSessionDaoSupport來自動注入。-->
    <!-- 具體解釋:https://www.cnblogs.com/jpfss/p/7799806.html   -->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!-- 注入sqlSessionFactory -->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
        <!-- 給出需要掃描的包  -->
        <property name="basePackage" value="com.zcy.dao"/>
    </bean>
</beans>
           

3、編寫相關配置檔案spring-service.xml ,将MyBatis層下的service層整合進來。

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    <!-- 1. 掃描service層的相關bean -->
    <context:component-scan base-package="com.zcy.service"/>

    <!-- 2. 将BookServiceImpl注入到容器(配置或注解都可以) -->
    <bean id="BookServiceImpl" class="com.zcy.service.BookServiceImpl">
        <!-- 這裡ref能引用到bookMapper,因為spring-dao.xml中配置動态掃描 -->
        <property name="bookMapper" ref="bookMapper"/>
    </bean>

    <!-- 3. 配置事務管理器  -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <!-- 注入資料庫連接配接池 -->
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!-- 4. 可加入AOP事務支援(切入的地方) -->
</beans>
           

7.5、SpringMVC層

SpringMVC主要是Controller層。

1、web.xml 需要配置DispatcherServlet和亂碼過濾器

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <!-- 配置DispatcherServlet -->
    <servlet>
        <servlet-name>DispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!-- 注意:這裡要用總的Spring配置檔案 -->
            <param-value>classpath:applicationContext.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>DispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <!-- 用Spring自帶的亂碼過濾器 -->
    <filter>
        <filter-name>CharacterEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>utf-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CharacterEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>

    <!-- session過期時間 15分鐘    -->
    <session-config>
        <session-timeout>15</session-timeout>
    </session-config>
</web-app>
           

2、配置spring-mvc.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 配置SpringMVC    -->
    <!-- 1. 掃描包  -->
    <context:component-scan base-package="com.zcy.controller"/>
    <!-- 2. 開啟注解驅動   -->
    <mvc:annotation-driven/>
    <!-- 3. 靜态資源預設Servlet配置  -->
    <mvc:default-servlet-handler/>

    <!-- 4. 配置JSP的視圖解析器  -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>
           

3、配置applicationContext.xml,來整合spring-dao、spring-service、spring-mvc

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">
    <import resource="spring-dao.xml"/>
    <import resource="spring-service.xml"/>
    <import resource="spring-mvc.xml"/>
</beans>
           

至此,架構已經搭建完成!接下來編寫SpringMVC的Controller以及視圖層(用了bootstrap美化,JSP中隻需要明白通過$擷取後端值就行)。

1、BookController.java

package com.zcy.controller;

import com.zcy.pojo.Books;
import com.zcy.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.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.List;

@Controller
@RequestMapping("/book")
public class BookController {
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;

    //跳轉到添加一本書頁面
    @RequestMapping("/toAddBook")
    public String toAddBook(){
        return "addBook";
    }

    //查詢全部書
    @RequestMapping("/allBook")
    public String queryAllBook(Model model){
        List<Books> list = bookService.queryAllBook();
        model.addAttribute("list", list);
        return "allBook";
    }

    //添加一本書(參數是前端傳遞過來的)
    @PostMapping("/addBook")
    public String addBook(Books books){
        bookService.addBook(books);
        return "redirect:/book/allBook";
    }

    //跳轉到修改書籍頁面(RestFul風格)
    @RequestMapping("/toUpdateBook/{bookID}")
    public String toUpdateBook(@PathVariable("bookID") int id, Model model){
        Books books = bookService.queryBookByID(id);
        model.addAttribute("book", books);
        return "updateBook";
    }

    //修改一本書
    @PostMapping("/updateBook")
    public String updateBook(Books books){
        bookService.updateBook(books);
        return "redirect:/book/allBook";
    }

    //删除一本書
    @RequestMapping("/deleteBook/{bookID}")
    public String deleteBook(@PathVariable("bookID") int id){
        bookService.deleteBookByID(id);
        return "redirect:/book/allBook";
    }

    //查詢一類書
    @PostMapping("/queryBookByName")
    public String queryBookByName(String bookName, Model model){
        List<Books> list = bookService.queryBookByName(bookName);
        model.addAttribute("list", list);
        System.out.println("queryBookByName——》"+list);
        if (list==null || list.isEmpty())
            model.addAttribute("message", "書籍不存在");
        return "allBook";
    }
}
           

2、首頁:index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>首頁</title>
    <style type="text/css">
      a{
        text-decoration: none;
        color: black;
        font-size: 18px;
      }
      h3{
        width: 180px;
        height: 38px;
        margin: 100px auto;
        text-align: center;
        line-height: 38px;
        background: deepskyblue;
        border-radius: 4px;
      }
    </style>
  </head>
  <body>
    <h3>
      <a href="${pageContext.request.contextPath}/book/allBook" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >點選進入清單頁面</a>
    </h3>
  </body>
</html>
           

3、書籍清單頁面: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>書籍清單</title>
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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>
    <div class="row">
        <div class="col-md-4 column">
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/toAddBook" target="_blank" rel="external nofollow" >新增</a>
            <a class="btn btn-primary" href="${pageContext.request.contextPath}/book/allBook" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >顯示全部書籍</a>
        </div>
        <div class="col-md-8 column">
            <%-- 按書名查詢 --%>
            <form class="form-inline" action="${pageContext.request.contextPath}/book/queryBookByName" method="post" style="float: right">
                <span style="color: red">${message}</span>
                <input type="text" name="bookName" class="form-control" placeholder="請輸入要查詢的書籍名稱"/>
                <input type="submit" value="查詢" class="btn btn-primary">
            </form>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <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="${requestScope.get('list')}">
                    <tr>
                        <td>${book.getBookID()}</td>
                        <td>${book.getBookName()}</td>
                        <td>${book.getBookCounts()}</td>
                        <td>${book.getDetail()}</td>
                        <td>
                            <a href="${pageContext.request.contextPath}/book/toUpdateBook/${book.getBookID()}" target="_blank" rel="external nofollow" >更改</a> |
                            <a href="${pageContext.request.contextPath}/book/deleteBook/${book.getBookID()}" target="_blank" rel="external nofollow" >删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>
           

4、添加書籍頁面: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>新增書籍</title>
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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="post">
        書籍名稱:<input type="text" name="bookName"><br><br><br>
        書籍數量:<input type="text" name="bookCounts"><br><br><br>
        書籍詳情:<input type="text" name="detail"><br><br><br>
        <input type="submit" value="添加">
    </form>
</div>
           

5、修改書籍頁面:updateBook.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改資訊</title>
    <meta name="viewport" content="width=device-width, initialscale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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/updateBook" method="post">
        <input type="hidden" name="bookID" value="${book.getBookID()}"/>
        書籍名稱:<input type="text" name="bookName" value="${book.getBookName()}"/></br></br>
        書籍數量:<input type="text" name="bookCounts" value="${book.getBookCounts()}"/></br></br>
        書籍詳情:<input type="text" name="detail" value="${book.getDetail() }"/></br></br>
        <input class="btn btn-primary" type="submit" value="送出"/>
    </form>
</div>