网硕互联帮助中心一、添加thymeleaf依赖(demo演示，所以使用模板)
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
二、创建前端页面 index.html
<!DOCTYPE html>
<html xmlns:th=\”http://www.thymeleaf.org\”>
<head>
<meta charset=\”UTF-8\”>
<title>通知系统</title>
<!– 引入 Font Awesome 图标库 –>
<link rel=\”stylesheet\” href=\”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css\”>
<!– 引入 Vue2 框架 –>
<script src=\”https://cdn.jsdelivr.net/npm/vue@2.6.14\”></script>
<style>
/* 通知铃铛容器样式 */
.notification-bell {
position: fixed;
top: 20px;
right: 20px;
}
/* 铃铛图标样式 */
.bell-icon {
font-size: 24px;
cursor: pointer;
padding: 10px;
}
/* 未读消息数量徽章样式 */
.notification-badge {
position: absolute;
top: 0;
right: 0;
background-color: red;
color: white;
border-radius: 50%;
padding
评论前必须登录！
注册