Spring Boot 实现收藏功能：前端 JavaScript 与后端 Java 代码交互

本教程将详细介绍如何使用 Spring Boot 框架实现一个简单的收藏功能，并演示前端 JavaScript 如何与后端 Java 代码交互。

假设场景： 用户可以在网站上收藏文章，需要在前端显示收藏状态并提供收藏和取消收藏按钮。

1. 后端代码

1.1 控制器（Controller）

@RestController
public class BookmarkController {
    
    private BookmarkService bookmarkService;
    
    @Autowired
    public BookmarkController(BookmarkService bookmarkService) {
        this.bookmarkService = bookmarkService;
    }
    
    @PostMapping('/bookmark')
    public ResponseEntity<String> addBookmark(@RequestBody BookmarkRequest request) {
        // 调用服务层的方法来添加书签
        boolean success = bookmarkService.addBookmark(request.getUserId(), request.getArticleId());
        if (success) {
            return ResponseEntity.ok('Bookmark added successfully');
        } else {
            return ResponseEntity.badRequest().body('Failed to add bookmark');
        }
    }
    
    @DeleteMapping('/bookmark')
    public ResponseEntity<String> removeBookmark(@RequestBody BookmarkRequest request) {
        // 调用服务层的方法来移除书签
        boolean success = bookmarkService.removeBookmark(request.getUserId(), request.getArticleId());
        if (success) {
            return ResponseEntity.ok('Bookmark removed successfully');
        } else {
            return ResponseEntity.badRequest().body('Failed to remove bookmark');
        }
    }
}

1.2 服务层（Service）

@Service
public class BookmarkService {
    
    private BookmarkRepository bookmarkRepository;
    
    @Autowired
    public BookmarkService(BookmarkRepository bookmarkRepository) {
        this.bookmarkRepository = bookmarkRepository;
    }
    
    public boolean addBookmark(int userId, int articleId) {
        // 在数据库中添加收藏记录
        // 返回操作结果，true表示成功，false表示失败
    }
    
    public boolean removeBookmark(int userId, int articleId) {
        // 在数据库中移除收藏记录
        // 返回操作结果，true表示成功，false表示失败
    }
}

1.3 数据访问层（Repository）

@Repository
public class BookmarkRepository {
    
    public void addBookmark(int userId, int articleId) {
        // 在数据库中添加收藏记录的实现
    }
    
    public void removeBookmark(int userId, int articleId) {
        // 在数据库中移除收藏记录的实现
    }
}

2. 前端代码

2.1 HTML 页面

<!DOCTYPE html>
<html>
<head>
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script>
        function addBookmark(userId, articleId) {
            $.ajax({
                type: 'POST',
                url: '/bookmark',
                data: JSON.stringify({ userId: userId, articleId: articleId }),
                contentType: 'application/json',
                success: function(response) {
                    alert(response);
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        }
        
        function removeBookmark(userId, articleId) {
            $.ajax({
                type: 'DELETE',
                url: '/bookmark',
                data: JSON.stringify({ userId: userId, articleId: articleId }),
                contentType: 'application/json',
                success: function(response) {
                    alert(response);
                },
                error: function(response) {
                    alert(response.responseText);
                }
            });
        }
    </script>
</head>
<body>
    <button onclick='addBookmark(1, 1)'>Add Bookmark</button>
    <button onclick='removeBookmark(1, 1)'>Remove Bookmark</button>
</body>
</html>

3. 工作流程

前端 HTML 页面包含两个按钮：'Add Bookmark' 和 'Remove Bookmark'，分别对应添加和取消收藏操作。
按钮点击事件会触发 JavaScript 代码中的 addBookmark 或 removeBookmark 函数。
函数使用 jQuery 的 $.ajax 方法发送异步请求到后端 /bookmark 接口。
请求中包含 userId 和 articleId 参数。
后端控制器接收到请求后，会调用相应的服务层方法进行处理。
服务层方法会调用数据访问层方法来操作数据库，添加或移除收藏记录。
后端控制器根据操作结果返回响应信息给前端。
前端 JavaScript 代码根据响应信息更新页面状态，比如显示成功或失败提示。

4. 注意事项

本教程只提供基本框架，具体的实现细节需要根据实际需求进行调整。
为了提高安全性，需要对用户输入进行验证和过滤，避免 SQL 注入等安全漏洞。
为了提高性能，可以考虑使用缓存等技术。

5. 总结

本教程介绍了如何使用 Spring Boot 框架实现收藏功能，并演示了前端 JavaScript 如何与后端 Java 代码交互。希望本教程可以帮助您理解基本原理，并能够根据实际需求进行扩展和完善。

Spring Boot 实现收藏功能：前端 JavaScript 与后端 Java 代码交互