说明：

最近在做一个后台，希望用一个现成的前端模板，找了一圈发现Layui比较合适。我知道很多人都有这个需求，为了使大家快速上手，我把自己写的最实用的增删改查案例完整的展示出来。

源码地址：

https://gitee.com/indexman/boot-layui-curd

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://gitee.com/indexman/boot-layui-curd

spring boot+layui实现增删改查实战的更多相关文章

  1. Spring Boot(十五)：spring boot+jpa+thymeleaf增删改查示例

    Spring Boot(十五):spring boot+jpa+thymeleaf增删改查示例 一.快速上手 1,配置文件 (1)pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 ...

  2. （转）Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例

    http://www.ityouknow.com/springboot/2017/09/23/spring-boot-jpa-thymeleaf-curd.html 这篇文章介绍如何使用 Jpa 和 ...

  3. Spring Boot + Jpa + Thymeleaf 增删改查示例

    快速上手 配置文件 pom 包配置 pom 包里面添加 Jpa 和 Thymeleaf 的相关包引用 <dependency> <groupId>org.springframe ...

  4. spring boot(十五)spring boot+thymeleaf+jpa增删改查示例

    快速上手 配置文件 pom包配置 pom包里面添加jpa和thymeleaf的相关包引用 <dependency> <groupId>org.springframework.b ...

  5. Spring Boot (十五)： Spring Boot + Jpa + Thymeleaf 增删改查示例

    这篇文章介绍如何使用 Jpa 和 Thymeleaf 做一个增删改查的示例. 先和大家聊聊我为什么喜欢写这种脚手架的项目,在我学习一门新技术的时候,总是想快速的搭建起一个 Demo 来试试它的效果,越 ...

  6. spring boot+mybatis+mysql增删改查分页

    server: port: servlet: context-path: /springBootMybatis spring: datasource: name: test url: jdbc:mys ...

  7. spring boot2+jpa+thymeleaf增删改查例子

    参考这遍文章做了一个例子,稍微不同之处,原文是spring boot.mysql,这里改成了spring boot 2.Oracle. 一.pom.xml引入相关模块web.jpa.thymeleaf ...

  8. SSM+layui实现增删改查

    前端使用layui框架,后端使用Spring+SpringMVC+Mybatis的集合框架,数据库使用MySQL,完成对一张用户表的增删改查操作. 前后端分离开发,即前端的HTML页面通过ajax技术 ...

  9. EasyUI + Spring MVC + hibernate实现增删改查导入导出

    (这是一个故事--) 前言 作为一个JAVA开发工程师,我觉得最基本是需要懂前端.后台以及数据库. 练习的内容很基础,包括:基本增删改查.模糊查询.分页查询.树菜单.上传下载.tab页 主管发我一个已 ...

  10. ztree使用系列三（ztree与springmvc+spring+mybatis整合实现增删改查）

    在springmvc+spring+mybatis里整合ztree实现增删改查,上一篇已经写了demo,以下就仅仅贴出各层实现功能的代码: Jsp页面实现功能的js代码例如以下: <script ...

随机推荐

  1. [转帖]Linux进程的Uninterruptible sleep（D）状态

    https://cloud.tencent.com/developer/article/1581022 Linux系统进程状态 PROCESS STATE CODES Here are the dif ...

  2. [转帖]Kafka中offsets.retention.minutes和log.retention.minutes之间的区别

    https://www.cnblogs.com/lestatzhang/p/10771115.html 前言 在Kafka中,我们可能会发现两个与retention相关的配置: log.retenti ...

  3. [转帖]Ceph简单搭建

    https://cloud.tencent.com/developer/article/1643322 Ceph基础介绍 ​ Ceph是一个可靠地.自动重均衡.自动恢复的分布式存储系统,根据场景划分可 ...

  4. [转帖]探索惊群 ⑥ - nginx - reuseport

    https://wenfh2020.com/2021/10/12/thundering-herd-tcp-reuseport/   SO_REUSEPORT (reuseport) 是网络的一个选项设 ...

  5. [转帖]kafka漏洞升级记录，基于SASL JAAS 配置和 SASL 协议，涉及版本3.4以下

    攻击者可以使用基于 SASL JAAS 配置和 SASL 协议的任意 Kafka 客户端,在对 Kafka Connect worker 创建或修改连接器时,通过构造特殊的配置,进行 JNDI 注入. ...

  6. [转帖]Prometheus监控系统存储容量优化攻略，让你的数据安心保存！

    云原生监控领域不可撼动,Prometheus 是不是就没缺点?显然不是. 一个软件如果什么问题都想解决,就会导致什么问题都解决不好.所以Prometheus 也存在不足,广受诟病的问题就是 单机存储不 ...

  7. [转帖]Steam内存测试工具【转】

      转自:https://www.cnblogs.com/iouwenbo/p/14377478.html Stream测试是内存测试中业界公认的内存带宽性能测试基准工具. Stream安装 官方源码 ...

  8. [转帖]strace 命令详解

    目录 1.strace是什么? 2.strace能做什么? 3.strace怎么用? 4.strace问题定位案例 4.1.定位进程异常退出 4.2.定位共享内存异常 4.3. 性能分析 5.总结 1 ...

  9. [转帖]Arm vs X86 (unfinished)

    http://home.ustc.edu.cn/~shaojiemike/posts/arm/   ARM Ltd history 诞生 1981年,被Intel拒绝的Acorn(橡子) Comput ...

  10. libuv计时器

    目录 1.uv_timer_t - 计时器句柄 2.API 2.1.uv_timer_init 2.2.uv_timer_start 2.3.uv_timer_stop 2.4.uv_timer_ag ...