如何使用 Express.js 和 AngularJS 创建 RESTful API

阅读时长 7 分钟读完

简介

RESTful API 是一种基于 HTTP 协议的 API 设计风格,它使用 HTTP 请求方法(GET、POST、PUT、DELETE 等)来实现对资源的增删改查操作。Express.js 是一个基于 Node.js 平台的 Web 开发框架,它可以用来创建 Web 服务器和处理 HTTP 请求。AngularJS 是一个 JavaScript 框架,它可以用来构建单页面应用(SPA)和处理前端逻辑。本文将介绍如何使用 Express.js 和 AngularJS 创建 RESTful API。

步骤

步骤一:安装 Express.js 和 AngularJS

首先,我们需要安装 Express.js 和 AngularJS。可以使用 npm(Node.js 包管理器)来安装它们:

步骤二:创建 Express.js 应用

在创建 Express.js 应用之前,我们需要先安装一些必要的中间件,包括 body-parser、cors 和 morgan。可以使用以下命令来安装它们:

接下来,我们可以创建一个新的 Express.js 应用,并添加必要的中间件。可以使用以下代码来创建应用:

-- -------------------- ---- -------
----- ------- - -------------------
----- ---------- - -----------------------
----- ---- - ----------------
----- ------ - ------------------

----- --- - ----------

---------------------------
----------------
----------------------------

---------------- -- -- -
  ------------------- --------- -- ---- -------
---

这个应用会监听 3000 端口,并使用 body-parser、cors 和 morgan 中间件来处理请求和响应。

步骤三:创建 RESTful API

接下来,我们可以使用 Express.js 来创建 RESTful API。可以使用以下代码来创建一个简单的 API:

-- -------------------- ---- -------
--------------------- ----- ---- -- -
  ---------------- ---------
---

--------------------- ----- ---- -- -
  ----- ----- - -
    - --- -- ----- ------- --
    - --- -- ----- ----- --
    - --- -- ----- --------- --
  --
  ----------------
---

---------------------- ----- ---- -- -
  ----- ---- - ---------
  ------- - --
  ---------------
---

------------------------- ----- ---- -- -
  ----- -- - --------------
  ----- ---- - ---------
  ------- - -------------
  ---------------
---

---------------------------- ----- ---- -- -
  ----- -- - --------------
  ---------- -- ---
---

这个 API 包括了四个路由:GET /api/hello、GET /api/users、POST /api/users、PUT /api/users/:id 和 DELETE /api/users/:id。其中,GET /api/hello 用来返回一条简单的问候语;GET /api/users 用来返回一个包含三个用户对象的数组;POST /api/users 用来接收一个用户对象,并返回一个带有自增 ID 的用户对象;PUT /api/users/:id 用来接收一个 ID 和一个用户对象,并返回带有指定 ID 的用户对象;DELETE /api/users/:id 用来接收一个 ID,并返回一个带有指定 ID 的对象。

步骤四:创建 AngularJS 应用

接下来,我们可以使用 AngularJS 来创建一个简单的前端应用。可以使用以下代码来创建应用:

-- -------------------- ---- -------
--------- -----
----- ---------------
------
  ----- ----------------
  --------- -----------
  ------- --------------------------
  ------- ----------------------
-------
----- -----------------------
  ------ ------- -------
  ----
    --- --------------- -- --------- --------- -------
  -----
  ----- ----------------------
    ------ ----------- ------------------------
    ------- ----------------- -------------
  -------
-------
-------
-- -------------------- ---- -------
----- --- - ----------------------- ----

------------------------ ---------------- ------ -
  -------------- - ------- --------
  -------------------------------------------------------------------- -
    ------------ - --------------
  ---

  -------------- - ---------- -
    --------------------------------------------- --------------------------------------- -
      ---------------------------------
      -------------- - ---
    ---
  --
---

这个应用包括了一个包含问候语、用户列表和添加用户表单的 HTML 页面,以及一个使用 $http 服务来获取和添加用户的 AngularJS 控制器。其中,$http.get('http://localhost:3000/api/users') 用来获取用户列表;$http.post('http://localhost:3000/api/users', $scope.newUser) 用来添加新用户。

步骤五:运行应用

最后,我们可以使用以下命令来运行应用:

然后,我们可以在浏览器中访问 http://localhost:3000 来查看应用。当我们点击添加用户按钮时,应用会向后端发送 POST 请求并添加新用户。当我们刷新页面时,应用会向后端发送 GET 请求并获取用户列表。

总结

本文介绍了如何使用 Express.js 和 AngularJS 创建 RESTful API。我们使用 Express.js 创建了一个包含五个路由的 API,使用 AngularJS 创建了一个包含用户列表和添加用户表单的前端应用,并使用 $http 服务来与后端进行通信。这个应用可以用来学习如何构建基于 RESTful API 的 Web 应用,并可以作为开发 Web 应用的基础。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/655b3581d2f5e1655d561933

纠错
反馈