layui实现增删改查——图书管理

（一）页面展示

页面的效果如图：

这里就不进行页面的功能演示，下面将详细的介绍下页面。

（二）功能描述

页面主要实现了有以下功能：
（1）查询所有
即将数据库中数据表的信息查询出来，显示在页面中。
（2）添加书籍
点击页面的添加按钮，弹出层出现添加书籍的表单
（3）修改书籍
点击修改按钮，弹出层出现修改书籍的表单
（4）删除书籍
点击删除按钮，删除书籍
（5）书籍的上下架
（6）模糊搜索

（三）功能实现的流程

（一）查找所有书籍信息：
① 现在book.jsp将layui的table表格属性加载上，使用table.render（{}），在table.render
中进行设置：elem属性，设置表格id，url：设置跳转路径

② 通过url的路径跳转到相应的BookController中，通过路径找到对应的查询所有书籍的方法。

③ 在查找所有书籍的方法getAllBook中，
* ①设置编码
* ②获取map对象数据，通过BeanUtils.populate()进行存储
* ③调用实现类中的getAllBook()方法，获取所有书籍信息
* ④调用实现类中getAllTypeCount()方法得到所有书籍的数量
* ⑤将上面拿到的书籍信息和书籍数量通过LayTab工具类转换成Layui需要的数据格式
* ⑥在转化成Json格式，传回前端jsp页面。

④ 因为在Conntroller层中的BookController中需要调用实现类中的getAllBook方法，所以需要写getAllBook方法。
首先需要在BookDao中写getAllBook方法，然后在BookDaoImpl中具体实现。
实现类的具体流程：
* ①写sql语句
* ②调用工具类中的List
* ③得到需要的值，并返回
（二）模糊搜索及下拉搜索的实现
①前端页面的书写

②前端绑定搜索：

③绑定下拉框：使用ajax进行绑定，让页面加载后立即填充下拉框

⑤ 下拉框的实现，需要将书籍类型与书籍类型的id进行操作，每个typeid对应一个tyepname，因此需要在建一个TypeDao和TypeDaoImpl实现类来进行操作，在实现类种要查找到所有的Typeid和Typename;


以及对应的typeController来将其获取到的值传到前端jsp页面。

（三）添加和修改的实现：
添加书籍信息：
① 给添加按钮绑定（通过按钮的id）点击事件，点添加后，弹出一个表单，

② 也需要给表单绑定，在点击提交后，跳转到BookController中，找到对应的方法。方法中主要是对前台数据的获取。

③ 调用dao层的实现类来进行具体的数据操作
④ 在dao层会有添加sql语句的实现

⑤ Dao层的数据在返回给Controller，controller将数据在返回给前台页面，
⑥ 前台的页面主要是用ajax来发送和接收的。
修改书籍信息，跟添加信息是一样的
① 添加修改按钮，点击打开弹出框，内容跟新增的弹出框一样，添加一个输入框id。
② 点击表单提交按钮—》后台！
③ 将参数传递到后台controller
④ controller接收参数使用实体对象接参

⑤ 调用dao做数据操作

根据book对象中有没有bookid判断进行的是新增还是修改
如果bookid>0就是修改，否则，新增,最后返回result的提示

（四）删除书籍信息的实现
①先绑定按钮

通过ajax来进行数据的发送来接收后台发过来的数据。

②请求发送到后台后，在controller层接收数据，即前台传来的id，并调用到层的方法最后经数据返回。

③dao层实现sql

（五）上下架状态
首先要对状态这个字段信息设置，让数据库里的的0和1，对应相应的下架和上架。设置这个templt属性，


然后在判断，显示上架状态就，在后面就操作就显示下架。下架状态就显示上架。

同样，利用ajax来进行数据的发送和接收。

数据发送到controller层

在调用dao层的方法

（四）项目创建

首先是项目的建立：使用的是IDEA创建的web项目，数据库利用的mysql数据库。

项目的目录结构如下：

（1）主要分为以下几个包：

• utils层，（存放工具类）主要创建了三个工具类:DButil类、LayTab类、Result类。
• dao层，用来存在项目中实现的方法，在此包下还有一个impl，来实现到中的方法。
• entity层，存放实体类。
• controller层，用来做控制层，实现前端与后端的数据交互。
  （2）web中主要放的有layui用到的css和js文件以及连个jsp页面。
  （3）大概的流程
  从前端页面发出请求，到后台的controller层进行接收，在controller层会去调用bookDaoImpl接口中的实现方法，来进行功能的实现，在完成相应的功能之后在将数据返回到前台页面。

具体功能的实现
页面主要是对所有的信息进行查询，并将其显示出来。很显然页面在点击书籍信息时，会将数据库的所有数据信息进行显示。利用layui的数据表格来讲数据显示在前端的页面上。
首先你需要去layui的官网上将你需要的数据表格页面给复制到你自己的jsp页面上。主要对核心代码进行说明：

`<table class="layui-hide" id="test" lay-filter="test">table>`

这是layui的表格，在js中对对数据进行绑定,在代码中会有各属性的介绍。

table.render({
            id:'table1',//此处名字方便后面的表格重载
            elem: '#test'//此处的名字与table中的id一致
            ,url:'${pageContext.request.contextPath}/book/getAllBook'
            //此处是发送到后台controller的地址
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '图书表'
            // 注意此处的field属性应与数据库中字段名保持一致，title属性是在表格中显示的名字          
             ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'bookid', title:'图书编号', fixed: 'left', unresize: true, sort: true}
                ,{field:'bookname', title:'图书名称'}
                ,{field:'author', title:'作者'}
                ,{field:'count', title:'数量'}
                ,{field:'remark', title:'描述'}
                ,{field:'typeid', title:'类型id',hide:true}
                ,{field:'publisher', title:'出版社'}
                ,{field:'price', title:'价格'}
                ,{field:'status', title:'图书状态', templet:'#titleTpl'}
                ,{field:'typename', title:'图书类型'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,page: true,//此处是开启分页
            limit:10,//每页显示具体的条数
            limits:[5,10,15,20]
        });

前台实现的代码就是上面，具体的前端页面就不在介绍，都是在layui沾过来的，根据自己的需要进行修改

（五）具体代码的实现：

项目需要用到几个jar包：
jar包下载：https://download.csdn.net/download/weixin_42381196/19734223

下面说一下在后台的代码实现。
首先要建立utils，在里面存放用到的工具类。
首先是DBUti类在这里封装了数据库的连接类，以及一些通用的增删改的方法。
配置文件：db.properties

#驱动加载
driverClassName=com.mysql.jdbc.Driver
#注册驱动
url=jdbc:mysql://localhost/fuxi?characterEncoding=utf-8&useSSL=false
#连接数据库的用户名
username=root
#连接数据库的密码
password=password
#属性类型的字符串，通过别名的方式配置扩展插件， 监控统计用的stat 日志用log4j 防御sql注入:wall
filters=stat
#初始化时池中建立的物理连接个数。
initialSize=5
#最大的可活跃的连接池数量
maxActive=300
#获取连接时最大等待时间，单位毫秒，超过连接就会失效。配置了maxWait之后，缺省启用公平锁，并发效率会有所下降， 如果需要可以通过配置useUnfairLock属性为true使用非公平锁。
maxWait=60000
#连接回收器的运行周期时间，时间到了清理池中空闲的连接，testWhileIdle根据这个判断
timeBetweenEvictionRunsMillis=60000
minEvictableIdleTimeMillis=300000

#建议配置为true，不影响性能，并且保证安全性。 申请连接的时候检测，如果空闲时间大于timeBetweenEvictionRunsMillis， 执行validationQuery检测连接是否有效。
testWhileIdle=true
#申请连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能。设置为false
testOnBorrow=false
#归还连接时执行validationQuery检测连接是否有效，做了这个配置会降低性能,设置为flase
testOnReturn=false
#是否缓存preparedStatement，也就是PSCache。
poolPreparedStatements=false
#池中能够缓冲的preparedStatements语句数量
maxPoolPreparedStatementPerConnectionSize=200

DBUtil类：

package com.qy137.utils;

import com.alibaba.druid.pool.DruidDataSourceFactory;

import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

/**
 * 数据库的连接类
 */
public class DBUtil {
    private  static DataSource dataSource;
    static {
        try {
            InputStream asStream = DBUtil.class.getResourceAsStream("/db.properties");
            Properties p = new Properties();
            p.load(asStream);
            dataSource = DruidDataSourceFactory.createDataSource(p);

        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 创建数据库的连接
     * @return
     */
    public static Connection getConn(){
        try {
            return dataSource.getConnection();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    /**
     * 实现修改的方法，在实现增删改的时候调用
     * @param sql
     * @param objects
     * @return
     */
    public static int update(String sql, Object... objects){
        Connection conn = getConn();
        PreparedStatement ps = null;
        try {
            ps = conn.prepareStatement(sql);
            setParamter(ps,objects);
            return ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            closeAll(conn,ps,null);
        }
        return -1;
    }

    /**
     * 实现设置参数的方法
     * @param ps
     * @param objects
     */

    public static void setParamter(PreparedStatement ps,Object... objects){
        try {
            if(objects.length > 0){
                for (int i = 0; i < objects.length; i++) {
                    ps.setObject(i+1,objects[i]);
                }
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    /**
     * 实现查询所有的方法，List
     * @param sql
     * @param objects
     * @return
     */
    public static List<List> queryList(String sql, Object... objects){
        Connection conn = getConn();
        PreparedStatement ps=null;
        ResultSet resultSet = null;
        try {
            ps = conn.prepareStatement(sql);
            setParamter(ps,objects);
            resultSet = ps.executeQuery();
            ArrayList<List> bigList = new ArrayList<>();
            while (resultSet.next()){
                ArrayList<Object> smList = new ArrayList<>();
                for (int i = 1; i <= resultSet.getMetaData().getColumnCount() ; i++) {
                    smList.add(resultSet.getObject(i));
                }
                bigList.add(smList);
            }
            return bigList;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            closeAll(conn,ps,resultSet);
        }
        return null;
    }

    /**
     * 实现查询所有的方法List
    public static List<Map> queryListMap(String sql, Object... objects){
        Connection conn = getConn();
        PreparedStatement ps = null;
        ResultSet set = null;
        try {
            ps = conn.prepareStatement(sql);
            setParamter(ps,objects);
            set = ps.executeQuery();
            ArrayList<Map> bigList = new ArrayList<>();
            while (set.next()){
                HashMap<Object, Object> map = new HashMap<>();
                for (int i = 1; i <= set.getMetaData().getColumnCount(); i++) {
                    map.put(set.getMetaData().getColumnName(i),set.getObject(i));
                }
                bigList.add(map);
            }
            return bigList;
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            closeAll(conn,ps,set);
        }
        return null;
    }

    /**
     * 关闭连接
     * @param conn
     * @param ps
     * @param set
     */
    public static void closeAll(Connection conn,PreparedStatement ps,ResultSet set){
        try {
            if(set!=null){
                set.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
        try {
            if(ps!=null){
                ps.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }

        try {
            if(conn!=null){
                conn.close();
            }
        }catch (Exception e){
            e.printStackTrace();
        }
    }
}

LayTab类：主要是对数据进行转换成layui需要的数据形式

package com.qy137.utils;

import lombok.Data;

import java.util.List;
@Data
public class LayTab {
    private Integer code=0;
    private String msg="";
    private Integer count;
    private List<?> data;

    public LayTab(Integer count, List<?> data) {
        this.count = count;
        this.data = data;
    }
}

Result类：主要是返回结果的工具类

package com.qy137.utils;

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

import java.io.Serializable;

/**
 * 这是一个工具类
 * 用来实现操作成功后的提示信息
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result implements Serializable {
    private Integer code;
    private String msg;
    private Object data;

    public static Result success(){
        return new Result(1,"操作成功",null);
    }
    public static Result success(Object data,String msg){
        return new Result(1,msg,data);
    }
    public static Result fail(){
        return new Result(2,"操作失败",null);
    }
    public static Result fail(String msg){
        return new Result(2,msg,null);
    }

}

entity包，在这里放的是实体类，即Book类

package com.qy137.entity;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Book implements Serializable {
    private Integer bookid;
    private String bookname;
    private String author;
    private Integer count;
    private String remark;
    private String publisher;
    private String price;
    private String status;
    private Integer typeid;
    private String typename;

    private Integer page;
    private Integer limit;
}

dao层：
BookDao:

package com.qy137.dao;

import com.qy137.entity.Book;

import java.util.List;
import java.util.Map;

public interface BookDao  {
    //查询所有书籍
  //  List
    List<Book> getAllBook(Book book);
    //修改上架状态
    int updateStatus(Integer bookid,Integer status);
    //删除书籍信息
    int delBook(Integer bookid);
    //查询分页搜索符合条件的总条数
    int getAllBookCount(Book book);
    //添加书籍信息
    int addBook(Book book);
    //根据id修改图书信息
    int updateIdBook(Book book);
}

BookDaoImpl:

package com.qy137.dao.impl;

import com.qy137.dao.BookDao;
import com.qy137.entity.Book;
import com.qy137.utils.DBUtil;
import org.apache.commons.beanutils.BeanUtils;

import java.lang.reflect.InvocationTargetException;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
@SuppressWarnings("all")
public class BookDaoImpl implements BookDao {
   /* @Override
    public List

    /**
     * 查询所有书籍信息
     * 此方法结合了搜索、下拉搜搜和分页查询
     * ①定义sql，首先查出所有的信息
     * ②当在搜索栏输入查询内容时，或使用下拉框是，对sql语句进行拼接
     * ③调用方法，查询所有
     *
     * @param book
     * @return
     */
    @Override
    public List<Book> getAllBook(Book book) {
        StringBuilder sql = new StringBuilder();
        sql.append("SELECT tb.*,tt.typename from t_book tb INNER JOIN t_type tt on tb.typeid = tt.typeid ");
        if (book.getBookname()!=null && !"".equals(book.getBookname())){
            sql.append(" and tb.bookname like '%"+book.getBookname()+"%' ");
        }
        if (book.getAuthor()!=null && !"".equals(book.getAuthor())){
            sql.append(" and tb.author like '%"+book.getAuthor()+"%' ");
        }
        if (book.getTypeid()!=null && book.getTypeid()>0){
            sql.append(" and tb.typeid=" +book.getTypeid());
        }
        //直接进行分页
        sql.append(" limit "+(book.getPage()-1)*book.getLimit()+","+book.getLimit());
      //  System.out.println(sql);
        /*
        将定义的StringBuilder类型的sql，装换成字符串类型
        对map进行遍历，得到每一条数据，在放入到books集合列表中
         */
        List<Map> map = DBUtil.queryListMap(sql.toString());
        ArrayList<Book> books = new ArrayList<>();
        if (map.size()>0){
            for (int i = 0; i <map.size() ; i++) {
                Map map1 = map.get(i);
                Book book1 = new Book();
                try {
                    BeanUtils.populate(book1,map1);
                } catch (IllegalAccessException e) {
                    e.printStackTrace();
                } catch (InvocationTargetException e) {
                    e.printStackTrace();
                }
                books.add(book1);

            }
            return books;
        }
        return null;
    }

    /**
     * 查询所有的书籍数量，用来实现分页的功能
     * ①写sql语句，得到各种条件下查询的书籍数量
     * @param book
     * @return
     */
    @Override
    public int getAllBookCount(Book book) {
        StringBuilder sql = new StringBuilder();
        sql.append("SELECT count(*) from t_book tb INNER JOIN t_type tt on tb.typeid = tt.typeid ");
        if (book.getBookname()!=null && !"".equals(book.getBookname())){
            sql.append(" and tb.bookname like '%"+book.getBookname()+"%' ");
        }
        if (book.getAuthor()!=null && !"".equals(book.getAuthor())){
            sql.append(" and tb.author like '%"+book.getAuthor()+"%' ");
        }
        if (book.getTypeid()!=null && book.getTypeid()>0){
            sql.append(" and tb.typeid=" +book.getTypeid());
        }
        List<List> lists = DBUtil.queryList(sql.toString());
        if (lists.size()>0){
            Object o = lists.get(0).get(0);
            return Integer.parseInt(o+"");
        }
        return 0;

    }

    /**
     * 根据bookid来修改书籍的上下架状态
     * 此时需要有bookid和status连个参数
     * @param bookid
     * @param status
     * @return
     */
    @Override
    public int updateStatus(Integer bookid, Integer status) {
        String sql="update t_book set status=? where bookid=?";
        int i=0;
        if (status==0){
            i=DBUtil.update(sql,1,bookid);
        }else {
            i=DBUtil.update(sql,0,bookid);
        }
        return i;
    }

    /**
     * 根据bookid来删除书籍信息
     * @param bookid
     * @return
     */
    @Override
    public int delBook(Integer bookid) {
        String sql="delete from t_book where bookid=?";
        return DBUtil.update(sql, bookid);
    }



    /**
     * 添加书籍信息
     * @param book
     * @return
     */
    @Override
    public int addBook(Book book) {
        String sql="insert into t_book values(null,?,?,?,?,?,?,?,?)";
        int i = DBUtil.update(sql, book.getBookname(), book.getAuthor(), book.getCount(), book.getRemark(), book.getTypeid(), book.getPublisher(), book.getPrice(), book.getStatus());
        return i;
    }

    @Override
    public int updateIdBook(Book book) {
        String sql="update t_book set bookname=?,author=?,remark=?,typeid=?,publisher=?,price=?,status=? where bookid=?";
        int i = DBUtil.update(sql, book.getBookname(), book.getAuthor(), book.getRemark(), book.getTypeid(), book.getPublisher(), book.getPrice(), book.getStatus(), book.getBookid());
        return i;
    }
}

TypeDao类：

package com.qy137.dao;
import java.util.List;
import java.util.Map;

public interface TypeDao {
    List<Map> getAllType();

}

TypeDaoImpl类：

package com.qy137.dao.impl;

import com.qy137.dao.TypeDao;
import com.qy137.utils.DBUtil;

import java.util.List;
import java.util.Map;

public class TypeDaoImpl implements TypeDao {
    @Override
    public List<Map> getAllType() {
        String sql="select * from t_type";
        List<Map> map = DBUtil.queryListMap(sql);
        if (map.size()>0){
            return map;
        }
        return null;
    }
}

controller：
BookControllerL类：

package com.qy137.controller;
import com.alibaba.fastjson.JSON;
import com.qy137.dao.BookDao;
import com.qy137.dao.impl.BookDaoImpl;
import com.qy137.entity.Book;
import com.qy137.utils.DBUtil;
import com.qy137.utils.LayTab;
import com.qy137.utils.Result;
import org.apache.commons.beanutils.BeanUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

import java.io.PrintWriter;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import java.util.Map;

@WebServlet("/book/*")
@SuppressWarnings("all")
public class BookController extends HttpServlet {
    private BookDao bookDao=new BookDaoImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uri = req.getRequestURI();
        int i = uri.lastIndexOf("/");
        String s = uri.substring(i + 1);
        //前台对传过来的数据进行判断，分别跳转到不同的方法
        switch (s){
            case "getAllBook":
                getAllBook(req,resp);
                break;
            case "updateStatus":
                updateStatus(req,resp);
                break;
            case "delBook":
                delBook(req,resp);
                break;
            case "addOrUpdateBook":
                addOrUpdateBook(req,resp);
                break;
        }
    }
    //旧的获取所有书籍信息
    /*protected void getAllBook(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        List
     /**
     * 查询所有的书籍信新
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void getAllBook(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        Map<String, String[]> parameterMap = req.getParameterMap();
        Book book = new Book();
        try {
            BeanUtils.populate(book,parameterMap);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }

        List<Book> allBook = bookDao.getAllBook(book);

       // LayTab layTab = new LayTab(allBook.size(),allBook);
        int count = bookDao.getAllBookCount(book);
        LayTab layTab = new LayTab(count,allBook);
        String s = JSON.toJSONString(layTab);
        resp.getWriter().write(s);
    }
     /**
     * 修改图书的上下架状态
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void updateStatus(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        String bookid = req.getParameter("bookid");
        String status = req.getParameter("status");
        int i = bookDao.updateStatus(Integer.parseInt(bookid), Integer.parseInt(status));
        PrintWriter writer = resp.getWriter();
        Result result =null;
        if (i>0){
            result=Result.success(null,"上架/下架成功！");
        }else {
            result=result.fail();
        }
        //将result转化为json格式
        String s = JSON.toJSONString(result);
        writer.write(s);


        //使用工具类前
       /* if (i>0){
            writer.write("上架/下架成功！");
        }else {
            writer.write("上架/下架失败！");
        }*/

    }
     /**
     * 根据id删除书籍信息
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void delBook(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        String bookid = req.getParameter("bookid");
        int i = bookDao.delBook(Integer.parseInt(bookid));
        if (i>0){
            resp.getWriter().write("删除成功");
        }else {
            resp.getWriter().write("删除成功");
        }

    }
 /**
     * 添加和修改图书信息
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void addOrUpdateBook(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        Map<String, String[]> map = req.getParameterMap();
        Book book = new Book();
        try {
            BeanUtils.populate(book,map);
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
        int i=0;
        if (book.getBookid()>0){
            i=bookDao.updateIdBook(book);
        }else {
            i = bookDao.addBook(book);
        }
        Result result;
        if (i>0){
            result = Result.success();
        }else {
           result = Result.fail();
        }
        String s = JSON.toJSONString(result);
        resp.getWriter().write(s);


    }

}

TypeController：

package com.qy137.controller;

import com.alibaba.fastjson.JSON;
import com.qy137.dao.TypeDao;
import com.qy137.dao.impl.TypeDaoImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;

@WebServlet("/type/*")
public class TypeController extends HttpServlet {
    private TypeDao typeDao =new TypeDaoImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String uri = req.getRequestURI();
        System.out.println(uri);
        int i = uri.lastIndexOf("/")+1;
        String s = uri.substring(i);
        switch (s){
            case "getAllType":
                getAllType(req,resp);
                break;
    }}

    /**
     * 查询所有的书籍类型信息
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
        protected void getAllType(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            req.setCharacterEncoding("utf-8");
            resp.setContentType("text/html;charset=UTF-8");
            List<Map> types = typeDao.getAllType();
            String s = JSON.toJSONString(types);
            resp.getWriter().write(s);
        }
}

book.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Titletitle>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
head>


    <input type="text" name="bookid" id="bookid" style="display: none"/>
    <div class="layui-form-item">
        <label class="layui-form-label">图书名称label>
        <div class="layui-input-inline">
            <input type="text" id="bookname" name="bookname" placeholder="请输入图书名字" class="layui-input">
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者label>
        <div class="layui-input-inline">
            <input type="text" id="author" name="author" placeholder="请输入作者" class="layui-input">
        div>
    div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">描述label>
        <div class="layui-input-inline">
            <input type="text" id="remark" name="remark" placeholder="请输入信息" class="layui-input">
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社label>
        <div class="layui-input-inline">
            <input type="text" id="publisher" name="publisher" placeholder="请输入出版社" class="layui-input">
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">价格label>
        <div class="layui-input-inline">
            <input type="text" id="price" name="price" placeholder="请输入价格" class="layui-input">
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">上下架label>
        <div class="layui-input-inline">
            <select name="status" >
                <option value="">--上下架状态--option>
                <option value="0">上架option>
                <option value="1">下架option>
            select>
        div>
    div>
    <div class="layui-form-item">
        <label class="layui-form-label">书籍类型label>
        <div class="layui-input-inline">
            <select name="typeid" id="typeIdSelect" >
                <option value="">--书籍类型--option>
            select>
        div>
    div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="*">立即提交button>
            <button type="reset" class="layui-btn layui-btn-primary">重置button>
        div>
    div>
form>
<body>

<div class="demoTable layui-form">
    <div class="layui-inline">
        <input class="layui-input" name="bookname" id="bk" autocomplete="off" placeholder="搜索书名">
    div>
    <div class="layui-inline">
        <input class="layui-input" name="author" id="au" autocomplete="off" placeholder="搜索作者">
    div>

    <div class="layui-inline" >
        <select name="typeid" id="typeSelect" lay-filter="aihao">
            <option value="">option>
        select>
    div>
    <button class="layui-btn" data-type="reload" id="reloadTabBtn">搜索button>

div>
<table class="layui-hide" id="test" lay-filter="test">table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
        <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        <button class="layui-btn layui-btn-sm" lay-event="addBtn">新增</button>
    </div>
script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-sm" lay-event="updateStatus">上架</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="updateStatus">下架</button>
    {{#  } }}
script>

<script type="text/html" id="titleTpl">
    {{#  if(d.status == 0){ }}
    <button class="layui-btn layui-btn-sm layui-btn-danger"  >下架状态</button>
    {{#  } else { }}
    <button class="layui-btn layui-btn-sm" >上架状态</button>
    {{#  } }}
script>
<script src="${pageContext.request.contextPath}/layui/layui.js">script>

<script>
    layui.use(['jquery','form','layer','table'], function(){
        var $ =layui.jquery;
        var form =layui.form;
        var layer =layui.layer;
        var table=layui.table;
        //绑定搜索事件，更新表格
        $("#reloadTabBtn").click(function () {
            console.log($("#bk").val())
            table.reload('table1',{
                where:{
                    bookname:$("#bk").val(),
                    author:$("#au").val(),
                    typeid:$("#typeSelect").val()
                },
                page: {
                    curr:1//重新从第一页开始
                }

            });
        })

        //页面加载完成就立即填充书籍类型的下拉框中
       $.ajax({
            type:'get',
            url:"${pageContext.request.contextPath}/type/getAllType",
            dataType:'json',//默认接收到的类型为json
            success:function (types) {
              // console.log(types);
                //查出类型信息后，将类型信息填充到下拉框中
                $.each(types,function (i,obj) {
                   // console.log(obj.typeid+"=="+obj.typename)
                    /*
                    dom操作，给下拉框添加option
                    并给option添加值
                     */
                    $("#typeSelect").append(
                        $("").attr("value",obj.typeid).text(obj.typename)
                    )

                    $("#typeIdSelect").append(
                        $("").attr("value",obj.typeid).text(obj.typename)
                    )
                })
               // 渲染下拉框
                form.render('select');
            }

        })

        table.render({
            id:'table1',
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/book/getAllBook'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,title: '图书表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'bookid', title:'图书编号', fixed: 'left', unresize: true, sort: true}
                ,{field:'bookname', title:'图书名称'}
                ,{field:'author', title:'作者'}
                ,{field:'count', title:'数量'}
                ,{field:'remark', title:'描述'}
                ,{field:'typeid', title:'类型id',hide:true}
                ,{field:'publisher', title:'出版社'}
                ,{field:'price', title:'价格'}
                ,{field:'status', title:'图书状态', templet:'#titleTpl'}
                ,{field:'typename', title:'图书类型'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
            ]]
            ,page: true,
            limit:10,
            limits:[5,10,15,20]
        });

        //头工具栏事件
        //此处的test是上面table中的lay-filter中的值
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;
                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
                case 'addBtn':
                    //打开弹出框之前先清空表单
                    $("#bookForm")[0].reset();
                    layer.open({
                        type: 1,//页面层
                        title:'新增图书信息',
                        area: ['400px', '500px'],
                        offset:'100px',
                        content: $("#bookForm")
                    });
                    break;
            };
        });
        form.on('submit(*)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/addOrUpdateBook',
                data:data.field,
                dataType:'json',
                success: function (result) {
                    layer.closeAll();
                    if (result.code==1){
                        layer.msg(result.msg,{icon:1});
                        table.reload("table1")
                    }else {
                        layer.msg(result.msg,{icon:5});
                    }
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                        type:'get',
                        url:'${pageContext.request.contextPath}/book/delBook',
                        data:{"bookid": data.bookid},
                        success:function (msg) {
                            layer.msg(msg);
                            obj.del();
                            layer.close(index);
                        }
                    })

                });
            } else if(obj.event === 'edit'){
                //打开弹出框之前先清空表单
                $("#bookForm")[0].reset();
                layer.open({
                    type: 1,//页面层
                    title:'修改图书信息',
                    area: ['400px', '550px'],
                    offset:'100px',
                    content: $("#bookForm")
                })
                //将当前点击行的数据填充到表单中去
                form.val('bookForm', data);
            }else if (obj.event==='updateStatus'){
                layer.confirm('确定要上架/下架吗?',function (index) {
                    $.ajax({
                        type:'get',
                        url:'${pageContext.request.contextPath}/book/updateStatus',
                        data:{"bookid": data.bookid,"status":data.status},
                        dataType: 'json',//预期的服务器返回的数据类型
                        success:function (result) {//result是前面返回过来的
                            if (result.code==1){
                                layer.msg(result.msg);
                                //成功后刷新表格
                                table.reload("table1");
                            }else {
                                layer.msg(result.msg);
                            }
                        }
                    })
                    layer.close(index);
                });

            }
        });
    });
script>
body>
html>

index.jsp

<%--
  Created by IntelliJ IDEA.
  User: ttt
  Date: 2021/6/17
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图书管理系统title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">图书管理系统div>

    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          root
        a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料a>dd>
          <dd><a href="">安全设置a>dd>
        dl>
      li>
      <li class="layui-nav-item"><a href="">退了a>li>
    ul>
  div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">书籍管理a>
          <dl class="layui-nav-child">
            <dd>
              <a href="${pageContext.request.contextPath}/book.jsp" target="main">书籍信息a>
            dd>
          dl>
        li>
      ul>
    div>
  div>

  <div class="layui-body">

    <iframe frameborder="0" border="0" height="100%" width="100%" name="main">iframe>
  div>

  <div class="layui-footer">
    
    © layui.com - 底部固定区域
  div>
div>
<script src="${pageContext.request.contextPath}/layui/layui.js">script>
<script>
  //JavaScript代码区域
  layui.use('element', function(){
    var $ = layui.jquery,
            element = layui.element;

  });

script>
  body>
html>