今天我们将通过制作一个 Todo 应用程序来学习如何在 JavaScript 中进行 CRUD 操作。让我们开始吧🔥
这是我们今天制作的应用程序:
目录
- 什么是 CRUD?
- 了解 CRUD 原则
- 如何使用 CRUD 操作制作待办事项应用程序
什么是 CRUD?
![](https://img-blog.csdnimg.cn/img_convert/196d533d6bd1d21b81b22bdd2c2b79f5.png)
CRUD 代表 -
- C:创建
- R:读
- U:更新
- D:删除
![](https://img-blog.csdnimg.cn/img_convert/3e56aa1576f3aa482c5545449e6ab98d.png)
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>
到目前为止的结果如下所示:
![](https://img-blog.csdnimg.cn/img_convert/4313b4068faa2514d1a4d2460c70d0a8.png)
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 部分
根据这个流程图,我们将继续进行该项目。别担心,我会一路解释一切。👇
![](https://img-blog.csdnimg.cn/img_convert/1786728058d322649fabf2fd11949f93.png)
表单验证
首先,让我们在 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();
}
};
当我们输入数据并提交表单时,在控制台上我们可以看到一个保存用户输入值的对象。像这样:👇
![](https://img-blog.csdnimg.cn/img_convert/e8c81b7765a46974cf1959348a1a6b04.png)
如何使用 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>
到目前为止的结果:👇
![](https://img-blog.csdnimg.cn/img_convert/8424980384f1366f96e5270b048bfb23.png)
我们完成了 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;
}
到目前为止的结果:👇
![](https://img-blog.csdnimg.cn/img_convert/2945e8e78babdf02ad03e9a7611a2f96.png)
现在,让我们用 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;
}
到目前为止的结果:👇
![](https://img-blog.csdnimg.cn/img_convert/9773d3922735bf9883ed177b91d4e4d6.png)
如果你点击按钮,模态框会像这样弹出:👇
添加 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 开发工具,请转到应用程序并打开本地存储。你可以看到这个结果:👇
![](https://img-blog.csdnimg.cn/img_convert/ed86fb26aea027bdc5d99d3eb76e5b98.png)
如何创建新任务
为了创建一个新任务,我们需要创建一个函数,使用模板字面量来创建 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 = "";
};
到目前为止的结果:👇
![](https://img-blog.csdnimg.cn/img_convert/171164ac1ea4a7f893af576cfbd64ade.png)
如您所见,卡片没有样式。让我们添加一些样式:👇
#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;
}
到目前为止的结果:👇
![](https://img-blog.csdnimg.cn/img_convert/a223127f4ce9a5f464fea4cb07c2fb9c.png)
删除任务的功能
仔细看这里,我在函数里面加了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();
})();
现在,即使您刷新页面,数据也会显示出来。
结论
![](https://img-blog.csdnimg.cn/img_convert/5ac187e7f85a62d2b7b4970e328a7625.png)
恭喜您成功完成本教程。您已经学习了如何使用 CRUD 操作创建待办事项列表应用程序。现在,您可以使用本教程创建自己的 CRUD 应用程序。
这是你阅读到最后的奖牌。❤️