这是我的控制器
@GetMapping("/getRandomWildSwimming")
public List<WildSwimming> getRandomWildSwimming() {
return wildSwimmingService.getRandomWildSwimming();
}
如何用HTML访问它?我很困惑，我看到一些教程，我设置return index.html为例，但我返回这里实际上服务，显示我收集数据从Mongo JSON当我发送请求，例如:http://localhost:8080/wildswimming/getRandomWildSwimming页面显示我从Mongo JSON格式的一个集合，我怎么能显示通过html和样式化它一点?
如果您想使用这种方法，您需要一个客户机。例如，您可以使用JS或PHP。
然后你需要创建HTML页面，添加脚本(使用JS或PHP)来发送请求，获得响应并显示给用户。
这看起来像:用户打开页面->客户端向您的弹簧控制器发送请求->弹簧控制器返回响应->客户端获取并显示给用户。
或
如果你不知道如何启动客户端服务器，可以使用Spring MVC。
你需要在你的项目中添加一个依赖项，以便spring boot知道如何将对象转换为json。如果您正在使用maven，请添加com.fasterxml.jackson。Core:jackson- databingto your pom file.
然后，将@ResponseBody注释添加到getRandomWildSwimming方法中，使其最终看起来像这样…
@GetMapping("/getRandomWildSwimming")
public @ResponseBody List<WildSwimming> getRandomWildSwimming() {
return wildSwimmingService.getRandomWildSwimming();
}
这将使控制器在web浏览器中被调用时以json响应。
假设它返回的JSON看起来像这样…
[{"rating" 89},{"rating" 24},{"rating" 68}]
可以使用$。get函数(来自jquery库)，以调用/getRandomWildSwimming api方法，该方法将获取JSON并自动将其转换为javascript对象数组…
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="resources/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>Wild Swimming Records</h1>
<ul id="canvas">
</ul>
<script type="text/javascript">
$(document).ready(function(){
$.get("./getRandomWildSwimming", function(data) {
console.log(data[0].rating);
console.log("JSON: " + JSON.stringify(data));
$.each(data, function(index, value) {
$("#canvas").append("<li>" + value.rating + "</li>");
});
});
});
</script>
</body>
</html>
这应该导致一个页面看起来像这样…
Wild Swimming Records
- 89
- 24
- 68
第一行console.log将获取数据数组中第一个对象的评级属性，并将其打印到浏览器控制台。第二行console.log将把整个数组转换回json字符串，并将其打印到浏览器控制台。