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<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<Map>* @param sql* @param objects* @return*/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<Map> getAllBook();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 {/* @Overridepublic List<Map> getAllBook() {// String sql="select tb.bookid,tb.bookname,tb.author,tb.count,tb.remark,tb.pulisher,tb.price,tb.status,tp.typeid,tp.typename from t_book tb  inner join t_type tp on tb.typeid=tp.typeid ";String sql="select tb.*,tp.typename from t_book tb  inner join t_type tp on tb.typeid=tp.typeid";List<Map> map = DBUtil.queryListMap(sql);if (map.size()>0){return map;}return null;}*//*** 查询所有书籍信息* 此方法结合了搜索、下拉搜搜和分页查询* ①定义sql，首先查出所有的信息* ②当在搜索栏输入查询内容时，或使用下拉框是，对sql语句进行拼接* ③调用方法，查询所有** @param book* @return*/@Overridepublic 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*/@Overridepublic 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*/@Overridepublic 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*/@Overridepublic int delBook(Integer bookid) {String sql="delete from t_book where bookid=?";return DBUtil.update(sql, bookid);}/*** 添加书籍信息* @param book* @return*/@Overridepublic 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;}@Overridepublic 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 {@Overridepublic 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();@Overrideprotected 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<Map> allBook = bookDao.getAllBook();LayTab layTab = new LayTab(allBook.size(),allBook);String s = JSON.toJSONString(layTab);PrintWriter writer = resp.getWriter();writer.write(s);}*//*** 查询所有的书籍信新* @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();@Overrideprotected 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>Title</title><link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
</head>
<form style="display: none" id="bookForm" lay-filter="bookForm"class="layui-form" ><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',//默认接收到的类型为jsonsuccess:function (types) {// console.log(types);//查出类型信息后，将类型信息填充到下拉框中$.each(types,function (i,obj) {// console.log(obj.typeid+"=="+obj.typename)/*dom操作，给下拉框添加option并给option添加值*/$("#typeSelect").append($("<option></option>").attr("value",obj.typeid).text(obj.typename))$("#typeIdSelect").append($("<option></option>").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: tttDate: 2021/6/17Time: 19:11To 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"><!-- 左侧导航区域（可配合layui已有的垂直导航） --><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>