网站内容更新提醒代码,

Wd提问: 网站内容更新提醒代码

Ai批改: 网站内容更新提醒代码

以下是一个简单的网站内容更新提醒系统的实现代码示例，包含前端和后端部分：

前端实现 (HTML + JavaScript)

html
<!DOCTYPE html
<html lang=zh-CN
<head
<meta charset=UTF-8
<meta name=viewport content=width=device-width, initial-scale=1.0
<title内容更新提醒</title
<style
.notification {
position: fixed;
bottom: 20px;
right: 20px;
background: 4CAF50;
color: white;
padding: 15px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
display: none;
z-index: 1000;
}
.close-btn {
margin-left: 15px;
color: white;
font-weight: bold;
float: right;
cursor: pointer;
}
</style
</head
<body
<div class=notification id=updateNotification
<span id=notificationText网站内容已更新！</span
<span class=close-btn onclick=closeNotification()×</span
</div

<script
// 存储最后检查的时间戳
let lastCheckTime = localStorage.getItem('lastCheckTime') 0;

// 检查更新的函数
function checkForUpdates() {
fetch('/api/check-updates?since=' + lastCheckTime)
.then(response = response.json())
.then(data = {
if (data.updated) {
showNotification(data.message '网站内容已更新！');
}
// 更新最后检查时间
lastCheckTime = Date.now();
localStorage.setItem('lastCheckTime', lastCheckTime);
})
.catch(error = console.error('检查更新失败:', error));
}

// 显示通知
function showNotification(message) {
const notification = document.getElementById('updateNotification');
document.getElementById('notificationText').textContent = message;
notification.style.display = 'block';

// 5秒后自动隐藏
setTimeout(() = {
notification.style.display = 'none';
}, 5000);
}

// 关闭通知
function closeNotification() {
document.getElementById('updateNotification').style.display = 'none';
}

// 每5分钟检查一次更新
setInterval(checkForUpdates, 5 * 60 * 1000);

// 页面加载时立即检查一次
window.addEventListener('load', checkForUpdates);
</script
</body
</html

后端实现 (Node.js + Express)

javascript
const express = require('express');
const app = express();
const fs = require('fs');
const path = require('path');

// 存储最后更新时间
let lastUpdateTime = Date.now();

// 模拟内容更新的函数
function simulateContentUpdate() {
lastUpdateTime = Date.now();
console.log(`内容已更新于: ${new Date(lastUpdateTime).toLocaleString()}`);
}

// 每10分钟模拟一次内容更新
setInterval(simulateContentUpdate, 10 * 60 * 1000);

// 检查更新API
app.get('/api/check-updates', (req, res) = {
const since = parseInt(req.query.since) 0;

if (lastUpdateTime since) {
res.json({
updated: true,
message: '网站内容已更新！',
updateTime: lastUpdateTime
});
} else {
res.json({
updated: false
});
}
});

// 启动服务器
const PORT = process.env.PORT 3000;
app.listen(PORT, () = {
console.log(`服务器运行在 http://localhost:${PORT}`);
});

数据库版本 (使用MySQL)

如果你需要更精确的跟踪内容更新，可以使用数据库：

javascript
const mysql = require('mysql2/promise');

// 创建数据库连接池
const pool = mysql.createPool({
host: 'localhost',
user: 'root',
password: 'password',
database: 'website_updates'
});

// 检查更新API (数据库版本)
app.get('/api/check-updates', async (req, res) = {
const since = parseInt(req.query.since) 0;

try {
const [rows] = await pool.query(
'SELECT COUNT(*) as count FROM content_updates WHERE update_time ?',
[new Date(since)]
);

if (rows[0].count 0) {
const [updates] = await pool.query(
'SELECT * FROM content_updates WHERE update_time ? ORDER BY update_time DESC LIMIT 1',
[new Date(since)]
);

res.json({
updated: true,
message: updates[0].update_message '网站内容已更新！',
updateTime: new Date(updates[0].update_time).getTime()
});
} else {
res.json({ updated: false });
}
} catch (error) {
console.error('数据库查询错误:', error);
res.status(500).json({ error: '服务器错误' });
}
});

实现说明

1、前端部分:
使用localStorage存储最后检查时间
定期向服务器发送请求检查更新
显示通知提醒用户

2、后端部分:
跟踪最后更新时间
提供API接口供前端查询
可选数据库版本更精确跟踪

3、扩展功能:
可以添加不同类型更新的分类提醒
可以实现WebSocket实时通知
可以添加用户偏好设置

这个基础实现可以根据你的具体需求进行调整和扩展。