Spring Boot秒杀系统实现：灵活控制秒杀按钮状态

GeekLiHua

发布于 2025-01-21 15:48:05

8200

代码可运行

文章被收录于专栏：JavaJava

运行总次数：0

代码可运行

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>