从零开始手把手教你定制JavaEasyUI分页组件源码

手把手教你定制Java EasyUI分页组件：从源码到实战

摘要：本文将深入探讨如何基于Java和EasyUI框架自定义分页组件，通过源码分析和实战演示，帮助开发者打造符合业务需求的高效分页解决方案。

一、为什么需要定制分页组件？

在企业级应用开发中，数据分页是必不可少的核心功能。虽然EasyUI提供了原生的分页组件，但在实际项目中，我们常常面临以下需求：

2. 业务逻辑复杂化：需要支持多条件组合查询的分页
4. 数据格式特殊化：后端返回的数据结构可能与EasyUI默认格式不一致
6. UI个性化需求：企业需要统一的视觉风格和交互体验
8. 性能优化要求：大数据量下的分页性能优化

二、环境准备与技术选型

基础环境

• 前端框架：jQuery EasyUI 1.9+（推荐最新稳定版）
• 后端技术：Spring Boot 2.7+ + MyBatis Plus 3.5+
• 数据库：MySQL 8.0+（支持窗口函数优化分页查询）

为什么选择MyBatis Plus？

MyBatis Plus提供了强大的分页插件，可以大幅简化后端分页逻辑开发：

```java

@Configuration

public class MybatisPlusConfig {

@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    // 分页插件
    PaginationInnerInterceptor paginationInterceptor = new PaginationInnerInterceptor();
    paginationInterceptor.setMaxLimit(1000L); // 单页最大记录数
    interceptor.addInnerInterceptor(paginationInterceptor);
    return interceptor;
}

}

```

三、后端分页架构设计

统一分页请求封装

```java

@Data

public class PageRequest {

private Integer page = 1; // 当前页码

private Integer size = 10; // 每页大小

private String sort; // 排序字段

private String order; // 排序方向

public <T> Page<T> toPage() {
    return new Page<>(page, size);
}

}

```

统一分页响应封装

```java

@Data

@AllArgsConstructor

public class PageResult {

private Boolean success; // 是否成功

private String message; // 返回消息

private Long total; // 总记录数

private List data; // 分页数据

// EasyUI分页组件需要的特定格式
public Map<String, Object> toEasyUIMap() {
    Map<String, Object> result = new HashMap<>();
    result.put("success", success);
    result.put("message", message);
    result.put("total", total);
    result.put("rows", data);
    return result;
}

}

```

四、前端分页组件定制实战

基础分页组件配置

javascript

$('dataGrid').datagrid({

url: '/api/users/page',

pagination: true,

pageSize: 10,

pageList: [10, 20, 50, 100],

onLoadSuccess: function(data) {

// 数据加载成功回调

if (!data.success) {

$.messager.alert('错误', data.message);

}

}

});

自定义分页工具栏

```javascript

// 扩展EasyUI分页组件

$.extend($.fn.datagrid.defaults, {

pageSize: 10,

pageList: [10, 20, 50, 100],

pagingation: true

});

// 自定义分页工具栏

function createPager(gridId, options) {

const pager = $(gridId).datagrid('getPager');

pager.pagination({

beforePageText: '第',

afterPageText: '页，共 {pages} 页',

displayMsg: '显示 {from} 到 {to} 条，共 {total} 条',

onRefresh: function() {

$(gridId).datagrid('reload');

}

});

// 添加自定义按钮
if (options.buttons) {
    $.each(options.buttons, function(index, button) {
        const link = $('<a href="javascript:void(0)"></a>').text(button.text);
        link[0].onclick = button.handler;
        link.appendTo(pager);
    });
}

}

```

五、高级定制功能实现

1. 分页大小记忆功能

```javascript

// 保存分页大小到本地存储

function savePageSize(gridId, size) {

localStorage.setItem(gridId + '_pageSize', size);

}

// 读取分页大小

function loadPageSize(gridId) {

return localStorage.getItem(gridId + '_pageSize') || 10;

}

```

2. 智能页码跳转

javascript

// 添加页码快速跳转输入框

function addPageJump(pager) {

const jumpHtml = `

<span style="margin-left:10px;">

跳至 <input type="text" class="page-jump" style="width:30px;"> 页

<a href="javascript:void(0)" class="l-btn" onclick="jumpToPage()">跳转</a>

</span>

`;

pager.find('.pagination-num').after(jumpHtml);

}

3. 分页数据导出功能

javascript

// 添加导出按钮

function addExportButton(gridId, exportUrl) {

const exportBtn = $('<a href="javascript:void(0)" class="l-btn">导出Excel</a>');

exportBtn.click(function() {

const params = $(gridId).datagrid('options').queryParams || {};

const url = exportUrl + '?' + $.param(params);

window.open(url, '_blank');

});

$(gridId).closest('.datagrid-wrap')

.find('.datagrid-toolbar')

.append(exportBtn);

}

六、性能优化实践

后端优化策略

2. 数据库层面优化：

   ```sql

   -- 使用覆盖索引优化分页查询

   EXPLAIN SELECT id, name FROM users WHERE status = 1 ORDER BY id LIMIT 10000, 20;

-- 使用游标分页（基于ID）

SELECT FROM users WHERE id > 10000 AND status = 1 ORDER BY id LIMIT 20;

```

2. 缓存策略：

   ```java

   @Service

   public class UserService {

   @Cacheable(value = "userPage", key = "pageRequest.hashCode()")

   public PageResult getUsers(PageRequest pageRequest) {

   // 分页查询逻辑

   }

   }

   ```

前端优化策略

2. 防抖搜索：

   javascript

   let searchTimer;

   $('searchInput').on('input', function() {

   clearTimeout(searchTimer);

   searchTimer = setTimeout(() => {

   $('dataGrid').datagrid('load', {

   keyword: $(this).val()

   });

   }, 500);

   });

4. 虚拟滚动（大数据量场景）：

   javascript

   $('dataGrid').datagrid({

   onBeforeLoad: function(param) {

   param.virtual = true; // 启用虚拟滚动

   }

   });

七、完整示例代码

后端Controller示例

```java

@RestController

@RequestMapping("/api/users")

public class UserController {

@Autowired
private UserService userService;
@GetMapping("/page")
public Map<String, Object> getUsers(PageRequest pageRequest, UserQuery query) {
    try {
        PageResult<User> result = userService.getUsers(pageRequest, query);
        return result.toEasyUIMap();
    } catch (Exception e) {
        return PageResult.error("查询失败").toEasyUIMap();
    }
}

}

```

前端完整配置

```javascript

$(function() {

$('userGrid').datagrid({

url: '/api/users/page',

method: 'GET',

pagination: true,

pageSize: loadPageSize('userGrid'),

pageList: [10, 20, 50, 100],

toolbar: 'toolbar',

columns: [[

{field: 'id', title: 'ID', width: 80},

{field: 'name', title: '姓名', width: 100},

{field: 'email', title: '邮箱', width: 200}

]],

onLoadSuccess: function(data) {

if (!data.success) {

$.messager.alert('错误', data.message);

}

},

onPageChange: function(pageNumber, pageSize) {

savePageSize('userGrid', pageSize);

}

});

createPager('userGrid', {
    buttons: [
        {
            text: '导出',
            handler: function() {
                exportData();
            }
        }
    ]
});

});

```

八、总结与最佳实践

通过本文的实践，我们实现了一个功能完整、性能优越的定制化分页组件。在实际项目中，建议遵循以下最佳实践：

2. 前后端分离：明确前后端接口规范，使用统一的数据格式
4. 错误处理：完善的异常处理机制，提供友好的用户提示
6. 性能监控：对分页查询进行性能监控，及时发现慢查询
8. 用户体验：加载状态提示、操作确认等人性化设计
10. 可维护性：组件化设计，便于复用和维护

定制分页组件不仅提升了开发效率，更重要的是为业务提供了更加灵活和强大的数据展示能力。希望本文能为你在分页组件开发方面提供有价值的参考。

延伸阅读：

- EasyUI官方文档

- MyBatis Plus分页插件源码分析

- 前端性能优化实战指南

---

版权声明：本文为CSDN博主原创，转载请注明出处。如有疑问，欢迎在评论区交流讨论。

好的，这是一篇根据您的要求撰写的，符合CSDN社区高质量标准的实战技术文章。

---

SpringBoot实战：手把手教你整合JWT，构建安全的RESTful API

摘要： 在前后端分离架构大行其道的今天，如何安全、高效地进行用户*鉴权是每个开发者必须面对的课题。本文将基于SpringBoot项目，深度实战JWT（JSON Web Token）鉴权机制，并阐述如何设计一套规范的RESTful API。文章将涵盖从原理到实现，从工具类编写到拦截器配置，并提供生产级的最佳实践建议，助你打造高安全、高性能的现代Web应用。

一、 为什么是JWT？RESTful API的鉴权之困

在传统的单体应用或基于Session的认证中，服务端需要存储用户的登录状态（Session）。这种方式在前后端分离和微服务架构下暴露了明显弊端：

2. 扩展性难题：Session通常存储在服务器内存中，在集群环境下需要做Session同步，增加复杂度。
4. CSRF风险：基于Cookie的Session容易受到跨站请求伪造攻击。
6. 移动端不友好：原生App并非浏览器环境，对Cookie的支持不天然。

JWT正是为解决这些问题而生的无状态认证方案。它的核心优势在于：

• 无状态：服务端无需存储令牌，令牌自身包含所有必要的用户信息（Claims）。这使得应用易于水平扩展。
• 跨域支持：JWT通常通过HTTP Header传递，可轻松应对跨域场景。
• 多端适用：完美支持Web、iOS、Android等各种客户端。

JWT的组成：一个典型的JWT形如 xxxxx.yyyyy.zzzzz，由三部分组成：

Header：声明令牌类型和签名算法（如HS256， RSA）。

Payload：存放实际需要传递的数据，如用户ID、过期时间等。

Signature：对前两部分的签名，用于验证令牌的完整性和真实性。

二、 项目实战：SpringBoot整合JWT

我们将创建一个简单的论坛项目，实现“登录-颁发Token-访问API”的完整流程。

环境准备

• JDK 8+
• Spring Boot 2.7+
• Maven/Gradle

1. 添加依赖

在 pom.xml 中引入核心依赖。这里我们使用目前Java领域最流行的 JJWT 库。

```xml

org.springframework.boot

spring-boot-starter-web

2.7.14

<!-- JJWT API -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-api</artifactId>
    <version>0.11.5</version>
</dependency>
<!-- JJWT Implementation -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-impl</artifactId>
    <version>0.11.5</version>
    <scope>runtime</scope>
</dependency>
<!-- JJWT Jackson Support (推荐) -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt-jackson</artifactId>
    <version>0.11.5</version>
    <runtime/>
</dependency>

```

请注意：JJWT在0.12.x版本后进行了破坏性更新，API用法有较大变化。本文采用目前应用最广泛的0.11.x版本，但建议新项目可调研最新版。

2. 编写JWT工具类

这是一个核心工具类，封装了生成和解析JWT的方法。

```java

@Component

public class JwtUtils {

// 签名密钥，务必复杂且保密，生产环境应从配置中心读取
private final String secretKey = "your-very-long-secure-secret-key-256bits-minimum";
// 令牌过期时间（毫秒），这里设为2小时
private final long expiration = 7200000;
/
  生成JWT Token
  @param userId 用户唯一标识
  @return JWT字符串
 /
public String generateToken(String userId) {
    Date now = new Date();
    Date expiryDate = new Date(now.getTime() + expiration);
    return Jwts.builder()
            .setSubject(userId) // 设置主题（通常放用户ID）
            .setIssuedAt(now) // 签发时间
            .setExpiration(expiryDate) // 过期时间
            .signWith(SignatureAlgorithm.HS256, secretKey) // 使用HS256算法和密钥签名
            .compact();
}
/
  从Token中解析出用户ID（Subject）
  @param token JWT Token
  @return 用户ID
 /
public String getUserIdFromToken(String token) {
    Claims claims = Jwts.parser()
            .setSigningKey(secretKey)
            .parseClaimsJws(token)
            .getBody();
    return claims.getSubject();
}
/
  验证Token是否有效
  @param token JWT Token
  @return 是否有效
 /
public boolean validateToken(String token) {
    try {
        Jwts.parser().setSigningKey(secretKey).parseClaimsJws(token);
        return true;
    } catch (JwtException | IllegalArgumentException e) {
        // 日志记录异常
        return false;
    }
}

}

```

3. 实现登录接口和RESTful API

我们设计一个简单的RESTful风格的*验证接口。

• POST /api/auth/login：用户登录，成功则返回JWT。
• GET /api/posts：获取帖子列表，需要JWT鉴权。

统一响应体：

```java

@Data

public class Result {

private Integer code;

private String message;

private T data;

public static <T> Result<T> success(T data) {
    Result<T> result = new Result<>();
    result.setCode(200);
    result.setMessage("success");
    result.setData(data);
    return result;
}
public static <T> Result<T> error(Integer code, String message) {
    Result<T> result = new Result<>();
    result.setCode(code);
    result.setMessage(message);
    return result;
}

}

```

认证控制器：

```java

@RestController

@RequestMapping("/api/auth")

public class AuthController {

@Autowired
private JwtUtils jwtUtils;
@PostMapping("/login")
public Result<String> login(@RequestBody @Valid LoginRequest loginRequest) {
    // 1. 校验用户名和密码（这里简化，实际应从数据库查询比对）
    if (!"admin".equals(loginRequest.getUsername()) || !"123456".equals(loginRequest.getPassword())) {
        return Result.error(401, "用户名或密码错误");
    }
    // 2. 模拟从数据库获取用户ID
    String userId = "10001";
    // 3. 生成JWT Token
    String token = jwtUtils.generateToken(userId);
    // 4. 返回Token（前端需要将其存储在localStorage或Cookie中）
    return Result.success(token);
}

}

```

4. 创建JWT认证拦截器

这是实现鉴权的关键。它拦截需要保护的API请求，检查Header中的Token。

```java

@Component

public class JwtAuthenticationInterceptor implements HandlerInterceptor {

@Autowired
private JwtUtils jwtUtils;
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
    // 放行OPTIONS请求（CORS预检请求）
    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        return true;
    }
    // 从请求头中获取Token，通常格式为 "Authorization: Bearer <token>"
    String authHeader = request.getHeader("Authorization");
    if (authHeader == null || !authHeader.startsWith("Bearer ")) {
        sendError(response, 401, "缺少有效的Token");
        return false;
    }
    // 提取Token本身（去掉"Bearer "前缀）
    String token = authHeader.substring(7);
    // 验证Token
    if (!jwtUtils.validateToken(token)) {
        sendError(response, 401, "Token无效或已过期");
        return false;
    }
    // 验证通过，可以将用户信息（如userId）存入请求属性，供Controller使用
    String userId = jwtUtils.getUserIdFromToken(token);
    request.setAttribute("userId", userId);
    return true;
}
private void sendError(HttpServletResponse response, int code, String message) throws IOException {
    response.setStatus(code);
    response.setContentType("application/json;charset=UTF-8");
    Result<?> result = Result.error(code, message);
    ObjectMapper mapper = new ObjectMapper();
    response.getWriter().write(mapper.writeValueAsString(result));
}

}

```

5. 注册拦截器

让Spring MVC知道我们的拦截器需要拦截哪些路径。

```java

@Configuration

public class WebConfig implements WebMvcConfigurer {

@Autowired
private JwtAuthenticationInterceptor jwtAuthenticationInterceptor;
@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(jwtAuthenticationInterceptor)
            .addPathPatterns("/api/") // 拦截所有/api开头的请求
            .excludePathPatterns("/api/auth/login"); // 排除登录接口
}

}

```

三、 测试与最佳实践

测试流程：

1. 使用Postman调用 POST /api/auth/login， body为 {"username":"admin", "password":"123456"}，成功获取Token。

2. 访问受保护的接口 GET /api/posts，在Headers中添加 Authorization: Bearer <你的Token>，应能成功获取数据。

3. 不传Token或传错误的Token，应返回401错误。

生产级最佳实践：

2. 密钥安全管理：绝对不要将密钥硬编码在代码中。应使用环境变量、配置中心或K8s Secret来管理。
4. 使用HTTPS：JWT在网络上传输，必须使用HTTPS来防止令牌被截获。
6. 设置合理的过期时间：访问令牌（Access Token）应设置较短的过期时间（如15-30分钟），并结合刷新令牌（Refresh Token）机制来平衡安全与用户体验。
8. Payload精简：JWT Payload默认是不加密的（只是Base64编码），不要存放敏感信息（如密码）。
10. 令牌注销：JWT的无状态特性使其难以立即失效。如需实现“登出即失效”，可采用黑名单策略，将未过期的失效Token存入Redis等缓存，并在拦截器中校验。

四、 总结

通过本文的实战，我们成功地在SpringBoot论坛项目中集成了JWT鉴权。我们不仅编写了核心的JWT工具类，还通过拦截器实现了对RESTful API的统一*验证。这种方案清晰、无状态、易于扩展，非常适合现代分布式应用架构。

理解JWT的原理并掌握其实现细节，是后端开发者构建安全API的必备技能。希望本文能为你未来的项目开发提供有力的支持。

---

注意：本文代码为教学演示版本，直接用于生产环境前请务必根据自身业务需求进行安全加固和异常完善。欢迎在评论区交流探讨！