实现在线留言板需搭建前端页面、后端服务与数据库。1. 创建message表存储留言；2. 使用Spring Boot构建后端，包含实体类Message、数据访问层MessageMapper、服务层MessageService和控制层MessageController；3. 前端通过HTML表单收集数据，利用JavaScript发起Ajax请求获取和提交留言；4. 配置数据库连接并启动应用，访问页面即可展示与提交留言。流程为：前端输入→Ajax提交→Java处理并存入数据库→查询返回→前端动态渲染。可扩展分页、校验等功能。
要实现一个在线留言板功能，主要涉及前端页面展示、后端逻辑处理以及数据库存储三部分。以下是使用Java（结合Spring Boot）实现的基本步骤和关键代码结构。
1. 数据库设计
留言信息需要持久化存储，通常使用MySQL等关系型数据库。创建一张message表：
CREATE TABLE message (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
content TEXT NOT NULL,
created_time DATETIME DEFAULT CURRENT_TIMESTAMP
);
2. 后端服务（Spring Boot）
使用Spring Boot快速搭建Web服务。
实体类 Message.java
public class Message {
private Integer id;
private String name;
private String content;
private Date createdTime;
// Getters and Setters
}
数据访问层 MessageMapper.java（使用MyBatis或JPA）
@Mapper
public interface MessageMapper {
List findAll();
void insertMessage(Message message);
}
服务层 MessageService.java
@Service
public class MessageService {
@Autowired
private MessageMapper messageMapper;
public List getAllMessages() {
return messageMapper.findAll();
}
public void addMessage(Message message) {
messageMapper.insertMessage(message);
}
}
控制层 MessageController.java
@RestController
@CrossOrigin // 支持前端跨域请求
public class MessageController {
@Autowired
private MessageService messageService;
@GetMapping("/messages")
public List getMessages() {
return messageService.getAllMessages();
}
@PostMapping("/messages")
public String addMessage(@RequestBody Message message) {
messageService.addMessage(message);
return "success";
}
}
3. 前端页面（HTML + JavaScript）
使用简单的HTML页面配合Ajax提交和获取数据。
立即学习“Java免费学习笔记（深入）”；
index.html 示例
<form id="messageForm">
名字: <input type="text" name="name" required><br>
留言: <textarea name="content" required></textarea><br>
<button type="submit">提交留言</button>
</form>
<div id="messages"></div>
<script>
// 获取留言列表
function loadMessages() {
fetch('/messages')
.then(res => res.json())
.then(data => {
const msgDiv = document.getElementById('messages');
msgDiv.innerHTML = '';
data.forEach(m => {
msgDiv.innerHTML += <p><b>${m.name}</b> (${m.createdTime}): ${m.content}</p>;
});
});
}
// 提交留言
document.getElementById('messageForm').onsubmit = function(e) {
e.preventDefault();
const formData = new FormData(this);
const data = Object.fromEntries(formData);
fetch('/messages', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
}).then(() => {
this.reset();
loadMessages(); // 刷新列表
});
};
// 页面加载时获取留言
loadMessages();
</script>
4. 配置与运行
确保application.yml中配置数据库连接：
spring:
datasource:
url: jdbc:mysql://localhost:3306/testdb
username: root
password: yourpassword
driver-class-name: com.mysql.cj.jdbc.Driver
启动Spring Boot应用后，访问http://localhost:8080即可看到留言板页面。
基本上就这些。整个流程清晰：前端收集输入 → Ajax发送到后端 → Java保存到数据库 → 查询并返回数据 → 前端动态展示。可以根据需求扩展功能，比如添加时间格式化、分页、校验、删除留言等。
