首先，在后端
使用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>
```
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
2824
