//tips
//smart contract
掲示板アプリ作成に伴うindex.ejsの生成。ローカルストレージへの対応を組み込んでいる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function init(){
//localStorage.getItemで引数にキーを指定して呼び出し
//キーと値をペアで保存されているのでキーを指定すれば値も取得できる
var id=localStorage.getItem('id');
//idがなければログインページへ
if(id==null){
//現在表示されているページはlocationオブジェクトのhrefという値で設定されている
location.href='./login';
}
//idを取り出せた場合、その値を設定
document.querySelector('#id').textContent='ID:'+id;
//form内の非表示フィールドvalueへの値設定
//どのIDクライアントのform送信かわかるようにするため
document.querySelector('#id_input').value=id;
}
</script>
</head>
<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>※メッセージは最大10個まで保管されます。</p>
<form method="post" action="/">
<p id="id"></p>
<input type="hidden" id="id_input" name="id">
<div class="form-group">
<label for="msg">Message</label>
<input type="text" name="msg" id="msg" class="form-control">
</div>
<input type="submit" value="送信" class="btn btn-primary">
</form>
<table class="table">
<% for(var i in data){ %>
<%- include('data_item',{val:data[i]}) %>
<% } %>
</table>
</div>
</body>
</html>
次にテーブルのテンプレート作成。
<%# メッセージテーブルに使用するパーシャルテンプレート作成 %>
<%# dataより抽出されたものをincludeからこちらに値を送りテンプレートを作成させる %>
<%# 値はjson形式のためjsオブジェクトに変換する必要がある %>
<% if(val !=''){ %>
<% var obj=JSON.parse(val); %>
<tr>
<th><%= obj.id %></th>
<td><%= obj.msg %></td>
</tr>
<% } %>
これとは別にログインページの作成も行う。ログインページで行うのはidを入力してもらい、それを保存すること。保存先はローカルストレージ(webブラウザ)となっている。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title>ミニメッセージボード</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<%# ローカルストレージからIDの値を取り出し、それに応じて処理 %>
<script>
function setId(){
//id_inputのDOMオブジェクトから値を取り出し保存
var id=document.querySelector('#id_input').value;
localStorage.setItem('id',id);
location.href='/';
}
</script>
</head>
<body class="container" onload="init();">
<header>
<h1 class="display-4">メッセージボード</h1>
</header>
<div role="main">
<p>あなたのログインネームを入力ください。</p>
<div class="form-group">
<label for="id_input">Login name:</label>
<input type="text" id="id_input" class="form-control">
</div>
<%# ボタンが押されたら関数を実行し保存 %>
<button onclick="setId();" class="btn btn-primary">送信</button>
</div>
</body>
</html>
データ保存用のtxtファイルも作成。
ここからはapp.jsにてメインプログラムを書いていく。
そして npm install ejsにてこのフォルダにもejsを導入。node app.jsで出来栄えを確認。
