说明：
最近在做一个后台，希望用一个现成的前端模板，找了一圈发现Layui比较合适。我知道很多人都有这个需求，为了使大家快速上手，我把自己写的最实用的增删改查案例完整的展示出来。
需要源码的请留下邮箱！
Layui官网：https://www.layui.com/doc/
后台：spring boot2.0，数据的话用的list没连接数据库。
前端：layui-v2.5.5
启动后访问: http://localhost:8080/admin.html
页面展示：
操作展示：
开发步骤：
1.搭建spring boot工程，引入layui资源
这一步很简单， 我就省了。
2.编写前端页面admin.html
这一步可以拿网上的直接改的。改过之后如下：
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
<title>layout 后台大布局 - Layui
</title>
-
<link rel="stylesheet" href="js/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">layui 后台布局
</div>
-
<!-- 头部区域（可配合layui已有的水平导航） -->
-
<ul class="layui-nav layui-layout-left">
-
<li class="layui-nav-item">
-
<a href="">控制台
</a>
-
</li>
-
<li class="layui-nav-item">
-
<a href="">商品管理
</a>
-
</li>
-
<li class="layui-nav-item">
-
<a href="">用户
</a>
-
</li>
-
<li class="layui-nav-item">
-
<a href="javascript:;">其它系统
</a>
-
<dl class="layui-nav-child">
-
<dd>
-
<a href="">邮件管理
</a>
-
</dd>
-
<dd>
-
<a href="">消息管理
</a>
-
</dd>
-
<dd>
-
<a href="">授权管理
</a>
-
</dd>
-
</dl>
-
</li>
-
</ul>
-
<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"> 贤心
-
</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="javascript:;">列表一
</a>
-
</dd>
-
<dd>
-
<a href="javascript:;">列表二
</a>
-
</dd>
-
<dd>
-
<a href="javascript:;">列表三
</a>
-
</dd>
-
<dd>
-
<a href="http://www.baidu.com">超链接
</a>
-
</dd>
-
</dl>
-
</li>
-
<li class="layui-nav-item">
-
<a href="javascript:;">解决方案
</a>
-
<dl class="layui-nav-child">
-
<dd>
-
<a href="javascript:;">列表一
</a>
-
</dd>
-
<dd>
-
<a href="javascript:;">列表二
</a>
-
</dd>
-
<dd>
-
<a href="">超链接
</a>
-
</dd>
-
</dl>
-
</li>
-
<li class="layui-nav-item">
-
<a href="">云市场
</a>
-
</li>
-
<li class="layui-nav-item">
-
<a href="">发布商品
</a>
-
</li>
-
</ul>
-
</div>
-
</div>
-
-
<div class="layui-body">
-
<!-- 内容主体区域 -->
-
<div style="padding: 15px;">
-
<!--<div class="demoTable" style="padding: 15px">
-
搜索：
-
<div class="layui-inline">
-
<input class="layui-input" id="find" autocomplete="off">
-
</div>
-
<button class="layui-btn" data-type="reload" id="queryRole">搜索</button>
-
</div>-->
-
-
<table id="tb-user" lay-filter="tb-user">
</table>
-
-
</div>
-
</div>
-
-
<!--编辑表单-->
-
<div class="layui-row" id="editUser" style="display:none;">
-
<div class="layui-col-md10">
-
<form class="layui-form layui-from-pane" id="saveUser" style="margin-top:20px">
-
-
<div class="layui-form-item">
-
<label class="layui-form-label">用户名
</label>
-
<div class="layui-input-block">
-
<input type="text" name="name" id="name" required lay-verify="required" autocomplete="off"
-
class=
"layui-input">
-
</div>
-
</div>
-
-
<input type="hidden" name="id" id="id">
-
-
<div class="layui-form-item">
-
<label class="layui-form-label">城市
</label>
-
<div class="layui-input-block">
-
<input type="text" name="city" id="city" required lay-verify="required" 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="text" name="birthday" id="birthday" required lay-verify="required" autocomplete="off"
-
class=
"layui-input">
-
</div>
-
</div>
-
-
<div class="layui-form-item" style="margin-top:40px" id="check">
-
<div class="layui-input-block">
-
<button class="layui-btn layui-btn-submit " lay-submit="" lay-filter="saveUser">保存
</button>
-
<!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
-
</div>
-
</div>
-
</form>
-
</div>
-
</div>
-
-
<script type="text/html" id="toolbarDemo">
-
<div class="layui-btn-container">
-
<button class="layui-btn layui-btn-sm" lay-event="add">
<i class="layui-icon">
</i>新增
</button>
-
<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">
<i class="layui-icon">
</i>删除
</button>
-
</div>
-
<!--<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-sm" lay-event="edit">
<i class="layui-icon">
</i>
</a>
-
</script>
-
-
<div class="layui-footer">
-
<!-- 底部固定区域 -->
-
© layui.com - 底部固定区域
-
</div>
-
</div>
-
<script src="js/jquery-1.11.3.min.js">
</script>
-
<script src="js/layui/layui.all.js">
</script>
-
<script>
-
var element, layer, laydate, table, form;
-
-
$(
function () {
-
// 使用模块
-
layui.use([
'element',
'layer',
'laydate',
'table',
'form'],
function () {
-
element = layui.element;
-
layer = layui.layer;
-
laydate = layui.laydate;
-
table = layui.table;
-
form = layui.form;
-
});
-
-
laydate.render({
-
elem:
"#birthday",
-
type:
"date",
-
format:
"yyyy-MM-dd",
-
value:
''
-
});
-
-
//第一个实例
-
var userTable = table.render({
-
elem:
'#tb-user'
-
,
height:
515
-
,
url:
'/api/layui/user/list'
//数据接口
-
,
page:
true
//开启分页
-
,
toolbar:
'#toolbarDemo'
-
/*, response: {
-
statusName: 'code', //规定返回的状态码字段为code
-
statusCode: 200 //规定成功的状态码味200
-
}*/
-
/* , parseData: function (res) {
-
return {
-
"code": res.code, //解析接口状态
-
"msg": res.msg, //解析提示文本
-
"data": res.data //解析数据列表
-
}
-
}*/
-
,
cols: [[
//表头
-
{
type:
'checkbox',
fixed:
'left'}
-
, {
field:
'id',
title:
'ID',
width:
80,
sort:
true,
fixed:
'left'}
-
, {
field:
'name',
title:
'用户名'}
-
, {
field:
'city',
title:
'城市'}
-
, {
-
field:
'birthday',
title:
'出生日期',
templet:
function (d) {
-
var date =
new
Date(d.birthday)
-
var year = date.getFullYear() +
'年';
-
var month = date.getMonth() +
1 +
'月';
-
var date = date.getDate() +
'日';
-
var date1 = [year, month, date].join(
'')
-
return date1;
-
}
-
}
-
, {
fixed:
'right',
title:
'操作',
toolbar:
'#barDemo',
width:
120}
-
]]
-
});
-
-
//监听表单提交
-
// 修改
-
form.on(
'submit(saveUser)',
function(data){
-
layer.alert(
JSON.stringify(data.field));
-
$.ajax({
-
url:
'/api/layui/user/save',
-
type:
'POST',
-
contentType:
"application/json",
-
dataType:
"json",
-
data:
JSON.stringify(data.field),
-
success:
function (result) {
-
if (result.code ==
200) {
-
// layer.msg("修改成功！", {icon: 6});
-
setTimeout(
function () {
-
layer.closeAll();
//关闭所有的弹出层
-
userTable.reload();
-
},
300);
-
}
else {
-
layer.msg(
"操作失败！", {
icon:
5});
-
}
-
}
-
});
-
-
return
false;
-
-
});
-
-
//工具栏事件
-
table.on(
'toolbar(tb-user)',
function (obj) {
-
var checkStatus = table.checkStatus(obj.config.id);
-
var checkData = checkStatus.data;
-
var ids=[];
-
switch (obj.event) {
-
// 新增
-
case
'add':
-
$(
"#name").val(
'');
-
$(
"#city").val(
'');
-
$(
"#id").val(
'');
-
$(
"#birthday").val(
'');
-
-
layer.open({
-
type:
1,
-
offset:
'10px',
-
title:
"新增用户",
-
area: [
'500px',
'400px'],
-
content: $(
"#editUser")
-
});
-
-
-
break;
-
// 删除
-
case
'remove':
-
if(checkData.length==
0){
-
layer.alert(
'请选择要操作的行');
-
}
else{
-
layer.confirm(
'确定要删除吗？',
function (index) {
-
for(
var i=
0; i<checkData.length;i++){
-
ids.push(checkData[i].id);
-
}
-
//layer.alert(JSON.stringify(ids));
-
$.ajax({
-
url:
'/api/layui/user/remove',
-
type:
'POST',
-
contentType:
"application/json",
-
dataType:
"json",
-
data:
JSON.stringify(ids),
-
success:
function (result) {
-
if (result.code ==
200) {
-
setTimeout(
function () {
-
layer.closeAll();
//关闭所有的弹出层
-
userTable.reload();
-
},
300);
-
}
-
}
-
});
-
});
-
}
-
break;
-
case
'getCheckData':
-
-
layer.alert(
JSON.stringify(data));
-
break;
-
case
'getCheckLength':
-
var data = checkStatus.data;
-
layer.msg(
'选中了：' + data.length +
' 个');
-
break;
-
case
'isAll':
-
layer.msg(checkStatus.isAll ?
'全选' :
'未全选')
-
break;
-
}
-
;
-
});
-
-
// 监听工具条
-
table.on(
'tool(tb-user)',
function (obj) {
-
var data = obj.data;
-
// 修改
-
if (obj.event ===
'edit') {
-
$(
"#name").val(data.name);
-
$(
"#city").val(data.city);
-
$(
"#id").val(data.id);
-
$(
"#birthday").val(data.birthday);
-
-
layer.open({
-
type:
1,
-
offset:
'10px',
-
title:
"修改用户",
-
area: [
'500px',
'400px'],
-
content: $(
"#editUser")
-
});
-
}
-
});
-
});
-
-
</script>
-
</body>
-
-
</html>
3.编写后端代码
3.1 创建用户实体
-
package com.laoxu.test.helloweb.entity;
-
-
import com.fasterxml.jackson.annotation.JsonFormat;
-
import lombok.Data;
-
-
import java.util.Date;
-
-
/**
-
* @Description: 用户实体
-
* @Author laoxu
-
* @Date 2019/12/21 9:56
-
**/
-
@Data
-
public
class LayuiUser {
-
private
int id;
-
private String name;
-
private String city;
-
@JsonFormat(shape = JsonFormat.Shape.STRING, pattern=
"yyyy-MM-dd")
-
private Date birthday;
-
-
public LayuiUser(){}
-
-
public LayuiUser(int id, String name, String city, Date birthday) {
-
this.id = id;
-
this.name = name;
-
this.city = city;
-
this.birthday = birthday;
-
}
-
}
3.2 创建用户DAO
-
package com.laoxu.test.helloweb.dao;
-
-
import com.laoxu.test.helloweb.entity.LayuiUser;
-
import org.springframework.stereotype.Repository;
-
-
import java.util.ArrayList;
-
import java.util.Date;
-
import java.util.List;
-
import java.util.UUID;
-
-
/**
-
* @Description: 操作用户数据
-
* @Author laoxu
-
* @Date 2019/12/21 10:07
-
**/
-
@Repository
-
public
class LayuiUserDao {
-
private
static List<LayuiUser> users =
new ArrayList<>();
-
-
static {
-
-
for (
int i =
1; i <=
100; i +=
3) {
-
users.add(
new LayuiUser(i,
"张三" + i,
"上海",
new Date()));
-
users.add(
new LayuiUser(i +
1,
"李四" + i,
"北京",
new Date()));
-
users.add(
new LayuiUser(i +
2,
"王二麻" + i,
"广州",
new Date()));
-
}
-
}
-
-
//http://www.layui.com/demo/table/user/?page=1&limit=10
-
-
/**
-
* 获得所有用户
-
*/
-
public List<LayuiUser> getPager(int page, int limit) {
-
List<LayuiUser> list =
new ArrayList<>();
-
int start = (page -
1) * limit;
-
for (
int i = start; i < start + limit && i < users.size(); i++) {
-
list.add(users.get(i));
-
}
-
return list;
-
}
-
-
/**
-
* 获得所有用户
-
*/
-
public List<LayuiUser> getAllUsers() {
-
return users;
-
}
-
-
/**
-
* 添加用户
-
*/
-
public void addUser(LayuiUser user) {
-
if (user.getId() <=
0) {
// 未设置id
-
int index = users.size() -
1;
// 获得最后一个用户的索引号
-
if (index <
0) {
// 如没有一个用户
-
user.setId(
1);
// 编号为1
-
}
else {
-
user.setId(users.get(index).getId() +
1);
// 获得最后一个用户的编号+1
-
}
-
}
-
users.add(user);
-
}
-
-
/**
-
* 删除用户
-
*/
-
public void delUser(int id) {
-
LayuiUser delUser =
null;
-
for (LayuiUser user : users) {
-
if (user.getId() == id) {
-
delUser = user;
-
break;
-
}
-
}
-
users.remove(delUser);
-
}
-
-
/**
-
* 删除用户（多选）
-
*/
-
public void delUsers(int[] ids) {
-
LayuiUser delUser =
null;
-
for (
int i =
0; i < ids.length; i++) {
-
for (
int j =
0; j < users.size(); j++) {
-
if (users.get(j).getId() == ids[i]) {
-
users.remove(j);
-
}
-
}
-
}
-
}
-
-
public void updateUser(LayuiUser obj) {
-
LayuiUser editUser =
null;
-
for (LayuiUser user : users) {
-
if (user.getId() == obj.getId()) {
-
editUser = user;
-
break;
-
}
-
}
-
editUser.setName(obj.getName());
-
editUser.setCity(obj.getCity());
-
editUser.setBirthday(obj.getBirthday());
-
}
-
}
3.3 创建用户Service
-
package com.laoxu.test.helloweb.service;
-
-
import com.laoxu.test.helloweb.dao.LayuiUserDao;
-
import com.laoxu.test.helloweb.entity.LayuiUser;
-
import org.springframework.beans.factory.annotation.Autowired;
-
import org.springframework.stereotype.Service;
-
-
import java.util.List;
-
-
/**
-
* @Description: 用户service
-
* @Author laoxu
-
* @Date 2019/12/21 10:42
-
**/
-
@Service
-
public
class LayuiUserService {
-
@Autowired
-
LayuiUserDao userDao;
-
-
public List<LayuiUser> getPager(int page, int limit){
-
return userDao.getPager(page,limit);
-
}
-
-
public List<LayuiUser> getAllUsers() {
-
return userDao.getAllUsers();
-
}
-
-
public void addUser(LayuiUser user) {
-
userDao.addUser(user);
-
}
-
-
public void delUser(int id) {
-
userDao.delUser(id);
-
}
-
-
public void delUsers(int[] ids) {
-
userDao.delUsers(ids);
-
}
-
-
public void updateUser(LayuiUser user) {
-
userDao.updateUser(user);
-
}
-
-
}
3.4 创建用户Controller
-
package com.laoxu.test.helloweb.controller;
-
-
import com.laoxu.test.helloweb.dao.LayuiUserDao;
-
import com.laoxu.test.helloweb.entity.LayuiUser;
-
import com.laoxu.test.helloweb.entity.ResultBean;
-
import com.laoxu.test.helloweb.service.LayuiUserService;
-
import org.springframework.beans.factory.annotation.Autowired;
-
import org.springframework.web.bind.annotation.*;
-
-
import java.util.List;
-
-
/**
-
* @Description: 用户controller
-
* @Author laoxu
-
* @Date 2019/12/21 10:11
-
**/
-
@RestController
-
@RequestMapping(
"/api/layui/user")
-
public
class LayuiUserController {
-
@Autowired
-
LayuiUserService userService;
-
-
@GetMapping(
"/list")
-
public ResultBean list(@RequestParam(defaultValue = "1") Integer page,
-
@RequestParam(defaultValue = "10") Integer limit){
-
List<LayuiUser> users = userService.getPager(page,limit);
-
int count = userService.getAllUsers().size();
-
-
ResultBean result =
new ResultBean(
0,
"查询成功",count,users);
-
-
return result;
-
}
-
-
@PostMapping(
"/save")
-
public ResultBean save(@RequestBody LayuiUser user){
-
// 判断是新增还是修改
-
if(user.getId()==
0){
-
userService.addUser(user);
-
}
else{
-
userService.updateUser(user);
-
}
-
-
return
new ResultBean(
200,
"保存成功",
0,
"");
-
}
-
-
@PostMapping(
"/remove")
-
public ResultBean modify(@RequestBody int[] ids){
-
userService.delUsers(ids);
-
return
new ResultBean(
200,
"删除成功",
0,
"");
-
}
-
}
需要源码的请留下邮箱！
转载：https://blog.csdn.net/IndexMan/article/details/103676174
查看评论