java怎么写留言板网页
时间: 2023-06-15 11:05:23 浏览: 277
基于Java毕业设计-留言板
编写留言板网页需要以下步骤:
1. 创建一个HTML页面,包含留言板的表单和展示留言的区域。
2. 使用CSS样式美化留言板页面。
3. 使用JavaScript编写与留言板相关的逻辑,比如提交表单、展示留言等。
4. 在后端使用Java编写接口来接收表单提交的数据,将数据存储到数据库中。
5. 在后端使用Java编写接口来获取数据库中的留言数据,将数据返回给前端展示。
以下是一个简单的留言板网页示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
<style>
/* CSS样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
form input, form textarea {
display: block;
width: 100%;
margin-bottom: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
form textarea {
height: 100px;
}
button {
padding: 5px 10px;
border: none;
border-radius: 3px;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.message {
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
background-color: #fff;
}
.message p {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>留言板</h1>
<form id="message-form">
<input type="text" name="name" placeholder="姓名">
<textarea name="content" placeholder="留言"></textarea>
<button type="submit">提交留言</button>
</form>
<div id="message-list">
<!-- 留言展示区域 -->
</div>
</div>
<script>
// JavaScript逻辑
const messageForm = document.querySelector('#message-form');
const messageList = document.querySelector('#message-list');
// 提交留言
messageForm.addEventListener('submit', (event) => {
event.preventDefault();
const formData = new FormData(messageForm);
fetch('/api/messages', {
method: 'POST',
body: formData
}).then(() => {
messageForm.reset();
loadMessages();
});
});
// 加载留言
function loadMessages() {
fetch('/api/messages').then((response) => {
return response.json();
}).then((messages) => {
const messageHtml = messages.map((message) => {
return `
<div class="message">
<p><strong>${message.name}</strong></p>
<p>${message.content}</p>
</div>
`;
}).join('');
messageList.innerHTML = messageHtml;
});
}
loadMessages();
</script>
</body>
</html>
```
在后端,我们可以使用Java编写一个Servlet来处理表单提交和留言展示的逻辑,示例代码如下:
```java
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
@WebServlet("/api/messages")
public class MessageServlet extends HttpServlet {
private static final List<Message> messages = new ArrayList<>();
private static final Gson gson = new Gson();
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
String json = gson.toJson(messages);
response.getWriter().write(json);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String name = request.getParameter("name");
String content = request.getParameter("content");
Message message = new Message(name, content);
messages.add(message);
}
private static class Message {
public String name;
public String content;
public Message(String name, String content) {
this.name = name;
this.content = content;
}
}
}
```
注意,在实际开发中,我们需要对表单数据进行校验和过滤,以避免安全问题和错误数据的存储。
阅读全文