1.建立一個maven專案

2.新增maven依賴

3.建立基本結構和框架

<dependencies>
   <!--Junit-->
   <dependency>
       <groupId>junit</groupId>
       <artifactId>junit</artifactId>
       <version>4.12</version>
   </dependency>
   <!--資料庫驅動-->
   <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>
   <!--Servlet - JSP -->
   <dependency>
       <groupId>javax.servlet</groupId>
       <artifactId>servlet-api</artifactId>
       <version>2.5</version>
   </dependency>
 

   <dependency>
       <groupId>javax.servlet.jsp</groupId>
       <artifactId>jsp-api</artifactId>
       <version>2.2</version>
   </dependency>
   <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>
   <dependency>
       <groupId>org.mybatis</groupId>
       <artifactId>mybatis-spring</artifactId>
       <version>2.0.2</version>
   </dependency>
   <!--Spring-->
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-webmvc</artifactId>
       <version>5.1.9.RELEASE</version>
   </dependency>
   <dependency>
       <groupId>org.springframework</groupId>
       <artifactId>spring-jdbc</artifactId>
       <version>5.1.9.RELEASE</version>
   </dependency>
</dependencies>

過濾資源

<build>
<resources>
<resource>
             <directory>${basedir}/src/main/webapp</directory>
         </resource>
         <resource>
             <directory>${basedir}/src/main/resources</directory>
         </resource>
         <resource>
             <directory>${basedir}/src/main/java</directory>
             <includes>
                 <include>**/*.xml</include>
                 <include>**/*.properties</include>
             </includes>
         </resource>
</resources>
</build>

Mybatis層編寫

1.資料庫配置檔案（database.properties）

jdbc.driver=com.mysql.jdbc.Driver
jdbc.url=jdbc:mysql://192.168.23.129:3306/SSM?useSSL=false&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=liushuo

2.編寫MyBatis的核心配置檔案（mybaits-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>
  <!--  <settings>
        <setting name="logImpl" value="LOG4J"/>
    </settings>-->
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING" />
    </settings>
    <!--設定別名-->
     <typeAliases>
         <package name="com.liushuo.pojo"/>
     </typeAliases>

    <mappers>
    <mapper class="com.liushuo.dao.BooksDao"></mapper>
    </mappers>

</configuration>

3. 編寫資料庫對應的實體類（Books）

package com.liushuo.pojo;

import lombok.Data;

@Data
public class Books {
 private int bookId;
 private String bookName;
 private int bookCounts;
 private String detail;
}

4.編寫Dao層的 Mapper介面！（BooksDao）

package com.liushuo.dao;

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

import java.util.List;

public interface BooksDao {
    int addBook(Books books);
    int deleteBook(@Param("bookId") int id);
    int updatebook(Books books);
    Books bookFandById(@Param("bookId") int id);
    List<Books> queryAllBook();
    Books queryBook(@Param("bookName") String bookName);

}

5.編寫介面對應的 Mapper.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.liushuo.dao.BooksDao">

    <insert id="addBook" parameterType="Books">
        insert into books (bookName, bookCounts, detail)
        values (#{bookName}, #{bookCounts}, #{detail})
    </insert>

    <delete id="deleteBook" 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="bookFandById" resultType="Books">
        select *
        from books
        where bookId = #{bookId}
    </select>

    <select id="queryAllBook" resultType="Books">
        SELECT * from books
    </select>
    <select id="queryBook" resultType="Books">
        select *
        from books
        where bookName = #{bookName}
    </select>

</mapper>

6. 編寫Service層的介面和實現類

介面

package com.liushuo.service;

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

import java.util.List;

public interface BooksService {
    int addBook(Books books);
    int deleteBook(int id);
    int updatebook(Books books);
    Books bookFandById(int id);
    List<Books> queryAllBook();
    Books queryBook( String bookName);
}

實現類

package com.liushuo.service.impl;

import com.liushuo.dao.BooksDao;
import com.liushuo.pojo.Books;
import com.liushuo.service.BooksService;

import java.util.List;

public class BooksServiceImpl implements BooksService {
    private BooksDao booksDao;

    public void setBooksDao(BooksDao booksDao) {
        this.booksDao = booksDao;
    }

    @Override
    public int addBook(Books books) {
        return booksDao.addBook(books);
    }

    @Override
    public int deleteBook(int id) {
        return booksDao.deleteBook(id);
    }

    @Override
    public int updatebook(Books books) {
        return booksDao.updatebook(books);
    }

    @Override
    public Books bookFandById(int id) {
        return booksDao.bookFandById(id);
    }

    @Override
    public List<Books> queryAllBook() {
        return booksDao.queryAllBook();
    }

    @Override
    public Books queryBook(String bookName) {
        return booksDao.queryBook(bookName);
    }
}

OK，到此，底層需求操作編寫完畢！

Spring層

1.配置Spring整合MyBatis，我們這裡資料來源使用c3p0連線池；（spring-dao.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">
    <!--引入外部檔案-->
    <context:property-placeholder location="classpath:database.properties"/>
    <!--資料庫連線池-->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}"></property>
        <property name="jdbcUrl" value="${jdbc.url}"></property>
        <property name="user" value="${jdbc.username}"></property>
        <property name="password" value="${jdbc.password}"></property>
        <property name="maxPoolSize" value="30"/>
        <property name="minPoolSize" value="10"/>
       <!-- 關閉後不啟動 commit-->
        <property name="autoCommitOnClose" value="false"></property>
      <!-- 獲取連線池超時時間-->
        <property name="checkoutTimeout" value="10000"/>
       <!--失敗後獲取次數-->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>

    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--注入資料庫連線-->
        <property name="dataSource" ref="dataSource"/>
        <!--整合mybatis-->
        <property name="configLocation" value="classpath:mybaits-config.xml"/>
    </bean>

    <!--配置Dao介面掃描-->
    <bean  class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory" />
        <property name="basePackage" value="com.liushuo.dao"/>
    </bean>
</beans>

2..Spring整合service層（spring-service.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"
       xmlns:tx="http://www.springframework.org/schema/tx" xmlns:aop="http://www.springframework.org/schema/aop"
       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
       http://www.springframework.org/schema/tx
       http://www.springframework.org/schema/tx/spring-tx.xsd http://www.springframework.org/schema/aop https://www.springframework.org/schema/aop/spring-aop.xsd">
    <!-- 掃描service相關的bean -->
    <context:component-scan base-package="com.liushuo.service" />
    <!--BookServiceImpl注入到IOC容器中-->
    <bean id="BookServiceImpl" class="com.liushuo.service.impl.BooksServiceImpl">
        <property name="booksDao" ref="booksDao"/>
    </bean>

    <!--1. 配置事務管理器-->
    <bean class="org.springframework.jdbc.datasource.DataSourceTransactionManager" id="transactionManager">
        <!--注入DataSource-->
        <property name="dataSource" ref="dataSource"></property>
    </bean>

    <!--2. 配置事務的通知-->
    <tx:advice transaction-manager="transactionManager" id="txAdvice">
        <!--5. 配置事務的屬性
                    isolation=""            用於指定事務的隔離級別, 預設值是DEFAULT ,表示使用資料庫的預設隔離級別
                    propagation=""          用於指定事務的傳播行為, 預設值是REQUIRED,表示一定會有事務, 增刪改的選擇, 查詢方法可以選擇SUPPORTS
                    read-only=""            用於指定事務是否只讀, 只有查詢方法才能設定為true. 預設值是false,表示讀寫
                    timeout=""              用於指定事務的超時時間,預設值是 -1, 表示用不超時. 如果指定了數值, 以秒為單位
                    rollback-for=""         用於指定一個異常, 當產生該異常時, 事務回滾, 當產生其他異常時,事務不回滾. 沒有預設值. 表示任何異常都回滾
                    no-rollback-for=""      用於指定一個異常, 當產生該異常時,事務不回滾, 產生其他異常時,事務回滾. 沒有預設值. 表示任何異常都回滾
        -->
        <!--find*的優先順序肯定是高於*的優先順序，這裡就要求 在service的實現類中命名的時候 需要規範，查詢操作的時候 需要以find開頭
            才能匹配到查詢相關的事務控制
        -->
        <tx:attributes>
            <tx:method name="*" propagation="REQUIRED"  />
        </tx:attributes>
    </tx:advice>


    <!-- 配置aop-->
    <aop:config >
        <!--3. 配置切入點表示式-->
        <aop:pointcut id="pt1" expression="execution(* com.liushuo.dao.*.*(..))"></aop:pointcut>
        <!--4. 建立切入點表示式和事務通知對應的關係-->
        <aop:advisor advice-ref="txAdvice" pointcut-ref="pt1"></aop:advisor>
    </aop:config>

</beans>

SpringMVC層

1.web.xml

<?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">
  <!--1.註冊servlet-->
  <servlet>
    <servlet-name>SpringMVC</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <!--通過初始化引數指定SpringMVC配置檔案的位置，進行關聯-->
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <param-value>classpath:applicationContext.xml</param-value>
    </init-param>
    <!-- 啟動順序，數字越小，啟動越早 -->
    <load-on-startup>1</load-on-startup>
  </servlet>
  <!--所有請求都會被springmvc攔截 -->
  <servlet-mapping>
    <servlet-name>SpringMVC</servlet-name>
    <url-pattern>/</url-pattern>
  </servlet-mapping>

<filter>
    <filter-name>encodingFilter</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>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</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">
    <!-- 自動掃描包，讓指定包下的註解生效,由IOC容器統一管理 -->
    <context:component-scan base-package="com.liushuo.controller"/>
    <!-- 讓Spring MVC不處理靜態資源 -->
    <mvc:default-servlet-handler />
    <!--
    支援mvc註解驅動
        在spring中一般採用@RequestMapping註解來完成對映關係
        要想使@RequestMapping註解生效
        必須向上下文中註冊DefaultAnnotationHandlerMapping
        和一個AnnotationMethodHandlerAdapter例項
        這兩個例項分別在類級別和方法級別處理。
        而annotation-driven配置幫助我們自動完成上述兩個例項的注入。
     -->
    <!--註解驅動-->
    <mvc:annotation-driven />
    <!-- 檢視解析器 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"
          id="internalResourceViewResolver">
        <!-- 字首 -->
        <property name="prefix" value="/WEB-INF/jsp/" />
        <!-- 字尾 -->
        <property name="suffix" value=".jsp" />
    </bean>
</beans>

3.Spring配置整合檔案，applicationContext.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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
      ">

    <import resource="classpath:spring-dao.xml"/>
    <import resource="classpath:spring-service.xml"/>
    <import resource="classpath:springmvc-servlet.xml"/>
</beans>

配置檔案，暫時結束！

Controller 和 檢視層編寫

1..BookController 類編寫

package com.liushuo.controller;

import com.liushuo.pojo.Books;
import com.liushuo.service.BooksService;
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.ArrayList;
import java.util.List;

@Controller
@RequestMapping("/books")
public class BooksController {
    @Autowired
    @Qualifier("BookServiceImpl")
    private BooksService booksService;

    @RequestMapping("/b1")
    public String allBooks(Model model) {
        List<Books> books = booksService.queryAllBook();
        System.out.println(books);
        model.addAttribute("list", books);
        return "list";
    }

    @RequestMapping("/toAddBook")
    public String toAddBook() {
        return "addBook";
    }

    @RequestMapping("/addBook")
    public String addBook(Books books) {
        booksService.addBook(books);
        return "redirect:/books/b1";
    }

    @RequestMapping("/toUpdate")
    public String toUpdate(int id, Model model) {
      /*  bookId = id;*/
        Books books = booksService.bookFandById(id);
        model.addAttribute("list", books);
        return "updateBook";
    }

    @RequestMapping("/updateBook")
    public String updateBook(Books books) {
      /*  books.setBookId(bookId);*/
        booksService.updatebook(books);
        return "redirect:/books/b1";
    }
    @RequestMapping("/deleteBook")
    public String updateBook(int id) {
        booksService.deleteBook(id);
        return "redirect:/books/b1";
    }
    @RequestMapping("/queryBook")
    public String queryBook(String queryBookName,Model model) {
        Books books = booksService.queryBook(queryBookName);
        List<Books> list1 = new ArrayList<>();
        list1.add(books);
        if(books==null){
             list1 = booksService.queryAllBook();
             model.addAttribute("msg","未查到");
        }
        model.addAttribute("list", list1);
        return "list";
    }
}

2..編寫首頁index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE HTML>
<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">點選進入列表頁</a>
</h3>
</body>
</html>

3..書籍列表頁面 list.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 最新版本的 Bootstrap 核心 CSS 檔案 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<html>
<head>
    <title>書籍展示</title>
    <style>
        .page-head {
            text-align: center;
            color: black;
        }
    </style>
</head>
<body>
<%--建一個容器--%>
<div class="container">
    <%--柵格系統--%>
    <div class="row clearfix">
        <%--分成12--%>
        <div class="col-md-12" >
            <%--表頭--%>
            <div class="page-head">
                <h3>書籍列表--展示書籍</h3>
            </div>
        </div>
        <div class="table-row-cell">
            <div class="col-md-4">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/books/toAddBook">新增</a>
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/books/b1">顯示全部書籍</a>
            </div>
            <div class="col-md-4">

            </div>
            <div class="col-md-4">
                <form class="from-inline" action="${pageContext.request.contextPath}/books/queryBook" method="post" autocomplete="off" style="float: right" >
                    <span style="color:red;font-weight:bold">${msg}</span>
                    <input type="text" name="queryBookName" placeholder="請輸入要查詢的書籍"/>
                    <input type="submit" value="查詢" class="btn btn-primary"/>
                </form>

            </div>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-12">
            <table class="table table-bordered" >
                <thead >
                <tr>
                    <th>書籍編號</th>
                    <th>書籍名稱</th>
                    <th>書籍數量</th>
                    <th>書籍詳情</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody class="content">
                <c:forEach var="book" items="${list}">
                    <tr>
                        <td>${book.bookId}</td>
                        <td>${book.bookName}</td>
                        <td>${book.bookCounts}</td>
                        <td>${book.detail}</td>
                        <td>

                            <a href="${pageContext.request.contextPath}/books/toUpdate?id=${book.bookId}">修改</a>|
                            <a href="${pageContext.request.contextPath}/books/deleteBook?id=${book.bookId}">刪除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>
</html>

4..書籍新增頁面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<html>
<head>
    <title>Title</title>
    <style>
        .page-head {
            text-align: center;
            color: black;
        }
    </style>
</head>
<body>
<div class="container">
    <%--柵格系統--%>
    <div class="row clearfix">
        <%--分成12--%>
        <div class="col-md-12" >
            <%--表頭--%>
            <div class="page-head">
                <h3>書籍列表--新增書籍</h3>
            </div>
        </div>
    </div>
            <form action="${pageContext.request.contextPath}/books/addBook" class="form-horizontal" role="form">
                <div class="form-group">
                    <label  class="col-sm-2 control-label">書籍名稱</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookName" name="bookName" placeholder="請輸入名稱" required>
                    </div>
                </div>
                <div class="form-group">
                    <label  class="col-sm-2 control-label">書籍數量</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="bookCounts" name="bookCounts" placeholder="請輸入數量" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">書籍詳情</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="detail" name="detail" placeholder="請輸入詳情" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">新增</button>
                    </div>
                </div>
            </form>
</body>
</html>

5..書籍修改頁面

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/8/7
  Time: 22:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題檔案（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 檔案 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<html>
<head>
    <title>Title</title>
    <style>
        .page-head {
            text-align: center;
            color: black;
        }
    </style>
</head>
<body>
<div class="container">
    <%--柵格系統--%>
    <div class="row clearfix">
        <%--分成12--%>
        <div class="col-md-12" >
            <%--表頭--%>
            <div class="page-head">
                <h3>書籍列表--修改書籍</h3>
            </div>
        </div>
    </div>
    <form action="${pageContext.request.contextPath}/books/updateBook" class="form-horizontal" role="form">
        <div>
            <input type="hidden" name="${list.bookId}">
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">書籍名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="bookName" name="bookName" value="${list.bookName}">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">書籍數量</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="bookCounts" name="bookCounts" value="${list.bookCounts}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">書籍詳情</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="detail" name="detail" value="${list.detail}">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default">修改</button>
            </div>
        </div>
    </form>
</body>
</html>

8.配置Tomcat，進行執行！