简介
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 包管理器）来安装它们：
npm install express angular
步骤二：创建 Express.js 应用
在创建 Express.js 应用之前，我们需要先安装一些必要的中间件，包括 body-parser、cors 和 morgan。可以使用以下命令来安装它们：
npm install body-parser cors morgan
接下来，我们可以创建一个新的 Express.js 应用，并添加必要的中间件。可以使用以下代码来创建应用：
// javascriptcn.com 代码示例
const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');
const app = express();
app.use(bodyParser.json());
app.use(cors());
app.use(morgan('combined'));
app.listen(3000, () => {
console.log('Server listening on port 3000');
});这个应用会监听 3000 端口，并使用 body-parser、cors 和 morgan 中间件来处理请求和响应。
步骤三：创建 RESTful API
接下来，我们可以使用 Express.js 来创建 RESTful API。可以使用以下代码来创建一个简单的 API：
// javascriptcn.com 代码示例
app.get('/api/hello', (req, res) => {
res.send('Hello, World!');
});
app.get('/api/users', (req, res) => {
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' },
];
res.send(users);
});
app.post('/api/users', (req, res) => {
const user = req.body;
user.id = 4;
res.send(user);
});
app.put('/api/users/:id', (req, res) => {
const id = req.params.id;
const user = req.body;
user.id = parseInt(id);
res.send(user);
});
app.delete('/api/users/:id', (req, res) => {
const id = req.params.id;
res.send({ id });
});这个 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 来创建一个简单的前端应用。可以使用以下代码来创建应用：
// javascriptcn.com 代码示例
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="myCtrl">
<h1>{{ message }}</h1>
<ul>
<li ng-repeat="user in users">{{ user.name }}</li>
</ul>
<form ng-submit="addUser()">
<input type="text" ng-model="newUser.name">
<button type="submit">Add User</button>
</form>
</body>
</html>// javascriptcn.com 代码示例
const app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$scope.message = 'Hello, World!';
$http.get('http://localhost:3000/api/users').then(function(response) {
$scope.users = response.data;
});
$scope.addUser = function() {
$http.post('http://localhost:3000/api/users', $scope.newUser).then(function(response) {
$scope.users.push(response.data);
$scope.newUser = {};
});
};
});这个应用包括了一个包含问候语、用户列表和添加用户表单的 HTML 页面，以及一个使用 $http 服务来获取和添加用户的 AngularJS 控制器。其中，$http.get('http://localhost:3000/api/users') 用来获取用户列表；$http.post('http://localhost:3000/api/users', $scope.newUser) 用来添加新用户。
步骤五：运行应用
最后，我们可以使用以下命令来运行应用：
node app.js
然后，我们可以在浏览器中访问 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