MyBatis-Plus 結合 Layui 實作分頁-有解無憂

MyBatis-Plus 使用簡單，內置通用 Mapper、通用 Service，僅僅通過少量配置，即可實作單表大部分 CRUD 操作，下面介紹使用 service 中的 page 方法結合 Layui 前端框架，較快速的實作分頁效果，

在 pom.xml 中引入依賴

<!--  mybatisplus -->
<dependency>
	<groupId>com.baomidou</groupId>
	<artifactId>mybatis-plus-boot-starter</artifactId>
	<version>${mybatisplus.version}</version>
</dependency>

使用 MyBatis-Plus 內置的 mapper，首先撰寫好物體類，然后撰寫 mapper 介面，并繼承 BaseMapper，BaseMapper 中包含大部分的 CRUD 方法，不需要撰寫 mapper.xml ，如果需要多表查詢的話，可根據自己的業務需要撰寫 mapper.xml ，

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.systop.pojo.School;
import org.springframework.stereotype.Repository;

/**
 * @author: Miranda
 * @Date: 2021/8/2
 * @description:
 */
@Repository
public interface SchoolMapper extends BaseMapper<School> {

}

使用 MyBatis-Plus 內置的 service，撰寫 service 介面，并繼承 IService，

import com.baomidou.mybatisplus.extension.service.IService;
import com.systop.pojo.School;

/**
 * @author: Miranda
 * @Date: 2021/8/2
 * @description:
 */
public interface SchoolService extends IService<School> {

}

撰寫 service 實作類，繼承 MyBatis-Plus 的 ServiceImpl ，同時實作 SchoolService 介面，

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.systop.mapper.SchoolMapper;
import com.systop.pojo.School;
import com.systop.service.SchoolService;
import org.springframework.stereotype.Service;

/**
 * @author: Miranda
 * @Date: 2021/8/2
 * @description:
 */
@Service
public class SchoolServiceImpl extends ServiceImpl<SchoolMapper, School> implements SchoolService {

}

使用 MyBatis-plus 分頁，必須寫一個配置類

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

/**
 * @author: Miranda
 * @Date: 2021/8/3
 * @description:
 */
@Configuration
@MapperScan("com.systop.mapper")
public class MybatisPlusConfig {
    /**
     * 分頁插件
     */
    @Bean
    public PaginationInterceptor paginationInterceptor() {
        return new PaginationInterceptor();
    }
}

需要一個 Layui 回傳值的類

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.List;

/**
 * @author: Miranda
 * @Date: 2021/8/2
 * @description:
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class LayuiPage<T> {

    private int code;
    private String msg;
    private Long count;
    private List<T> data;

    /**
     * 只有總條數和分頁資料的構造方法
     * @param count 總條數
     * @param data 分頁資料
     */
    public LayuiPage( Long count, List<T> data) {
        this.count = count;
        this.data = data;
    }
}

controller 類

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.systop.pojo.School;
import com.systop.service.SchoolService;
import com.systop.utils.LayuiPage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

/**
 * @author: Miranda
 * @Date: 2021/8/2
 * @description:
 */
@Controller
public class SchoolController {

    @Autowired
    private SchoolService schoolService;
   
    @RequestMapping("schoolList")
    @ResponseBody
    public LayuiPage schoolList(int page,int limit){
        //傳入分頁的屬性
        Page<School> pager = new Page<>(page,limit);
        //分頁查詢學校資訊
        IPage<School> schoolPage = schoolService.page(pager, new QueryWrapper<>());
        // schoolPage.getTotal() 資訊總條數
        // schoolPage.getRecords() 分頁資料
        return new LayuiPage(schoolPage.getTotal(),schoolPage.getRecords());
    }
}

Layui 頁面代碼實作

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<title>學校資訊管理</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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<!-- 引入layuiadmin的樣式 -->
	<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" th:href="@{layuiadmin/layui/css/layui.css}" media="all">
	<link rel="stylesheet" href="../layuiadmin/style/admin.css" th:href="@{layuiadmin/style/admin.css}"  media="all">
</head>
<body>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body">
						<!-- id="test-table-simple" -->
						<table class="layui-table" id="test-table-simple" lay-filter="curd" ></table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="../layuiadmin/layui/layui.js" th:src="@{layuiadmin/layui/layui.js}"></script>
	<script>
		layui.use(['layer', 'table', 'element','form', 'layedit','util'], function(){
			var layer = layui.layer, //彈層
					table = layui.table, //表格
					element = layui.element, //元素操作
					form = layui.form,
					layedit = layui.layedit,
					util = layui.util;
			table.render({
				elem: '#test-table-simple',
				url: 'schoolList',
				method: 'post',
				cellMinWidth: 80, //全域定義常規單元格的最小寬度
				cols: [
					[{type: 'checkbox'},
					{field: 'sid', title: 'ID', sort: true, align: 'center', width:80},
					{field: 'sname', title: '名稱', align: 'center'},
					{field: 'arrangement', title: '層次', align: 'center'},
					{title: '操作', align: 'center', toolbar: '#bar', width:150, fixed: 'right'}]
				],
				// field 的值和物體類屬性名稱保持一致，如果資料表格沒有渲染，可以看看瀏覽器決議后的名稱
				done: function(res){
				// 在控制臺輸出后臺傳送的資料
					console.log(res);
				},
				page: true, //是否顯示分頁
				limits: [5, 7, 10],
				limit: 5 //每頁默認顯示的數量
			});
		});
	</script>
</body>
</html>

頁面效果如下：

排雷:
剛開始定義 Layui 回傳資料類的時候，將 code 定義成 Integer 型別，并且在 controller 類中使用的是兩個引數的構造方法，導致傳給前臺資料中 code 的值是 null，所以資料渲染一直報 “回傳的資料狀態例外”，
解決:
將 code 定義成 int 型別，或者在 controller 中使用時，傳四個引數，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291883.html

標籤：其他

上一篇：JavaScript入門

下一篇：jQuery 簡介