Spring RestとHTMLでWebページの作成を行う方法です。
HTML(+ JavaScript)とサーバの通信はJSONでやり取りします。この構成で行うメリットはHTML(+JavaScript, CSS)とサーバ側で完全に分離して作業できることでしょうか。
サーバ側で用意するAPIさえ決まれば、デザイン側はデータを取得して解析、HTMLに反映となります。サーバ側はリクエストに対するレスポンスデータの作成等の処理を書けばいいわけです。
ちなみには私は両方やらされました。分けるメリットなし！！
では行きます。
元となるプロジェクトは「SpringでRestfulなプロジェクトの作り方」で作成したものです。
環境
- 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);
});
実行してみる
出来上がったら実際に動作確認です。
5秒後にサーバ側からJSON(キー：json, 値：だよ)を取得し、HTMLを書き換えます。
5秒後にこうなります
コメント