Spring Rest + HTMLでWebアプリケーション構築

Spring RestとHTMLでWebページの作成を行う方法です。
HTML(+ JavaScript)とサーバの通信はJSONでやり取りします。この構成で行うメリットはHTML(+JavaScript, CSS)とサーバ側で完全に分離して作業できることでしょうか。
サーバ側で用意するAPIさえ決まれば、デザイン側はデータを取得して解析、HTMLに反映となります。サーバ側はリクエストに対するレスポンスデータの作成等の処理を書けばいいわけです。
ちなみには私は両方やらされました。分けるメリットなし！！

では行きます。

元となるプロジェクトは「SpringでRestfulなプロジェクトの作り方」で作成したものです。

環境
1. servlet-context.xmlの編集
2. HTML、JavaScript、CSS作成
実行してみる

環境

Spring Framework 4.3.10.RELEASE
Java 8
jackson 2.9.0
tomcat 9.0
eclipse 4.7 Oxygen
HTML、JavaScript、CSSの格納場所

HTML等のファイルはwebapp配下に格納します。
今回はresthtmlというフォルダとします。
画像のようにwebappに「resthtml」の他にjsとCSSを格納するフォルダも追加します。

servlet-context.xmlの編集

\webapp\WEB-INF\spring\appServlet\servlet-context.xmlにHTML等の格納場所はここだよと記載してあげる必要があります。

追加するのは2行です。

xmlns:mvc=”http://www.springframework.org/schema/mvc”

と

<mvc:resources mapping=”/**” location=”resthtml” />

です。

たしかこのStackOverflowのページです。

servlet-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:beans="http://www.springframework.org/schema/beans"
    xmlns:context="http://www.springframework.org/schema/context"

xmlns:mvc=”http://www.springframework.org/schema/mvc”

    xsi:schemaLocation="
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd
        http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context-4.0.xsd">

    <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->

    <!-- Enables the Spring MVC @Controller programming model -->
    <annotation-driven />

<mvc:resources mapping=”/**” location=”/resthtml/” />

    <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
    <resources mapping="/resources/**" location="/resources/" />

    <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
    <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <beans:property name="prefix" value="/WEB-INF/views/" />
        <beans:property name="suffix" value=".jsp" />
    </beans:bean>

    <context:component-scan base-package="spring.rest.test" />

</beans:beans>

HTML、JavaScript、CSS作成

servlet-context.xmlの編集が終わったらブラウザに表示させるファイルたちを作っていきます。
CSSはめんどうなのでBootstrapを使います。また、HTMLの書き換えにjQueryも使うのでそれぞれDLしておきましょう。
作成するファイルは「RestTest.html」と「resttest.js」の2つです。

RestTest.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" media="screen" title="Stylesheet" />
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/resttest.js"></script>
<title>Insert title here</title>
</head>
<body>
<h1 id="rewrite" class="text-primary">5秒後にここが書き換わるん</h1>
</body>
</html>

resttest.js

$(function() {
    setTimeout(function() {
        $.ajax({
            type: "get",
            url: "/test/rest_get",
            data:"", // getなので何も設定しない
            contentType: 'application/json',
            dataType: "json"
        }).done(function(ret, textStatus, jqXHR){
            // 成功時
            // htmlを更新
            var value = ret.json; // map.put("json", "だよ");のキー(json)で値(だよ)を取得することができる
            $('#rewrite').html(value);
        }).fail(function(data, textStatus, errorThrown){
            // 失敗時
        }).always(function(data, textStatus, returnedObject){
            // 常に実行
        });
    }, 5000);
});