tags | projects | |||
---|---|---|---|---|
|
|
This guide walks you through the process of consuming a simple rest.js client that consumes a Spring MVC-based RESTful web service.
You will build a rest.js client that consumes a Spring-based RESTful web service. Specifically, the client will consume the service created in Building a RESTful Web Service with CORS.
The rest.js client will be accessed by opening the index.html
file in
your browser, and will consume the service accepting requests at:
http://rest-service.guides.spring.io/greeting
The service will respond with a JSON representation of a greeting:
{"id":1,"content":"Hello, World!"}
The client will render the ID and content into the DOM.
You can customize the greeting with an optional query string in the url:
http://localhost:8080/?User
The code will send a parameter to the REST endpoint and render a custom greeting into the DOM.
-
About 15 minutes
-
A favorite text editor
-
A modern web browser
-
An internet connection
-
Node.js and Git pre-installed
-
Bower installed as a global node.js JavaScript package
First, create a bower control file, .bowerrc
. This file tells bower
where to put the JavaScript dependencies. The .bowerrc
file should
be located at the root of the project ({project_id}/initial) and
formatted as JSON:
.bowerrc
link:complete/.bowerrc[role=include]
From a command prompt at the root of the project, run bower init
.
This will create a bower.json
file that describes each
JavaScript package
required by the project. Bower will ask for several
bits of information such as a project name, license, etc. If in doubt,
just press Enter
to accept the defaults.
Next, use Bower to install rest.js and an AMD module loader such as curl.js. From the command prompt, type:
bower install --save rest#~1
bower install --save curl#~0.8
Bower will install rest.js and curl.js into the directory we listed
in .bowerrc
. Since we specified the --save
option, bower will
store the package information in the bower.json
file.
Note
|
Bower should discover that rest.js depends on when.js and install a compatible version. |
When done, the bower.json
file should have a "dependencies"
object property that lists "curl" and "rest" as property names and
their semver information as values:
bower.json
link:complete/bower.json[role=include]
First, create a render function to inject data into an HTML document.
public/hello/render.js
link:complete/public/hello/render.js[role=include]
This AMD module uses simple DOM
querying and manipulation to inject text
into the document. To ensure that the DOM is not used before it is
ready, the render module imports and uses curl.js’s domReady
function-module.
Note
|
In a real application, you’ll want to use data binding or templating, rather than DOM manipulation as shown here. |
Next, create a module that will compose the application.
public/hello/main.js
link:complete/public/hello/main.js[role=include]
The main module reads the query string from the document’s location object, configures a rest.js mime client, and calls the REST endpoint.
rest.js returns a Promises/A+ promise,
which will call the render
function-module when the endpoint returns
data. The render
function expects the entity, but the rest.js client
normally returns a response object. The "rest/interceptor/entity"
interceptor plucks the entity from the response and forwards that
onto the render
function.
Next, create the boot script, run.js
:
public/run.js
link:complete/public/run.js[role=include]
This script configures the AMD loader: curl.config()
. The main
configuration property tells curl.js where to find the application’s
main module, which will be fetched and evaluated automatically.
The packages
config object tells curl.js where to find modules
in our application’s packages or in third-party packages.
Finally, create an index.html
file and add the following HTML:
public/index.html
link:complete/public/index.html[role=include]
The script
element loads curl.js and then loads an application boot
script named "run.js". The boot script initializes and configures
an AMD module environment and then starts the client-side application code.
To run the client, you’ll need to serve it from a web server to your browser. The Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. See Building an Application with Spring Boot for more information about installing and using the CLI.
In order to serve static content from Spring Boot’s embedded Tomcat server, you’ll also need to create a minimal amount of web application code so that Spring Boot knows to start Tomcat. The following app.groovy
script is sufficient for letting Spring Boot know that you want to run Tomcat:
app.groovy
link:complete/app.groovy[role=include]
You can now run the app using the Spring Boot CLI:
spring run app.groovy
Once the app starts, open http://localhost:8080 in your browser, where you see:
The ID value will increment each time you refresh the page.