在 Web 開發中，Vue.js 是一個非常流行的 JavaScript 框架。它使用組件化方式構建用戶界面，支持雙向數據綁定和虛擬 DOM，使得 SPA 的開發變得更加簡單高效。與此同時，Spring Boot 也是一款非常受歡迎的 Java Web 開發框架。它通過自動化配置和快速開發注重提高開發者的開發效率和項目的可維護性。本文將介紹如何在 Spring Boot 中推送通知到 Vue.js 并進行展示。

為了實現 Spring Boot 推送通知給 Vue.js，我們需要使用 Websocket 技術。Websocket 可以在客戶端與服務器之間建立持久連接，隨時進行雙向通信。推送通知時，服務器將消息發送給客戶端，客戶端通過監聽接收消息并進行展示。

//在 Spring Boot 中配置 Websocket
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new SocketHandler(), "/socket")
.setAllowedOrigins("*");
}
}
//客戶端接收消息
this.socket = new WebSocket("ws://localhost:8080/socket");
this.socket.onmessage = function(event) {
console.log(event.data);
};

在配置 Websocket 后，我們需要編寫業務邏輯來推送通知。例如，當用戶提交評論時，我們需要將評論消息推送給所有瀏覽該頁面的用戶。在 Spring Boot 中，我們可以使用 SpringMVC 的事件機制，監聽評論事件并將消息推送給 Websocket 客戶端。

//評論事件
public class CommentEvent{
private String content;
private User user;
//getter、setter
}
//監聽并推送消息
@Component
public class CommentEventListener {
@Autowired
private SimpMessagingTemplate messagingTemplate;
@EventListener
public void listenCommentEvent(CommentEvent event) {
String message = event.getUser().getName() + "評論了文章：" + event.getContent();
messagingTemplate.convertAndSend("/topic/comments", message);
}
}
//客戶端監聽消息并展示
this.stompClient.subscribe('/topic/comments', function (event) {
console.log(event.body);
});

需要注意的是，在推送通知時要確保客戶端已經連接成功。可以在客戶端發送一個握手請求，在服務端返回成功狀態后再開始推送通知。

綜上所述，通過 Websocket 技術，我們可以在 Spring Boot 中推送通知給 Vue.js 并進行展示。這種推送方式可以使得頁面展示更加實時和動態，提升用戶體驗，是現代 Web 應用開發中必不可少的部分。