如何使用NodeJS将日期输入传递到mongoDB中

Question

我正在自学如何使用NodeJS编程，目前我正在做一个基本的任务管理器项目，在这个项目中，用户可以输入任务，然后保存到我的mongo数据库中。到目前为止，它的大部分工作都是有效的，我已经能够用变量"name“、"_id”和"completed“存储任务模型，但是当我想要在其中添加日期时，我似乎无法让它工作。

我的目标基本上是让用户输入他们自己的任务的名称和日期，然后存储到我的数据库中，之后他们会被列在用户的个人议程中，所以对我的应用程序来说，获得工作日期是强制性的。

这是我到目前为止所知道的：

(相关部分) index.html：

​

<form class="task-form">
        <h4>task manager</h4>
        <div class="form-control">
          <input
            type="text"
            name="name"
            class="task-input"
            placeholder="e.g. study"
          />
        </div>
        <div class="form-control">
          <input type="date" name="date" class="task-input" />
        </div>
        <button type="submit" class="btn submit-btn">submit</button>
        ​
        <div class="form-alert"></div>
</form>

​

(相关部分)脚本：

​

const tasksDOM = document.querySelector(".tasks");
const loadingDOM = document.querySelector(".loading-text");
const formDOM = document.querySelector(".task-form");
const taskInputDOM = document.querySelector(".task-input");
const formAlertDOM = document.querySelector(".form-alert");

// Load tasks from /api/tasks

const showTasks = async () => {
  loadingDOM.style.visibility = "visible";
  try {
    const {
      data: { tasks },
    } = await axios.get("/api/v1/tasks");
    if (tasks.length < 1) {
      tasksDOM.innerHTML = '<h5 class="empty-list">No tasks in your list</h5>';
      loadingDOM.style.visibility = "hidden";
      return;
    }
    const allTasks = tasks
      .map((task) => {
        const { completed, _id: taskID, name, date } = task;
        return `<div class="single-task ${completed && "task-completed"}">
<h5><span><i class="far fa-check-circle"></i></span>${name}</h5>
<div class="task-links">

// form

formDOM.addEventListener("submit", async (e) => {
  e.preventDefault();
  const name = taskInputDOM.value;
  const date = taskInputDOM.value;
  
  try {
    await axios.post("/api/v1/tasks", { name, date });
    showTasks();
    taskInputDOM.value = "";
    formAlertDOM.style.display = "block";
    formAlertDOM.textContent = `success, task added`;
    formAlertDOM.classList.add("text-success");
  } catch (error) {
    formAlertDOM.style.display = "block";
    formAlertDOM.innerHTML = `error, please try again`;
  }
  setTimeout(() => {
    formAlertDOM.style.display = "none";
    formAlertDOM.classList.remove("text-success");
  }, 3000);
});

​

相关的mongoose模式：

​

const TaskSchema = new mongoose.Schema({
  name: {
    type: String,
    required: [true, "A task must have a name."],
    trim: true,
    maxlength: [200, "A task cannot be more than 200 characters."],
  },
  completed: {
    type: Boolean,
    default: false,
  },
  date: {
    type: Date,
    required: [false, "A task must have a date."],
  },
});

​

我可能注意到的一件事是，日期输入被处理为字符串而不是日期。这是在我尝试添加一个名为‘work’的任务后，chrome控制台的网络选项卡显示的内容：

​

就解决方案而言，我真的一无所知，我很乐意完成这个项目。如果有人能给我一个正确的方向，我将不胜感激！

向您致以亲切的问候，

布拉姆

Answer 1

您对“.task- querySelector”使用了只返回第一个匹配项的输入，然后对"name“和"date”变量使用了相同的名称。这就是为什么它在两者中采用相同的值。

相反，将" id“添加到两个输入，并通过id选择它们。

index.html

​

<form class="task-form">
        <h4>task manager</h4>
        <div class="form-control">
          <input
            type="text"
            name="name"
            id="name"
            class="task-input"
            placeholder="e.g. study"
          />
        </div>
        <div class="form-control">
          <input type="date" name="date" id="date" class="task-input" />
        </div>
        <button type="submit" class="btn submit-btn">submit</button>
        ​
        <div class="form-alert"></div>
</form>

​

在JS中处理表单时

​

const tasksDOM = document.querySelector(".tasks");
const loadingDOM = document.querySelector(".loading-text");
const formDOM = document.querySelector(".task-form");
const taskInputDOM = document.querySelector(".task-input");
const formAlertDOM = document.querySelector(".form-alert");


// Load tasks from /api/tasks

const showTasks = async () => {
  loadingDOM.style.visibility = "visible";
  try {
    const {
      data: { tasks },
    } = await axios.get("/api/v1/tasks");
    if (tasks.length < 1) {
      tasksDOM.innerHTML = '<h5 class="empty-list">No tasks in your list</h5>';
      loadingDOM.style.visibility = "hidden";
      return;
    }
    const allTasks = tasks
      .map((task) => {
        const { completed, _id: taskID, name, date } = task;
        return `<div class="single-task ${completed && "task-completed"}">
<h5><span><i class="far fa-check-circle"></i></span>${name}</h5>
<div class="task-links">

// form

formDOM.addEventListener("submit", async (e) => {
  e.preventDefault();
  const name = document.getElementById("name").value;
  const date = document.getElementById("date").value;
  
  try {
    await axios.post("/api/v1/tasks", { name, date });
    showTasks();
    taskInputDOM.value = "";
    formAlertDOM.style.display = "block";
    formAlertDOM.textContent = `success, task added`;
    formAlertDOM.classList.add("text-success");
  } catch (error) {
    formAlertDOM.style.display = "block";
    formAlertDOM.innerHTML = `error, please try again`;
  }
  setTimeout(() => {
    formAlertDOM.style.display = "none";
    formAlertDOM.classList.remove("text-success");
  }, 3000);
});

​