在现代 Web 开发中，创建一个 CRUD 应用程序是一个常见的任务。在这篇文章中，我们将介绍如何使用 AngularJS 和 Express.js 创建一个 CRUD 应用程序。
什么是 CRUD 应用程序？
CRUD 是“创建（Create）”，“读取（Read）”，“更新（Update）”和“删除（Delete）”的缩写。CRUD 应用程序是指允许用户创建、读取、更新和删除数据的应用程序。
AngularJS
AngularJS 是一个流行的前端框架，它允许我们创建动态的 Web 应用程序。它是由 Google 开发的，现在由社区维护。AngularJS 使用双向绑定和指令来实现数据绑定和 DOM 操作。
Express.js
Express.js 是一个流行的 Node.js Web 框架，它允许我们快速创建 Web 应用程序。它是基于中间件的，这意味着我们可以使用许多可重用的中间件来扩展我们的应用程序。
创建一个简单的 CRUD 应用程序
在本文中，我们将使用 AngularJS 和 Express.js 创建一个简单的 CRUD 应用程序。我们将使用 MongoDB 作为我们的数据库。
步骤 1：设置环境
在开始之前，我们需要安装 Node.js 和 MongoDB。
创建一个名为“crud-app”的目录，并在其中创建一个名为“server”的子目录。在“server”目录中，创建一个名为“index.js”的文件。在“crud-app”目录中，创建一个名为“client”的子目录。在“client”目录中，创建一个名为“index.html”的文件。
步骤 2：安装依赖项
在“crud-app”目录中打开终端，并运行以下命令：
npm install express body-parser mongoose cors --save
步骤 3：创建服务器
在“index.js”文件中，添加以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- -------- - -------------------- ----- --- - ---------- ----- ---- - ----- --------------------------- ---------------- ------------------------------------------------ - ---------------- ---- --- ----- ---------- - -------------------- ----------------------- -- -- - -------------------- -------- ---------- ----------- --------------- --- ---------------- -- -- - ------------------- -- ------- -- ----- ---------- ---
这将创建一个 Express.js 服务器，并连接到 MongoDB 数据库。我们将在下一步中创建我们的 API 路由。
步骤 4：创建 API 路由
在“server”目录中，创建一个名为“api.js”的文件。在“api.js”文件中，添加以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - ------------------------
-------------------------------- ---- -- -
--------------- ------ -- -
-- ----- -
-----------------
- ---- -
----------------
-
---
---
------------------------------------ ---- -- -
----- -- - --------------
----------------- ----- ----- -- -
---------------
---
---
------------------------------------- ---- -- -
----- ---- - --- ---------------
-----------
---------- -- -
---------------------- ------- ----- ----- ------------- ---
--
---------- -- -
---------------------------- --- ---- ---------
---
---
-------------------------------------------- ---- -- -
---------------------------- ----- ----- -- -
-- ------- -
-------------------------- -- --- --------
- ---- -
--------- - --------------
---------------- - ---------------------
---------- - ---------------
--------------------- -- -
-------------- -----------
--
---------- -- -
---------------------------- --- -----------
---
-
---
---
------------------------------------------- ---- -- -
------------------------ ---- ------------- -- ----- ----- -- -
-- ----- -
--------------
- ---- -
-------------- -----------
-
---
---
-------------- - -------这将创建我们的 API 路由，并定义了我们的 CRUD 操作。我们将在下一步中创建我们的模型。
步骤 5：创建模型
在“server”目录中，创建一个名为“item.model.js”的文件。在“item.model.js”文件中，添加以下代码：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - ----------------
----- ---- - --- --------
----- -
----- ------
--
------------ -
----- ------
--
------ -
----- ------
-
---
-------------- - ---------------------- ------这将创建一个名为“Item”的模型，我们将在 API 路由中使用它。
步骤 6：创建客户端
在“index.html”文件中，添加以下代码：
-- -------------------- ---- -------
--------- -----
----- -----------------
------
----------- -----------
------- ------------------------------------------------------------------------------------
------- ----------------------
-------
----- -------------------------------
-------- --------
----- ----------------------
------ ----------- --------------- ------------------ ---------
------ ----------- ---------------------- ------------------------- ---------
------ ------------- ---------------- ------------------- ---------
------- ----------------- -------------
-------
-------
----
-------------
--------------------
--------------
---------------
-----
--- --------------- -- -------
------ --------- -------
------ ---------------- -------
------ ---------- -------
----
------- -------------------------------------------
------- -----------------------------------------------
-----
-----
--------
-------
-------这将创建我们的客户端 UI。我们将在下一步中创建我们的 AngularJS 应用程序。
步骤 7：创建 AngularJS 应用程序
在“client”目录中，创建一个名为“app.js”的文件。在“app.js”文件中，添加以下代码：
-- -------------------- ---- -------
----- --- - ------------------------- ----
-------------------------------- -------- ------ -- -
--------------------------------------------
-------------- -- -
------------ - --------------
---
-------------- - -- -- -
----- ---- - -
----- ------------
------------ -------------------
------ ------------
--
------------------------------------------------- -----
-------------- -- -
--------------------------------------------
-------------- -- -
------------ - --------------
---
---
--
--------------- - -- -- -
--------------------------------------------------
-------------- -- -
----------- - -------------------
------------------ - --------------------------
------------ - --------------------
--------- - ------------------
---
--
----------------- - -- -- -
----- ---- - -
----- ------------
------------ -------------------
------ ------------
--
----------------------------------------------------------------- -----
-------------- -- -
--------------------------------------------
-------------- -- -
------------ - --------------
---
---
--
----------------- - -- -- -
---------------------------------------------------------
-------------- -- -
--------------------------------------------
-------------- -- -
------------ - --------------
---
---
--
---这将创建我们的 AngularJS 应用程序，并定义了我们的 CRUD 操作。
步骤 8：运行应用程序
在“crud-app”目录中打开终端，并运行以下命令：
node server/index.js
在浏览器中打开“http://localhost:3000/client/index.html”，即可看到我们的 CRUD 应用程序。
结论
在本文中，我们使用 AngularJS 和 Express.js 创建了一个简单的 CRUD 应用程序。我们使用 MongoDB 作为我们的数据库，并使用了双向绑定和指令来实现数据绑定和 DOM 操作。这个应用程序可以作为一个起点，帮助你开始构建更复杂的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67579a9f890bd9faa4363d34