Layui+Ajax+dao+servlet完成增，删，改，查

展示效果

 

 

 

查询所有页面

 创建一个web工程并把所有jar放入web-info/lib下

 把layui的插件下载并导入

把网页中引入layui相关的css和js

 

编写自己的网页

 

编写servlet

 

编写dao

package com.zkm.dao;

import com.zkm.entity.User;

import java.util.ArrayList;
import java.util.List;

public class UserDao extends BaseDao{
    //查询所有记录
    public List<User> queryAll() {
         List<User> list=new ArrayList<>();
         try {
             getConnection();
             String sql = "select * from tb_user";
             ps = connection.prepareStatement(sql);
             resultSet = ps.executeQuery();
             while (resultSet.next()) {
                 User user = new User();
                 user.setUserId(resultSet.getInt("userId"));
                 user.setSex(resultSet.getInt("sex"));
                 user.setUsername(resultSet.getString("username"));
                 user.setRealname(resultSet.getString("realname"));
                 user.setPassword(resultSet.getString("password"));
                 list.add(user);
             }
         }catch (Exception e){
             e.printStackTrace();
         }finally {
             closeAll();
         }

         return list;
    }
    //查询该表得总条数
    public Integer count() {
        try {
            getConnection();
            String sql = "select count(*) as c from tb_user";
            ps = connection.prepareStatement(sql);
            resultSet = ps.executeQuery();
            while (resultSet.next()) {
                return resultSet.getInt("c");
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            closeAll();
        }
        return 0;
    }

}

编写user实体类和tableLayui实体

package com.zkm.entity;

public class User {
    private Integer userId;
    private String username;
    private String password;
    private String realname;
    private Integer sex;

    @Override
    public String toString() {
        return "User{" +
                "userId=" + userId +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", realname='" + realname + '\'' +
                ", sex=" + sex +
                '}';
    }

    public User() {
    }

    public User(Integer userId, String username, String password, String realname, Integer sex) {
        this.userId = userId;
        this.username = username;
        this.password = password;
        this.realname = realname;
        this.sex = sex;
    }

    public User(String username, String password, String realname, Integer sex) {
        this.username = username;
        this.password = password;
        this.realname = realname;
        this.sex = sex;
    }

    public Integer getSex() {
        return sex;
    }

    public void setSex(Integer sex) {
        this.sex = sex;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getRealname() {
        return realname;
    }

    public void setRealname(String realname) {
        this.realname = realname;
    }
}

package com.zkm.util;

public class TableLayui {
    private Integer code=0; //状态码
    private String msg=""; //信息
    private Integer count; //总条数
    private Object data; //表格数据

    public TableLayui() {
    }

    public TableLayui(Integer code, String msg, Integer count, Object data) {
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = data;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Integer getCount() {
        return count;
    }

    public void setCount(Integer count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

添加分页功能

（1）网页

 （2）servlet

 （3）dao

 添加删除和修改按钮

 添加相应事件

 完成删除功能

 后台代码：servlet

 公共结果类

public class CommonResult {
     private Integer code; //状态码
     private String msg; //消息
     private Object data; //数据
}

添加表格头部工具栏

 表格头部工具栏添加监听事件

 出现添加表单的弹出层

<%--表单--%>
<form  style="display: none;margin: 0 10px" class="layui-form" action="" id="userForm">
  <div class="layui-form-item">
    <label class="layui-form-label">账号:</label>
    <div class="layui-input-inline">
      <input type="text" name="username" lay-verify="title" autocomplete="off" 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" name="password" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label">真实姓名:</label>
      <div class="layui-input-inline">
        <input type="tel" name="realname"  autocomplete="off" class="layui-input">
      </div>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别:</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男" checked="">
      <input type="radio" name="sex" value="女" title="女">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <input type="button" class="layui-btn" lay-submit="" lay-filter="submitUser" value="立即提交">
      <input type="reset" class="layui-btn layui-btn-primary" value="重置">
    </div>
  </div>
</form>

 确认添加

servlet