javaweb 简单留言板
时间: 2023-10-27 11:06:27 浏览: 81
一个简单的JavaWeb留言板可以分为以下几个部分:
1. 数据库设计:留言板需要一个数据库来存储用户的留言信息,一般可以设计两个表,一个表用于存储用户信息,另一个表用于存储留言信息。
2. 后端处理:使用JavaWeb框架(如SpringMVC)进行后端处理,包括用户登录、注册、发布留言、查看留言等功能。
3. 前端展示:使用HTML、CSS、JavaScript等技术进行前端页面的设计和展示,包括登录、注册、留言列表、留言详情等页面。
下面是一个简单的留言板的代码示例:
1. 数据库设计:
用户信息表(user_info):
CREATE TABLE user_info (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(20) NOT NULL,
password VARCHAR(50) NOT NULL
);
留言信息表(message_info):
CREATE TABLE message_info (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
user_id INT UNSIGNED NOT NULL,
title VARCHAR(50) NOT NULL,
content TEXT NOT NULL,
create_time DATETIME NOT NULL,
FOREIGN KEY (user_id) REFERENCES user_info(id)
);
2. 后端处理:
使用SpringMVC框架,具体的代码实现可以参考以下示例:
用户登录:
@RequestMapping(value="/login", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> login(@RequestBody Map<String, Object> params) {
String username = (String) params.get("username");
String password = (String) params.get("password");
User user = userService.getUserByUsername(username);
Map<String, Object> result = new HashMap<>();
if (user == null) {
result.put("success", false);
result.put("message", "用户名不存在");
} else if (!user.getPassword().equals(password)) {
result.put("success", false);
result.put("message", "密码错误");
} else {
result.put("success", true);
result.put("message", "登录成功");
result.put("user", user);
}
return result;
}
用户注册:
@RequestMapping(value="/register", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> register(@RequestBody Map<String, Object> params) {
String username = (String) params.get("username");
String password = (String) params.get("password");
User user = new User();
user.setUsername(username);
user.setPassword(password);
userService.createUser(user);
Map<String, Object> result = new HashMap<>();
result.put("success", true);
result.put("message", "注册成功");
return result;
}
发布留言:
@RequestMapping(value="/postMessage", method=RequestMethod.POST)
@ResponseBody
public Map<String, Object> postMessage(@RequestBody Map<String, Object> params) {
int userId = (int) params.get("userId");
String title = (String) params.get("title");
String content = (String) params.get("content");
Message message = new Message();
message.setUserId(userId);
message.setTitle(title);
message.setContent(content);
message.setCreateTime(new Date());
messageService.createMessage(message);
Map<String, Object> result = new HashMap<>();
result.put("success", true);
result.put("message", "留言发布成功");
return result;
}
查看留言:
@RequestMapping(value="/getMessageList", method=RequestMethod.GET)
@ResponseBody
public List<Message> getMessageList() {
return messageService.getMessageList();
}
3. 前端展示:
使用HTML、CSS、JavaScript等技术进行前端页面的设计和展示,包括登录、注册、留言列表、留言详情等页面。具体的代码实现可以参考以下示例:
登录页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>登录</h2>
<form id="loginForm">
<div>
<label>用户名:</label>
<input type="text" name="username">
</div>
<div>
<label>密码:</label>
<input type="password" name="password">
</div>
<button type="submit">登录</button>
</form>
<script>
$(function(){
$('#loginForm').submit(function(event){
event.preventDefault();
var formData = $(this).serializeArray();
$.ajax({
url: '/login',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
username: formData[0].value,
password: formData[1].value
}),
success: function(data){
if (data.success) {
alert(data.message);
window.location.href = '/messageList';
} else {
alert(data.message);
}
}
});
});
});
</script>
</body>
</html>
注册页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>注册</h2>
<form id="registerForm">
<div>
<label>用户名:</label>
<input type="text" name="username">
</div>
<div>
<label>密码:</label>
<input type="password" name="password">
</div>
<button type="submit">注册</button>
</form>
<script>
$(function(){
$('#registerForm').submit(function(event){
event.preventDefault();
var formData = $(this).serializeArray();
$.ajax({
url: '/register',
type: 'POST',
dataType: 'json',
contentType: 'application/json',
data: JSON.stringify({
username: formData[0].value,
password: formData[1].value
}),
success: function(data){
if (data.success) {
alert(data.message);
window.location.href = '/login';
} else {
alert(data.message);
}
}
});
});
});
</script>
</body>
</html>
留言列表页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言列表</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2>留言列表</h2>
<table>
<thead>
<tr>
<th>标题</th>
<th>作者</th>
<th>发布时间</th>
<th>操作</th>
</tr>
</thead>
<tbody id="messageList">
</tbody>
</table>
<button onclick="window.location.href='/postMessage'">发布留言</button>
<script>
$(function(){
$.ajax({
url: '/getMessageList',
type: 'GET',
dataType: 'json',
success: function(data){
$.each(data, function(index, message){
var tr = '<tr><td><a href="/messageDetail?id=' + message.id + '">' + message.title + '</a></td><td>' + message.username + '</td><td>' + message.createTime + '</td><td><button onclick="window.location.href=\'/postMessage\'">编辑</button><button onclick="deleteMessage(' + message.id + ')">删除</button></td></tr>';
$('#messageList').append(tr);
});
}
});
});
function deleteMessage(id) {
if (confirm('确定要删除该留言吗?')) {
$.ajax({
url: '/deleteMessage?id=' + id,
type: 'POST',
dataType: 'json',
contentType: 'application/json',
success: function(data){
if (data.success) {
alert(data.message);
window.location.reload();
} else {
alert(data.message);
}
}
});
}
}
</script>
</body>
</html>
留言详情页面:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言详情</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<h2 id="title"></h2>
<p id="content"></p>
<p>作者:<span id="username"></span></p>
<p>发布时间:<span id="createTime"></span></p>
<button onclick="window.location.href='/messageList'">返回留言列表</button>
<script>
$(function(){
var params = new URLSearchParams(window.location.search);
var id = params.get('id');
$.ajax({
url: '/getMessageDetail?id=' + id,
type: 'GET',
dataType: 'json',
success: function(data){
$('#title').text(data.title);
$('#content').text(data.content);
$('#username').text(data.username);
$('#createTime').text(data.createTime);
}
});
});
</script>
</body>
</html>