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，进行运行！