Quantcast
Channel: コンピューターの勉強会・研修ネタ
Viewing all articles
Browse latest Browse all 66

Spring Bootしてみる その4 HTML+JSでREST API呼び出し

$
0
0

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ファイルの内容が見れます。


Viewing all articles
Browse latest Browse all 66

Trending Articles