JavaScript与SpringRedis缓存配合使用的方法-js教程-PHP中文网

JavaScript与SpringRedis缓存配合使用的方法

看不見的法師

发布： 2025-11-05 20:33:33

原创

366人浏览过

前端JavaScript通过HTTP请求调用后端Spring接口，Spring利用Redis缓存数据以提升性能；1. Spring通过@Cacheable注解自动管理缓存，减少数据库查询；2. 前端使用fetch或Axios请求API，透明获取缓存数据；3. 更新时用@CachePut或@CacheEvict同步缓存；4. 管理员可从前端触发清空缓存操作，保持数据一致。

javascript与springredis缓存配合使用的方法

JavaScript 通常作为前端语言运行在浏览器中，而 Spring Redis 是后端 Java 框架与缓存数据库的组合。它们本身不直接“配合”，而是通过 HTTP 接口（如 RESTful API）间接协作。前端 JavaScript 发起请求，后端 Spring 应用使用 Redis 缓存数据，提升响应速度和系统性能。

1. 后端使用 Spring + Redis 实现缓存

Spring 提供了对 Redis 的良好支持，主要通过 Spring Data Redis 和 @Cacheable 注解简化缓存操作。

添加依赖（Maven 示例）：

在 pom.xml 中加入：

spring-boot-starter-data-redis
lettuce-core（或 jedis）

配置 Redis 连接：

在 application.yml 中设置：

spring:
  redis:
    host: localhost
    port: 6379

登录后复制

启用缓存：

在主启动类或配置类上添加：

@EnableCaching

登录后复制

使用 @Cacheable 注解缓存方法结果：

示例：

@Service
public class UserService {
  
  @Cacheable(value = "users", key = "#id")
  public User getUserById(Long id) {
    // 模拟数据库查询
    return userRepository.findById(id);
  }
}

登录后复制

当接口被调用时，Spring 会先查 Redis，命中则返回缓存数据，否则执行方法并自动缓存结果。

2. 前端 JavaScript 调用后端接口获取缓存数据

前端 JavaScript 通过 fetch 或 Axios 等方式请求后端暴露的 API 接口，透明地享受 Redis 缓存带来的性能提升。

立即学习“Java免费学习笔记（深入）”；

示例：JavaScript 发起请求

fetch('/api/users/1')
  .then(response => response.json())
  .then(data => {
    console.log('用户信息:', data);
  })
  .catch(err => {
    console.error('请求失败:', err);
  });

登录后复制

这个请求会被 Spring Controller 处理，例如：

存了个图

视频图片解析/字幕/剪辑，视频高清保存/图片源图提取

查看详情

@RestController
@RequestMapping("/api/users")
public class UserController {

  @Autowired
  private UserService userService;

  @GetMapping("/{id}")
  public User getUser(@PathVariable Long id) {
    return userService.getUserById(id);
  }
}

登录后复制

如果该用户数据已缓存，Redis 直接返回，避免重复查库。

3. 缓存更新与失效策略

为了保证数据一致性，需合理管理缓存生命周期。

@CachePut：更新缓存。方法执行后更新缓存值。
@CacheEvict：清除缓存。例如用户更新信息后清除旧缓存。

@CacheEvict(value = "users", key = "#user.id")
public User updateUser(User user) {
  return userRepository.save(user);
}

登录后复制

这样，下次请求该用户时会重新加载最新数据并缓存。

4. 可选：前端主动触发缓存清理（管理员场景）

某些后台管理系统中，JavaScript 可提供“刷新缓存”按钮，调用特定接口清空 Redis 缓存。

// 前端按钮点击事件
async function clearCache() {
  await fetch('/api/admin/clear-cache', { method: 'POST' });
  alert('缓存已清理');
}

登录后复制

// 后端接口
@PostMapping("/admin/clear-cache")
@CacheEvict(allEntries = true, value = {"users", "posts"})
public ResponseEntity<String> clearCache() {
  return ResponseEntity.ok("缓存已清除");
}

登录后复制

基本上就这些。JavaScript 不直接操作 Redis，而是通过调用被 Spring 缓存保护的接口，实现高效、快速的数据访问。整个过程对前端透明，但性能显著提升。

以上就是JavaScript与SpringRedis缓存配合使用的方法的详细内容，更多请关注php中文网其它相关文章！