以下是一个简单的Spring Boot留言板示例，包括后端API和前端页面。
后端API（Controller）:
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.ArrayList;
@RestController
@RequestMapping("/api/guestbook")
public class GuestbookController {
private static final List<Message> messages = new ArrayList<>();
@GetMapping
public List<Message> getAllMessages() {
return messages;
}
@PostMapping
public Message addMessage(@RequestBody Message message) {
message.setId((int) (messages.size() + 1));
messages.add(message);
return message;
}
static class Message {
private int id;
private String content;
// standard getters and setters
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getContent() {
return content;
}
public void setContent(String content) {
this.content = content;
}
}
}前端页面（HTML）:
<!DOCTYPE html>
<html>
<head>
<title>Simple Guestbook</title>
</head>
<body>
<h1>Simple Guestbook</h1>
<form action="/api/guestbook" method="post">
<textarea name="content" rows="4" cols="50"></textarea>
<input type="submit" value="Submit">
</form>
<hr>
<h2>Messages</h2>
<ul id="messages">
<!-- messages are dynamically loaded here -->
</ul>
<script>
function loadMessages() {
fetch('/api/guestbook')
.then(response => response.json())
.then(messages => {
const messageList = document.getElementById('messages');
messageList.innerHTML = ''; // clear current messages
messages.forEach(message => {
const listItem = document.createElement('li');
listItem.textContent = message.content;