php 命令执行crud

by Zafar Saleem

通过Zafar Saleem

如何使用原始JavaScript执行CRUD操作(How to perform CRUD operations using vanilla JavaScript)

Nowadays there are a number of JavaScript frameworks around such as React, Angular, Vue and so on. They all offer a simple and easy approach towards the development of web applications, especially SPAs.

如今，周围有许多JavaScript框架，例如React，Angular，Vue等。 它们都为开发Web应用程序(尤其是SPA)提供了简单的方法。

However, many JavaScript learners tend to begin learning these frameworks and know little about how to develop similar apps in vanilla JavaScript.

但是，许多JavaScript学习者倾向于开始学习这些框架，而对如何在普通JavaScript中开发类似应用程序知之甚少。

One of the most basic operations in any application is CRUD (stands for Create, Read, Update, Delete). This is something we are going to achieve today. We will take a basic and good old example: a Todo app.

任何应用程序中最基本的操作之一是CRUD(代表创建，读取，更新，删除)。 这是我们今天要实现的目标。 我们将以一个基本且良好的旧示例为例：Todo应用程序。

Even though vanilla JavaScript will be used for this tutorial, we’ll use ES6 syntax instead of plain old JavaScript syntax. In order to accomplish that, we’ll use the babel transpiler to convert ES6/ES7 to ES5, and we’ll use webpack as a build tool.

即使本教程将使用原始JavaScript，我们也将使用ES6语法而不是普通的旧JavaScript语法。 为了实现这一点，我们将使用babel编译器将ES6 / ES7转换为ES5，并将webpack用作构建工具。

I am assuming that you already have the latest version of node.js on your computer. Setting up our environment is going to take some extra time, so no need to go into these details. Simply clone my boilerplate code from here (/zafar-saleem/hut) and run “npm install” to install all the dependencies.

我假设您已经在计算机上安装了最新版本的node.js。 设置我们的环境将花费一些额外的时间，因此无需深入了解这些细节。 只需从此处( /zafar-saleem/hut )复制我的样板代码，然后运行“ npm install”来安装所有依赖项。

The new files will go into the /src folder. So create a new file called Todo.js inside the /src/scripts/ folder and write the below code into that file.

新文件将进入/ src文件夹。 因此，在/ src / scripts /文件夹中创建一个名为Todo.js的新文件，并将以下代码写入该文件。

As you can see in the above code, we are creating a class Todo, and inside that class we are writing a constructor function. Even though JavaScript does not have classes by default, ES6 has classes (which is, in reality, syntactic sugar on top of the JavaScript prototype).

如您在上面的代码中看到的，我们正在创建一个Todo类，并且在该类内部我们编写了一个构造函数。 即使JavaScript默认没有类，ES6也具有类(实际上，这是JavaScript原型之上的语法糖)。

Now when we create a new instance of this class using the new keyword, the constructor function is automatically called. That is where we will add some attributes to the Todo class which we will be able to access in this entire class using the keywordthis.

现在，当我们使用new关键字创建此类的新实例时，将自动调用构造函数。 那就是我们将向Todo类添加一些属性的地方，我们可以使用关键字this在整个类中进行访问。

Now that we have above code, go ahead and import the above file in the src/index.js file and make a new instance of this class like below.

现在我们已经有了上面的代码，请继续将上面的文件导入src / index.js文件，并像下面这样创建该类的新实例。

Now we have some basic code in Todo.js. We also need some basic html code. Write the below code in index.html file in the root folder.

现在，我们在Todo.js中有了一些基本代码。 我们还需要一些基本的html代码。 将以下代码写入根文件夹中的index.html文件中。

Now that we have the basic html code, let’s go back to Todo.js and get the reference to our ‘.list-item’ container. Write the below code inside the constructor.

现在我们有了基本的html代码，让我们回到Todo.js并获取对我们的“ .list-item”容器的引用。 在构造函数中编写以下代码。

After getting the reference to “.list-item” element, I am calling the render function to render a list of items on the screen. This function does not exist yet so we are going to write it next.

获得对“ .list-item”元素的引用后，我将调用render函数在屏幕上呈现项目列表。 该功能尚不存在，因此我们接下来将要编写它。

But before writing the render function, we need some mock data that we are going to render. So for the purpose of this tutorial, we are going to use an array of objects. Write the below code at the top of the Todo.js file.

但是在编写render函数之前，我们需要一些要渲染的模拟数据。 因此，出于本教程的目的，我们将使用对象数组。 将以下代码写在Todo.js文件的顶部。

Now back to the render function: below is the entire render function.

现在回到render函数：下面是整个render函数。

In this function we are making sure that this.list container is empty, that is we do not want any item to be appended to existing items. The first line simply makes the container empty before appending new items.

在此函数中，我们确保this.list容器为空，即我们不希望将任何项目追加到现有项目中。 第一行只是在追加新项目之前使容器为空。

Next we are looping the mockData array that we created at the top of the Todo.js file using the forEach function. Inside the forEach callback function, we are first creating some DOM elements by calling createDomElements(item.id); function, and we are passing the current item’s id to that function. I will write this function next, but before getting there let’s finish writing this function.

接下来，我们使用forEach函数循环在Todo.js文件顶部创建的模拟数据数组。 在forEach回调函数中，我们首先通过调用createDomElements(item.id);创建一些DOM元素。 函数，我们将当前商品的ID传递给该函数。 接下来，我将编写此函数，但在到达该位置之前，请先完成此函数的编写。

Once it creates the new DOM element (the li element) with child elements (buttons in this case), it adds that li element into the Todo class as an attribute using the “this” keyword. Now we can access that li element throughout the Todo class so I am accessing that li element and adding the title using the insertAdjacentHTML() function.

一旦创建带有子元素(在本例中为按钮)的新DOM元素(li元素)，便使用“ this”关键字将该li元素作为属性添加到Todo类中。 现在我们可以在整个Todo类中访问该li元素，因此我要访问该li元素并使用insertAdjacentHTML()函数添加标题。

Next I am checking if the current item is completed or done. If it is, then I add a class to the current li element which adds a line-through style on the item.

接下来，我正在检查当前项目是否完成或完成。 如果是的话，那么我向当前的li元素添加一个类，从而在该项目上添加直通样式。

And finally I append that li element to this.list.

最后，我将该li元素附加到this.list。

Now let’s write the createDomElements() function which is below.

现在，让我们编写下面的createDomElements()函数。

This function seems to have plenty of code, but it is simple to understand. I simply create li elements, delete, edit and complete buttons. Then I add some classes to all of these buttons and set the data-id attribute and assign the current item’s id that we passed as an argument from the render function. Then I put text on these buttons (Edit, Delete and Complete) using “innerHTML”.

这个函数似乎有很多代码，但是很容易理解。 我只是创建li元素，删除，编辑和完成按钮。 然后，向所有这些按钮添加一些类，并设置data-id属性，并分配我们作为渲染函数的参数传递的当前项目的ID。 然后，使用“ innerHTML”在这些按钮(“编辑”，“删除”和“完成”)上放置文本。

Finally, I append these buttons to the li element which I later access in the render function to perform further operations.

最后，我将这些按钮附加到li元素上，稍后我会在render函数中对其进行访问以执行进一步的操作。

Now that we have the basic structure, if you run npm run dev and go to localhost:2770 in the browser, you should have the below items, an input field and button, and four items with their respective buttons.

现在我们有了基本的结构，如果您运行npm run dev并在浏览器中转到localhost：2770，您应该具有以下各项，一个输入字段和按钮以及四个具有各自按钮的项目。

Until now you should have the “R” part of CRUD — I am reading all the elements from mockData and placing them on the screen.

到现在为止，您应该拥有CRUD的“ R”部分-我正在从模拟数据中读取所有元素，并将它们放在屏幕上。

Now that the Read part is done, it is time begin working on the C part of CRUD. Write a function called create and add the below code.

既然完成了“读取”部分，就该开始研究CRUD的C部分了。 编写一个名为create的函数，并添加以下代码。

The Create function is pretty self explanatory: all it does is get the value from the text field. It creates a newItem object with attributes ID, title, done and date.

Create函数很容易解释：它所做的只是从文本字段获取值。 它创建一个具有属性ID，标题，完成日期和日期的newItem对象。

Finally, push that newItem into mockData array and empty the textfield and call the render function to render all the items with the newly created item.

最后，将该newItem推送到模拟数据数组中，并清空文本字段，然后调用render函数以使用新创建的项目渲染所有项目。

Now go ahead try this in your browser. Put some text in the text field. Press the add button — but you do not see any change. That is expected, because there is still one last part to this. Simply add an event listener to the “add” button inside the constructor and call the create function as below:

现在，继续在浏览器中尝试一下。 在文本字段中输入一些文本。 按下添加按钮-但您看不到任何更改。 这是可以预期的，因为这还有最后一部分。 只需将事件侦听器添加到构造函数中的“添加”按钮，然后按如下所示调用create函数：

Now try it in your browser and voilà. You have the new item at the bottom of the list.

现在，在浏览器中尝试一下。 您将新项目放在列表的底部。

Two parts of the CRUD operations are completed. The next is the D part which is Delete.

CRUD操作的两个部分已完成。 接下来是D部分，即Delete。

For deleting an item, let’s write a remove (delete is a reserved keyword in JavaScript and for that reason I named it remove) function below.

为了删除项目，让我们在下面编写一个remove(删除功能(在JavaScript中，delete是保留关键字，因此我将其命名为remove))。

This function is also quite simple: first get the id from the delete button element, which was added in the createDomElements function using the data-id attribute. Filter through mockData and place a check on the current item’s id with the delete button’s id. This check simply returns all items except the item this check returns true.

此函数也非常简单：首先从删除按钮元素中获取ID，该元素是使用data-id属性添加到createDomElements函数中的。 筛选模拟数据，并使用删除按钮的ID选中当前项目的ID。 此检查仅返回所有项目，但此检查返回true的项目除外。

After this operation, re-render all the items by calling the render function at the bottom.

完成此操作后，通过调用底部的render函数来重新渲染所有项目。

Things are looking good but hold on a minute: this function needs to be triggered by calling the delete button. As you might recall, this button was added dynamically in “createDomElements” function. Adding events to such elements are a little tricky. Since these items were not present when the DOM was loaded and were added later, adding the event listener directly to the delete, update and complete buttons is not going to work.

情况看起来不错，但请耐心等待：此功能需要通过调用删除按钮来触发。 您可能还记得，此按钮是动态添加到“ createDomElements”函数中的。 向此类元素添加事件有些棘手。 由于这些项目在加载DOM时不存在，并在以后添加，因此将事件侦听器直接添加到“删除”，“更新”和“完成”按钮将不起作用。

To make this happen, add the event listener to the document object and find the particular button (“delete” in this case) to perform the delete or remove operation.

为此，请将事件侦听器添加到文档对象，然后找到特定按钮(在这种情况下为“删除”)以执行删除或删除操作。

To call remove, the self word is used. Inside the callback function, the this keyword loses its reference to the Todo class. For that reason, create a new variable called self and assign the “this” keyword to it at the top of the construction.

要调用remove，将使用自身词。 在回调函数内部，this关键字将丢失对Todo类的引用。 因此，创建一个名为self的新变量，并在结构顶部为其分配“ this”关键字。

Inside the callback function, I check if the click element has a class ‘btn-delete’ — that is, is it a delete button? Then simply trigger the remove function and pass the event as a parameter. I use this inside of the remove function to get the id of the current clicked element to perform the delete operation.

在回调函数内部，我检查click元素是否具有“ btn-delete”类，即是否为删除按钮？ 然后只需触发remove函数并将事件作为参数传递。 我在remove函数中使用此函数来获取当前单击元素的ID，以执行删除操作。

The Update part is slightly complicated. It consists of two functions. The first is to render the edit form, which has a text field and update button. The second is to update the function that performs the update operation.

更新部分有点复杂。 它包含两个功能。 第一个是呈现编辑表单，该表单具有文本字段和更新按钮。 第二个是更新执行更新操作的功能。

All the above code does is to add and remove CSS classes to show and hide the edit form which is already in the DOM with the edit-popup class. Get the id from the edit button and place it on the update button. Iterate through mockData and check for the current item using its id. Put the title of the item from mockData into the textfield to edit it.

上面所有代码所做的就是添加和删除CSS类，以显示和隐藏DOM中已有edit-popup类的编辑表单。 从编辑按钮获取ID，并将其放在更新按钮上。 遍历模拟数据并使用其ID检查当前项目。 将项目标题从mockData放到文本字段中进行编辑。

To trigger this function, follow the same logic for delete to add an event listener, like this:

要触发此功能，请遵循与delete相同的逻辑以添加事件侦听器，如下所示：

Now it’s time to write the update operation. Follow the code below:

现在是时候编写更新操作了。 请遵循以下代码：

The first 2 lines of this function are to get the id of the item and value from the text field and put them in their respective variables. Then map through mockData, and place a check to find the item that needs to be updated based on the id. Once that item is found, replace the title with a new “itemTobeUpdate” title. Finally return that updated item from the map.

该函数的前两行是从文本字段中获取项目的ID和值，并将其放入各自的变量中。 然后通过模拟数据进行映射，并进行检查以根据ID查找需要更新的项目。 找到该项目后，将标题替换为新的“ itemTobeUpdate”标题。 最后从地图返回该更新的项目。

Once that operation is done, hide the edit-popup form by adding and removing the respective CSS classes. Then re-render mockData by calling the render function.

完成该操作后，通过添加和删除相应CSS类来隐藏edit-popup表单。 然后通过调用render函数来重新渲染模拟数据。

To trigger this function, add the below code inside the constructor.

要触发此功能，请在构造函数中添加以下代码。

Now all CRUD operations have been completed. There is one last step which is not part of CRUD but is part of the Todo app. That is to mark items as completed. The below function will achieve this.

现在，所有CRUD操作都已完成。 最后一步不是CRUD的一部分，而是Tod​​o应用程序的一部分。 那就是将项目标记为完成。 以下功能将实现此目的。

Again, follow the same pattern as the rest of the functions:

同样，遵循与其余功能相同的模式：

get the id from the button’s data-id attribute从按钮的data-id属性获取ID map through mockData and find the relevant item and set its done property to true and return that item通过模拟数据进行映射并找到相关项目，并将其done属性设置为true并返回该项目 finally, re-render mockData by calling the render function.最后，通过调用render函数来重新渲染模拟数据。

Again, use the same logic to trigger the delete function, and add the below code inside the constructor to set tasks as completed.

再次，使用相同的逻辑来触发delete函数，并在构造函数中添加以下代码以将任务设置为已完成。

Here is some basic CSS that I used for this tutorial — othing fancy.

这是我用于本教程的一些基本CSS，真是太棒了。

That is it for vanilla JavaScript CRUD operations! The next step is to covert this into an Angular and React app to see the difference and find out how convenient such frameworks are.

原始JavaScript CRUD操作就是这样！ 下一步是将其隐藏到Angular和React应用程序中，以了解两者之间的区别，并找出此类框架的便捷性。

To get the code and the complete project, clone below repository:

要获取代码和完整的项目，请克隆以下存储库：

/zafar-saleem/todo

/zafar-saleem/todo

翻译自: /news/crud-operations-using-vanilla-javascript-cd6ee2feff67/

php 命令执行crud