前端JavaScript通过HTTP请求调用后端Spring接口，Spring利用Redis缓存数据以提升性能；1. Spring通过@Cacheable注解自动管理缓存，减少数据库查询；2. 前端使用fetch或Axios请求API，透明获取缓存数据；3. 更新时用@CachePut或@CacheEvict同步缓存；4. 管理员可从前端触发清空缓存操作，保持数据一致。
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）
在 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 缓存保护的接口，实现高效、快速的数据访问。整个过程对前端透明，但性能显著提升。
