Spring Bootしてみるの続き。
この前の
Spring Bootしてみる その2 RESTの作り方
http://ameblo.jp/smeokano/entry-12238931176.html
で作ったREST APIを呼び出します。
ただ、呼び出すだけであれば、AJAXを使えばいいだけなので、
とりたてて書く必要ないのですが、
HTMLファイルなどを、ある特定のフォルダにいれると、
HTMLファイルもREST APIのプログラムと一緒に1つのjarファイルの中に入って、
そのJarファイルを起動するだけで、HTMLファイルにアクセスできるようになる
便利便利。その方法を、メモメモ
■index.htmlファイルをプロジェクト内の所定のところにつくる
開発環境STSの左方のパッケージエクスプローラーで、
プロジェクトの下の
src/main/resources の下の
static
の下に、index.htmlを作成します(staticのフォルダで右クリック
New→other...で出てきたダイアログで、Webの下にHTML Fileが
あるので、それを選択
そのindex.htmlに書きます
■index.html内部の編集
ここで、jqueryの$.ajaxを使って、REST APIを呼び出します。
こんな感じ(下の青字部分)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
var timeout_id = null;
$(function(){
// 1秒後に処理を行う設定
timeout_id = setTimeout(dataGet(), 1000);
});
function dataGet()
{
data = {};
hiduke=new Date();
data["id"] = hiduke.getTime();
$.ajax({
type: "GET",
url: "getdata",
data:data,
dataType:"text",
success: function(ret){
// この中で、データ表示する
$("#val").html(ret);
timeout_id = setTimeout(dataGet(), 1000);
},
error: function(XMLHttpRequest, textStatus, errorThrown){
errMsgProc(XMLHttpRequest, textStatus, errorThrown);
}
});
}
</script>
<title>照度モニター</title>
</head>
<body style="background-color: #ccffff">
<h1>照度モニター</h1>
<div style="text-align: center;font-size: 96pt;" id="val"></div>
</body>
</html>
なお、このとき、JQueryを(CDSでなく)直接参照しています。
その場合は、index.htmlが入っているのと同じフォルダに
jquery のjsファイル(例えばjquery-1.9.1.js)を置きます。
■デプロイ
できたら、あとは今までと同じ
プロジェクトを右クリック、
Run Asを出して、Maven cleanのあと、Maven install
プロジェクトのtargetフォルダの下にできたSNAPSHOTのjarファイルを
コピーして、Raspberry piに送ります。
そして、raspberry piで、
java -jar なんとかかんとかSNAPSHOT.jar
を起動すると、サーバーが起動します
■ブラウザで確認
Raspberry piのブラウザで
http://127.0.0.1:8080
をすると、index.htmlファイルの内容が見れます。