SpringBoot 2 RESTful Web 服务与 rest.js

最新推荐文章于 2023-02-13 20:40:15 发布

Snow Hide（雪诺海德）

最新推荐文章于 2023-02-13 20:40:15 发布

阅读量356

点赞数

分类专栏： Spring 入门指南文章标签： rest.js 访问 REST Spring rest.js 访问 RESTful 服务 bower 安装使用 AMD 渲染模块

原文链接：https://spring.io/guides/gs/consuming-rest-restjs/

版权

Spring 入门指南专栏收录该内容

69 篇文章 28 订阅

订阅专栏

开篇词

该指南将引导你编写一个简单的 AngularJS 客户端，该客户端使用基于 Spring MVC 的 RESTful Web 服务。

你将创建的应用

我们将构建一个使用基于 Spring 的 RESTful Web 服务的 rest.js 客户端。具体来说，客户端将消费使用 CQRS 构建 RESTful Web 服务（尽请期待～）中所创建的服务。

可以通过在浏览器中打开 index.html 文件来访问 rest.js 客户端，并将在以下位置使用接受请求的服务：

http://rest-service.guides.spring.io/greeting

该服务将以 JSON 表示形式的问候进行响应：

{"id":1,"content":"Hello, World!"}

客户端会将 ID 和内容呈现到 DOM 中。

我们可以使用 url 汇总的可选查询字符串来自定义问候语：

http://localhost:8080/?User

该代码将向 REST 端点发送一个参数，并将自定义问候语呈现到 DOM 中。

rest-service.guides.spring.io 上的服务正在运行 CORS 指南（尽请期待～）中的代码，并作了一些小的改动：因为 /app 使用的是 @CrossOrigin，没有域名，因此可以对 /greeting 端点进行开放访问。

你将需要的工具

大概 15 分钟左右；
你最喜欢的文本编辑器
现代浏览器
互联网连接
预安装的 Node.js 和 Git
bower 作为全局 node.js 的 JavaScript 包

创建 bower 配置文件

首先，创建一个 bower 控制文件 .bowerrc。该文件告诉 bower 将 JavaScript 依赖放在何处。.bowerrc 文件应位于项目的根目录（{project_id}/initial），格式为 JSON：
.bowerrc

{
	"directory": "public/lib"
}

命令行切换至项目根路径，运行 bower init。这将创建一个 bower.json 文件，该文件描述项目所需的每个 JavaScript 包。Bower 将询问一些信息，例如项目名称、许可证等等。如果有疑问，只需按下 Enter 键接受默认选项。

接下来，使用 Bower 安装 rest.js 和 AMD 模块加载器，例如 curl.js。在命令行下，键入：

bower install --save rest#~1

bower install --save curl#~0.8

Bower 会将 rest.js 和 curl.js 安装到 .bowerrc 中列出的目录中。由于我们指定了 --save 选项，因此 bower 会将包信息存储在 bower.json 文件中。

Bower 应该发现 rest.js 取决于 when.js 并安装兼容版本。

完整后，bower.json 文件应具有 “dependencies” 对象属性，该属性将 “curl” 和 “rest” 作为属性名称列出，并将它们的 semver 信息作为值列出：
bower.json

{
  "name": "consuming-rest-rest.js",
  "version": "0.0.1",
  "authors": [
    "John Hann <jhann@gopivotal.com>"
  ],
  "license": "http://www.apache.org/licenses/LICENSE-2.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "public/lib",
    "test",
    "tests"
  ],
  "dependencies": {
    "curl": "~0.8",
    "rest": "~1"
  }
}

创建渲染模块

首先，创建一个渲染函数以将数据注入 HTML 文档。
public/hello/render.js

define(function (require) {

    var ready = require('curl/domReady');

    return render;

    function render (entity) {
        ready(function () {
            var idElement, nameElement;

            idElement = document.querySelector('[data-name="id"]');
            nameElement = document.querySelector('[data-name="content"]');

            idElement.textContent += entity.id;
            nameElement.textContent += entity.content;
        });
    }

});

该 AMD 模块使用简单的 DOM 查询和操作将文本注入文档中。为了确保在准备就绪之前不使用 DOM，渲染模块会导入并使用 curl.js 的 domReady 功能模块。

在实际的应用中，我们会使用 data binding 或 templating，而不是使用该处所示的 DOM 操作。

创建应用聚合模块

接下来，创建一个将组成应用的模块。
public/hello/main.js

define(function (require) {

    var rest = require('rest');
    var mime = require('rest/interceptor/mime');
    var entity = require('rest/interceptor/entity');
    var render = require('./render');

    var endpointUrl, name, client;

    endpointUrl = 'http://rest-service.guides.spring.io/greeting';
    name = document.location.search.slice(1);

    client = rest
        .chain(mime, { mime: 'application/json' })
        .chain(entity);

    client({ path: endpointUrl, params: { name:  name } })
        .then(render);

});

主模块从文档的位置对象读取查询字符串，配置 rest.js mime 客户端，然后调用 REST 端点。

rest.js 返回 Promises/A+ promise，当端点返回数据时，其将调用 render 函数模块。render 函数需要该实体，但 rest.js 客户端通常返回一个响应对象。“rest/拦截器/实体” 拦截器从响应体中提取实体，并将其转发到 render 函数。

创建应用页

最后，创建一个 index.html 文件并添加以下 HTML：
public/index.html

<!doctype html>
<html>
    <head>
        <title>Hello rest.js</title>
        <script data-curl-run="run.js" src="lib/curl/src/curl.js"></script>
    </head>
    <body>
        <div>
            <p data-name="id">The ID is </p>
            <p data-name="content">The content is </p>
        </div>
    </body>
</html>

script 元素加载 curl.js，然后加载名为 “run.js” 的应用启动脚本。引导脚本会初始化和配置 AMD 模块环境，然后启动客户端应用代码。

运行客户端

要运行客户端，我们需要通过服务器将其提供给浏览器。Spring Boot CLI（命令行界面）包括嵌入式 Tomcat 服务器，提供了一种简单的方法来提供 Web 内容。有关安装和使用 CLI 的更多信息，请参见使用 Spring Boot 构建应用。

为了从 Spring Boot 的嵌入式 Tomcat 服务器提供静态内容，我们还需要创建最少的 Web 应用代码，以便 Spring Boot 直到如何启动 Tomcat。下面的 app.groovy 脚本足以让 Spring Boot 知道你要运行 Tomcat：
app.groovy

@Controller class JsApp { }

我们现在可以使用 Spring Boot CLI 运行该应用：

spring run app.groovy

应用启动后，在浏览器中访问 http://localhost:8080，我们会在其中看到：

每次刷新页面时，ID 直都会增加。

概述

恭喜你！我们刚刚开发了一个消费基于 Spring 的 RESTful Web 服务的 rest.js 客户端。

参见

以下指南也可能会有所帮助：

想看指南的其他内容？请访问该指南的所属专栏：《Spring 官方指南》

Snow Hide（雪诺海德）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot 2 RESTful Web 服务与 rest.js

开篇词该指南将引导你编写一个简单的 AngularJS 客户端，该客户端使用基于 Spring MVC 的 RESTful Web 服务。 你将创建的应用我们将构建一个使用基于 Spring 的 RESTful Web 服务的 rest.js 客户端。具体来说，客户端将消费使用 CQRS 构建 RESTful Web 服务（尽请期待～）中所创建的服务。可以通过在浏览器中打开 i...
复制链接

扫一扫