layui的CRUD案列

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

用layui来实现一个简单的二级权限和增删改查案列

利用layui提供的组件（table , layer , form，tree）来进行开发

写一个简单的登录界面根据用户的ID来获取用户所对应的权限

Userdao

Mebudao 查询用户权限并将数据转换成layui所识别的格式

package com.liuwenwu.dao;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import com.liuwenwu.entity.TreeNode;
import com.liuwenwu.util.JsonBaseDao;
import com.liuwenwu.util.JsonUtils;
import com.liuwenwu.util.PageBean;
import com.liuwenwu.util.StringUtils;public class MenuDao extends JsonBaseDao { /**
* @param map req.getParameterMap
* @param pageBean 分页
* @return
* @throws Exception
*/
public List<TreeNode> list(Map<String, String[]> map,PageBean pageBean) throws Exception{
List<Map<String, Object>> listMenu=this.listMenuSef(map, pageBean);
List<TreeNode> treeNodeList=new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
return treeNodeList;
} public List<Map<String, Object>> listMenuSef(Map<String, String[]> map,PageBean pageBean)throws Exception{
String sql=" select * from t_easyui_menu where true";
String id=JsonUtils.getParamVal(map, "menuHid");
if(StringUtils.isNotBlank(id)) {
sql=sql +" and menuid in("+id+")";
}
else {
sql=sql+" and menuid =-1";
} return super.executeQuery(sql, pageBean);
} /**
* 查询Menu表的数据
* @param map
* @param pageBean
* @return
*/
public List<Map<String, Object>> listMenu(Map<String, String[]> map,PageBean pageBean)throws Exception{
String sql=" select * from t_easyui_menu where true";
String id=JsonUtils.getParamVal(map, "id");
if(StringUtils.isNotBlank(id)) {
sql=sql +" and parentid ="+id;
}
else {
sql=sql+" and parentid =-1";
} return super.executeQuery(sql, pageBean);
} /**
* menu表的数据不符合layui树形展示的数据格式
* 需要转换成layui所能识别的数据格式
* @param map
* @param reTreeNode
* @throws Exception
*/
private void menu2TreeNode(Map<String, Object> map, TreeNode treeNode) throws Exception {
treeNode.setId(map.get("Menuid").toString());
treeNode.setName(map.get("Menuname").toString());
treeNode.setAttributes(map);
//转换格式
Map<String, String[]> jspMap=new HashMap<>();
jspMap.put("id", new String[] {treeNode.getId()});
List<Map<String, Object>> listMenu=this.listMenu(jspMap, null);
List<TreeNode> treeNodeList=new ArrayList<>();
menuList2TreeNodeList(listMenu, treeNodeList);
treeNode.setChildren(treeNodeList);
} /**
* @param mapList
* @param treeNodeList
* @throws Exception
*/
private void menuList2TreeNodeList(List<Map<String, Object>> mapList, List<TreeNode> treeNodeList)throws Exception {
TreeNode treeNode =null;
for (Map<String, Object> map : mapList) {
treeNode =new TreeNode();
menu2TreeNode(map, treeNode);
treeNodeList.add(treeNode);
}
}}

index.jsp 树形菜单展示界面注意layui css 和 js 文件的引用

UserAction

public class UserAction extends ActionSupport {
private UserDao userDao=new UserDao();
/**
* 登录
* @param req
* @param resp
* @return
*/
public String login(HttpServletRequest req,HttpServletResponse resp){
try {
List<Map<String, Object>> list=this.userDao.list(req.getParameterMap(), null);
if(list!=null&&list.size()>0) {
List<Map<String, Object>> listMenu=this.userDao.listMenu(req.getParameter("uid"), null);
StringBuilder sb=new StringBuilder();
for (Map<String, Object> map : listMenu) {
sb.append(","+map.get("menuId"));
}
// ,001,002
req.setAttribute("menuHid", sb.substring(1));
}else {
return"login";
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "index";
}
}

MenuAction

package com.liuwenwu.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.liuwenwu.dao.MenuDao;
import com.liuwenwu.entity.TreeNode;
import com.liuwenwu.util.ResponseUtil;
import com.zking.framework.ActionSupport;public class MenuAction extends ActionSupport {
private MenuDao menuDao =new MenuDao(); public String treeMenu(HttpServletRequest req,HttpServletResponse resp) {
try {
List<TreeNode> list=this.menuDao.list(req.getParameterMap(), null);
ObjectMapper om=new ObjectMapper();
//将LIST集合转换为json串
String jsonStr=om.writeValueAsString(list);
ResponseUtil.write(resp, jsonStr);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return null;
}
}

index.js

$(function () {
$.ajax({
type: "post",
url:'menuAction.action?methodName=treeMenu&&menuHid='+$("#menuHid").val(),
dataType: "json",
success: function (data) {
console.info(data);
layui.tree({
elem: '#demo',// 传入元素选择器
nodes: data,
click: function (node) {// 点击tree菜单项的时候
var element = layui.element;
var exist = $("li[lay-id='" + node.id + "']").length;//判断是不是用重复的选项卡
if (exist > 0) {
element.tabChange('tabs', node.id);// 切换到已有的选项卡
} else {
if (node.attributes.menuURL != null && node.attributes.menuURL != "") {// 判断是否需要新增选项卡
element.tabAdd(
'tabs',
{
title: node.name,
content: '<iframe scrolling="yes" frameborder="0" src=" '
+ node.attributes.menuURL
+ ' " width="100%" height="100%"></iframe>'// 支持传入html
,
id: node.id
});
element.tabChange('tabs', node.id);
}
}
}
});
}
});
})

二级权限树形菜单写完以后是对数据的展示和增删改查

book.jsp 展示界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/layui/css/index.css">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/layui.all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/jquery-3.3.1.js"></script>
<title>Insert title here</title>
</head><input type="hidden" id="dz" value="${pageContext.request.contextPath}" ><blockquote class="layui-elem-quote">

<div class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">书籍名称</label>
<div class="layui-input-inline">
<input type="text" id='book_name' name="book_name" lay-verify="required" placeholder="请输入书籍名" autocomplete="true" class="layui-input">
</div>
<button class="layui-btn layui-btn-normal layui-btn-radius" data-type="reload"><i class="layui-icon"></i>查询</button>
<button class="layui-btn layui-btn-normal" data-type="add">新建</button>
</div>
</div>
</blockquote>

<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="lineBtns">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon"></i>编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div class="site-text" style="margin: 5%; display: none" id="box1" target="test123">
<form class="layui-form layui-form-pane" onsubmit="return false" id="book">
<div class="layui-form-item">
<label class="layui-form-label"> 书本名</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_name2" name=book_name><br>
</div>
<label class="layui-form-label"> 书本拼音</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_name_pinyin" name=book_name_pinyin><br>
</div>
<label class="layui-form-label"> 书本类别ID</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_category_id" name=book_category_id><br>
</div>
<label class="layui-form-label"> 书本作者</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_author" name=book_author><br>
</div>
<label class="layui-form-label"> 书本价格</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_price" name=book_price><br>
</div>
<label class="layui-form-label"> 书本出版社</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="publishing" name=publishing><br>
</div>
<label class="layui-form-label"> 书本简介</label>
<div class="layui-input-block">
<input type="text" class="layui-input" id="book_desc" name=book_desc><br>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/layui/book.js"></script>
</body>
</html>

book.js

layui.use(['table','layer','form'],function(){
var data=document.getElementById("dz").value;
var table =layui.table;
var layer=layui.layer;
var form = layui.form;
table.render({
elem:'#test',
url:data+'/bookAction.action?methodName=query',
method:'post',
cols:[[
{field:'book_id',title:'书本ID',width:100,height:80},
{field:'book_name',title:'书本名称',width:100,height:80},
{field:'book_name_pinyin',title:'书本拼音',width:100,height:80},
{field:'book_category_name',title:'书本类型',width:100,height:80},
{field:'book_author',title:'书本作者',width:100,height:80},
{field:'book_price',title:'书本价格',width:100,height:80},
{field:'book_image',title:'书本图片',width:100,height:80},
{field:'publishing',title:'书本出版社',width:100,height:80},
{field:'book_desc',title:'书本简介',width:100,height:80},
{field:'zt_name',title:'书本状态',width:100,height:80},
{field:'deploy_datetime',height:80, width:300, title: '上架时间',templet:"<div>{{layui.util.toDateString(d.deploy_datetime, 'yyyy-MM-dd HH:mm:ss')}}</div>"},
{field:'sales_volume',title:'书本销量',width:100,height:80},
{fixed: 'right', title:'操作', toolbar: '#lineBtns', width:150}
]],
page:'true',
id: 'testReload'
});
//上方菜单操作栏(查询、以及增加按钮 )
var $ = layui.$, active = {
//查询
reload: function () {
var name = $('#book_name');//书籍名称根据 id来取值
console.log(name.val());
// 执行重载
table.reload('testReload', {
page: {
curr: 1
// 重新从第 1 页开始
},
where: {
key: 'book_name',
book_name: name.val(),
}
});
}, add: function () { //添加
layer.open({//弹出框
type: 1,
title: '添加书本',
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area: ['80%', '80%'],
content: $('#box1'),
btn: ['确定', '取消'],
yes: function (index, layero) {//确定执行函数
console.log(layero);
//执行添加方法
$.getJSON(data+"/bookAction.action?methodName=addBook", {
book_name: $("#book_name2").val(),
book_name_pinyin: $("#book_name_pinyin").val(),
book_category_id: $("#book_category_id").val(),
book_author: $("#book_author").val(),
book_price: $("#book_price").val(),
publishing: $("#publishing").val(),
book_desc: $("#book_desc").val() }, function (data) {
/*根据后台返回的参数来进行判断 */
if (data > 0) {
//弹出提示层
layer.alert('添加成功', {icon: 1, title: '提示'}, function (i) {
layer.close(i);
layer.close(index);//关闭弹出层
$("#book")[0].reset()//重置form
})
//重载表格
table.reload('testReload', {
page: {
curr: 1// 重新从第 1 页开始
}
})
} else{
//提示添加失败
layer.msg('添加失败')
}
}) }, cancel: function (index, layero) {//取消
//当点击取消按钮
$("#book")[0].reset()//重置form 根据id
layer.close(index)
}
});
}
}
$('.layui-form .layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
}); /*表格行内操作(编辑以及删除按钮操作) */
table.on('tool(test)', function(obj){
var data = obj.data; //获得当前行数据
var urlex=document.getElementById("dz").value;
var tr=obj.tr//活动当前行tr 的 DOM对象
console.log(data);
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
if(layEvent === 'del'){ //删除
layer.confirm('确定删除吗？',{title:'删除'}, function(index){
//向服务端发送删除指令og
$.getJSON(urlex+'/bookAction.action?methodName=remove',{book_id: data.book_id}, function(ret){
layer.close(index);//关闭弹窗
table.reload('testReload', {//重载表格
page: {
curr: 1
// 重新从第 1 页开始
}
})
});
layer.close(index);
});
} else if(layEvent === 'edit'){ //编辑
layer.open({
type: 1 //Page层类型
,skin: 'layui-layer-molv'
,area: ['380px', '270px']
,title: ['编辑书本信息','font-size:18px']
,btn: ['确定', '取消']
,shadeClose: true
,shade: 0 //遮罩透明度
,maxmin: true //允许全屏最小化
,content:$('#box1') //弹窗id
,success:function(layero,index){
$('#book_name2').val(data.book_name);
$('#book_name_pinyin').val(data.book_name_pinyin);
$('#book_category_id').val(data.book_category_id);
$('#book_author').val(data.book_author);
$('#book_price').val(data.book_price);
$('#publishing').val(data.publishing);
$('#book_desc').val(data.book_desc);
},yes:function(index,layero){
$.getJSON(urlex+'/bookAction.action?methodName=edit',{
book_name: $('#book_name2').val(),
book_name_pinyin: $('#book_name_pinyin').val(),
book_category_id: $('#book_category_id').val(),
book_author: $('#book_author').val(),
book_price: $('#book_price').val(),
publishing: $('#publishing').val(),
book_desc: $('#book_desc').val(),
book_id: data.book_id,
},function(data){
//根据后台返回的参数，来进行判断
if(data>0){
layer.alert('编辑成功',{icon:1,title:'提示'},function(i){
layer.close(i);
layer.close(index);//关闭弹出层
$("#book")[0].reset()//重置form
})
table.reload('testReload',{//重载表格
page:{
curr:1
}
})
}
});
}
});
}
});
})

BookDao

package com.liuwenwu.dao;
import java.sql.SQLException;
import java.util.List;
import java.util.Map;
import com.liuwenwu.util.JsonBaseDao;
import com.liuwenwu.util.JsonUtils;
import com.liuwenwu.util.PageBean;
import com.liuwenwu.util.StringUtils;public class BookDao extends JsonBaseDao{
/**
* 查询未上架
* @param paMap
* @param pageBean
* @return
* @throws SQLException
* @throws IllegalAccessException
* @throws InstantiationException
*/
public List<Map<String, Object>> query(Map<String, String[]> paMap,PageBean pageBean) throws InstantiationException, IllegalAccessException, SQLException{
String sql="SELECT * FROM (\r\n" +
"SELECT a.`book_id`,a.`book_name`,a.`book_name_pinyin`,b.`book_category_name`,a.`book_author`,a.`book_price`,a.`book_image`,a.`publishing`,a.`book_desc`,c.`zt_name`,a.`deploy_datetime`,a.`sales_volume` FROM t_book a INNER JOIN t_book_category b INNER JOIN t_book_zt c ON a.book_category_id=b.book_category_id AND a.`book_state`=c.`zt_id`) a\r\n" +
"WHERE a.zt_name='未上架'";
String uname = JsonUtils.getParamVal(paMap, "book_name");
if(StringUtils.isNotBlank(uname)) {
sql = sql+" AND a.book_name LIKE '%"+uname+"%'";
}
return super.executeQuery(sql, pageBean);
} /**
* 新增书本方法
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int addBook(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="INSERT INTO t_book (book_name,book_name_pinyin,book_category_id,book_author,book_price,publishing,book_desc) VALUES (?,?,?,?,?,?,?)";
return super.executeUpdate(sql, new String[] {"book_name","book_name_pinyin","book_category_id","book_author","book_price","publishing","book_desc"}, paMap);
} /**
* 修改的方法
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int edit(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="update t_book set book_name=?,book_name_pinyin=?,book_category_id=?,book_author=?,book_price=?,publishing=?,book_desc=? where book_id=?";
return super.executeUpdate(sql, new String[] {"book_name","book_name_pinyin","book_category_id","book_author","book_price","publishing","book_desc","book_id"}, paMap);
} /**
* 删除方法
* @param paMap
* @return
* @throws NoSuchFieldException
* @throws SecurityException
* @throws IllegalArgumentException
* @throws IllegalAccessException
* @throws SQLException
*/
public int remove(Map<String, String[]> paMap) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
String sql="delete from t_book where book_id=?";
return super.executeUpdate(sql, new String[] {"book_id"}, paMap);
}
}

BookAction

package com.liuwenwu.web;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.liuwenwu.dao.BookDao;
import com.liuwenwu.util.PageBean;
import com.liuwenwu.util.ResponseUtil;
import com.zking.framework.ActionSupport;public class BookAction extends ActionSupport{
private BookDao bookDao=new BookDao();
/**
* 查询请求
* @param req
* @param resp
* @return
*/
public String query(HttpServletRequest req,HttpServletResponse resp) {
try {
PageBean pageBean=new PageBean();
pageBean.setRequest(req);
List<Map<String, Object>> list=this.bookDao.query(req.getParameterMap(), pageBean);
ObjectMapper om=new ObjectMapper();
Map<String, Object> map=new HashMap<>();
map.put("code", 0);
map.put("count", pageBean.getTotal());
map.put("data", list);
ResponseUtil.write(resp, om.writeValueAsString(map));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
} /**
* 增加
* @param req
* @param resp
* @return
*/
public String addBook(HttpServletRequest req,HttpServletResponse resp) {
try {
int n=this.bookDao.addBook(req.getParameterMap());
ResponseUtil.write(resp, n);
} catch (Exception e) {
e.printStackTrace();
}
return null;
} /**
* 修改方法
* @param req
* @param resp
* @return
*/
public String edit(HttpServletRequest req,HttpServletResponse resp){
try {
int edit = this.bookDao.edit(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(edit));
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
} return null;
} /**
* 删除请求
* @param req
* @param resp
* @return
*/
public String remove(HttpServletRequest req,HttpServletResponse resp) {
try {
int remove=this.bookDao.remove(req.getParameterMap());
ObjectMapper om=new ObjectMapper();
ResponseUtil.write(resp, om.writeValueAsString(remove));
} catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
}
return null;
}
}

mvc.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<config>
 <action path="/menuAction" type="com.liuwenwu.web.MenuAction">
<forward name="index" path="/index.jsp" redirect="false" />
</action> <action path="/userAction" type="com.liuwenwu.web.UserAction">
<forward name="index" path="/index.jsp" redirect="false" />
</action> <action path="/bookAction" type="com.liuwenwu.web.BookAction">
<forward name="index" path="/index.jsp" redirect="false" />
</action></config>

成品展示