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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.