SpringBoot 2 RESTful Web 服务与 jQuery

开篇词

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

你将创建的应用

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

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

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 包

创建 jQuery 控制器

首先，我们将创建使用 REST 服务的 jQuery 控制器模块：
public/hello.js

$(document).ready(function() {
    $.ajax({
        url: "http://rest-service.guides.spring.io/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

该控制器模块表示为简单的 JavaScript 函数。它使用 jQuery 的 $.ajax() 方法消费 http://rest-service.guides.spring.io/greeting 上的服务。如果成功，则将为 data 分配接收到的 JSON，从而有效地使其成为 Greeting 模型对象。然后将 id 和 content 分别附加到 greeting-id 和 greeting-content DOM 元素中。
请注意，使用 jQuery promise .then()。这指示 jQuery 在 $.ajax() 方法完成时执行匿名函数，并从已完成的 AJAX 请求中传递 data 结果。

创建应用页

现在有了 jQuery 控制器，我们将创建 HTML 页面，该页面会将客户端加载到用户的浏览器中：
public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

请注意 <head> 部分中的以下两个脚本标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>

第一个脚本标签从内容分发网络（CDN）加载压缩后的 jQuery 库（jquery.min.js），因此我们无需下载 jQuery 并将其放置在项目中。它还会从应用的路径加载控制器代码（htllo.js）。
另请注意，<p> 标签包括类属性。

<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>

这些 class 属性帮助 jQuery 引用 HTML 元素并使用来自 REST 服务的 JSON 的 id 和 content 属性中的值更新文本。

运行客户端

要运行客户端，我们需要通过服务器将其提供给浏览器。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 服务的 jQuery 客户端。

参见

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

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

Snow Hide

发布了182 篇原创文章 · 获赞 12 · 访问量 1万+

私信关注