基于SSM框架快速搭建书籍管理系统

1. 说明

1.1相关说明

(1)需要掌握MySQL数据库，Spring，JavaWeb及MyBatis知识，简单的前端知识。
(2)SSM:Spring+SpringMVC+Mybatis
(3）代码复制粘贴即可使用
(4)使用了AJAX进行页面局部数据交互
(5)登录注册功能就是访问一下数据库中是否存在该用户和密码，然后跳转到主页面，这里省。
1.2系统运行结果界面
（1）主页面

（2）添加数据页面

（3）修改书籍页面

2.开发步骤

2.1数据库设计
（1）新建一个books表 主键为bookID 自增
CREATE TABLE books (
bookID int NOT NULL AUTO_INCREMENT COMMENT ‘书id’,
bookName varchar(100) NOT NULL COMMENT ‘书名’,
bookCounts int NOT NULL COMMENT ‘数量’,
detail varchar(200) NOT NULL COMMENT ‘描述’,
KEY bookID (bookID)
) ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8mb3
（2）在books表中添加相应记录，如下图

2.2 使用intelliJ IDEA新建项目
（1）新建一个空的maven父项目：ssmBooks，idea配置maven读者可自行百度
（2）导入相关依赖。在父项目的pom.xml中添加如下代码（在project标签内）

<dependencies>
        <!--junit-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--mysql依赖-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.15</version><!--数据库版本号，注意与自己安装的mySql一样-->
        </dependency>
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
        <!--servlet jsp-->
        <!--servlet依赖-->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
            <scope>provided</scope>
        </dependency>
        <!--jstl表达式的依赖-->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>
        <!--mybatis——spring整合-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        <!--Spring依赖-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.2.0.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.2.0.RELEASE</version>
        </dependency>
        <!--lombok依赖-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>RELEASE</version>
            <scope>compile</scope>
        </dependency>
        <!--Aop织入包-->
        <dependency> <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.9.4</version>
        </dependency>
        <!--导入fastJson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.60</version>
        </dependency>
    </dependencies>
    <!--  在build中配置resources，防止资源导出失败的问题  -->
    <build>
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource> <resource>
            <directory>src/main/resources</directory>
            <includes> <include>**/*.properties</include>
                <include>**/*.xml</include>
            </includes>
            <filtering>false</filtering>
        </resource>
        </resources>
    </build>

（3）在父项目下新建一个maven子项目ssmBooks-01，并添加web项目支持


（4）完善项目目录，在java目录下分别新建如下几个包，constants包可以用来存放项目开发用到的常量类，controller是spring控制层，dao是数据访问层，pojo是实体层，service是服务层，utils可以存放项目开发常用的工具类。

（5）然后再各包下，新建如下类和接口，各类和接口的具体代码会在下面的内容，这里先展示出项目结构，方面配置mybatis别名和spring注入。（C为新建的类，I为新建的接口）

2.3配置资源文件
（1）连接数据库，配置数据库属性文件
使用IDEA连接MySQL数据库（可自行百度），然后查看自己的数据库连接属性，如图。然后新建一个db.properties文件在ssmBooks-01的resources文件下,在db.properties填写自己的数据库属性（图中展示的是我的password和url，你们要换成自己的，同时注意url要添加时区等信息serverTimezone=UTC&useSSL=false）

db.driver=com.mysql.cj.jdbc.Driver
db.url=jdbc:mysql://localhost:3306/ssm?serverTimezone=UTC&useSSL=false
db.username=root
db.password=65636532

（2）配置mybatis，新建一个mybatis-config.xml文件在ssmBooks-01的resources文件下，内容代码如下

<?xml version="1.0" encoding="GBK" ?>
<!--注意mybatis的xml文件编码为GBK，不然编写中文注释会出错-->
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <settings>
        <setting name="logImpl" value="STDOUT_LOGGING"/>
    </settings>
    <!--这里是设置包别名，注意和自己创建的pojo包名对应-->
    <typeAliases>
        <package name="com.lin.pojo" />
    </typeAliases>
   <!--这里是设置dao层映射文件-->
    <mappers>
        <mapper resource="com/lin/dao/BookMapper.xml"/>
    </mappers>
</configuration>

（3）配置dao层实体类注入，新建一个spring-dao.xml文件在ssmBooks-01的resources文件下，内容代码如下

<?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.关联数据库配置文件-->
    <context:property-placeholder location="classpath:db.properties"/>
    <!-- 2.数据库连接池 -->
    <!--数据库连接池 dbcp 半自动化操作 不能自动连接
    c3p0 自动化操作（自动的加载配置文件 并且设置到对象里面） -->
    <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
        <property name="driverClassName" value="${db.driver}"></property>
        <property name="url" value="${db.url}"></property>
        <property name="username" value="${db.username}"></property>
        <property name="password" value="${db.password}"></property>
    </bean>
    <!--3.sqlSessionFactory-->
    <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容器中-->
    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--扫描dao包-->
        <property name="basePackage" value="com.lin.dao"/>
        <!--注入sqlSessionFactory-->
        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"/>
    </bean>
</beans>

（4）配置service层实体类注入，新建一个spring-service.xml文件在ssmBooks-01的resources文件下，内容代码如下

<?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:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        https://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/aop
         https://www.springframework.org/schema/aop/spring-aop.xsd
         http://www.springframework.org/schema/tx
         http://www.springframework.org/schema/tx/spring-tx.xsd">

    <!--1.扫描service下的包-->
    <context:component-scan base-package="com.lin.service"/>
    <!--2.将我们的所有业务类，注入到Spring，可以通过配置，也可以通过注解-->
    <bean id="BookServiceImpl" class="com.lin.service.BookServiceImpl">
        <!--这里配置的时候报红，没有关系，之后在BookServiceImpl类编写代码的时候会添加一个bookMapper类-->
        <property name="bookMapper" ref="bookMapper"/>
    </bean>

    <!--配置声明式事务-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource" />
    </bean>
    <!--可在如下配置事务通知-->
    <!--可在如下配置aop织入事务-->
</beans>

（5）配置controller层实体类注入，新建一个spring-servlet.xml文件在ssmBooks-01的resources文件下，内容代码如下

<?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.lin.controller"/>
    <!--静态资源过滤-->
    <mvc:default-servlet-handler/>
    <!-- 支持mvc注解驱动
    在spring中一般采用@RequestMapping注解来完成映射关系
    要想使@RequestMapping注解生效
    必须向上下文中注册DefaultAnnotationHandlerMapping 和一个AnnotationMethodHandlerAdapter实例
    这两个实例分别在类级别和方法级别处理。
    而annotation-driven配置帮助我们自动完成上述两个实例的注入。 -->
    <mvc:annotation-driven/>
    <!--统一解决json乱码问题-->
    <!--<mvc:annotation-driven>
        <mvc:message-converters register-defaults="true">
            <bean class="org.springframework.http.converter.StringHttpMessageConverter">
                <constructor-arg value="utf-8"/>
            </bean>
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="objectMapper">
                    <bean class="org.springframework.http.converter.json.Jackson2ObjectMapperFactoryBean">
                        <property name="failOnEmptyBeans" value="false"/>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>
-->
    <!--视图解析器-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver" id="internalResourceViewResolver">
        <!--前缀-->
      <!--  <property name="prefix" value="/WEB-INF/jsp/"/>-->
        <!--这里的前缀和后缀的设置和自己在web中编写的jsp页面有关，前缀为页面所在文件夹-->
        <property name="prefix" value="/SYS/"/>
        <!--后缀-->
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

(6)整合spring配置文件，新建一个applicationContextAll.xml文件在ssmBooks-01的resources文件下，内容代码如下

<?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-service.xml"/>
       <import resource="spring-dao.xml"/>
       <import resource="spring-servlet.xml"/>
</beans>

配置资源文件完成！

2.3各层类和接口代码
（1）constants包下，Constant类

package com.lin.constants;

public  class Constant {
    /*设置每页展示的条数*/
    private static int pageSize=11;
    /*返回pageSize*/
    public static int getPageSize() {
        return pageSize;
    }
}

（2）pojo包下，

package com.lin.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/*这些是lombok包下的注解*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Books {
    private int bookID;
    private  String bookName;
    private int bookCounts;
    private String detail;
}

package com.lin.pojo;
import lombok.Data;
import java.util.List;
@Data
/*这个类与页面展示内容相关*/
public class BooksView {
    private List<Books> data;
    private int pageNow;
    private int pageCount;
}

（3）dao包下

package com.lin.dao;
import com.lin.pojo.Books;
import org.apache.ibatis.annotations.Param;
import java.util.List;
import java.util.Map;
public interface BookMapper {
    /*增加一本书*/
    int addBook(Books books);
    /*删除一本书*/
    int deleteBookById(@Param("bookID") int id);
    /*更新一本书*/
    int updateBook(Books books);
    /*查询一本书*/
    Books queryBookById(@Param("bookID") int id);
    /*查询全部书limitByPage*/
    List<Books> queryBooks(Map<String,Object> map);
    /*统计全部书籍*/
    int countBooks(String bookName);
}

dao层实现映射文件xml

<?xml version="1.0" encoding="GBK" ?>
<!--注意mybatis的xml文件编码为GBK，不然编写中文注释会出错-->
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!--namespace-->
<mapper namespace="com.lin.dao.BookMapper">
    <insert id="addBook" parameterType="Books">
        insert into books (bookName, bookCounts, detail) value (#{bookName},#{bookCounts},#{detail})
    </insert>
    <delete id="deleteBookById" parameterType="int">
        delete from books where bookID=#{bookID}
    </delete>
    <update id="updateBook" parameterType="Books">
        update books
        <set>
        <if test="bookName !=null">bookName=#{bookName},</if>
        <if test="bookCounts !=null">bookCounts=#{bookCounts},</if>
        <if test="detail !=null">detail=#{detail},</if>
        </set>
    where bookID=#{bookID}
    </update>
    <select id="queryBookById" parameterType="int" resultType="Books">
        select * from books where bookID=#{bookID}
    </select>
    <select id="queryBooks" resultType="Books" parameterType="map">
        select * from books
        <where>
            <if test="bookName!=null">
                and bookName like "%"#{bookName}"%"
            </if>
        </where>
        limit #{startIndex},#{pageSize}
    </select>
    <select id="countBooks" resultType="int" >
        select count(*) from books
        <where>
            <if test="bookName!=null">
                and bookName like "%"#{bookName}"%"
            </if>
        </where>
    </select>
</mapper>

（4）service包下

package com.lin.service;
import com.lin.pojo.Books;
import java.util.List;
import java.util.Map;
public interface BookService {
    /*增加一本书*/
    int addBook(Books books);
    /*删除一本书*/
    int deleteBookById(int id);
    /*更新一本书*/
    int updateBook(Books books);
    /*查询一本书*/
    Books queryBookById(int id);
    /*查询全部书*/
    List<Books> queryBooks(Map<String,Object> map);
    int countBooks(String bookName);
}

service层实现类

package com.lin.service;
import com.lin.dao.BookMapper;
import com.lin.pojo.Books;
import java.util.List;
import java.util.Map;
public class BookServiceImpl implements BookService{
    private BookMapper bookMapper;
    public void setBookMapper(BookMapper bookMapper) {
        this.bookMapper = bookMapper;
    }
    @Override
    public int addBook(Books books) {
        return bookMapper.addBook(books);
    }
    @Override
    public int deleteBookById(int id) {
        return bookMapper.deleteBookById(id);
    }
    @Override
    public int updateBook(Books books) {
        return bookMapper.updateBook(books);
    }
    @Override
    public Books queryBookById(int id) {
        return bookMapper.queryBookById(id);
    }
    @Override
    public List<Books> queryBooks(Map<String,Object> map) {
        return bookMapper.queryBooks(map);
    }
    @Override
    public int countBooks(String bookName) {
        return bookMapper.countBooks(bookName);
    }
}

（5）utils工具包

package com.lin.utils;
import lombok.Data;
@Data
/*用来返回判断数据交互是否成功，如插入一条数据*/
public class BooleanResultJson {
    private boolean result=false;
}

（6）controller包

package com.lin.controller;
import com.alibaba.fastjson.JSON;
import com.lin.constants.Constant;
import com.lin.pojo.Books;
import com.lin.pojo.BooksView;
import com.lin.service.BookService;
import com.lin.utils.BooleanResultJson;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@Controller
@RequestMapping("/book")
/*Controller调Service层*/
public class BookController {
/*注入service实现类*/
    @Autowired
    @Qualifier("BookServiceImpl")
    private BookService bookService;
/*测试url*/
    @RequestMapping("/t1")
    public String test(Model model){
        model.addAttribute("msg","测试");
        return "test";
    }
/*查询所有书籍*/
    @PostMapping(value = "/queryAll",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String queryAllBooks(String bookName,int pageNow){

        Map<String,Object> map=new HashMap<>();
        if(bookName==null||bookName=="")
        {
            map.put("bookName",null);
            bookName=null;
        }
        else
        {
            map.put("bookName",bookName);
        }
        map.put("startIndex",(pageNow-1)*Constant.getPageSize());
        map.put("pageSize", Constant.getPageSize());
        List<Books> booksList = bookService.queryBooks(map);
        int countBooks = bookService.countBooks(bookName);
        BooksView booksView=new BooksView();
        booksView.setData(booksList);
        booksView.setPageCount(countBooks);
        booksView.setPageNow(pageNow);
        String resultDTO = JSON.toJSONString(booksView);
        return  resultDTO;

    }
    /*添加书籍*/
    @PostMapping(value = "/addBook",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String addBook(Books books){
        BooleanResultJson booleanResultJson=new BooleanResultJson();
        //根据请求参数名字自动给books对象赋值
      if ( bookService.addBook(books)>0) {
          booleanResultJson.setResult(true);
          return JSON.toJSONString(booleanResultJson);
      }
      else {
          return JSON.toJSONString(booleanResultJson);
      }
    }
    /*通过id查询书籍*/
    @PostMapping(value = "/getBookByID",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String getBookByID(int bookID){
        Books books=bookService.queryBookById(bookID);

        return JSON.toJSONString(books);
    }
/*更新书籍*/
    @PostMapping(value = "/modifyBook",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String modifyBook(Books books){
        BooleanResultJson booleanResultJson=new BooleanResultJson();
        if(bookService.updateBook(books)>0)
        {
            booleanResultJson.setResult(true);
            return JSON.toJSONString(booleanResultJson);
        }
        else {
            return JSON.toJSONString(booleanResultJson);
        }
    }
    /*删除书籍*/
    @PostMapping(value = "/deleteBook",produces = "application/json;charset=utf-8")
    @ResponseBody
    public String deleteBook(int bookID){
        BooleanResultJson booleanResultJson=new BooleanResultJson();
        if(bookService.deleteBookById(bookID)>0)
        {
            booleanResultJson.setResult(true);
            return JSON.toJSONString(booleanResultJson);
        }
        else {
            return JSON.toJSONString(booleanResultJson);
        }
    }
}

3.前端页面开发

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: yiruo
  Date: 2021/12/15
  Time: 11:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <h2>这页可以编写登录注册页面</h2>
  <ol>
    <li><a href="${pageContext.request.contextPath}/SYS/AllBooks.jsp">数据管理系统测试</a></li>
  </ol>
  </body>
</html>

在web.xml下新建一个文件夹SYS，然后新建一个AllBooks.jsp(test.jsp为编写项目时测试用的，可以不建)

在AllBooks.jsp中编写如下前端代码

<%--前端代码开发真的比较麻烦，有没有小伙伴想做整合前端代码的，开创出一款快捷设置页面布局的前端开发工具
  Created by IntelliJ IDEA.
  User: yiruo
  Date: 2021/12/15
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
    <%-- <link rel="stylesheet" href="/resources/demos/style.css">--%>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script>
    <style>
        h1{
            text-align: center;
            font-family: 仿宋 ;
        }
        table{
            border-collapse: collapse;
            border-spacing: 0;
            border:1px solid black;
        }
        tr{
            line-height: 2;
        }
        th,td{
            border:1px solid black;
        }
        .cont{
            text-align: center;
            /* margin-left: 560px;*/
            margin-top: 50px;
            line-height: 1.5;
        }
        .nav,.search,.page{
            line-height: 2;
        }
        tbody{
            font: 30px 仿宋;
            text-align: center;
        }
        tbody td{
            border:1px solid black;
            line-height: 30px;
            padding: 10px 30px;
        }
    </style>
</head>
<body>
<h1>书籍管理系统</h1>
<div class="cont">
    <section class="nav">
        <a href="#" onclick="addBookDiaShow()">新增书籍</a>
        <a href="#" onclick="loadTable()">展示书籍</a>
    </section>
    <section class="search">
       <%--默认查询书名和开始页码--%>
        <form  method="post">
            <input type="text" name="searchName"/>
            <input hidden name="pageNow" id="pageNow" value="0"/>
            <input type="button" onclick="loadTable(1)" value="查询">
        </form>
    </section>
    <section>
        <table align="center">
            <thead>
            <tr>
                <th>书籍编号</th>
                <th>书籍名称</th>
                <th>数量</th>
                <th>书籍描述</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="data">

            </tbody>
        </table>
        <div class="page">

        </div>
    </section>

    <section id="addBookDia">
        <form  method="post">
            <div>
                <label>
                    <span>书籍名称：</span><input name="bookName"/>
                </label>
            </div>
            <div>
                <label >
                    <span>数&nbsp;&nbsp;&nbsp;&nbsp;量：</span><input type="text" name="bookCounts"/>
                </label>
            </div>
            <div>
                <label >
                    <span>描&nbsp;&nbsp;&nbsp;&nbsp;述：</span><input type="text" name="detail"/>
                </label>
            </div>
        </form>
    </section>

    <section id="modifyBook">
        <form  method="post">
            <div>
                <label>
                    <span>书籍ID：</span> <input type="text" readonly="readonly" name="ID"/>
                </label>
            </div>
            <div>
                <label>
                    <span>书籍名称：</span><input name="bookName"/>
                </label>
            </div>
            <div>
                <label >
                    <span>数&nbsp;&nbsp;&nbsp;&nbsp;量：</span><input type="text" name="bookCounts"/>
                </label>
            </div>
            <div>
                <label >
                    <span>描&nbsp;&nbsp;&nbsp;&nbsp;述：</span><input type="text" name="detail"/>
                </label>
            </div>
        </form>
    </section>
</div>
<script>
    /*一进来进进行加载表格操作*/
    loadTable(1);
    //加载表格
    function loadTable(pageNow){
        $("#pageNow").val(pageNow)
        var obj={
            "pageNow":pageNow,
            "bookName":$("input[name=searchName]").val(),
        }
        $.ajax({
            type:"post",
            data:obj,
            url:"${pageContext.request.contextPath}/book/queryAll",
            success:function (result){
                console.log(result);
               // var data=JSON.parse(result);
                if(result["data"]!=null)
                {
                    console.log(result["data"]);
                    showTableHtml(result["data"]);
                    showPageHtml(result);
                }
                else {
                    alert("表格加载失败！");
                }
            }

        })
    }
    function showTableHtml(data){
        var tbodyHtml="";

        for (var i = 0; i < data.length; i++) {
            var Book=data[i];
            console.log(Book)
            tbodyHtml+="<tr>"
                +"<td>"+Book["bookID"]+"</td>"
                +"<td >"+Book["bookName"]+"</td>"
                +"<td>"+Book["bookCounts"]+"</td>"
                +"<td>"+Book["detail"]+"</td>"
                +"<td><a href='#' οnclick='modifyDiaShow("+Book["bookID"]+")'>修改</a> <a href='#' οnclick='deleteBook("+Book["bookID"]+")'>删除</a></td>"
                +"</tr>"
        }
        $("#data").html(tbodyHtml);
    }

    function showPageHtml(result){
        var pageHtml="";
        var pageNow=result["pageNow"];
        var count=result["pageCount"]
        var pageCount=Math.ceil(count/11);  /*除以每页条数*/
        /*  <%--只要不是第一页就显示--%>*/
        if(pageNow!==1){
            pageHtml+='<a href="#" οnclick="goFirst()">首页</a>'+' <a href="#" οnclick="goPre()">上一页</a>';
        }
        /* <%--只要不是最后一页就显示--%>*/
        if(pageNow!==pageCount){
            if(pageNow!==pageCount){
                pageHtml+=' <a href="#" οnclick="goNext()">下一页</a>'+'<a href="#" οnclick="goLast('+pageCount+')">尾页</a>'
            }
        }
        pageHtml+= "<span>共"+pageCount+"页</span>";
        pageHtml+="<span>，共"+count+"条</span>";
        pageHtml+="<span>，当前是"+pageNow+"页</span>";
        $(".page").html(pageHtml);
    }


    *添加书籍js*/
    //点击显示成绩模态
    function addBookDiaShow(){
        $("#addBookDia").dialog("open");
    }
    //添加成绩模态框
    $("#addBookDia").dialog({
        autoOpen:false,
        title:"新增书籍",
        modal:true,
        buttons:[
            {
                text:"确认添加书籍",
                click:doConfirmAddStudent
            }
        ],
    })

    //确认添加成绩
    function doConfirmAddStudent(){
        //构造提交对象
        var obj={
            "bookName": $("#addBookDia input[name=bookName]").val(),
            "bookCounts":$("#addBookDia input[name=bookCounts]").val(),
            "detail":$("#addBookDia input[name=detail]").val(),
        };

        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/book/addBook",
            data:obj,
            success:function (result){
                if(result["result"])
                {
                    //重置添加表单
                    $("#addBookDia form")[0].reset();
                    alert("添加成功！")
                    $("#addBookDia").dialog("close");
                    loadTable(1);
                }
                else {
                    alert("添加失败！");
                }
            }

        })
    }
    /修改书籍js
    function modifyDiaShow(ID){
        $("#modifyBook input[name=ID]").val(ID);
        $("#modifyBook").dialog("open");
    }
    $("#modifyBook").dialog({
        autoOpen:false,
        title:"修改书籍",
        modal:true,
        buttons:[
            {
                text:"确认修改书籍",
                click:doConfirmModifyBook
            }
        ],
        open:function (event,ui) {
            //回显成绩
            loadBook("modifyBook");
        }
    })
    function loadBook(selector){
        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/book/getBookByID",
            data:{"bookID": $("#"+selector+" input[name=ID]").val()},
            success:function (result){
            if(result!=null)
                {
                    var Book=result;
                    $("#"+selector+" input[name=bookName]").val(Book["bookName"]);
                    $("#"+selector+" input[name=bookCounts]").val(Book["bookCounts"]);
                    $("#"+selector+" input[name=detail]").val(Book["detail"]);
                }
                else {
                    alert("表格加载失败！");
                }
            }
        })
    }
    function doConfirmModifyBook(){
        //构造提交对象
        var obj={
            "bookID":$("#modifyBook input[name=ID]").val(),
            "bookName":$("#modifyBook input[name=bookName]").val(),
            "bookCounts":$("#modifyBook input[name=bookCounts]").val(),
            "detail":$("#modifyBook input[name=detail]").val(),
        };

        $.ajax({
            type:"post",
            url:"${pageContext.request.contextPath}/book/modifyBook",
            data:obj,
            success:function (result){
                if(result["result"])
                {
                    alert("修改成功!")
                    $("#modifyBook").dialog("close");
                    loadTable(1);
                }
                else {
                    alert("修改失败！");
                }
            }

        })
    }

    ///*删除js*//
    function deleteBook(ID){
        var r=confirm("确定删除？")
        if(r){
        $.ajax({
            type:"post",
            data:{"bookID":ID},
            url:"${pageContext.request.contextPath}/book/deleteBook",
            success:function (result){
                if(result["result"])
                {
                    alert("删除成功!")
                    loadTable();
                }
                else {
                    alert("删除失败！");
                }
            }
        })
        }
    }
    ///*页码跳转js*///
    function goFirst(){
        $("#pageNow").val(1);
        var PageNum=parseInt($("#pageNow").val());
        loadTable(PageNum)
    }
    function goPre(){
        var pageNow=$("#pageNow").val();
        var pageNew=parseInt(pageNow)-1;
        $("#pageNow").val(pageNew)
        var PageNum=parseInt($("#pageNow").val());
        loadTable(PageNum)
    }
    function goNext(){
        var pageNow=$("#pageNow").val();
        var pageNew=parseInt(pageNow)+1;
        $("#pageNow").val(pageNew)
        var PageNum=parseInt($("#pageNow").val());
        loadTable(PageNum)
    }
    function goLast(pageCount){
        $("#pageNow").val(pageCount);
        var PageNum=parseInt($("#pageNow").val());
        loadTable(PageNum)
    }
</script>
</body>
</html>

最后再配置Tomcat就可以运行了！！！