如果想看内容的思路可以看前面的博客，最后一篇的话就只放代码了。
首先效果如下
1.大后台全部内容
页面为back.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>后台管理页面</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="layui/css/layui.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="layui/layui.js"></script>
<script>
layui.use('element', function () {
var element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
//触发事件
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function (url, id, name) {
//新增一个Tab项 传入三个参数，分别是tab页面的地址，还有一个规定的id，对应其标题，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd('home-tabs', {
title: name,
content: '<iframe id="aaa" data-frameid="' + id + '" scrolling="auto" frameborder="0" src="' + url +
'" style="width:1336px;height:687px;"></iframe>',
id: id //规定好的id
});
//通过鼠标mouseover事件 动态将新增的tab下的li标签绑定鼠标右键功能的菜单
//下面的json.id是动态新增Tab的id，一定要传入这个id,避免重复加载mouseover数据
$(".layui-tab-title li[lay-id=" + id + "]").mouseover(function () {
var tabId = $(this).attr("lay-id");
CustomRightClick(tabId); //给tab绑定右击事件
FrameWH(); //计算ifram层的大小
});
},
tabChange: function (id) {
//切换到指定Tab项
element.tabChange('home-tabs', id); //根据传入的id传入到指定的tab项
},
tabDelete: function (id) {
element.tabDelete('home-tabs', id); //删除
},
tabRefresh: function (id) { //刷新页面
$("iframe[data-frameid='" + id + "']").attr("src", $("iframe[data-frameid='" + id + "']").attr("src")) //刷新框架
}
};
//当点击有site-demo-active属性的标签时，即左侧菜单栏中内容 ，触发点击事件
$('.site-demo-active').on('click', function () {
var dataid = $(this);
//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
} else {
//否则判断该tab项是否以及存在
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
$.each($(".layui-tab-title li[lay-id]"), function () {
//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
if ($(this).attr("lay-id") == dataid.attr("data-id")) {
isData = true;
}
});
if (!isData) {
//标志为false 新增一个tab项
active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(dataid.attr("data-id"));
});
function CustomRightClick(id) {
//取消右键 rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
$('.layui-tab-title li').on('contextmenu', function () {
return false;
});
$('.layui-tab-title,.layui-tab-title li').click(function () {
$('.rightmenu').hide();
});
//单击取消右键菜单
$('body,#aaa').click(function () {
$('.rightmenu').hide();
});
//tab点击右键
$('.layui-tab-title li').on('contextmenu', function (e) {
var popupmenu = $(".rightmenu");
popupmenu.find("li").attr("data-id", id); //在右键菜单中的标签绑定id属性
//判断右侧菜单的位置
l = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
t = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
popupmenu.css({
left: l,
top: t
}).show(); //进行绝对定位
return false;
});
}
$(".rightmenu li").click(function () {
//当前的tabId
var currentTabId = $(this).attr("data-id");
if ($(this).attr("data-type") == "closeOthers") { //关闭其他
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
if ($(this).attr("lay-id") != currentTabId) {
active.tabDelete($(this).attr("lay-id"))
}
});
} else if ($(this).attr("data-type") == "closeAll") { //关闭全部
var tabtitle = $(".layui-tab-title li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})
} else if ($(this).attr("data-type") == "refresh") { //刷新页面
active.tabRefresh($(this).attr("data-id"));
} else if ($(this).attr("data-type") == "closeRight") { //关闭右边所有
//找到当前聚焦的li之后的所有li标签 然后遍历
var tabtitle = $(".layui-tab-title li[lay-id=" + currentTabId + "]~li");
$.each(tabtitle, function (i) {
active.tabDelete($(this).attr("lay-id"))
})
}
$('.rightmenu').hide();
});
function FrameWH() {
var h = $(window).height() - 41 - 10 - 60 - 10 - 44 - 10;
$("iframe").css("height", h + "px");
}
$(window).resize(function () {
FrameWH();
});
//打开默认页面
active.tabAdd("index2.html", 11, "首页");
active.tabChange(11);
});
</script>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
var element = layui.element
,layer = layui.layer
,util = layui.util
,$ = layui.$;
//头部事件
util.event('lay-header-event', {
menuRight: function(){
layer.open({
type: 1
,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
,area: ['260px', '100%']
,offset: 'rt' //右上角
,anim: 5
,shadeClose: true
});
}
});
});
</script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">电商后台信息管理 V1.0</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1270341548&site=qq&menu=yes">联系我</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="javascript:;">和我合作</a>
<dl class="layui-nav-child">
<dd><img src="image/wx.jpg" width=""></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">界面管理</a>
<dl class="layui-nav-child">
<dd><a href="">menu 11</a></dd>
<dd><a href="">menu 22</a></dd>
<dd><a href="">menu 33</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-md-inline-block">
<a href="javascript:;">
<img src="image/photo.jpg" class="layui-nav-img">
Siron
</a>
<dl class="layui-nav-child">
<dd><a href="">设置头像</a></dd>
<dd><a href="">个人设置</a></dd>
<dd><a href="">退出账户</a></dd>
</dl>
</li>
<li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
<a href="javascript:;">
<i class="layui-icon layui-icon-more-vertical"></i>
</a>
</li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
<ul class="layui-nav layui-nav-tree">
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">后台管理</a>
<dl class="layui-nav-child">
<dd><a data-url="index1.html" data-id="11" data-title="首页" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">首页</a></dd>
<dd><a href="javascript:;">通知栏管理</a></dd>
</dl>
</li>
<li class="layui-nav-item ">
<a class="" href="javascript:void(0);">用户管理</a>
<dl class="layui-nav-child">
<dd><a data-url="#" data-id="11" data-title="个人中心" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">个人中心</a></dd>
<dd><a data-url="password.html" data-id="21" data-title="修改密码" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">修改密码</a></dd>
<dd><a data-url="userList.html" data-id="22" data-title="用户列表" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">用户列表</a></dd>
</dl>
</li>
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">客户管理</a>
<dl class="layui-nav-child">
<dd><a data-url="customer.html" data-id="31" data-title="客户信息管理" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">客户信息管理</a></dd>
<dd><a href="javascript:;">客户订单管理</a></dd>
<dd><a href="javascript:;">客户消费管理</a></dd>
</dl>
</li>
<li class="layui-nav-item ">
<a class="" href="javascript:;">商品管理</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" class="site-demo-active" data-url="good.html" data-id="41"
data-title="商品信息管理"
data-type="tabAdd">商品信息管理
</a>
</dd>
<dd><a href="javascript:;">客户订单管理</a></dd>
<dd><a href="javascript:;">客户消费管理</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a class="" href="javascript:void(0);">系统管理</a>
<dl class="layui-nav-child">
<dd><a data-url="paramConfig.html" data-id="21" data-title="参数设置" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">参数设置</a></dd>
<dd><a data-url="security.html" data-id="22" data-title="安全中心" href="javascript:void(0);"
class="site-demo-active"
data-type="tabAdd">安全中心</a></dd>
</dl>
</li>
</ul>
</div>
</div>
<!-- 选项卡和内容区 -->
<div class="layui-tab" lay-filter="home-tabs" lay-allowclose="true" style="margin: 50px 0 0 200px;">
<ul class="layui-tab-title"></ul>
<ul class="rightmenu" style="display: none;position: absolute;">
<li data-type="refresh">刷新</li>
<li data-type="closeOthers">关闭其他</li>
<li data-type="closeRight">关闭右侧所有</li>
<li data-type="closeAll">关闭所有</li>
</ul>
<div class="layui-tab-content">
</div>
</div>
<!-- 底部固定区域 -->
<div class="layui-footer" style="text-align: center;height: 20px;">
<p style="margin-top: -10px"> 山海观雾 @Copyright</p>
</div>
</div>
</body>
</html>
2.子页面 Customer.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<!-- 搜索栏 -->
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">客户账户：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="username" name="username" placeholder="请输入客户名称" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">客户昵称：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="nickname" name="nickname" placeholder="请输入客户昵称" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">客户地址：</label>
<div class="layui-input-inline" style="width: 150px">
<input type="text" id="addr" name="addr" 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_reset" type="button" class="layui-btn layui-btn-normal">
重置
</button>
</div>
</div>
<div class="layui-inline">
<div class="layui-input-inline">
<button id="btn_add" type="button" class="layui-btn layui-btn-warm layui-btn-radius">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
</div>
</div>
</div>
<!--搜索栏结束-->
<table class="layui-hide" id="customer" lay-filter="customer"></table>
<!--layui-btn layui-btn-normal layui-btn-sm
样式为一个按钮 样式为对应的颜色 按钮形状的大小
lay-event 代表的是事件监听-->
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除 </a>
</script>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js"></script>
<!-- 注意 ：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
layui.use('table', function () {
var table = layui.table;
//数据渲染
table.render({
elem: '#customer'//代表的是你操作的数据表格的编号
, url: '/day01/customer/page'//数据接口
, page: { // 支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定义分页布局//curr: 5,
groups: 6, //只显示 1 个连续页码
first: false, //不显示首页
last: false //不显示尾页
}
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{field: 'uuid', width: 180, title: 'UUID', align: 'center'}
, {field: 'username', width: 180, title: '客户账户', align: 'center'}
, {field: 'password', width: 180, title: '客户密码', align: 'center'}
, {field: 'nickname', width: 180, title: '客户昵称', align: 'center'}
, {field: 'gender', width: 180, title: '客户性别', align: 'center'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
, {field: 'addr', width: 180, title: '客户地址', align: 'center', sort: true}
, {field: '操作', title: '操作', fixed: 'right', width: 220, align: 'center', toolbar: '#barDemo'}
]]
,
limit: 12,//页大小
limits: [10, 15, 20, 50, 100]//当前页大小的选项
});
/*点击查询按钮触发的事件监听*/
$("#btn_search").click(function () {
reload();
});
/*点击重置按钮触发的事件监听*/
$("#btn_reset").click(function () {
$("#username").val(""),
$("#nickname").val(""),
$("#addr").val("");
});
//点击添加
$("#btn_add").click(function () {
//打开一个新的页面
//打开新窗口
layer.open({
type: 2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: "新增客户信息",
maxmin: true,
area: ['600px', '450px'],
shadeClose: false, //点击遮罩关闭
content: 'addCustomer.html',
});
});
//加载数据表格的渲染
function reload() {
table.reload('customer', {//执行的参数组
//访问servlet把用户带的条件传过去 并且将这个数据通过工具类转换为对应的json格式返回给页面
//参数： url 访问的路径名称 method 访问的方式 loading 是否加载进度条 page 代表是否分页
//where 代表传输过去的参数 request请求 //自定义分页请求参数名 page 当前页 limit页大小
url: '/day01/customer/pageByCondition'
, method: 'POST'
, page: true
, loading: true
,
where: {//获取到servlet中需要的三个参数 》模糊查询
'username': $("#username").val(),
'nickname': $("#nickname").val(),
'addr': $("#addr").val(),
},
request: {//代表的是layui自动传的值
pageName: "page",
limitName: 'limit',
}
});
}
//在表格上触发的事件监听
//传进去的参数代表的是一整个layui数据,但是可以通过参数名.data拿到当前这一条json数据
table.on('tool(customer)', function (obj) {
//先获取当前的数据
var data = obj.data;
//obj对象》》》 {code:0;msg:'成功',success:true,data:[{},{},{}]}
//真实的json数据》》obj.data
// console.log(obj.data.username);
var uuid = obj.data.uuid;
//如果这个触发的事件是del
if (obj.event == 'del') {
layer.confirm('确定删除吗？', function (index) {
//发起ajax请求
$.ajax({
url: '/day01/customer/deleteOne',
data: {uuid: uuid},
type: 'post',
dataType: 'JSON',
success: function (data) {//data就是页面返回过来的数据
if (data.code > 0) {
layer.msg("删除成功", {icon: 1});
//重新渲染
reload();
} else {
layer.alert('删除失败', {icon: 5});
}
}
});
});
}
});
//修改触发的事件
table.on('tool(customer)', function (obj) {
//先获取当前的数据 json类型的数据 当前行的数据
var data = obj.data;
//如果这个触发的事件是del
if (obj.event == 'edit') {
//打开新窗口 并且为对应的层去做操作 index代表页面的层级
var index = layer.open({
type: 2,//layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
title: "更新客户信息",
maxmin: true,
area: ['600px', '450px'],
shadeClose: false, //点击遮罩关闭
content: 'updateCustomer.html',
success: function (layero, index) { //数据回显
//1.先获取对应的子窗口 类型'body' updatebody
var updatebody = layer.getChildFrame('body', index);
//2.找到对应的元素并且为这个元素赋值
updatebody.find("input[name=uuid]").val(data.uuid);
updatebody.find("input[name=username]").val(data.username);
updatebody.find("input[name=password]").val(data.password);
updatebody.find("input[name=nickname]").val(data.nickname);
updatebody.find("input[name=addr]").val(data.addr);
//layui
if (data.gender == '男') {
updatebody.find(".radio1").attr("checked", "checked");
} else {
updatebody.find(".radio2").attr("checked", "checked");
}
//3.获取子窗口的layer对象 layero查找iframe层中的内容窗口
// var childWindow = layero.find('iframe')[0].contentWindow;
//4.操作子页面中的表单进行重新渲染
// childWindow.layer.form.render("radio");
//5重新设置大小时 弹出全屏
$(window).on("resize", function () {
layer.full(index);
});
return false;
}
});
}
});
});
</script>
</body>
</html>
3.iframe层
3.1 addCustomer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
media="all">
<script src="js/jquery-3.3.1.js"></script>
<script src="layui/layui.js"></script>
<title>添加客户信息</title>
</head>
<script>
let form, $;
layui.use(['form'], function(){
form = layui.form;
form.render();//用于渲染表格中的单选框
$ = layui.$;
//在表格上写事件监听
form.on('submit(customer)',function(data){
//这里写需要触发的事件 比如ajax
//data代表是全部的json数据 field代表的是当前一条数据 后面再跟上属性 可以直接查看单条属性的值
// console.log("提交了"+data.field);
// console.log("提交了"+data.field.username);
$.ajax({
url: '/day01/customer/insertOne',
data: data.field,
type: 'post',
dataType: 'JSON',
success: function(data) {//data就是页面返回过来的数据
if(data.code>0) {
console.log("新增数据成功"+data.message);
layer.alert('添加成功', {icon: 1}, function() {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
parent.reload();
});
} else {
layer.alert('添加不成功', {icon: 5});
}
}
})
return false;
});
/*点击重置按钮触发的事件监听*/
$("#btn_reset").click(function () {
$("#username").val(""),
$("#nickname").val(""),
$("#addr").val("");
});
});
</script>
<body>
<form id="customer" class="layui-form layui-form-pane">
<input type="hidden" name="uuid"/>
<div class="layui-form-item">
<label class="layui-form-label">客户账户</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" autocomplete="off" placeholder="请输入客户账户"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户密码</label>
<div class="layui-input-block">
<input type="text" id="password" name="password" autocomplete="off" placeholder="请输入客户密码"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户昵称</label>
<div class="layui-input-block">
<input type="text" id="nickname" name="nickname" lay-verify="required" placeholder="请输入客户昵称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户性别</label>
<div class="layui-input-block">
<input type="radio" name="gender" value="男" title="男" lay-filter="aaa" checked/>
<input type="radio" name="gender" value="女" title="女" lay-filter="aaa"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户地址</label>
<div class="layui-input-block">
<input type="text" name="addr" id="addr" placeholder="请输入客户地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="text-align:center;">
<button type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="customer">保存</button>
<button type="reset" id="btn_reset" class="layui-btn">重置</button>
</div>
</form>
</body>
</html>
3.2updateCustomer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"
media="all">
<script src="js/jquery-3.3.1.js"></script>
<script src="layui/layui.js"></script>
<title>更新客户信息</title>
</head>
<script>
let form, $;
layui.use(['form'], function () {
form=layui.form;
$ = layui.$;
setTimeout(function () {
form.render();//用于渲染表格中的单选框
},500);
//在表格上写事件监听
form.on('submit(customer)', function (data) {
$.ajax({
url: '/day01/customer/updateOne',
data: data.field,
type: 'post',
dataType: 'JSON',
success: function (data) {//data就是页面返回过来的数据
if (data.code > 0) {
console.log("更新数据成功" + data.message);
layer.alert('更新成功', {icon: 1}, function () {
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index);
parent.reload();
});
} else {
layer.alert('更新失败', {icon: 5});
}
}
})
return false;
});
/*点击重置按钮触发的事件监听*/
$("#btn_reset").click(function () {
$("#username").val(""),
$("#nickname").val(""),
$("#addr").val("");
});
});
</script>
<body>
<form id="customer" class="layui-form layui-form-pane">
<input type="hidden" name="uuid"/>
<div class="layui-form-item">
<label class="layui-form-label">客户账户</label>
<div class="layui-input-block">
<input type="text" id="username" name="username" autocomplete="off" placeholder="请输入客户账户"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户密码</label>
<div class="layui-input-block">
<input type="text" id="password" name="password" autocomplete="off" placeholder="请输入客户密码"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户昵称</label>
<div class="layui-input-block">
<input type="text" id="nickname" name="nickname" lay-verify="required" placeholder="请输入客户昵称"
autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户性别</label>
<div class="layui-input-block">
<input type="radio" class="radio1" name="gender" value="男" title="男" />
<input type="radio" class="radio2" name="gender" value="女" title="女" />
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">客户地址</label>
<div class="layui-input-block">
<input type="text" name="addr" id="addr" placeholder="请输入客户地址" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item" style="text-align:center;">
<button type="button" lay-submit="" class="layui-btn layui-btn-normal" lay-filter="customer">保存</button>
<button type="reset" id="btn_reset" class="layui-btn">重置</button>
</div>
</form>
</body>
</html>
4.servlet
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import mapper.CustomerMapper;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.ibatis.session.SqlSession;
import pojo.Customer;
import util.BaseServlet;
import util.GetSqlSession;
import util.ResultData;
import util.ToLayuiData;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.sql.ResultSet;
import java.util.List;
import java.util.Map;
@WebServlet("/customer/*")
public class CustomerServlet extends BaseServlet {
//更新一条数据
public void updateOne(HttpServletRequest request, HttpServletResponse response) {
try {
//请求对象直接获取所有的参数名和值
Map<String, String[]> map = request.getParameterMap();
//使用BeanUtils直接进行对象的映射
Customer customer=new Customer();
BeanUtils.populate(customer,map);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.update(customer);
//sqlSession事务提交
sqlSession.commit();
if (i >0) {
System.out.println("更新数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
System.out.println("更新数据失败");
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IOException e) {
e.printStackTrace();
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
}
//删除一条数据
public void deleteOne(HttpServletRequest request, HttpServletResponse response) {
try {
String id= request.getParameter("uuid");
//获取请求的uuid
int uuid = Integer.parseInt(id);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.delete(uuid);
//sqlSession事务提交
sqlSession.commit();
if (i >0) {
System.out.println("删除数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
System.out.println("删除数据失败");
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IOException e) {
e.printStackTrace();
}
}
//添加一条数据
public void insertOne(HttpServletRequest request, HttpServletResponse response) {
try {
//请求对象直接获取所有的参数名和值
Map<String, String[]> map = request.getParameterMap();
//使用BeanUtils直接进行对象的映射
Customer customer=new Customer();
BeanUtils.populate(customer,map);
System.out.println("新增的对象"+customer);
//获取sqlSession
SqlSession sqlSession = GetSqlSession.getSqlSession();
//获取代理对象
CustomerMapper mapper =sqlSession.getMapper(CustomerMapper.class);
//执行插入
int i= mapper.insertNew(customer);
//sqlSession事务提交
// sqlSession.commit();
if (i >0) {
System.out.println("新增数据成功");
String success = ResultData.success();
response.getWriter().write(success);
}else{
String error = ResultData.error();
response.getWriter().write(error);
}
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
public void page(HttpServletRequest request, HttpServletResponse response) {
try {
//拿到页面传过来的两个参数 page当前页 limit页大小
int page = Integer.parseInt(request.getParameter("page"));
int limit = Integer.parseInt(request.getParameter("limit"));
//获取代理对象
CustomerMapper mapper = GetSqlSession.getSqlSession().getMapper(CustomerMapper.class);
//分页查询 select * from customer limit ?, ? 代表起始下标 页大小 10
// 起始下标=（当前页大小-1）*页大小
List<Customer> customers = mapper.selectPage((page - 1) * limit, limit);
//查询总条数
int count = mapper.selectCount();
//将查出来的数据转换为json格式
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(customers);
System.out.println(data);
//code msg count data
ToLayuiData layuiData = ToLayuiData.success(0, "成功", count, data);
//将这个数据返回给页面进行渲染
response.getWriter().write(layuiData.toString());
System.out.println(layuiData);
} catch (IOException e) {
e.printStackTrace();
}
}
public void pageByCondition(HttpServletRequest request, HttpServletResponse response) {
try {
//拿到页面传过来的两个参数 page当前页 limit页大小
int page = Integer.parseInt(request.getParameter("page"));
int limit = Integer.parseInt(request.getParameter("limit"));
//拿到用户输入的三个参数
String username = request.getParameter("username");
String nickname = request.getParameter("nickname");
String addr = request.getParameter("addr");
//获取代理对象
CustomerMapper mapper = GetSqlSession.getSqlSession().getMapper(CustomerMapper.class);
//分页查询 select * from customer limit ?, ? 代表起始下标 页大小 10
// 起始下标=（当前页大小-1）*页大小
List<Customer> customers = mapper.selectPageByCondition((page - 1) * limit, limit,username,nickname,addr);
//查询总条数但是附带条件
int count = mapper.selectCountByCondition(username,nickname,addr);
//将查出来的数据转换为json格式
ObjectMapper objectMapper = new ObjectMapper();
String data = objectMapper.writeValueAsString(customers);
System.out.println(data);
//code msg count data
ToLayuiData layuiData = ToLayuiData.success(0, "成功", count, data);
//将这个数据返回给页面进行渲染
response.getWriter().write(layuiData.toString());
System.out.println(layuiData);
} catch (IOException e) {
e.printStackTrace();
}
}
}
5.mapper
package mapper;
import org.apache.ibatis.annotations.*;
import pojo.Customer;
import java.util.List;
import java.util.Map;
public interface CustomerMapper {
//增加一条数据
int insertNew(Customer customer);
//更新数据
int updateOne(Customer customer);
//更新数的注解生成
@Update(" update customer set username = #{username}, password = #{password}, nickname = #{nickname}, gender = #{gender}, addr = #{addr}where uuid = #{uuid} ")
int update(Customer customer);
@Delete("delete from customer where uuid = #{uuid}")
int delete(int uuid);
//查询全部的客户信息
@Select("select * from customer")
List<Customer> selectAll();
//分页查询全部的客户信息
@Select("select * from customer limit #{startIndex} ,#{pageSize}")
List<Customer> selectPage(@Param("startIndex") int startIndex,@Param("pageSize") int pageSize);
@Select("select count(*) from customer")
int selectCount();
//条件分页查询
List<Customer> selectPageByCondition(@Param("startIndex") int startIndex,@Param("pageSize") int pageSize,@Param("username") String username,@Param("nickname") String nickname,@Param("addr") String addr);
//条件查询数量
int selectCountByCondition(@Param("username") String username,@Param("nickname") String nickname,@Param("addr") String addr);
}
6.mapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="mapper.CustomerMapper">
<!--resultType="customer" 相当于 new BeanListHanlder<Customer>(Customer.class)
resultMap 结果集 map键值对
id:表示就是映射出来的id名称 type是需要映射的类
-->
<resultMap id="customerBean" type="pojo.Customer">
<!--普通字段 result
column 数据库中列字段名称 property 实体类中属性的名称-->
<result column="nickname" property="nickname"></result>
</resultMap>
<!--sql片段 就是用于将重复的sql代码直接作为引入-->
<sql id="selectAll">
select * from customer
</sql>
<!--删除 通过主键uuid进行删除客户-->
<delete id="deleteMore">
delete from customer
where
uuid in
<!-- (id1,id2,id3)
collection="需要遍历的项/参数" item="遍历出来的项" open="开始的符号(" close="结束的符号)" separator="每个数据之间的分割,"-->
<foreach collection="uuids" item="uuid" open="(" close=")" separator=",">
#{uuid}
</foreach>
</delete>
<!--直接将新生成的数据返回
useGeneratedKeys 使用生成主键 通过主键返回
keyProperty 表示键的属性-->
<insert id="insertNew" useGeneratedKeys="true" keyProperty="uuid">
insert into customer
(username,password,nickname,gender,addr)
values (#{username},#{password},#{nickname},#{gender},#{addr})
</insert>
<!--更新语句 需要加上,分隔开每个字段设置值-->
<update id="updateOne">
update customer set
username = #{username},
password = #{password},
nickname = #{nick},
gender = #{gender},
addr = #{addr}
where
uuid = #{uuid}
</update>
<!--多条件中只选择一个条件进行查询-->
<select id="selectBySingle" resultMap="customerBean">
<include refid="selectAll"></include>
<where>
<choose>
<when test="addr !=null and addr !=''">
addr = #{addr}
</when>
<when test="username !=null and username !=''">
username like concat('%',#{username},'%')
</when>
<when test="nick !=null and nick !=''">
nickname like concat('%',#{nick},'%')
</when>
</choose>
</where>
</select>
<!--多条件查询-->
<select id="selectPageByCondition" resultMap="customerBean">
select * from customer
<where>
<if test="username !=null and username !=''">
and username like concat('%',#{username},'%')
</if>
<if test="nickname !=null and nickname !=''">
and nickname like concat('%',#{nickname},'%')
</if>
<if test="addr !=null and addr !=''">
and addr like concat('%',#{addr},'%')
</if>
</where>
limit #{startIndex} ,#{pageSize}
</select>
<select id="selectCountByCondition" resultType="java.lang.Integer">
select count(*) from customer
<where>
<if test="username !=null and username !=''">
and username like concat('%',#{username},'%')
</if>
<if test="nickname !=null and nickname !=''">
and nickname like concat('%',#{nickname},'%')
</if>
<if test="addr !=null and addr !=''">
and addr like concat('%',#{addr},'%')
</if>
</where>
</select>
<!--创建select标签-->
<!-- <select id="selectAll" resultMap="customerBean">-->
<!-- select * from customer-->
<!-- </select>-->
</mapper>
7.实体类
package pojo;
public class Customer {
// `uuid` int(11) NOT NULL AUTO_INCREMENT,
// `username` varchar(11) NOT NULL,
// `password` varchar(11) NOT NULL DEFAULT '123456789',
// `nickname` varchar(255) NOT NULL DEFAULT '������һ��' COMMENT '�dz�',
// `gender` varchar(1) NOT NULL DEFAULT '��',
// `addr` varchar(11) NOT NULL DEFAULT '�й���ɳ',
int uuid;
String username;
String password;
String nickname;
String gender;
String addr;
public Customer() {
}
public Customer(String username, String password, String nickname) {
this.username = username;
this.password = password;
this.nickname = nickname;
}
public Customer(String username, String password) {
this.username = username;
this.password = password;
}
public Customer(int uuid, String username, String password, String nickname, String gender, String addr) {
this.uuid = uuid;
this.username = username;
this.password = password;
this.nickname = nickname;
this.gender = gender;
this.addr = addr;
}
public Customer(String username, String password, String nickname, String gender, String addr) {
this.username = username;
this.password = password;
this.nickname = nickname;
this.gender = gender;
this.addr = addr;
}
public Customer(int uuid, String nickname, String gender, String addr) {
this.uuid = uuid;
this.nickname = nickname;
this.gender = gender;
this.addr = addr;
}
public int getUuid() {
return uuid;
}
public void setUuid(int uuid) {
this.uuid = uuid;
}
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 getNickname() {
return nickname;
}
public void setNickname(String nickname) {
this.nickname = nickname;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getAddr() {
return addr;
}
public void setAddr(String addr) {
this.addr = addr;
}
@Override
public String toString() {
return "Customer{" +
"uuid=" + uuid +
", username='" + username + '\'' +
", password='" + password + '\'' +
", nickname='" + nickname + '\'' +
", gender='" + gender + '\'' +
", addr='" + addr + '\'' +
'}';
}
}
8.工具类
8.1 转换为layui的json
package util;
import java.util.HashMap;
public class ToLayuiData extends HashMap {
public ToLayuiData addData(String key, Object value) {
this.put(key, value);
return this;
}
public static ToLayuiData error(int code, String msg) {
ToLayuiData r = new ToLayuiData();
r.addData("success", false).addData("code", code).addData("msg", msg);
return r;
}
public static ToLayuiData success(int code, String msg,long count,Object data) {
ToLayuiData r = new ToLayuiData();
r.addData("success", true).addData("code", code).addData("msg", msg).addData("count", count).addData("data", data);
return r;
}
public static ToLayuiData success(int code, String msg, Object data) {
ToLayuiData r = new ToLayuiData();
r.addData("success", true).addData("code", code).addData("msg", msg).addData("data", data);
return r;
}
@Override
public String toString() {
return "{"+"\"code\":"+this.get("code").toString()+","
+"\"msg\":"+"\""+this.get("msg").toString()+"\""+","
+"\"count\":"+this.get("count").toString()+","
+"\"data\":"+this.get("data").toString()
+"}";
}
}
8.2为返回页面的json数据的工具类
package util;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class ResultData {
int code;
String message;
public ResultData() {
}
public ResultData(int code, String message) {
this.code = code;
this.message = message;
}
public static String success() {
String data = "";
try {
ResultData rs = new ResultData(1, "true");
ObjectMapper objectMapper = new ObjectMapper();
data = objectMapper.writeValueAsString(rs);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
//{ code:1,message:"true"}
return data;
}
public static String error() {
String data = "";
try {
ResultData rs = new ResultData(0, "false");
ObjectMapper objectMapper = new ObjectMapper();
data = objectMapper.writeValueAsString(rs);
} catch (JsonProcessingException e) {
e.printStackTrace();
}
//{ code:1,message:"true"}
return data;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
@Override
public String toString() {
return "ResultData{" +
"code=" + code +
", message='" + message + '\'' +
'}';
}
}
8.3获取sqlSession
package util;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import java.io.IOException;
import java.io.InputStream;
public class GetSqlSession {
public static SqlSession getSqlSession() throws IOException {
/*Resources配置文件的数据*/
String resource = "mybatis-config.xml";
//通过资源文件类去获取文件中的流
InputStream inputStream = Resources.getResourceAsStream(resource);
/*通过sql会话工厂构建器 SqlSessionFactoryBuilder 去构建一个sql会话工厂的对象*/
SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
//从 SqlSessionFactory 中获取 SqlSession {操作mapper中的这些sql的方法}
SqlSession sqlSession = sqlSessionFactory.openSession();
return sqlSession;
}
}
9.其他配置文件
9.1mybatis.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
<!--类的别名-->
<typeAliases>
<typeAlias alias="customer" type="pojo.Customer"/>
</typeAliases>
<!--
environments：配置数据库连接环境信息。可以配置多个environment，通过default属性切换不同的environment
-->
<environments default="development">
<environment id="development">
<transactionManager type="JDBC"/>
<dataSource type="POOLED">
<!--数据库连接信息-->
<property name="driver" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql:///shop?useSSL=false&userUnicode=true&characterEncoding=utf-8&serverTimezone=UTC"/>
<property name="username" value="root"/>
<property name="password" value="123"/>
</dataSource>
</environment>
</environments>
<!--此处填写你需要引入的mapper的包的位置-->
<mappers>
<package name="mapper"/>
</mappers>
</configuration>
9.2 logback
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<!--
CONSOLE ：表示当前的日志信息是可以输出到控制台的。
-->
<appender name="Console" class="ch.qos.logback.core.ConsoleAppender">
<encoder>
<pattern>[%level] %blue(%d{HH:mm:ss.SSS}) %cyan([%thread]) %boldGreen(%logger{15}) - %msg %n</pattern>
</encoder>
</appender>
<logger name="siron" level="DEBUG" additivity="false">
<appender-ref ref="Console"/>
</logger>
<!--
level:用来设置打印级别，大小写无关：TRACE, DEBUG, INFO, WARN, ERROR, ALL 和 OFF
， 默认debug
<root>可以包含零个或多个<appender-ref>元素，标识这个输出位置将会被本日志级别控制。
-->
<root level="DEBUG">
<appender-ref ref="Console"/>
</root>
</configuration>
扫一扫
3243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
