通过构建 TODO APP 学习 JavaScript 中的 CRUD 操作

最新推荐文章于 2023-07-16 10:30:00 发布

allway2

最新推荐文章于 2023-07-16 10:30:00 发布

阅读量235

点赞数

文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/allway2/article/details/125144345

版权

今天我们将通过制作一个 Todo 应用程序来学习如何在 JavaScript 中进行 CRUD 操作。让我们开始吧🔥

这是我们今天制作的应用程序：

什么是 CRUD？

CRUD 代表 -

C：创建
R：读
U：更新
D：删除

CRUD 是一种允许您创建数据、读取数据、编辑数据和删除这些数据的机制。在我们的例子中，我们将制作一个 Todo 应用程序，因此我们将有 4 个选项来创建任务、读取任务、更新任务或删除任务。

了解 CRUD 原则

在开始教程之前，首先让我们了解一下 CRUD 原理。为此，让我们创建一个非常简单的社交媒体应用程序。

设置

对于这个项目，我们将遵循以下步骤：

创建 3 个名为 index.html、style.css 和 main.js 的文件
将 JavaScript 和 CSS 文件链接到 index.html
启动您的实时服务器

HTML

在 body 标记内，创建一个带有类名container的 div 。在那里，我们将有 2 个部分，left以及right👇

<body>
  <h1>Social Media App</h1>
  <div class="container">

    <div class="left"></div>
    <div class="right"></div>

  </div>
</body>

在左侧，我们将创建我们的帖子。在右侧，我们可以查看、更新和删除我们的帖子。现在，在 .left div 标签内创建一个表单👇

<div class="left">
  <form id="form">
    <label for="post"> Write your post here</label>
    <br><br>
    <textarea name="post" id="input" cols="30" rows="10"></textarea>
    <br> <br>
    <div id="msg"></div>
    <button type="submit">Post</button>
  </form>
</div>

在 HTML 中编写这段代码，以便我们可以在右侧显示我们的帖子👇

<div class="right">
  <h3>Your posts here</h3>
  <div id="posts"></div>
</div>

接下来，我们将在 head 标签中插入 font-awesome CDN 以在我们的项目中使用它的字体👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

现在，我们将制作一些带有删除和编辑图标的示例帖子。将此代码写在 id 为 #posts 的 div 中：👇

<div id="posts">
  <div>
    <p>Hello world post 1</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>

  <div >
    <p>Hello world post 2</p>
    <span class="options">
      <i class="fas fa-edit"></i>
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>
</div>

到目前为止的结果如下所示：

CSS

让我们保持简单。在样式表中写下这些样式：👇

body {
  font-family: sans-serif;
  margin: 0 50px;
}

.container {
  display: flex;
  gap: 50px;
}

#posts {
  width: 400px;
}

i {
  cursor: pointer;
}

现在，为帖子 div 和选项图标编写这些样式：👇

#posts div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.options {
  display: flex;
  gap: 25px;
}

#msg {
  color: red;
}

到目前为止的结果如下所示：👇

JavaScript 部分

根据这个流程图，我们将继续进行该项目。别担心，我会一路解释一切。👇

表单验证

首先，让我们在 JavaScript 中定位来自 HTML 的所有 ID 选择器。像这样：👇

let form = document.getElementById("form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");

然后，为表单构建一个提交事件监听器，以便它可以防止我们的应用程序的默认行为。同时，我们将创建一个名为formValidation. 👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("button clicked");

  formValidation();
});

let formValidation = () => {};

现在，我们将在我们的formValidation函数中创建一个 if else 语句。这将帮助我们防止用户提交空白输入字段。👇

let formValidation = () => {
  if (input.value === "") {
    msg.innerHTML = "Post cannot be blank";
    console.log("failure");
  } else {
    console.log("successs");
    msg.innerHTML = "";
  }
};

到目前为止的结果是：👇

如您所见，如果用户尝试提交空白表单，也会显示一条消息。

如何接受来自输入字段的数据

无论我们从输入字段中获得什么数据，我们都会将它们存储在一个对象中。让我们创建一个名为的对象data。并且，创建一个名为acceptData：👇

let data = {};

let acceptData = () => {};

主要思想是，使用该函数，我们从输入中收集数据并将它们存储在名为的对象中data。现在让我们完成构建我们的acceptData函数。

let acceptData = () => {
  data["text"] = input.value;
  console.log(data);
};

此外，当用户单击提交按钮时，我们需要该acceptData功能起作用。为此，我们将在函数的 else 语句中触发该formValidation函数。👇

let formValidation = () => {
  if (input.value === "") {
    // Other codes are here
  } else {
    // Other codes are here
    acceptData();
  }
};

当我们输入数据并提交表单时，在控制台上我们可以看到一个保存用户输入值的对象。像这样：👇

如何使用 JavaScript 模板文字创建帖子

为了在右侧发布我们的输入数据，我们需要创建一个 div 元素并将其附加到帖子 div。首先，让我们创建一个函数并编写以下代码行：👇

let createPost = () => {
  posts.innerHTML += ``;
};

反引号是模板文字。它将作为我们的模板。在这里，我们需要 3 样东西：父 div、输入本身以及带有编辑和删除图标的选项 div。让我们完成我们的功能👇

let createPost = () => {
  posts.innerHTML += `
  <div>
    <p>${data.text}</p>
    <span class="options">
      <i onClick="editPost(this)" class="fas fa-edit"></i>
      <i onClick="deletePost(this)" class="fas fa-trash-alt"></i>
    </span>
  </div>
  `;
  input.value = "";
};

在我们的acceptdata函数中，我们将触发我们的createPost函数。像这样：👇

let acceptData = () => {
  // Other codes are here

  createPost();
};

到目前为止的结果：👇

到目前为止，好家伙，我们几乎完成了项目 1。

如何删除帖子

为了删除帖子，首先，让我们在 javascript 文件中创建一个函数：

let deletePost = (e) => {};

接下来，我们deletePost使用 onClick 属性在所有删除图标中触发此函数。您将在 HTML 和模板文字上编写这些行。👇

<i onClick="deletePost(this)" class="fas fa-trash-alt"></i>

关键字将this引用触发事件的元素。在我们的例子中， thethis指的是删除按钮。

仔细看，删除按钮的父级是带有类名选项的跨度。跨度的父级是 div。所以，我们写parentElement了两次，这样我们就可以从删除图标跳转到 div 并直接定位它来删除它。

让我们完成我们的功能。👇

let deletePost = (e) => {
  e.parentElement.parentElement.remove();
};

到目前为止的结果：👇

如何编辑帖子

为了编辑帖子，首先，让我们在 JavaScript 文件中创建一个函数：

let editPost = (e) => {};

接下来，我们editPost使用 onClick 属性在所有编辑图标中触发此函数。您将在 HTML 和模板文字上编写这些行。👇

<i onClick="editPost(this)" class="fas fa-edit"></i>

关键字将this引用触发事件的元素。在我们的例子中，this指的是编辑按钮。

仔细看，编辑按钮的父级是带有类名选项的跨度。跨度的父级是 div。所以，我们写parentElement了两次，这样我们就可以从编辑图标跳转到 div 并直接将其定位以将其删除。

然后，无论帖子中的数据是什么，我们将其带回输入字段进行编辑。

让我们完成我们的功能。👇

let editPost = (e) => {
  input.value = e.parentElement.previousElementSibling.innerHTML;
  e.parentElement.parentElement.remove();
};

到目前为止的结果：👇

休息一下！

恭喜大家完成项目 1。现在，稍事休息！

如何使用 CRUD 操作制作待办事项应用程序

让我们开始制作项目 2，这是一个待办事项应用程序。

项目设置

对于这个项目，我们将遵循以下步骤：

创建 3 个名为 index.html、style.css 和 main.js 的文件
将 JavaScript 和 CSS 文件链接到 index.html
启动我们的实时服务器

HTML

在 HTML 文件中编写此启动代码：👇

<div class="app">
  <h4 class="mb-3">TODO App</h4>

  <div id="addNew" data-bs-toggle="modal" data-bs-target="#form">
    <span>Add New Task</span>
    <i class="fas fa-plus"></i>
  </div>
</div>

带有 id 的 divaddNew是将打开模式的按钮。跨度将显示在按钮上。这i是来自 font-awesome 的图标。

我们将使用引导程序来制作我们的模态。我们将使用模态添加新任务。为此，在 head 标签内添加引导 CDN 链接。👇

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
></script>

要查看创建的任务，我们将在 div 中使用 id 为 tasks 的 div，类名为 app。👇

<h5 class="text-center my-3">Tasks</h5>

<div id="tasks"></div>

在 head 标签内插入 font-awesome CDN 以在我们的项目中使用字体👇

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />

复制并粘贴以下来自引导模式的代码。它带有一个带有 3 个输入字段和一个提交按钮的表单。如果您愿意，您可以通过在搜索栏中输入“modal”来搜索 Bootstrap 的网站。

<!-- Modal -->
<form
  class="modal fade"
  id="form"
  tabindex="-1"
  aria-labelledby="exampleModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Add New Task</h5>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-label="Close"
        ></button>
      </div>
      <div class="modal-body">
        <p>Task Title</p>
        <input type="text" class="form-control" name="" id="textInput" />
        <div id="msg"></div>
        <br />
        <p>Due Date</p>
        <input type="date" class="form-control" name="" id="dateInput" />
        <br />
        <p>Description</p>
        <textarea
          name=""
          class="form-control"
          id="textarea"
          cols="30"
          rows="5"
        ></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
          Close
        </button>
        <button type="submit" id="add" class="btn btn-primary">Add</button>
      </div>
    </div>
  </div>
</form>

到目前为止的结果：👇

我们完成了 HTML 文件设置。让我们开始CSS。

CSS

在正文中添加这些样式，以便我们可以将我们的应用程序保持在屏幕的确切中心。

body {
  font-family: sans-serif;
  margin: 0 50px;
  background-color: #e5e5e5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

让我们使用类名 app 来设置 div 的样式。👇

.app {
  background-color: #fff;
  width: 300px;
  height: 500px;
  border: 5px solid #abcea1;
  border-radius: 8px;
  padding: 15px;
}

到目前为止的结果：👇

现在，让我们用 id 设置按钮的样式addNew。👇

#addNew {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(171, 206, 161, 0.35);
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.fa-plus {
  background-color: #abcea1;
  padding: 3px;
  border-radius: 3px;
}

到目前为止的结果：👇

如果你点击按钮，模态框会像这样弹出：👇

添加 JS

在 JavaScript 文件中，首先从 HTML 中选择我们需要使用的所有选择器。👇

let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let dateInput = document.getElementById("dateInput");
let textarea = document.getElementById("textarea");
let msg = document.getElementById("msg");
let tasks = document.getElementById("tasks");
let add = document.getElementById("add");

表单验证

我们不能让用户提交空白输入字段。因此，我们需要验证输入字段。👇

form.addEventListener("submit", (e) => {
  e.preventDefault();
  formValidation();
});

let formValidation = () => {
  if (textInput.value === "") {
    console.log("failure");
    msg.innerHTML = "Task cannot be blank";
  } else {
    console.log("success");
    msg.innerHTML = "";
  }
};

另外，在 CSS 中添加这一行：

#msg {
  color: red;
}

到目前为止的结果：👇

如您所见，验证正在运行。JavaScript 代码不允许用户提交空白输入字段，否则您会看到一条错误消息。

如何收集数据和使用本地存储

无论用户写入什么输入，我们都需要收集它们并将它们存储在本地存储中。

首先，我们使用名为的函数和名为acceptData的数组从输入字段中收集数据data。然后我们将它们推送到本地存储中，如下所示：👇

let data = [];

let acceptData = () => {
  data.push({
    text: textInput.value,
    date: dateInput.value,
    description: textarea.value,
  });

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

acceptData另请注意，除非您在表单验证的 else 语句中调用该函数，否则这永远不会起作用。跟着这里：👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
  }
};

您可能已经注意到模态不会自动关闭。为了解决这个问题，在表单验证的 else 语句中编写这个小函数：👇

let formValidation = () => {

  // Other codes are here
   else {

    // Other codes are here

    acceptData();
    add.setAttribute("data-bs-dismiss", "modal");
    add.click();

    (() => {
      add.setAttribute("data-bs-dismiss", "");
    })();
  }
};

如果您打开 Chrome 开发工具，请转到应用程序并打开本地存储。你可以看到这个结果：👇

如何创建新任务

为了创建一个新任务，我们需要创建一个函数，使用模板字面量来创建 HTML 元素，并使用一个映射将从用户那里收集的数据推送到模板中。跟着这里：👇

let createTasks = () => {
  tasks.innerHTML = "";
  data.map((x, y) => {
    return (tasks.innerHTML += `
    <div id=${y}>
          <span class="fw-bold">${x.text}</span>
          <span class="small text-secondary">${x.date}</span>
          <p>${x.description}</p>
  
          <span class="options">
            <i onClick= "editTask(this)" data-bs-toggle="modal" data-bs-target="#form" class="fas fa-edit"></i>
            <i onClick ="deleteTask(this);createTasks()" class="fas fa-trash-alt"></i>
          </span>
        </div>
    `);
  });

  resetForm();
};

另请注意，除非您在函数内部调用它，否则该函数永远不会运行acceptData，如下所示：👇

let acceptData = () => {
  // Other codes are here

  createTasks();
};

一旦我们完成了从用户那里收集和接受数据，我们需要清除输入字段。为此，我们创建了一个名为resetForm. 跟着：👇

let resetForm = () => {
  textInput.value = "";
  dateInput.value = "";
  textarea.value = "";
};

到目前为止的结果：👇

如您所见，卡片没有样式。让我们添加一些样式：👇

#tasks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

#tasks div {
  border: 3px solid #abcea1;
  background-color: #e2eede;
  border-radius: 6px;
  padding: 5px;
  display: grid;
  gap: 4px;
}

使用以下代码设置编辑和删除按钮的样式：👇

#tasks div .options {
  justify-self: center;
  display: flex;
  gap: 20px;
}

#tasks div .options i {
  cursor: pointer;
}

到目前为止的结果：👇

删除任务的功能

仔细看这里，我在函数里面加了3行代码。

第一行将从屏幕中删除 HTML 元素，
第二行将从数据数组中删除目标任务，
第三行将使用新数据更新本地存储。

let deleteTask = (e) => {
  e.parentElement.parentElement.remove();

  data.splice(e.parentElement.parentElement.id, 1);

  localStorage.setItem("data", JSON.stringify(data));

  console.log(data);
};

现在创建一个虚拟任务并尝试删除它。到目前为止的结果如下所示：👇

任务编辑功能

仔细看这里，我在函数里面加了5行代码。

第 1 行是针对我们选择编辑的任务
第 2、3 和 4 行是针对我们选择编辑的任务的值 [task, date, description]
第 5 行正在运行删除函数以从本地存储、HTML 元素和数据数组中删除选定的数据。

let editTask = (e) => {
  let selectedTask = e.parentElement.parentElement;

  textInput.value = selectedTask.children[0].innerHTML;
  dateInput.value = selectedTask.children[1].innerHTML;
  textarea.value = selectedTask.children[2].innerHTML;

  deleteTask(e);
};

现在，尝试创建一个虚拟任务并对其进行编辑。到目前为止的结果：👇

如何从本地存储中获取数据

如果刷新页面，您会注意到所有数据都已消失。为了解决这个问题，我们运行一个 IIFE（立即调用函数表达式）来从本地存储中检索数据。跟着：👇

(() => {
  data = JSON.parse(localStorage.getItem("data")) || [];
  console.log(data);
  createTasks();
})();

现在，即使您刷新页面，数据也会显示出来。

结论

恭喜您成功完成本教程。您已经学习了如何使用 CRUD 操作创建待办事项列表应用程序。现在，您可以使用本教程创建自己的 CRUD 应用程序。

这是你阅读到最后的奖牌。❤️

非常感谢建议和批评❤️

Learn CRUD Operations in JavaScript by Building TODO APP

allway2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过构建 TODO APP 学习 JavaScript 中的 CRUD 操作

今天我们将通过制作一个 Todo 应用程序来学习如何在 JavaScript 中进行 CRUD 操作。让我们开始吧🔥这是我们今天制作的应用程序：CRUD 代表 -CRUD 是一种允许您创建数据、读取数据、编辑数据和删除这些数据的机制。在我们的例子中，我们将制作一个 Todo 应用程序，因此我们将有 4 个选项来创建任务、读取任务、更新任务或删除任务。在开始教程之前，首先让我们了解一下 CRUD 原理。为此，让我们创建一个非常简单的社交媒体应用程序。对于这个项目，我们将遵循以下步骤：在 body 标记内，创.
复制链接

扫一扫