Node.js + Express FWでクエリーパラメータを取得する

BackEnd

今回は「Node.js + Express FWでWebアプリケーションを作る」のスピンオフとして、クエリーパラメータの取得処理を実装してみたいと思います!

一応続きということで、ソースをあげるとこんな感じ

今回は、これを使ってクエリーパラメータの取得処理を実装していきます!

手順はこんな感じ

1:クエリーパラメータ取得後の遷移先画面を作成

2:クエリーを投げるようにindex.htmlを修正

3:クエリー処理を実装するため、index.jsを修正

めちゃ簡単ですね。

ほな、やってきます!

1:クエリーパラメータ取得後の遷移先画面を作成

まずは、遷移先画面の作成です。こんな感じで「next.ejs」を作ってviewsディレクトリに入れます

こんな感じ。そうです、ほぼ「index.ejs」のコピーです笑

2:クエリーを投げるようにindex.htmlを修正

修正といっても上の「next.ejs」のaタグの部分をそのままコピーするだけにします。

理由は、index.js側でリクエスト先のパスを実装しようと思ってるからです。

こんな感じ。

※「index.js」側からaタグのhref属性に値を動的に設定したくなかったら

この「index.html」に固定でリクエスト先URLを記述しても何も問題ないです。

3:クエリー処理を実装するため、index.jsを修正

それでは、メインディッシュに移ります。

ソースはこんな感じ

説明すると、修正したのはルーティングの箇所です

まず、「/」のコンテキストパスでリクエストが来た場合です

ポイント1の部分でindex.ejsのaタグhref要素に表示するurlを作成しています

ここにクエリーパラメータがありますね

よって、index.ejsの別ページに移動というアンカーをクリックすると

コンテキストパス「/next」にルーティングされ、2つのクエリーパラメータ「name」と「password」がリクエストオブジェクトに渡されることになりまーす

次に「/next」のコンテキストパスでリクエストが来た場合(index.ejsの別ページに移動アンカーが押された場合)です。

ポイント2にあるように、リクエストオブジェクトが持つqueryオブジェクト内にクエリーパラメータ(URLの?以降の部分)で設定されたKey(nameとpassword)とvalue(soloとware)がセットで入っているので、簡単に取り出せます!

あとは、取り出した値をmsg変数に組み込んで、next.ejsの<%-content%>の箇所に出力しています。

なんちゃあないですね。

これで、スピンオフ記事は終了です!ではでは!

コメント

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