springboot+thymeleaf 前端页面实现歌曲数量和专辑数量
时间: 2024-02-05 11:05:13 浏览: 88
springboot+thymeleaf项目
您可以通过以下步骤实现:
1. 在Spring Boot项目中创建一个Controller,用于处理前端页面的请求。
2. 在Controller中定义两个方法,分别用于获取歌曲数量和专辑数量,例如:
```java
@GetMapping("/songCount")
public int getSongCount() {
return songService.getSongCount();
}
@GetMapping("/albumCount")
public int getAlbumCount() {
return albumService.getAlbumCount();
}
```
其中,`songService`和`albumService`是用于获取歌曲和专辑数量的Service。
3. 在Thymeleaf模板中,使用AJAX请求来获取歌曲和专辑数量,并将其显示在页面上,例如:
```html
<div>
<p>歌曲数量:<span id="songCount"></span></p>
<p>专辑数量:<span id="albumCount"></span></p>
</div>
<script th:inline="javascript">
$(document).ready(function() {
$.ajax({
url: '/songCount',
success: function(data) {
$('#songCount').text(data);
}
});
$.ajax({
url: '/albumCount',
success: function(data) {
$('#albumCount').text(data);
}
});
});
</script>
```
这样,当页面加载完成后,会通过AJAX请求获取歌曲和专辑数量,并将其显示在页面上。
阅读全文