这个问题在这里已经有了答案：
数据库发生变化时前端实时更新（1个答案）
上个月关门了。
我想显示从数据库获取数据的图表。我希望图表是动态的。我目前正在使用mysql workbench，每当我从mysql workbench插入或删除任何数据时，我都希望图表在不刷新页面的情况下自动更改。请检查下面的代码，首先是我用model.addattribute传递数据库数据并将在dailyupdate.html中使用的控制器类
控制器.java
@RequiredArgsConstructor
@Controller
public class Controller {
private final StatusService statusService;
@GetMapping("/")
public String getData(Model model){
model.addAttribute("statusDTO", statusService.getFacilityStatus());
return "daily/dailyUpdate";
}
}下面是我的dailyupdate.html代码
每日更新.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="~{/layout/basic :: setContent(~{this::content} )}">
<th:block th:fragment="content">
<div class="container">
<span>
<div id="buildingStatus">
</div>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>In</th>
<th>Out</th>
</tr>
</thead>
<tbody>
<th:block th:each="num: ${#numbers.sequence(0,9)}">
<tr>
<th>[[${statusDTO.getBName()[num]}]]</th>
<td>[[${statusDTO.getIn()[num]}]]</td>
<td>[[${statusDTO.getOut()[num]}]]</td>
</tr>
</th:block>
</tbody>
</table>
</span>
</div>
<script th:inline="javascript">
Highcharts.chart('buildingStatus', {
data: {
table: 'datatable'
},
chart: {
type: 'column',
},
title: {
text: '건물 출입 현황'
},
yAxis: {
allowDecimals: false,
title: {
text: '명수'
}
},
credits:{
enabled:false
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.point.y + ' ' + this.point.name.toLowerCase();
}
}
});
</script>
</th:block>
</th:block>如果我运行这个应用程序，它会在运行后显示这个应用程序的视图
现在我真正想做的是，每当数据库数据发生变化时（如下图所示，如果我将insert或delete数据更改到mysql workbench中），我希望条形图自动更改，而不刷新页面。你能告诉我怎么做吗？。。我真的很难做到这一点。请帮帮我
mysql workbench数据图片
1条答案
按热度按时间xbp102n01#
我知道了。我在使用ajax、websocket和firebase中进行选择。我真的用websocket解决了这个问题。