//tips
//smart contract
複数ページに対応できるようにする。
新しいejsを作成。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8">
<title><%=title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body class="container">
<header>
<h1 class="display-4"><%=title %></h1>
</header>
<div role="main">
<p><%= content %></p>
</div>
</body>
</html>
前回のものとそこまで変わらない。
このページに遷移するためにindex.ejsに遷移リンクを設定。
<body class="container">
<header>
<h1 class="display-4"><%=title %></h1>
</header>
<div role="main">
<p><%= content %></p>
<p><a href="/other">Other Pageに移動 >></a></p>
</div>
</body>
このためapp.jsにも/otherにアクセスしたらother.ejsの表示を行うように修正する。
case '/other':
var content =ejs.render(other_page,{
title:"Other",
content:"これは新しいサンプルページです"
})
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
break;
ルートに上記を追加し、無事に遷移ページを表示する事ができた。Content-Type':'text/html’と記述していないときちんと表示されないのでcssのものなどにしないように注意が必要。
ついに今回自作のcssの代わりにbootstrapを使うことになった。これはcssのフレームワークで、簡単にスタイルが設定できるようになる。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
これを使用することで下記のような専用クラスを使用する事ができる。これらのクラスはbootstrapのクラスで事前にwebページのスタイルが定義されている。表示させたいスタイルをbootstrapのclassとして知っていればcssを書かずに、このクラスを追加するだけで表現できるのでかなり便利そう。
<body class="container">
<header>
<h1 class="display-4">
ここからはapp.jsに表示変数の値を入れておくのではなく、URLから値を取得するような作業も加えていく。
URLの後に?○=○○&○=○○のようなクエリパラメーターも扱い、アドレスに値の情報を付け足して送ることで必要な値をサーバに渡すことも考える。
ただ、一般的にはユーザーからの情報はフォームで渡すことになり、それが少し複雑なよう。というのも、node.jsにはフォームから送られたデータを取り出すという機能がなく、parseしたものの中から必要なデータを探すという処理が必要になる。
Index.ejsにフォームを用意し、それをotherに送信すると、そちらに表示するようにさせる。
Index.ejsにフォームを組み込む。
<div role="main">
<p><%= content %></p>
<form method="post" action="/other">
<input type="text" name="msg" class="form-control">
<input type="submit" value="Click" class="btn btn-primary">
</form>
<p><a href="/other">Other Pageに移動 >></a></p>
</div>
App.jsにpost設定なども追加。
const http=require('http');
const fs=require('fs');
const ejs=require('ejs');
const url=require('url');
//querystringで普通のテキストをparse処理できる
const qs=require('querystring');
const index_page=fs.readFileSync('./index.ejs','utf8');
const other_page=fs.readFileSync('./other.ejs','utf8');
const style_css=fs.readFileSync('./style.css','utf8');
var server=http.createServer(getFromClient);
server.listen(3000);
console.log('server start');
//createServerの処理
function getFromClient(request,response){
//trueを第二引数につけることでクエリパラメータとして追加されている部分もパース処理される
var url_parts=url.parse(request.url,true);
switch(url_parts.pathname){
case '/':
//関数での処理へ移行
response_index(request,response);
break;
case '/other':
response_other(request,response);
break;
case '/style.css':
response_index(request,response);
response.writeHead(200,{'Content-Type':'text/css'});
response.write(style_css);
response.end();
break;
// case '/other':
// var content =ejs.render(other_page,{
// title:"Other",
// content:"これは新しいサンプルページです"
// })
// response.writeHead(200,{'Content-Type':'text/html'});
// response.write(content);
// response.end();
// break;
default:
response.writeHead(200,{'Content-Type':'text/plain'});
response.end('no page...');
break;
}
}
//indexのアクセス処理
function response_index(request,response){
var msg="これはindexページです。";
var content =ejs.render(index_page,{
title:"index",
content:msg,
});
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
}
//otherのアクセス処理
function response_other(request,response){
var msg="これはotherページです。";
//POSTアクセス時
//requestのmethodプロパティはリクエストがどのような方式で送られてきたかを表す
//イベント設定はオブジェクト.on(イベント名,関数);
if(request.method=='POST'){
//postでのイベントは、requestの中にあるイベントを使えば良い
var body='';
//データ受信イベント処理
//dataイベントはクライアントからデータを受け取ると発生
request.on('data',(data)=>{
//dataは分割されて送られてくるので
//この段階ではクエリテキスト形式でそのままでは使えない
body += data;
});
//データ受信終了のイベント処理
//endイベントはデータの受け取りが完了すると発生するイベント
request.on('end',()=>{
var post_data=qs.parse(body);
msg +='あなたは、「'+post_data.msg+'と書きました。';
var content =ejs.render(other_page,{
title:"other",
content:msg,
})
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
});
//GETアクセス時
}else{
var msg="ページがありません";
var content=ejs.render(other_page,{
title:"other",
content:msg,
});
response.writeHead(200,{'Content-Type':'text/html'});
response.write(content);
response.end();
}
}
これによりejsの処理プログラム<% %>であったり、表示テキスト<%= %>に対応する。
現段階ではテキストしか受け渡しに利用していないが、複雑なオブジェクトの受け渡しも想定していく。
受け渡しオブジェクトを下記のような形にしてみる。
var data={
'Taro':'090-999-999',
'Hanako':'080-888-888',
'Sachiko':'070-777-777',
'Ichiro':'060-666-666',
};
これを表で表示させることも問題なくできた。
<p><%= content %></p>
<table class="table">
<% for(var key in data){ %>
<tr>
<th><%= key %></th>
<td><%= data[key] %></td>
</tr>
<% } %>
