留言板 js代码
以下是一个简单的留言板的 JavaScript 代码示例，包括了前端和后端的实现思路：
前端（HTML + JavaScript）:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<div id="messages"></div>
<form id="messageForm">
<input type="text" id="username" placeholder="用户名" required>
<input type="text" id="content" placeholder="留言内容" required>
<button type="submit">提交</button>
</form>
<script>
const messageForm = document.getElementById('messageForm');
const messagesDiv = document.getElementById('messages');
// 加载留言
fetchMessages();
messageForm.addEventListener('submit', function (e) {
e.preventDefault();
const username = document.getElementById('username').value;
const content = document.getElementById('content').value;
// 发送留言到后端
fetch('/addMessage', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ username, content })
}).then(response => response.json())
.then(data => {
if (data.success) {
// 清空表单并重新加载留言
messageForm.reset();
fetchMessages();
} else {
alert('留言失败');
}
});
});
function fetchMessages() {
fetch('/getMessages')
.then(response => response.json())
.then(data => {
messagesDiv.innerHTML = '';
data.messages.forEach(message => {
const messageElement = document.createElement('div');
messageElement.textContent = `${message.username}: ${message.content}`;
messagesDiv.appendChild(messageElement);
});
});
}
</script>
</body>
</html>后端（使用 Node.js 和 Express）:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
// 存储留言的数组
let messages = [];
app.use(bodyParser.json());
// 获取留言
app.get('/getMessages', (req, res) => {
res.json({ messages });
});
// 添加留言
app.post('/addMessage', (req, res) => {
const { username, content } = req.body;
if (username && content) {
messages.push({ username, content });
res.json({ success: true });
} else {
res.json({ success: false });
}
});
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});基础概念:
- 前端通过 HTML 构建页面结构，CSS 进行样式设计，JavaScript 实现交互逻辑。
- 后端使用 Node.js 和 Express 框架处理 HTTP 请求和业务逻辑。
优势:
- 实现简单，易于理解和扩展。
- 可以快速搭建一个基本的留言板功能。
应用场景:
- 小型的个人网站或博客的留言功能。
- 学习和练习 Web 开发的示例项目。
可能出现的问题及解决方法：
- 如果前端无法加载留言，可能是后端接口地址错误或者服务器未启动，检查网络请求和服务器状态。
- 如果留言提交失败，检查表单数据的格式是否正确，以及后端对数据的处理逻辑。
这只是一个简单的示例，实际的留言板可能需要考虑更多的因素，如数据持久化（使用数据库）、用户身份验证、防止恶意输入等。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
