嘿，作为刚入门Web开发的新手，你这个思路完全没问题——前端监听输入框失焦事件，发POST请求给后端存数据库，咱们一步步来实现：

第一步：前端（calendar.ejs）处理失焦逻辑 #

首先得给每个日期输入框加个日期标识，这样后端知道要存哪一天的数据。然后用JS监听blur事件，收集数据后发请求：

输入框结构示例 #

给每个输入框加上data-date属性存对应的日期（比如2024-05-20），方便后续获取：

<input type="text" class="day-input" data-date="2024-01-01" placeholder="记录今日事项">
<input type="text" class="day-input" data-date="2024-01-02" placeholder="记录今日事项">
<!-- ... 剩下363个输入框同理 ... -->

前端JS逻辑 #

用原生fetch发送POST请求，处理成功/失败的情况：

// 给所有日期输入框绑定失焦事件
document.querySelectorAll('.day-input').forEach(input => {
  input.addEventListener('blur', async function() {
    const targetDate = this.dataset.date;
    const inputContent = this.value.trim();

    // 如果输入为空，可以选择不发请求（或者存空字符串，看你的需求）
    if (!inputContent) return;

    try {
      const response = await fetch('/save-calendar-item', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json', // 告诉后端我们发的是JSON
        },
        body: JSON.stringify({ 
          date: targetDate,
          content: inputContent 
        })
      });

      if (response.ok) {
        console.log(`✅ ${targetDate} 的内容已保存`);
        // 这里可以加个友好提示，比如输入框旁边显示个对勾
      } else {
        console.error('❌ 保存失败，请重试');
      }
    } catch (err) {
      console.error('请求出错了:', err);
    }
  });
});

第二步：后端（index.js）处理POST请求并存储到MongoDB #

先确保你已经用mongoose连接了MongoDB，然后定义数据模型、写路由：

1. 连接MongoDB并定义数据模型 #

const express = require('express');
const mongoose = require('mongoose');
const app = express();

// 解析前端发来的JSON请求体
app.use(express.json());

// 连接MongoDB数据库（替换成你的数据库地址）
mongoose.connect('mongodb://localhost:27017/your-calendar-db')
  .then(() => console.log('MongoDB连接成功！'))
  .catch(err => console.error('MongoDB连接失败:', err));

// 定义日历数据的Schema（相当于数据库表结构）
const CalendarItemSchema = new mongoose.Schema({
  date: {
    type: String,
    required: true,
    unique: true // 确保每个日期只有一条记录，避免重复存储
  },
  content: {
    type: String,
    required: true
  }
});

// 创建数据模型
const CalendarItem = mongoose.model('CalendarItem', CalendarItemSchema);

2. 写POST路由处理保存请求 #

用findOneAndUpdate方法，既可以更新已有日期的内容，也能在日期不存在时新增记录：

// 处理保存日历条目的路由
app.post('/save-calendar-item', async (req, res) => {
  const { date, content } = req.body;

  try {
    // 查找对应日期的记录，存在则更新，不存在则插入
    const savedItem = await CalendarItem.findOneAndUpdate(
      { date }, // 查询条件：日期匹配
      { content }, // 要更新的内容
      { new: true, upsert: true } // new返回更新后的文档，upsert不存在就插入
    );

    res.status(200).json({ success: true, data: savedItem });
  } catch (err) {
    console.error('保存到数据库失败:', err);
    res.status(500).json({ success: false, message: '服务器内部错误' });
  }
});

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

一些优化小建议 #

• 防抖处理：如果用户快速输入并切换焦点，可能会频繁发请求，加个防抖函数减少请求次数：

  function debounce(func, delay = 300) {
    let timeoutId;
    return (...args) => {
      clearTimeout(timeoutId);
      timeoutId = setTimeout(() => func.apply(this, args), delay);
    };
  }
  // 绑定事件时替换成：
  input.addEventListener('blur', debounce(async function() { /* 原来的逻辑 */ }));
  

• 页面加载回显数据：页面初始化时，从数据库拉取已有数据填充到输入框里，避免用户刷新页面丢失内容。可以在渲染calendar.ejs时把数据传过去，或者前端发GET请求获取。
• 友好提示：前端可以在输入框旁边加个小图标/文字，告诉用户内容是否保存成功，提升体验。

内容的提问来源于stack exchange，提问作者aliefeozkan