强悍 Node.js 待办列表页面数据填充指南：让待办数据飞起来

2023-06-28 23:43:15

使用 Node.js 和 JavaScript 轻松填充前端待办数据

简介

在 Web 开发中，将数据从后端填充到前端页面是一项常见的任务。例如，在待办列表应用程序中，我们需要从数据库获取待办任务数据，并将其显示在前端页面上供用户查看和管理。使用 Node.js 和 JavaScript，我们可以轻松地实现这一功能。

后端准备工作

第一步是设置一个后端 API，以允许前端页面从后端获取待办数据。我们可以使用 Express.js 等框架快速构建 API。

// 后端代码（使用 Express.js）

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

app.get('/todos', (req, res) => {
  // 从数据库获取待办数据
  const todos = [
    {
      id: 1,
      title: '学习 Node.js',
      completed: false
    },
    {
      id: 2,
      title: '构建待办列表应用程序',
      completed: true
    }
  ];

  // 将待办数据返回给前端页面
  res.json(todos);
});

app.listen(3000, () => {
  console.log('服务器正在端口 3000 上监听');
});

获取待办数据

在前端页面中，我们可以使用 JavaScript 的 fetch() API 从后端获取待办数据。

// 前端代码（使用 JavaScript）

// 获取待办数据
fetch('/todos')
  .then(res => res.json())
  .then(todos => {
    // 解析待办数据
    const todosObj = JSON.parse(todos);

    // 将待办数据填充到前端页面
    const todoList = document.getElementById('todo-list');
    todosObj.forEach(todo => {
      const li = document.createElement('li');
      li.innerHTML = todo.title;

      todoList.appendChild(li);
    });
  });

解析待办数据

获取到待办数据后，我们需要将其解析成 JavaScript 对象。我们可以使用 JSON.parse() 方法来完成这一步。

填充前端页面

最后，我们将解析后的待办数据填充到前端页面中。我们可以使用 DOM 操作来完成这一步。

示例代码

以下是一个完整的示例代码，演示如何使用 Node.js 和 JavaScript 将待办数据填充到前端页面中：

// 后端代码（使用 Express.js）

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

app.get('/todos', (req, res) => {
  // 从数据库获取待办数据
  const todos = [
    {
      id: 1,
      title: '学习 Node.js',
      completed: false
    },
    {
      id: 2,
      title: '构建待办列表应用程序',
      completed: true
    }
  ];

  // 将待办数据返回给前端页面
  res.json(todos);
});

app.listen(3000, () => {
  console.log('服务器正在端口 3000 上监听');
});


// 前端代码（使用 JavaScript）

// 获取待办数据
fetch('/todos')
  .then(res => res.json())
  .then(todos => {
    // 解析待办数据
    const todosObj = JSON.parse(todos);

    // 将待办数据填充到前端页面
    const todoList = document.getElementById('todo-list');
    todosObj.forEach(todo => {
      const li = document.createElement('li');
      li.innerHTML = todo.title;

      todoList.appendChild(li);
    });
  });

常见问题解答

如何过滤待办数据？

// 前端代码（使用 JavaScript）

// 获取待办数据
fetch('/todos?completed=false')
  .then(res => res.json())
  .then(todos => {
    // 解析待办数据
    const todosObj = JSON.parse(todos);

    // 将待办数据填充到前端页面
    const todoList = document.getElementById('todo-list');
    todosObj.forEach(todo => {
      const li = document.createElement('li');
      li.innerHTML = todo.title;

      todoList.appendChild(li);
    });
  });

如何更新待办任务？

// 前端代码（使用 JavaScript）

// 更新待办任务
fetch('/todos/:id', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: '新的待办标题',
    completed: true
  })
})
  .then(res => res.json())
  .then(todo => {
    // 更新前端页面
    const li = document.getElementById('todo-' + todo.id);
    li.innerHTML = todo.title;

    // 更新待办状态
    if (todo.completed) {
      li.classList.add('completed');
    } else {
      li.classList.remove('completed');
    }
  });

如何删除待办任务？

// 前端代码（使用 JavaScript）

// 删除待办任务
fetch('/todos/:id', {
  method: 'DELETE'
})
  .then(() => {
    // 从前端页面中删除待办任务
    const li = document.getElementById('todo-' + id);
    li.parentNode.removeChild(li);
  });

如何添加新的待办任务？

// 前端代码（使用 JavaScript）

// 添加新的待办任务
fetch('/todos', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    title: '新的待办标题',
    completed: false
  })
})
  .then(res => res.json())
  .then(todo => {
    // 将新的待办任务添加到前端页面
    const todoList = document.getElementById('todo-list');
    const li = document.createElement('li');
    li.innerHTML = todo.title;
    li.id = 'todo-' + todo.id;

    todoList.appendChild(li);
  });

如何使用事件监听器更新待办状态？

// 前端代码（使用 JavaScript）

// 事件监听器更新待办状态
const todoList = document.getElementById('todo-list');

todoList.addEventListener('click', (e) => {
  if (e.target.tagName === 'LI') {
    // 获取待办任务 ID
    const id = e.target.id.split('-')[1];

    // 更新待办任务
    fetch('/todos/:id', {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        completed: !e.target.classList.contains('completed')
      })
    })
      .then(res => res.json())
      .then(todo => {
        // 更新前端页面
        if (todo.completed) {
          e.target.classList.add('completed');
        } else {
          e.target.classList.remove('completed');
        }
      });
  }
});