Spring Boot秒杀系统实现：灵活控制秒杀按钮状态
在一个秒杀系统中，为了提供更好的用户体验，通常需要在秒杀活动未开始时将秒杀按钮置为灰色不可点击状态。本文将通过一个简单的示例演示如何在Spring Boot项目中实现这一功能，包括后端的控制和前端的交互。
1. 后端实现
首先，我们创建一个SeckillController，该控制器包含了获取秒杀状态和设置秒杀状态的接口：
@RestController @RequestMapping("/seckill") public class SeckillController { private boolean isSeckillOpen = false; // 标识秒杀是否开启 // 获取秒杀状态 @GetMapping("/status") public ResponseEntity<Object> getSeckillStatus() { Map<String, Object> response = new HashMap<>(); response.put("isSeckillOpen", isSeckillOpen); return new ResponseEntity<>(response, HttpStatus.OK); } // 设置秒杀状态 @PostMapping("/status") public ResponseEntity<Object> setSeckillStatus(@RequestBody Map<String, Boolean> request) { isSeckillOpen = request.get("isSeckillOpen"); Map<String, Object> response = new HashMap<>(); response.put("success", true); return new ResponseEntity<>(response, HttpStatus.OK); } }
2. 定时任务
创建一个SeckillScheduler定时任务类，用于模拟定时开启和关闭秒杀活动：
@Component public class SeckillScheduler { @Autowired private SeckillController seckillController; @Scheduled(cron = "0 0 10 * * ?") // 每天上午10点触发一次 public void startSeckill() { seckillController.setSeckillStatus(true); } @Scheduled(cron = "0 0 12 * * ?") // 每天中午12点触发一次 public void stopSeckill() { seckillController.setSeckillStatus(false); } }
3. 前端实现
使用Vue.js创建一个简单的页面，通过axios库与后端通信，并实时更新秒杀按钮的状态：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seckill System</title> </head> <body> <button id="seckillButton" onclick="seckill()">Seckill</button> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script> // 获取秒杀状态 function checkSeckillStatus() { axios.get('/seckill/status') .then(response => { const isSeckillOpen = response.data.isSeckillOpen; // 根据秒杀状态设置秒杀按钮状态 if (isSeckillOpen) { enableSeckillButton(); // 秒杀开启，设置按钮为可点击状态 } else { disableSeckillButton(); // 秒杀未开始，设置按钮为灰色不可点击状态 } }) .catch(error => { console.error('Error checking seckill status', error); }); } // 设置秒杀按钮为可点击状态 function enableSeckillButton() { document.getElementById('seckillButton').removeAttribute('disabled'); } // 设置秒杀按钮为灰色不可点击状态 function disableSeckillButton() { document.getElementById('seckillButton').setAttribute('disabled', 'true'); } // 执行秒杀操作 function seckill() { // 在这里添加执行秒杀的逻辑 console.log('Seckill button clicked'); } // 页面加载时检查秒杀状态 checkSeckillStatus(); </script> </body> </html>
4. 运行项目
运行Spring Boot项目，访问前端页面，你将看到秒杀按钮在秒杀未开始时被灰色禁用，当秒杀开始时变为可点击状态。通过这个简单的示例，我们演示了如何通过前后端协同工作，在秒杀活动开始前将秒杀按钮置为灰色不可点击状态，提供更好的用户体验。这是一个基础实现，你可以根据实际需求进行扩展和优化。
