你这个币再加20倍就有人考虑给你接不接了
创建后端服务文件 server.js
[JavaScript] 纯文本查看 复制代码 const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const PORT = process.env.PORT || 3000;
// 模拟的用户数据（实际应用中应使用真实的数据库）
let users = [
{ id: 1, username: 'user1', cardNumber: '1234567890' },
{ id: 2, username: 'user2', cardNumber: '0987654321' }
];
// 中间件设置
app.use(bodyParser.json());
// 身份验证中间件，检查用户的卡号是否有效
function authenticate(req, res, next) {
const cardNumber = req.body.cardNumber;
const user = users.find(u => u.cardNumber === cardNumber);
if (!user) {
return res.status(401).json({ error: 'Unauthorized' });
}
req.user = user;
next();
}
// 路由：身份验证接口
app.post('/login', authenticate, (req, res) => {
res.json({ message: 'Login successful' });
});
// 路由：查询内容接口
app.get('/content', authenticate, (req, res) => {
// 模拟的查询内容（实际应用中从数据库中查询）
const content = "这里是查询到的内容，不能编辑。";
res.json({ content });
});
// 路由：确认操作接口
app.post('/confirm', authenticate, (req, res) => {
// 在这里处理确认操作，例如更新数据库中的确认状态等
const user = req.user;
const confirmation = req.body.confirmation;
// 在实际应用中可能需要更复杂的业务逻辑
res.json({ message: 'Confirmation successful', user });
});
// 启动服务
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
2前端界面（HTML + JavaScript）
index.html
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Content Query and Confirmation</title>
</head>
<body>
<h1>Welcome to Content Query System</h1>
<div id="contentDisplay">
<!-- 查询结果显示区域 -->
</div>
<form id="queryForm">
<label for="cardNumber">Card Number:</label>
<input type="text" id="cardNumber" name="cardNumber" required>
<button type="submit">Login</button>
</form>
<button id="confirmButton" style="display: none;">Confirm</button>
<script>
document.getElementById('queryForm').addEventListener('submit', async function(event) {
event.preventDefault();
const cardNumber = document.getElementById('cardNumber').value;
try {
// 发送登录请求
const response = await fetch('/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ cardNumber })
});
const data = await response.json();
console.log(data);
// 显示查询结果区域
document.getElementById('contentDisplay').innerHTML = `<p>${data.message}</p>`;
document.getElementById('confirmButton').style.display = 'block';
} catch (error) {
console.error('Error:', error);
}
});
document.getElementById('confirmButton').addEventListener('click', async function() {
try {
// 发送确认请求
const response = await fetch('/confirm', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ confirmation: true })
});
const data = await response.json();
console.log(data);
alert(data.message); // 可以根据需要更改确认操作的反馈方式
} catch (error) {
console.error('Error:', error);
}
});
</script>
</body>
</html>
| 
发表于 2024-5-17 10:13
