devbox
小蓝xlanll
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Springboot+MyBatis-Plus整合Layui实现分页_使用springboot+mybatis-plus+jsp+layui实现单表的crud操作

作者：小蓝xlanll | 2024-02-27 20:07:14

赞

踩

使用springboot+mybatis-plus+jsp+layui实现单表的crud操作

MyBatis-Plus 使用简单，内置通用 Mapper、通用 Service，仅仅通过少量配置，即可实现单表大部分 CRUD 操作。下面介绍使用 service 中的 page 方法结合 Layui 前端框架，较快速的实现分页效果。

1.导入MyBatis-Plus依赖

  1. <!--mybatis-plus的springboot支持-->
  2.         <dependency>
  3.             <groupId>com.baomidou</groupId>
  4.             <artifactId>mybatis-plus-boot-starter</artifactId>
  5.             <version>3.1.1</version>
  6.         </dependency>

2.编写接口--UserMapper

  1. package com.jk.mapper;
  2.  
  3. import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  4. import com.jk.entity.Userinfo;
  5.  
  6. public interface UserMapper extends BaseMapper<Userinfo> {
  7. }

3.编写 service 接口--UserService ，并继承 IService。

  1. package com.jk.service;
  2.  
  3. import com.baomidou.mybatisplus.extension.service.IService;
  4. import com.jk.entity.Userinfo;
  5.  
  6. public interface UserService extends IService<Userinfo> {
  7. }

4.编写 service 实现类--UserServiceImpl，继承 MyBatis-Plus 的 ServiceImpl ，同时实现 UserService 接口。

  1. package com.jk.service.impl;
  2.  
  3. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  4. import com.jk.entity.Userinfo;
  5. import com.jk.mapper.UserMapper;
  6. import com.jk.service.UserService;
  7. import org.springframework.stereotype.Service;
  8.  
  9. @Service
  10. public class UserServiceImpl extends ServiceImpl<UserMapper, Userinfo> implements UserService {
  11.  
  12. }

5.编写MyBatis-plus 分页配置类--MybatisPlusConfig

  1. package com.jk.conf;
  2.  
  3. import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
  4. import org.mybatis.spring.annotation.MapperScan;
  5. import org.springframework.context.annotation.Bean;
  6. import org.springframework.context.annotation.Configuration;
  7.  
  8. @Configuration
  9. @MapperScan("com.jk.mapper")
  10. public class MybatisPlusConfig {
  11.     /**
  12.      * 分页插件
  13.      */
  14.     @Bean
  15.     public PaginationInterceptor paginationInterceptor() {
  16.         return new PaginationInterceptor();
  17.     }
  18. }

6.编写json格式返回工具类--ResultUtil

  1. package com.jk.utils;
  2.  
  3. import java.io.Serializable;
  4.  
  5. /**
  6.  * json格式返回工具类
  7.  */
  8. public class ResultUtil implements Serializable {
  9.     private Integer code;  //返回状态码  0代表成功
  10.     private String msg = "";  //返回提示信息
  11.     private Long count = 0L;
  12.     private Object data;   //返回数据
  13.  
  14.     public ResultUtil() {
  15.         super();
  16.     }
  17.  
  18.     public ResultUtil(Integer code) {
  19.         super();
  20.         this.code = code;
  21.     }
  22.  
  23.     public ResultUtil(Integer code, Long count, Object data) {
  24.         this.code = code;
  25.         this.count = count;
  26.         this.data = data;
  27.     }
  28.  
  29.     public ResultUtil(Integer code, String msg) {
  30.         super();
  31.         this.code = code;
  32.         this.msg = msg;
  33.     }
  34.  
  35.     public Integer getCode() {
  36.         return code;
  37.     }
  38.  
  39.     public void setCode(Integer code) {
  40.         this.code = code;
  41.     }
  42.  
  43.     public String getMsg() {
  44.         return msg;
  45.     }
  46.  
  47.     public void setMsg(String msg) {
  48.         this.msg = msg;
  49.     }
  50.  
  51.  
  52.     public Long getCount() {
  53.         return count;
  54.     }
  55.  
  56.     public void setCount(Long count) {
  57.         this.count = count;
  58.     }
  59.  
  60.     public Object getData() {
  61.         return data;
  62.     }
  63.  
  64.     public void setData(Object data) {
  65.         this.data = data;
  66.     }
  67.  
  68.     public static ResultUtil ok() {
  69.         return new ResultUtil(0);
  70.     }
  71.  
  72.     public static ResultUtil ok(Object list) {
  73.         ResultUtil result = new ResultUtil();
  74.         result.setCode(0);
  75.         result.setData(list);
  76.         ;
  77.         return result;
  78.     }
  79.  
  80.     public static ResultUtil ok(String msg) {
  81.         ResultUtil result = new ResultUtil();
  82.         result.setCode(0);
  83.         result.setMsg(msg);
  84.         return result;
  85.     }
  86.  
  87.  
  88.  
  89.     public static ResultUtil error() {
  90.         return new ResultUtil(500, "没有此权限，请联系超管！");
  91.     }
  92.  
  93.     public static ResultUtil error(String str) {
  94.         return new ResultUtil(500, str);
  95.     }
  96. }

7.编写controller 类--UserController

  1. package com.jk.controller;
  2.  
  3. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  4. import com.baomidou.mybatisplus.core.metadata.IPage;
  5. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  6. import com.jk.entity.Userinfo;
  7. import com.jk.service.impl.UserServiceImpl;
  8. import com.jk.utils.ResultUtil;
  9. import org.apache.commons.lang.StringUtils;
  10. import org.springframework.beans.factory.annotation.Autowired;
  11. import org.springframework.stereotype.Controller;
  12. import org.springframework.web.bind.annotation.RequestMapping;
  13. import org.springframework.web.bind.annotation.ResponseBody;
  14.  
  15. import java.util.List;
  16.  
  17. @Controller
  18. public class UserController {
  19.  
  20.     @Autowired
  21.     private UserServiceImpl userService;
  22.  
  23.     /**
  24.      * 跳转到列表页面
  25.      * @return
  26.      */
  27.     @RequestMapping("/manage/userinfoList")
  28.     public String goList(){
  29.         return "manage/userinfo/userinfoList";
  30.     }
  31.  
  32.     /**
  33.      * 分页条件查询
  34.      * @param page
  35.      * @param limit
  36.      * @param name
  37.      * @param sex
  38.      * @return
  39.      */
  40.     @RequestMapping("/manage/getList")
  41.     @ResponseBody
  42.     public ResultUtil getList(Integer page, Integer limit,String name,String sex){
  43.  
  44. //        传入分页的属性
  45.         Page<Userinfo> objectPage = new Page<>(page, limit);
  46.         QueryWrapper<Userinfo> wrapper = new QueryWrapper<>();
  47. //        条件查询：不为空且长度不为0且不由空白符(whitespace) 构成
  48.         wrapper.like(StringUtils.isNotBlank(name),"name",name);
  49.         wrapper.eq(StringUtils.isNotBlank(sex),"sex",sex);
  50. //        分页查询
  51.         IPage<Userinfo> userinfoIPage = userService.page(objectPage, wrapper);
  52. //        信息总条数
  53.         long total = userinfoIPage.getTotal();
  54. //        分页数据
  55.         List<Userinfo> records = userinfoIPage.getRecords();
  56. //        回写数据
  57.         return new ResultUtil(0,total,records);
  58.  
  59.     }
  60. }

8.userinfo列表页面：

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2.          pageEncoding="UTF-8" %>
  3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  4. <c:set var="ctx" value="${pageContext.request.contextPath}"/>
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  6. <html>
  7. <head>
  8.     <meta charset="utf-8">
  9.     <title>用户信息列表</title>
  10.     <meta name="renderer" content="webkit">
  11.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  13.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  14.     <meta name="apple-mobile-web-app-capable" content="yes">
  15.     <meta name="format-detection" content="telephone=no">
  16.     <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all"/>
  17.     <link rel="stylesheet" href="${ctx}/static/css/font_eolqem241z66flxr.css" media="all"/>
  18.     <link rel="stylesheet" href="${ctx}/static/css/list.css" media="all"/>
  19.     <script>
  20.         var ctx = "${ctx}"; //js全局项目路径
  21.     </script>
  22.     <style type="text/css">
  23.     </style>
  24. </head>
  25. <body class="childrenBody">
  26. <blockquote class="layui-elem-quote list_search">
  27.  
  28.     <div class="layui-form-item">
  29.         <label class="layui-form-label">姓名</label>
  30.         <div class="layui-input-block" style="margin-left: 0px;">
  31.             <input type="text" name="name" id="name"  lay-verify autocomplete="off"
  32.                    placeholder="请输入名称"
  33.                    class="layui-input" style="display: inline;width: 500px">
  34.             性别:
  35.             <select name="sex"  id="sex" class="layui-select" style="width: 500px">
  36.                 <option value="">请选择性别</option>
  37.                 <option value="男">男</option>
  38.                 <option value="女">女</option>
  39.             </select>
  40.  
  41.             <button class="layui-btn"  id="sel">查询</button>
  42.         </div>
  43.     </div>
  44.  
  45.         <div class="layui-inline">
  46.             <a class="layui-btn layui-btn-normal addBtn"><i class="layui-icon">&#xe608;</i> 添加商品信息</a>
  47.         </div>
  48.  
  49.     
  50.     <div class="layui-inline">
  51.         <div class="layui-form-mid layui-word-aux"></div>
  52.     </div>
  53. </blockquote>
  54. <!-- 数据表格 -->
  55. <table id="userinfoList" lay-filter="test"></table>
  56. <script type="text/javascript" src="${ctx}/static/layui/layui.js"></script>
  57.  
  58. <script type="text/javascript" src="${ctx}/static/js/common.js"></script>
  59. <script type="text/javascript" src="${ctx}/static/js/userinfoList.js"></script>
  60. <script type="text/html" id="barEdit">
  61.     <a class="layui-btn layui-btn-warm  layui-btn-xs" lay-event="infoDetail">查看</a>
  62.     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  63.     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  64. <%--    <a class="layui-btn layui-btn-warm  layui-btn-xs" lay-event="chongzhi">充值</a>--%>
  65. </script>
  66. <script type="text/html" id="tableImg">
  67.     <%--图片显示模板--%>
  68.     <img src="{{d.picurl}}" style="height:48px;width:48px;line-height:48px!important;"/>
  69. </script>
  70. <style>
  71.     .layui-table-cell {
  72.         height: 36px;
  73.         line-height: 36px;
  74.     }
  75. </style>
  76. </body>
  77. </html>

8.编写页面对应js文件：

  1. layui.config({
  2.     base: "js/"
  3. }).use(['form', 'layer', 'jquery', 'laypage', 'table', 'laytpl'], function () {
  4.     var form = layui.form, table = layui.table;
  5.     layer = parent.layer === undefined ? layui.layer : parent.layer,
  6.         laypage = layui.laypage,
  7.         $ = layui.jquery;
  8. //数据表格
  9.     table.render({
  10.         id: 'userinfoList',
  11.         elem: '#userinfoList'
  12.         , url: ctx + '/manage/getList' //数据接口
  13.         , cellMinWidth: 80
  14.         , limit: 10//每页默认数
  15.         , limits: [10, 20, 30, 40]
  16.         , cols: [[ //表头
  17.             /*{type: 'checkbox'},*/
  18.             {field: 'id', title: 'ID', width: 60, align: 'center', sort: true},
  19.             {field: 'name', title: '姓名', width: 140, align: 'center'},
  20.             {field: 'phone', title: '电话', width: 140, align: 'center'},
  21.             {field: 'email', title: '邮箱', width: 140, align: 'center'},
  22.             {field: 'picurl', title: '头像', templet: '#tableImg'},
  23.             {field: 'money', title: '金额', width: 140, align: 'center'},
  24.             {field: 'sex', title: '性别', width: 140, align: 'center'},
  25.             {field: 'password', title: '密码', width: 140, align: 'center'},
  26.             {field: 'role', title: '权限', width: 140, align: 'center'},
  27.             {
  28.                 field: 'createtime',
  29.                 title: '创建时间',
  30.                 templet: '<div>{{ formatTime(d.createtime,"yyyy-MM-dd hh:mm:ss")}}</div>'
  31.             },
  32.             {title: '操作', toolbar: '#barEdit'}
  33.         ]]
  34.         , page: true //开启分页
  35.     });
  36. //监听工具条
  37.     table.on('tool(test)', function (obj) {
  38.         var data = obj.data;
  39.         if (obj.event === 'del') {
  40.             layer.confirm('真的删除行么?', function (index) {
  41.                 $.ajax({
  42.                     url: ctx + '/manage/deleteUserinfo?id=' + data.id,
  43.                     type: "get",
  44.                     success: function (d) {
  45.                         if (d.code == 0) {
  46.                             table.reload('userinfoList', {})
  47.                         } else {
  48.                             layer.msg("操作失败，请重试", {icon: 5});
  49.                         }
  50.                     }
  51.                 })
  52.                 layer.close(index);
  53.             });
  54.         } else if (obj.event === 'edit') {
  55.             var url = ctx + "/manage/editUserinfo?id=" + data.id;//路径拼接
  56.             location.href = url;
  57.         } else if (obj.event === 'chongzhi') {
  58.             var url = ctx + "/manage/chongzhi?id=" + data.id;//路径拼接
  59.             location.href = url;
  60.         }else if (obj.event === 'infoDetail') {
  61.             var url = ctx + "/manage/userinfoInfo?id=" + data.id;
  62.             layer.open({
  63.                 type: 2,
  64.                 btn: ['关闭'],
  65.                 btnAlign: 'c',
  66.                 title: "用户信息详情查看",
  67.                 skin: 'layui-layer-molv', //加上边框
  68.                 area: ['500px', '400px'], //宽高
  69.                 shadeClose: true,
  70.                 content: url
  71.             });
  72.         }
  73.  
  74.  
  75.     });
  76.  
  77. //添加用户信息
  78.     $(".addBtn").click(function () {
  79.         var url = ctx + "/manage/addUserinfo";
  80.         location.href = url;  //路径跳转
  81.     })
  82.  
  83.     //搜索
  84.     $("#sel").click(function () {
  85.         table.reload('userinfoList', {
  86.             where: {
  87.                 name: $("#name").val(),
  88.                 sex: $("#sex").val()
  89.             }
  90.         })
  91.     })
  92.  
  93.  
  94. //批量删除用户信息
  95.     $(".batchDel").click(function () {
  96.         var checkStatus = table.checkStatus('userinfoList')
  97.             , data = checkStatus.data, idsStr = '';
  98. //   layer.alert(JSON.stringify(data));
  99.         if (data.length > 0) {
  100.             $.each(data, function (n, value) {
  101.                 idsStr += value.id + ',';
  102.             });
  103.             idsStr = idsStr.substring(0, idsStr.length - 1);
  104.             layer.confirm('真的要删除<strong>' + data.length + '</strong>条数据吗？', function (index) {
  105.                 //调用删除接口
  106.                 $.ajax({
  107.                     url: 'deletesUserinfo?idsStr=' + idsStr,//接口地址
  108.                     type: "get",
  109.                     success: function (d) {
  110.                         if (d.code == 0) {
  111.                 //重载表格
  112.                             table.reload('userinfoList', {})
  113.                         } else {
  114.                             layer.msg("删除错误，稍后再试！", {icon: 5});
  115.                         }
  116.                     }
  117.                 })
  118.                 layer.close(index);
  119.             });
  120.         } else {
  121.             layer.msg("请选择要操作的数据！");
  122.         }
  123.  
  124.     })
  125.  
  126. })

最后看下效果：

 完结，撒花！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/155683?site
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号