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

最新推荐文章于 2024-05-07 18:35:34 发布

极客李华

最新推荐文章于 2024-05-07 18:35:34 发布

阅读量84

点赞数

分类专栏：秒杀系统文章标签： spring boot 后端 java

本文链接：https://blog.csdn.net/qq_51447496/article/details/134978737

版权

秒杀系统专栏收录该内容

27 篇文章 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>

4. 运行项目

运行Spring Boot项目，访问前端页面，你将看到秒杀按钮在秒杀未开始时被灰色禁用，当秒杀开始时变为可点击状态。通过这个简单的示例，我们演示了如何通过前后端协同工作，在秒杀活动开始前将秒杀按钮置为灰色不可点击状态，提供更好的用户体验。这是一个基础实现，你可以根据实际需求进行扩展和优化。

极客李华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring Boot秒杀系统实现：灵活控制秒杀按钮状态

在一个秒杀系统中，为了提供更好的用户体验，通常需要在秒杀活动未开始时将秒杀按钮置为灰色不可点击状态。本文将通过一个简单的示例演示如何在Spring Boot项目中实现这一功能，包括后端的控制和前端的交互。
复制链接

扫一扫