Blockchain code Metaverse VR

Crypto×VR×SmartContract(449)

スポンサーリンク

//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に移動 &gt;&gt;</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に移動 &gt;&gt;</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>
<% } %>

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.