以下是一个使用Node.js, Express, 和 AJAX 创建简单的上班签到系统的核心代码示例。
服务器端代码 (Node.js + Express):
const express = require('express');
const app = express();
const port = 3000;
// 模拟数据库
const signInRecords = {};
app.use(express.static('public')); // 设置静态文件目录
// 签到接口
app.get('/signin', (req, res) => {
const id = req.query.id;
const timestamp = new Date().toLocaleString();
signInRecords[id] = timestamp;
res.send(`${id} 已签到，时间：${timestamp}`);
});
// 查询签到记录接口
app.get('/signin-records', (req, res) => {
res.send(signInRecords);
});
app.listen(port, () => {
console.log(`服务器运行在 http://localhost:${port}`);
});
客户端代码 (HTML + AJAX):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上班签到系统</title>
<script>
function signIn() {
const id = document.getElementById('idInput').value;
fetch('/signin?id=' + id)
.then(response => response.text())
.then(data => {
alert(data);
});
}
function viewSignInRecords() {
fetch('/signin-records')
.then(response => response.json())
.then(data => {
let records = '';
for (let id in data) {
records += `<p>${id}: ${data[id]}</p>`;
}
document.getElementById('records').innerHTML = records;
});
}
</script>
</head>
<body>
<h1>上班签到</h1>
<input type="text" id="idInput" placeholder="请输入员工ID">
<button onclick="signIn()">签到</button>
<button onclick="viewSignInRecords()">查看签到记录</button>
<div id="records"></div>
</body>
</html>
在这个例子中，我们创建了一个简单的上班签到系统。员工通过输入ID并点击签到按钮来签到。签到信息将通过AJAX请求发送到服务器，服务器端记录签到时间并响应客户端。查看签到记录按钮会通过AJAX请求从服务器获取并显示所有签到记录。
注意：这个示例仅用于教学目的，不包含完整的错误处理和生产环境要求的安全措施。在实际环境中，你需要考虑更多的安全性问题，例如参数验证、数据库操作、HTTPS 支持等。