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

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

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

目录

  • 什么是 CRUD?
  • 了解 CRUD 原则
  • 如何使用 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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值