ExpressGeneratorでSPA的なん作ってみる

BackEnd

SPAとは、シングルページアプリケーションのことで、一枚のページのDOMだけを変えることでまるでページ遷移しているかのように振る舞うアプリケーション!って理解です

ほな、作ってみる

構成としては、こんな感じ

index.ejs

ベースの画面(ejsをテンプレートエンジンとして使用し、画面遷移イベントによって中身は差し替える)

index.js

初期画面を表示(ここには、ユーザIDとパスワードが入力できるようなフォームを作っておき、フォーム送信ボタン押下でmenu.jsを呼び出す

menu.js

受け取ったユーザIDを画面に出力する

※おまけにrestdata.js

こいつは、Ajaxでデータを取得する処理を実装

では、作っていく。まずはindex.ejs。こんな感じ

bootstrapやjqueryに関しては個人でCDNのパスを通すなりダウンロードしてパスを通すなりして使用できるようにしてくださいませ

では、内容を見ていきます

まず、HeaderってとことFooterってとこは、固定で表示させておく部分です。本来はナビゲーションバーとかでもっとかっこよくしたいのですが、とりあえずたたき台ということでこんな雑な感じになってます笑

で、ポイントはContentsのとこ!

ここにサーバから返されるDOMを出力させることで、あたかもページ遷移したかのように見せられます

次に、index.jsです。こいつは、index.ejsのContents部分に表示するDOMを作成する処理を行ってます。ソースはこんな感じ

普通すぎておもんないね。

フォームタグを構成していて、ユーザIDとパスワードの入力欄を設け、ログインボタンを押下することで「/menu」アドレスへアクセスするって感じ。

実際の画面を表示するとこんなん。

次は、/menuにアクセスされた時に呼び出されるmenu.js

ソースはこんな感じ

req.bodyでリクエストボディ内に格納されている値を取得できます。

ユーザIDを取得したかったらindex.jsのinputタグのnameをキーに取得できる

ここですね。

で、取得したユーザIDを「Hello, 」の後に太字で表示させている

その下のbuttonタグについては、おまけのajax通信の部分になるので後述するとして、ひとまず、動きを確認しよう。

あ、app.jsへのルーティング情報の組み込みを忘れずに!

この辺りの説明は、別記事にあるので参考にしてみてください。

では、動作確認

http://localhost:3000にアクセスし、ユーザIDとパスワードを入力

ログインボタンを押すとこうなる

いいですねー!

ほんなら、おまけのAjax通信の説明にいきます

menu.jsにあったbuttonタグの部分がAjax通信のトリガーになります

この「GET DATA」ボタンを押すと、「Data will be shown up here」の部分に取得したデータが表示されるようにしていきます。

このonclickイベントが発火されるとindex.ejs内に記載したgetData関数が実行されます。これ。

※Bootstrapやjqueryに関するタグは可読性のため削除しています。

header内のscriptタグ内にgetData関数を定義しています。

こいつが呼ばれるとfetchAPIでAjax通信を行いデータをサーバから取得するっちゅう流れです。

fetchAPIについては、これも記事にしているので気になる方はみてください。

で、データをサーバから取得したら、その中から「name」という値を抜き出し、それをid属性にdataを持つタグへ出力します。

そう、menu.jsの「Data will be shown up here」の部分ですね。

データの取得先はリクエストURLはコンテキストパスが「/restdata」なので、最後にrestdata.jsをroutesディレクトリ内に作って終わりです

こんな感じ

dataというJSONオブジェクトを返すだけの処理です。笑

こいつのルーティング情報をapp.js内に組み込んだら挙動の確認といきましょう。

この画面のGET DATAボタンを押すと

こうなります

restdata.jsの処理で作ったJSONオブジェクトのnameプロパティに設定された値「something」が表示されましたね

本来は、DBからデータ取ってきたり、バリデーションチェックしたりと色々実装しないといけないですけど、今回は導入っちゅうことでこんなもんでいいんちゃうかな。

ではでは!

コメント

タイトルとURLをコピーしました