实现 RESTful Web服务

RESTful Web 服务是基于 REST 架构的 Web 服务,它是轻量级的,具有高度的可扩展性和可维护性,Web 应用非常适合于按照 RESTful 服务的统一标准进行开发,表 14.7 是通用的表示用户信息的 RESTful Web 服务标准。

image 2024 04 17 20 02 25 832
Figure 1. 表14.7 用户信息的 RESTful Web服务

RESTful(representational state transfer,REST) 是一种网络应用程序的设计风格和开发方式,基于 HTTP,可以使用 XML 格式定义或 JSON 格式定义。RESTful 适用于移动互联网厂商作为业务接口的场景。

下面以用户信息为例,学习如何使用 express 模块实现一个简单的 RESTful Web 服务。

【例14.5】实现用户信息的 RESTful 服务。(实例位置:资源包\源码\14\05)

实现本实例需要完成以下步骤。

(1) 创建虚拟数据库。本实例的用户信息存储在一个虚拟数据库中,该数据库使用 JSON 对象来表示,该对象中主要通过对数组的操作实现数据的查询、添加和删除功能,代码如下:

// 创建虚拟数据库
var DummyDB = (function () {
    // 声明变量
    var DummyDB = {};
    var storage = [];
    var count = 1;

    // 查询数据库
    DummyDB.get = function (id) {
        if (id) {
            // 变量的数据类型转换
            id = (typeof id == 'string') ? Number(id) : id;
            // 存储变量
            for (var i in storage)
                if (storage[i].id == id) {
                    return storage[i];
                }
        } else {
            return storage;
        }
    };
    // 添加数据
    DummyDB.insert = function (data) {
        data.id = count++;
        storage.push(data);
        return data;
    };
    // 删除数据
    DummyDB.remove = function (id) {
        // 变量的数据类型转换
        id = (typeof id == 'string') ? Number(id) : id;
        // 删除操作
        for (var i in storage)
            if (storage[i].id == id) {
                // 删除数据
                storage.splice(i, 1);
                // 删除成功
                return true;
            }
        // 删除失败
        return false;
    };

    // 返回数据库
    return DummyDB;
})();

(2) 使用 GET 请求获取数据。虚拟数据库创建完毕后,即可在 .js 文件中使用 app.get() 方法实现数据查询的 GET 请求,代码如下:

//查询所有用户信息
app.get('/user', function (request, response) {
     response.send(DummyDB.get());
});
//查询指定id的用户信息
app.get('/user/:id', function (request, response) {
     response.send(DummyDB.get(request.params.id));
});

(3) 使用 POST 请求添加数据。实现通过 POST 请求添加数据的功能时,首先需要一个添加页面,本实例中使用一个用户登录页面 addUser.html 来表示该页面,当用户在页面中输入用户名和密码并单击 “提交” 按钮后,会自动将用户输入的信息保存到虚拟数据库中。addUser.html 页面的代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>add User</title>
</head>
<body>
<form method="post">
    <fieldset style="width: 250px;margin: 0 auto;padding:20px">
        <legend style="color:#ff5722">登录账户</legend>
        <table>
            <tr>
                <td><label>用户名:</label></td>
                <td><input type="text" name="name"/></td>
            </tr>
            <tr height="40">
                <td><label>密&nbsp;&nbsp;&nbsp;码:</label></td>
                <td><input type="password" name="pass"/></td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit"
                           style="background: #41d7ea;width: 85px;height: 25px;border: 1px solid #e0ac5e;outline: none;border-radius: 5px;"/>
                </td>
            </tr>
        </table>
    </fieldset>
</form>
</body>
</html>

然后在 .js 文件中读取 addUser.html 页面,并发送服务器端响应数据;在 app.post() 方法中通过获取 POST 请求中的数据实现添加数据的功能,这里主要通过客户端请求对象的 body 对象的相应属性获取用户输入的用户名和密码,并使用创建虚拟数据库时定义的 insert() 方法来实现。代码如下:

app.get('/addUser', function (request, response) {
     fs.readFile('addUser.html', function (error, data) {
          response.send(data.toString());
     });
});
app.post('/addUser', function (request, response) {
     //声明变量
     var name = request.body.name;
     var pass = request.body.pass;
     //添加数据
     if (name && pass) {
          response.send(DummyDB.insert({
               name: name,
               pass: pass
          }));
     } else {
          throw new Error('error');
     }
});

运行 js.js 文件,在浏览器中输入 http://127.0.0.1:52273/addUser ,即可打开 addUser.html 页面,如图14.9所示。

image 2024 04 17 20 08 06 472
Figure 2. 图14.9 POST 请求添加用户信息

输入用户名和密码,单击 “提交” 按钮后,即可将数据保存到虚拟数据库中并显示,如图14.10所示。

image 2024 04 17 20 08 37 040
Figure 3. 图14.10 显示 POST 请求添加的信息