首先，在后端使用Express框架创建API接口，包括登录接口和注册接口，另外还需要创建获取留言列表和添加留言的接口。
在前端页面中，用户需要先登录或注册才能使用留言板功能，可以在登录/注册成功后使用cookie或localStorage等方式将用户信息保存起来，然后发送带有用户信息的Ajax请求到后端获取留言列表或添加留言。
下面是一个示例代码，仅供参考：
后端代码：
```
const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.
json());
app.use(cookieParser());
// 假设已经定义好用户列表users和留言列表messages
// 登录接口
app.post('/login', (req, res) => {
const {username, password} = req.body;
const user = users.find(u => u.username === username && u.password === password);
if (user) {
res.cookie('user',
JSON.stringify(user)); // 将用户信息保存到cookie中
res.
json({code: 0, message: '登录成功'});
} else {
res.
json({code: 1, message: '用户名或密码错误'});
}
});
// 注册接口
app.post('/register', (req, res) => {
const {username, password} = req.body;
const user = users.find(u => u.username === username);
if (user) {
res.
json({code: 1, message: '用户名已存在'});
} else {
users.push({username, password});
res.
json({code: 0, message: '注册成功'});
}
});
// 获取留言列表接口（需要登录才能访问）
app.get('/messages', (req, res) => {
const user =
JSON.parse(req.cookies.user || '{}');
if (user.username) {
res.
json({code: 0, messages});
} else {
res.
json({code: 1, message: '请先登录'});
}
});
// 添加留言接口（需要登录才能访问）
app.post('/addMessage', (req, res) => {
const user =
JSON.parse(req.cookies.user || '{}');
if (user.username) {
const {content} = req.body;
messages.push({id: messages.length + 1, content, username: user.username});
res.
json({code: 0, message: '添加成功'});
} else {
res.
json({code: 1, message: '请先登录'});
}
});
app.listen(3000, () => console.log('Server is running...'));
```
前端代码：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.
js"></script>
<style>
.message-item {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="register">
<h3>注册</h3>
<form id="registerForm">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">注册</button>
</form>
</div>
<div class="login" style="display:none">
<h3>登录</h3>
<form id="loginForm">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">登录</button>
</form>
</div>
<div class="messages" style="display:none">
<h3>留言板</h3>
<form id="addMessageForm">
<textarea name="content" placeholder="请输入留言内容"></textarea>
<button type="submit">提交留言</button>
</form>
<div class="message-list"></div>
</div>
<script>
function showMessage(message) {
$('.message-list').prepend(`<div class="message-item">${message.username}: ${message.content}</div>`);
}
$('#registerForm').submit(function(event) {
event.preventDefault();
const username = $('input[name=username]', this).val();
const password = $('input[name=password]', this).val();
$.post('/register', {username, password}, function(res) {
alert(res.message);
});
});
$('#loginForm').submit(function(event) {
event.preventDefault();
const username = $('input[name=username]', this).val();
const password = $('input[name=password]', this).val();
$.post('/login', {username, password}, function(res) {
alert(res.message);
if (res.code === 0) {
$('.register, .login').hide();
$('.messages').show();
// 登录成功后获取留言列表
$.get('/messages', function(res) {
if (res.code === 0) {
res.messages.forEach(showMessage);
} else {
alert(res.message);
}
});
}
});
});
$('#addMessageForm').submit(function(event) {
event.preventDefault();
const content = $('textarea[name=content]', this).val();
$.post('/addMessage', {content}, function(res) {
alert(res.message);
if (res.code === 0) {
showMessage({username:
JSON.parse(document.cookie).user.username, content});
}
});
});
</script>
</body>
</html>
```
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
