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 {
   /* @Override
    public 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
     */
    @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<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();
    @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>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',//預設接收到的類型為json
            success: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: 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">
      <!-- 左側導航區域（可配合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>