一、添加thymeleaf
依赖(demo演示,所以使用模板)
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
dependencies>
二、创建前端页面 index.html
DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>通知系统title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<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