LayUI之CRUD(增删改查）-阿里云开发者社区

一.LauUI框架

（LayUI框架）点击进入官网在里面找到你需要的框架

Layui的官方文档和示例是很好的参考资源，可以帮助你更深入地了解和使用该框架。

准备工作：

引入Layui：首先，在你的项目中引入Layui框架的相关文件，包括CSS和JavaScript。你可以从Layui官方网站上下载最新的版本，或者使用CDN链接。
数据存储：确定你要操作的数据存储方式，可以是数据库、JSON文件或其他数据源。确保你能够连接到数据存储并获得读写权限。
页面布局：设计并创建包含CRUD功能的页面布局。你可以使用Layui的布局组件来快速构建页面结构，如Grid、Form等。
表格组件：使用Layui的表格组件来展示数据，并设置相关参数和样式。你可以通过配置表头、渲染数据和定义操作按钮等来定制化表格。
表单组件：创建适当的表单组件来输入或编辑数据。Layui提供了多种表单元素和验证功能，你可以根据需求选择和使用。
Ajax请求：使用Layui的Ajax功能来进行数据交互。当用户执行增加、删除、修改或查询操作时，通过Ajax请求与后端进行数据交互。
后端开发：根据你选择的后端语言和框架，实现对应的接口和逻辑操作。根据请求的类型和参数，进行相应的数据库操作或响应数据。
事件绑定：为页面中的按钮和表格行等元素，绑定Layui的事件处理函数。这样可以实现一些交互和动态的操作，如点击按钮删除数据等。

二.CRUD

CRUD 是一种通用的数据操作模式，应用于许多软件和系统中。它是构建应用程序的基础，让用户能够管理和操作数据。对于一个完整的应用程序或系统，通常会包含对数据的 CRUD 操作。这些操作可以通过前端界面和后端逻辑来实现。

三.后台编写

3.1.编写UserDao类增删改查方法

  /**
   * 带模糊查询方法
   * @param user
   * @param pageBean
   * @return
   * @throws Exception
   */
  public List<Map<String, Object>> userRole(User user, PageBean pageBean) throws Exception {
    String sql = "SELECT\r\n" + 
        " u.*,\r\n" + 
        " (\r\n" + 
        "CASE\r\n" + 
        " WHEN u.rid = '1' THEN\r\n" + 
        " '管理员' \r\n" + 
        " WHEN u.rid = '2' THEN\r\n" + 
        " '发起者' \r\n" + 
        " WHEN u.rid = '3' THEN\r\n" + 
        " '审批员' \r\n" + 
        " WHEN u.rid = '4' THEN\r\n" + 
        " '参与者' \r\n" + 
        " WHEN u.rid = '5' THEN\r\n" + 
        " '会议管理员' ELSE '其他' \r\n" + 
        "END \r\n" + 
        " ) rname \r\n" + 
        "FROM\r\n" + 
        " `t_oa_user` u where 1=1";
    String name = user.getName();
    if (StringUtils.isNotBlank(name))
      sql += " and name like '%" + name + "%'";
    return super.executeQuery(sql, pageBean);
  }
  public int add(User user) throws Exception {
    String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
    return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
  }
  public int edit(User user) throws Exception {
    String sql = "update t_oa_user set name = ?,loginName = ?,pwd = ? where id = ?";
    return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
  }
  public int del(User user) throws Exception {
    String sql = "delete from t_oa_user where id = ?";
    return super.executeUpdate(sql, user, new String[] {"id"});
  }

3.2.R工具类

R是一款强大而灵活的统计分析和数据科学工具。它提供了丰富的函数库和工具，支持数据操作、统计分析和数据可视化。RStudio作为R语言的集成开发环境，提供了更方便的开发和调试环境。无论是数据分析师、统计学家还是数据科学家，都可以利用R工具进行数据处理和分析工作。

package com.zking.util;
import java.util.HashMap;
/**
 * R工具类
 * @author 君临沂
 *
 */
public class R extends HashMap{
  public R data(String key, Object value) {
    this.put(key, value);
    return this;
  }
  public static R ok(int code, String msg) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg);
    return r;
  }
  public static R error(int code, String msg) {
    R r = new R();
    r.data("success", false).data("code", code).data("msg", msg);
    return r;
  }
  public static R ok(int code, String msg,Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("data", data);
    return r;
  }
  public static R ok(int code, String msg, long count, Object data) {
    R r = new R();
    r.data("success", true).data("code", code).data("msg", msg).data("count", count).data("data", data);
    return r;
  }
}

3.3. BaseDao数据库查询方法

  /**
   * 适合多表联查的数据返回
   * 
   * @param sql
   * @param pageBean
   * @return
   * @throws SQLException
   * @throws InstantiationException
   * @throws IllegalAccessException
   */
  public List<Map<String, Object>> executeQuery(String sql, PageBean pageBean) throws Exception {
    List<Map<String, Object>> list = new ArrayList<>();
    Connection con = DBAccess.getConnection();
    PreparedStatement pst = null;
    ResultSet rs = null;
    /*
     * 是否需要分页？ 无需分页（项目中的下拉框，查询条件教员下拉框，无须分页） 必须分页（项目中列表类需求、订单列表、商品列表、学生列表...）
     */
    if (pageBean != null && pageBean.isPagination()) {
      // 必须分页（列表需求）
      String countSQL = getCountSQL(sql);
      pst = con.prepareStatement(countSQL);
      rs = pst.executeQuery();
      if (rs.next()) {
        pageBean.setTotal(String.valueOf(rs.getObject(1)));
      }
      // 挪动到下面，是因为最后才处理返回的结果集
      // -- sql=SELECT * FROM t_mvc_book WHERE bname like '%圣墟%'
      // -- pageSql=sql limit (page-1)*rows,rows 对应某一页的数据
      // -- countSql=select count(1) from (sql) t 符合条件的总记录数
      String pageSQL = getPageSQL(sql, pageBean);// 符合条件的某一页数据
      pst = con.prepareStatement(pageSQL);
      rs = pst.executeQuery();
    } else {
      // 不分页（select需求）
      pst = con.prepareStatement(sql);// 符合条件的所有数据
      rs = pst.executeQuery();
    }
    // 获取源数据
    ResultSetMetaData md = rs.getMetaData();
    int count = md.getColumnCount();
    Map<String, Object> map = null;
    while (rs.next()) {
      map = new HashMap<>();
      for (int i = 1; i <= count; i++) {
        map.put(md.getColumnLabel(i), rs.getObject(i));
      }
      list.add(map);
    }
    return list;
  }

3.4.控制器

UserAction：

package com.junlinyi.web;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.junlinyi.dao.UserDao;
import com.junlinyi.entity.User;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.R;
import com.zking.util.ResponseUtil;
/**
 * 
 * @author 君临沂
 *
 */
public class UserAction extends ActionSupport implements ModelDriver<User> {
  User u = new User();
  UserDao dao = new UserDao();
  public String userRole(HttpServletRequest req, HttpServletResponse resp) {
    try {
      PageBean pageBean = new PageBean();
      pageBean.setRequest(req);
      List<Map<String, Object>> users = dao.userRole(u, pageBean);
      // layui 的code 返回一定要是 0，不能是200，否者返回不了数据
      ResponseUtil.writeJson(resp, R.ok(0, "查询成功", pageBean.getTotal(), users));
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "查询失败"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }
  public String add(HttpServletRequest req, HttpServletResponse resp) {
    try {
      int rs = dao.add(u);
      if (rs > 0) {
        ResponseUtil.writeJson(resp, R.ok(200, "用户新增成功"));
      } else {
        ResponseUtil.writeJson(resp, R.error(0, "用户新增失败"));
      }
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "用户新增失败"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }
  public String edit(HttpServletRequest req, HttpServletResponse resp) {
    try {
      int rs = dao.edit(u);
      if (rs > 0) {
        ResponseUtil.writeJson(resp, R.ok(200, "用户修改成功"));
      } else {
        ResponseUtil.writeJson(resp, R.error(0, "用户修改失败"));
      }
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "用户修改失败"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }
  public String del(HttpServletRequest req, HttpServletResponse resp) {
    try {
      int rs = dao.del(u);
      if (rs > 0) {
        ResponseUtil.writeJson(resp, R.ok(200, "用户删除成功"));
      } else {
        ResponseUtil.writeJson(resp, R.error(0, "用户删除失败"));
      }
    } catch (Exception e) {
      e.printStackTrace();
      try {
        ResponseUtil.writeJson(resp, R.error(0, "用户删除失败"));
      } catch (Exception e1) {
        e1.printStackTrace();
      }
    }
    return null;
  }
  @Override
  public User getModel() {
    // TODO Auto-generated method stub
    return u;
  }
}

四.前台JS编写

4.1.UserManage.jsp 的页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/common/header.jsp" %>
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script type="text/javascript" src="static/js/UserManage.js"></script> 
<title>Insert title here</title>
</head>
<body>
 <!-- 搜索栏 -->
  <div class="layui-form-item" style="padding-top: 20px">
    <div class="layui-inline">
      <label class="layui-form-label" style="padding: 0;padding-top: 10px">用户名：</label>
      <div class="layui-input-inline">
        <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-inline">
      <div class="layui-input-inline">
        <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
          <i class="layui-icon layui-icon-search"></i>
          查询
        </button>
        <button id="btn_add" type="button" class="layui-btn">新增</button>
      </div>
    </div>
  </div>
 <!-- 数据表格及分页 -->
<table id="tb" class="layui-hide"  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>
  </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>
</script>
</body>
</html>

4.2.UserManage.js代码

let layer, $, table;
var row;
layui.use([ 'jquery', 'layer', 'table' ], function() {
  layer = layui.layer, $ = layui.jquery, table = layui.table;
  // 初始化数据表格
  initTable();
  // 绑定查询按钮的点击事件
  $('#btn_search').click(function() {
    query();
  });
  // 绑定新增按钮的点击事件
  $('#btn_add').click(function() {
    row = null;
    open('新增');
  });
});
// 1.初始化数据表格
function initTable() {
  table.render({
    elem : '#tb',
    url : 'user.action?methodName=userRole',
    toolbar : '#toolbarDemo' // 开启头部工具栏，并为其绑定左侧模板
    ,
    defaultToolbar : [ 'filter', 'exports', 'print', { // 自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
      title : '提示',
      layEvent : 'LAYTABLE_TIPS',
      icon : 'layui-icon-tips'
    } ],
    title : '用户数据表',
    cols : [ [ {
      type : 'checkbox',
      fixed : 'left'
    }, {
      field : 'id',
      title : 'ID',
      width : 80,
      fixed : 'left',
      unresize : true,
      sort : true
    }, {
      field : 'loginName',
      title : '账户名',
      width : 120,
      edit : 'text'
    }, {
      field : 'name',
      title : '用户名',
      width : 150,
      edit : 'text',
      templet : function(res) {
        return '<em>' + res.name + '</em>'
      }
    }, {
      field : 'pwd',
      title : '密码',
      width : 80,
      edit : 'text',
      sort : true
    }, {
      field : 'rname',
      title : '角色名称',
      width : 100
    }, {
      fixed : 'right',
      title : '操作',
      toolbar : '#barDemo',
      width : 150
    } ] ],
    page : true
  });
  // 表格监控
  table.on('tool(tb)', function(obj) {
    //给行数据赋值
    row = obj.data;
    if (obj.event == "edit") {
      open("编辑");
    } else if (obj.event == "del") {
      layer.confirm('真的删除该行数据么/(ㄒoㄒ)/~~', {
        icon : 3,
        title : '提示'
      }, function(index) {
        $.post('user.action', {
          'methodName' : 'del',
          'id' : row.id
        }, function(rs) {
          if (rs.success) {
            // 调用查询方法刷新数据
            query();
          } else {
            layer.msg(rs.msg, function() {
            });
          }
        }, 'json');
        layer.close(index);
      });
    } else {
    }
  });
}
// 2.点击查询
function query() {
  //表格重载
  table.reload('tb', {
    url : $("#ctx").val() + '/user.action', // 请求地址
    method : 'POST', // 请求方式，GET或者POST
    loading : true, // 是否显示加载条（默认 true）
    page : true, // 是否分页
    where : { // 设定异步数据接口的额外参数，任意设
      'methodName' : 'userRole',
      'name' : $('#name').val()
    },
    request : { // 自定义分页请求参数名
      pageName : 'page', // 页码的参数名称，默认：page
      limitName : 'rows' // 每页数据量的参数名，默认：limit
    }
  });
}
// 3.对话框
function open(title) {
  layer.open({
    type : 2, // layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
    title : title,
    area : [ '660px', '340px' ], // 宽高
    skin : 'layui-layer-rim', // 样式类名
    content : $("#ctx").val() + '/jsp/system/userEdit.jsp', // 书本编辑页面
    btn : [ '保存', '关闭' ],
    yes : function(index, layero) {
      // 调用子页面中提供的getData方法，快速获取子页面的form表单数据 getData()子页面的方法
      let data = $(layero).find("iframe")[0].contentWindow.getData();
      console.log(data);
      // 判断title标题
      let methodName = "add";
      if (title == "编辑")
        methodName = "edit";
      $.post('user.action?methodName=' + methodName,
          data, function(rs) {
            if (rs.success) {
              // 关闭对话框
              layer.closeAll();
              // 调用查询方法刷新数据
              query();
            } else {
              layer.msg(rs.msg, function() {
              });
            }
          }, 'json');
    },
    btn2 : function(index, layero) {
      layer.closeAll();
    }
  });
}

作用是这里的弹出层是嵌入了一个页面，除按钮以为都不是本页面(UserManage.jsp)的代码

调用子页面中提供的getData方法，快速获取子页面的form表单数据：

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
  layer=layui.layer,form=layui.form,$=layui.jquery;
  initData();
});
function initData(){
  if(null!=parent.row){
       //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
       //parent.row：表格行对象
       form.val('user',$.extend({}, parent.row||{}));
       $('#name').attr('readonly','readonly');
  }
}
function getData(){
    return form.val('user');
}

LayUI之CRUD(增删改查）

一.LauUI框架

二.CRUD

三.后台编写

3.1.编写UserDao类增删改查方法

3.2.R工具类

3.3. BaseDao数据库查询方法

3.4.控制器

四.前台JS编写

4.1.UserManage.jsp 的页面代码

4.2.UserManage.js代码

五.项目运行效果

5.1.新增功能演示

5.2.删除功能演示

5.3.修改功能演示

5.4.查询功能演示

今天就到这了，欢迎大佬多多建议！！！小编都接受哦~~

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

LayUI之CRUD(增删改查）

一.LauUI框架

二.CRUD

三.后台编写

3.1.编写UserDao类增删改查方法

3.2.R工具类

3.3. BaseDao数据库查询方法

3.4.控制器

四.前台JS编写

4.1.UserManage.jsp 的页面代码

4.2.UserManage.js代码

五.项目运行效果

5.1.新增功能演示

5.2.删除功能演示

5.3.修改功能演示

5.4.查询功能演示

今天就到这了，欢迎大佬多多建议！！！小编都接受哦~~

热门文章

最新文章

相关课程

相关电子书

相关实验场景