//tips
//smart contract
作成したテンプレートの一部を部品化することも始める。
まずはテーブル部分を部品化したファイルを作成。
<tr>
<th><%= id %></th>
<td><%= key %></td>
<td><%= val[0] %></td>
</tr>
これをindex.ejsから利用できるようにしていく。
<table class="table">
<% var id=0; %>
<% for(var key in data){ %>
<%- include('data_item',
{id:++id,key:key,val:[data[key]]}) %>
<% } %>
</table>
パーシャルを読み込んで組み込むためにincludeを使用。
include(ファイル名,{受け渡す値})
<%- %>はエスケープ処理をせずにHTMLとして出力をおこなってくれるもの。通常のものはHTMLタグのテキストとして出力される。
Include関数の第一引数は、パーシャルファイル名、第二引数にはパーシャル側に渡す値をまとめたオブジェクトをとる。
App.jsにてejsをレンダリングする箇所にもfilename:'data_item’,としてパーシャルファイル名を記載する必要がある。
function response_index(request,response){
var msg="これはindexページです。";
var content =ejs.render(index_page,{
title:"index",
content:msg,
data:data,
filename:'data_item',
});
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
}
パーシャル自体も下記のようにアップデートできる。
<table class="table table-dark">
<tr>
<th><%= id %>:
<%= key %></th>
</tr>
<% for(var i in val){ %>
<tr>
<td><%= val[i] %></td>>
</tr>
<% } %>
</table>
Node.jsはサーバをプログラムで作成・実行し、待ち受け状態にしており、常にプログラムが実行中の状態になっている。なので、グローバル変数としてあるdataは、常にその値を保持されており、いつ誰がアクセスしても、同じ値を入手する事ができる。
これから簡易伝言ページも作成できる。
App.jsを下記のような形にして対応。
//indexのアクセス処理
function response_index(request,response){
//POSTアクセス時の処理
if(request.method=='POST'){
var body='';
request.on('data',(data)=>{
body += data;
});
request.on('end',()=>{
data=qs.parse(body);
write_index(request,response);
});
}else{
write_index(request,response);
}
}
//index表示の作成
function write_index(request,response){
var msg="※伝言を表示します。";
var content=ejs.render(index_page,{
title:"Index",
content:msg,
data:data
});
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
}
個人の情報の記憶として、クッキーが考えられるが、これはwebブラウザに用意されている、サーバーから送られた値を保管しておく仕組みのこと。
この情報は主にヘッダー情報としてやりとりされており、サーバーからヘッダー情報としてクライアントにクッキー情報が送られると、ブラウザはその情報を保管。サーバーにアクセスする際に、その保管していたクッキー情報をヘッダーに追加して送付。サーバはそのクッキー情報を使って必要な処理を行い、ヘッダーとして情報を返すということを繰り返している。
クッキーは日本語保管はできないので特殊な形への変換が必要となる。
これらの仕組みを組み込んでみる。
//追加データ用変数
var data={ msg:'no message...' };
//indexのアクセス処理
function response_index(request,response){
//POSTアクセス時の処理
if(request.method=='POST'){
var body='';
request.on('data',(data)=>{
body += data;
});
request.on('end',()=>{
data=qs.parse(body);
//クッキーの保存
setCookie('msg',data.msg,response);
write_index(request,response);
});
}else{
write_index(request,response);
}
}
//index表示の作成
function write_index(request,response){
var msg="※伝言を表示します。";
var cookie_data=getCookie('msg',request);
var content=ejs.render(index_page,{
title:"Index",
content:msg,
data:data,
cookie_data:cookie_data,
});
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
}
//クッキーの値を設定
//下記のように引数としてresponseを入れることでresponse.setHeader
//でヘッダー情報として書き込める
function setCookie(key,value,response){
var cookie=escape(value);//エスケープ処理でクッキーに値を保存できるようにする
response.setHeader('Set-Cookie',[key + '=' + cookie]);
//これでクッキーとしてヘッダー情報に追加できる
}
//クッキーの値を取得
function getCookie(key,request){
//条件?値1:値2;
//cookieの値がundefined出ないなら取り出し
var cookie_data=request.headers.cookie != undefined ?
request.headers.cookie:'';
var data = cookie_data.split(';');
for(var i in data){
//data[i]のテキストの前後の余白を除き、key+'='で始まっているかを確認
//substringでキー＝の後のテキスト部分を取り出し、それをunescape通常テキスト化している
if(data[i].trim().startsWith(key+'=')){
var result =data[i].trim().substring(key.length +1);
return unescape(result);
}
}
return '';
}
クッキーでは単語単位の情報は記憶できるがそれ以上のものはセッションでの対応が必要になる。
ここからphpの領域と被ってくる。気になっていたphp adminなどのDBに関わる部分をどう処理するのかは気になっていたところ。
Node.jsにはセッションの取り扱い機能はないので別途フレームワークを導入する必要があるとのこと。
テキストファイルにデータを保存しておき、それを読み込んで使うような方法もできるのでそちらも検討する。
クライアント側のローカルストレージを利用する方法もあるがそれはクライアント側でしか動かないという問題がある。そのためサーバ側のnode.jsではうまく扱えず、うまく連携できるプログラムを用意する必要がある。
簡単な掲示板アプリを作成していく。
