使用 JavaScript 将数据存储在数据库中

在开发我的任务列表应用程序时，我实现的一个非常酷的功能是能够将数据存储在数据库中。使用 JavaScript，我创建了一个将用户数据发送到服务器的函数。这不仅确保了数据被安全地保存，还为用户提供了流畅且愉快的体验。

addInput 函数

addInput 函数是此功能的主要组件之一。它是一个异步函数，接受一个名为 newText 的字符串参数。这个文本代表用户想要添加到列表中的新任务。在将信息发送到服务器之前，我会检查文本是否为空。这对于避免在数据库中存储无效条目至关重要。

async function addInput(newText: string) {
  // 检查文本是否为空
  if (newText.trim() === "") {
    return;
  }
  const newInput = {
    newtext: newText,
    isChecked: false
  };
​
  try {
    const response = await fetch("https://yoururl.com/tasks", {
      method: 'POST',
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(newInput)
    });
​
    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }
​
    SetInput(""); // 成功提交后清除输入字段
​
  } catch (error) {
    console.error("Error adding tasks:", error);
  }
  listInput(); // 更新显示的任务列表
}

代码解释

1. 文本验证：首先，我检查 newText 字符串是否为空或仅包含空白字符。如果是，函数立即返回，避免不必要的操作。

2. 创建 newInput 对象：接下来，我创建一个包含任务和布尔值 isChecked（初始设置为 false）的 newInput 对象。

3. 发送请求：我使用 fetch 函数向服务器发送 HTTP POST 请求。请求头设置表明我正在发送 JSON 数据。

4. 处理响应：发送请求后，我检查服务器的响应是否成功。如果不成功，我抛出一个错误以适当处理失败情况。

5. 清除和更新：成功提交后，我调用 SetInput("") 清除输入字段，并调用 listInput() 更新界面上的任务列表。

辅助函数

除了 addInput，还有两个辅助函数在界面中起着关键作用：

SetInput

SetInput 函数在添加新任务后清除文本输入字段。这样可以确保字段为空并准备好接受新条目。它通常与 React 状态结合使用，以控制输入字段的值。

function SetInput(value: string) {
  setInputValue(value); // 更新输入值状态
}

listInput

listInput 函数负责在用户界面中更新和渲染任务列表。通过从服务器获取任务，我可以确保任何更改都能立即在界面中反映出来。

async function listInput() {
  try {
    const response = await fetch("https://yoururl.com/tasks");
    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }
    const tasks = await response.json();
    setTasks(tasks); // 更新任务列表状态
  } catch (error) {
    console.error("Error listing tasks:", error);
  }
}

结论

这些函数协同工作，为我的任务列表应用程序提供了流畅且高效的用户体验。实现这一逻辑让我学到了很多关于状态管理和异步交互的知识。

希望这个例子能够为你提供灵感或作为一个起点！