SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战

SpringBoot+MyBatisPlus+Thymeleaf+AdminLTE增删改查实战说明AdminLTE是网络上比较流行的一款Bootstrap模板,包含丰富的样式、组件和插件,非常适用于后端开发人员做后台管理系统。因为最近又做了个后台管理系统,这次就选的是AdminLTE做主题模板发现效果不错,这里我把最核心的SpringBoot如何集成AdminLTE实现增删改查的源码提供出来,需要的朋友可以参考而少走弯路。实现效果技术选型前端:Thymeleaf+Bootstrap+AdminLTE+插件后端:SpringBoot2.0+Mybatis-Plus数据库:

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

说明

AdminLTE是网络上比较流行的一款Bootstrap模板,包含丰富的样式、组件和插件,非常适用于后端开发人员做后台管理系统。
因为最近又做了个后台管理系统,这次就选的是AdminLTE做主题模板发现效果不错,这里我把最核心的SpringBoot如何集成AdminLTE实现增删改查的源码提供出来,需要的朋友可以参考而少走弯路。

项目源码

需要源码的朋友给我来个一键三连,留个邮箱后发送!

实现效果

在这里插入图片描述
在这里插入图片描述

技术选型

  • 前端:Thymeleaf+Bootstrap+AdminLTE+插件
  • 后端:Spring Boot2.0 + Mybatis-Plus
  • 数据库:MySQL5.7

核心代码

只讲重点,详细看源码。

页面

dataTables的实战用法如下:

myTable = $('#dataTable').DataTable(
            { 
   
                language: lang,  //提示信息
                "iDisplayLength": 10,//默认每页数量
                //"bPaginate": true, //翻页功能
                "bLengthChange": false, //改变每页显示数据数量
                "bFilter" : false, //过滤功能
                "ordering": false,
                "bSort": false, //排序功能
                //"bInfo" : true,//页脚信息
                //"bAutoWidth" : true,//自动宽度
                "stateSave": true,
                "retrieve": true,
                "processing": true,
                "serverSide": true,
                //"bPaginate" : true,
                "bProcessing": true,//服务器端进行分页处理的意思
                ajax: function (data, callback, settings) { 
   //ajax配置为function,手动调用异步查询
                    // 构造请求参数
                    var param = { 
   };
                    param.draw = data.draw;
                    param.pageSize = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
                    param.start = data.start;//开始的记录序号
                    param.pageNo = (data.start / data.length) + 1;//当前页码
                    //param.order = data.order[0];
                    param.username = $("#s_username").val();
                    $.ajax({ 
   
                        type: "POST",
                        url: ctx + "/user/list",
                        cache: false, //禁用缓存
                        data: param, //传入已封装的参数
                        dataType: "json",
                        success: function (res) { 
   
                            // console.log(res)
                            //setTimeout仅为测试遮罩效果
                            setTimeout(
                                function () { 
   
                                    //封装返回数据,这里仅演示了修改属性名
                                    var returnData = { 
   };
                                    returnData.draw = res.data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                                    returnData.recordsTotal = res.data.total;
                                    returnData.recordsFiltered = res.data.total;//后台不实现过滤功能,每次查询均视作全部结果
                                    returnData.data = res.data.records;
                                    //关闭遮罩
                                    //$wrapper.spinModal(false);
                                    //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                                    //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                                    callback(returnData);
                                },
                                200);
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) { 
   
                            alert("查询失败");
                        }
                    });
                },
                "aoColumns": [
                    { 
   
                        sTitle: '序号',
                        data: null,
                        className: 'text-center whiteSpace',
                        render:function(data,type,row,meta) { 
   
                            return meta.row + 1 +
                                meta.settings._iDisplayStart;
                        }
                    },
                    { 
   "data": "username"},
                    { 
   "data": "email"},
                    { 
   "data": "truename"},
                    { 
   "data": "createTime",
                        render: function (data, type, row, meta) { 
   
                            if (data){ 
      // data不为空进行转换
                                return (new Date(data)).Format("yyyy-MM-dd hh:mm:ss");
                            } else { 
   
                                return data = ''; //data为空时不转换
                            }
                        }
                    }
                ],

                "columnDefs": [{ 
   
                    // 定义操作列,######以下是重点########
                    "targets": 5,//操作按钮目标列
                    "data": null,
                    "render": function (data, type, row) { 
   
                        var id = '"' + row.id
                            + '"';
                        //<a href='javascript:void(0);' class='delete btn btn-default btn-xs' ><i class='fa fa-times'></i> 查看</a>
                        var html = "<button class='btn btn-sm btn-warning' οnclick='edit("
                            + id
                            + ")'><i class='icon-pencil'></i> 编辑</button>"
                        html += "<button class='btn btn-sm btn-danger' οnclick='remove("
                            + id
                            + ")'><i class='icon-remove'></i> 删除</button>"
                        return html;
                    }
                }],
                "fnDrawCallback": function(){ 
   
                    var api = this.api();
                    //var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数
                    api.column(0).nodes().each(function(cell, i) { 
   
                        //此处 startIndex + i + 1;会出现翻页序号不连续,主要是因为startIndex 的原因,去掉即可。
                        //cell.innerHTML = startIndex + i + 1;
                        cell.innerHTML =  i + 1;
                    });
                }
    });

控制器

@RequestMapping("/user")
@Controller
public class UserController { 
   
    @Autowired
    private UserService userService;

    @RequestMapping
    public String user(){ 
   
        return "user";
    }

    @GetMapping("/{id}")
    @ResponseBody
    public Result<User> get(@PathVariable Integer id){ 
   
        User user =  userService.getById(id);

        return ResultUtil.ok(user);
    }

    /** * 分页查询 * @param username * @param pageNo * @param pageSize * @return */
    @PostMapping("/list")
    @ResponseBody
    public Result<IPage<User>> list(@RequestParam(value = "username", required = false) String username,
                             @RequestParam(defaultValue = "1") Integer pageNo,
                             @RequestParam(defaultValue = "10") Integer pageSize){ 
   
        // 构造查询条件
        QueryWrapper<User> queryWrapper = new QueryWrapper<>();
        if(!StringUtils.isEmpty(username)){ 
   
            queryWrapper.like("username",username);
            queryWrapper.orderByDesc("create_time");
        }
        Page<User> page = new Page<>(pageNo,pageSize);

        IPage<User> result = userService.page(page, queryWrapper);
        // 设置总记录数
        result.setTotal(userService.count(queryWrapper));

        return ResultUtil.ok(result);
    }

    @PostMapping("/add")
    @ResponseBody
    public Result<String> add(@RequestBody User user){ 
   
        userService.save(user);

        return ResultUtil.ok("添加成功!");
    }

    @PostMapping("/modify")
    @ResponseBody
    public Result<String> modify(@RequestBody User user){ 
   
        userService.saveOrUpdate(user);

        return ResultUtil.ok("修改成功!");
    }

    @PostMapping("/remove")
    @ResponseBody
    public Result<String> remove(@RequestParam Integer id){ 
   
        userService.removeById(id);

        return ResultUtil.ok("删除成功!");
    }
}

需要源码的朋友给我来个一键三连,留个邮箱后发送!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/164542.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • kong网关架构_kong网关性能

    kong网关架构_kong网关性能Kong是一个使用了lua-nginx-module运行在Nginx之上的Lua应用。Kong是一个成熟的API网关解决方案。API网关,即APIGateway,是大型分布式系统中,为了保护内部服务而设计的一道屏障,可以提供高性能、高可用的API托管服务,从而帮助服务的开发者便捷地对外提供服务,而不用考虑安全控制、流量控制、审计日志等问题,统一在网关层将安全认证,流量控制,审计日志,黑白名单…

  • 冒泡排序法c语言代码_用冒泡法对数组a进行排序

    冒泡排序法c语言代码_用冒泡法对数组a进行排序选择法排序选择法排序是指:如果要把一个数组从小到大排列,那么就从该数组中依次选择最小的数字来排序。从第一个数字开始,将第一个数字与数组中剩下数字中最小的那一个交换位置,然后将第二个数字与剩下数字中最小的那个交换位置,以此类推,直到最后一个数字。例如输入数组{7,5,4,8,6,2,3}第一次排序通过查找最小的数字,交换7与2的位置;第二次查找5后面最小的数字,找到了3,交换5与3的位置;第三次查找4之后最小的数字,发现并没有数字比4小,交换4与4的位置(相当于没有改变);第四次查找8后面最小的数字5,

  • 联想开天 N7 评测

    联想开天 N7 评测开天N7系列笔记本电脑基于兆芯开先KX-6640MA处理器平台,搭配16GB双通道内存和512GBNVMe高速SSD,辅以国产BIOS、OS定制调优;1.29kg超轻单机重量,14.6mm极致纤薄全金属机身;14英寸2.2k16:10显示屏,91%屏占比;支持单手极限180度开盖;率先在国产笔记本引入WiFi6和蓝牙5.0;搭配联想专用芯片的创新智能控制方案,具备光感自动化、开盖即开机、快速充电、充电宝模式等多重独有功能;双风扇双热管散热系统,搭配61Wh

  • swal弹窗,sweetalert2具有相同功能的多个swal[通俗易懂]

    swal弹窗,sweetalert2具有相同功能的多个swal[通俗易懂]I’dliketomakeaconditionandcallaswalforeachone(Sweetalert2).Butonlyoneoftheswalruns.HowcanIdoit?functionvalidateEmail(email){varregex=/\S+@\S+\.\S+/;returnregex.test(emai…

  • 反转每对括号间的子串java_已知入栈序列求出栈序列

    反转每对括号间的子串java_已知入栈序列求出栈序列给出一个字符串 s(仅含有小写英文字母和括号)。请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果。注意,您的结果中 不应 包含任何括号。示例 1:输入:s = “(abcd)”输出:“dcba”示例 2:输入:s = “(u(love)i)”输出:“iloveu”示例 3:输入:s = “(ed(et(oc))el)”输出:“leetcode”示例 4:输入:s = “a(bcdefghijkl(mno)p)q”输出:“apmnolkjihgfedcb

  • 笛卡尔积的解释和作用[通俗易懂]

    笛卡尔积的解释和作用[通俗易懂]一:笛卡尔积的解释例给出二个域:假设集合A={a,b},集合B={0,1,2},则两个集合的笛卡尔积为{(a,0),(a,1),(a,2),(b,0),(b,1),(b,2)}。。类似的例子有,如果A表示某学校学生的集合,B表示该学校所有课程的集合,则A与B的笛卡尔积表示所有可能的选课情况。[编辑本段]笛卡尔积的运算性质  由于有序对&lt;x,y&gt;中x,y的位置是确定的,因此A×B…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号