shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

9.ユーザー名をヘッダーに表示しよう

 

ユーザー名をヘッダーに表示しよう

 

目標:ログイン画面にユーザー名を表示させる

 

ターミナル以外に表示させる方法を学ぶ。

 

 

 

表示を確認しよう

 

具体的な目標:ヘッダーにログイン状態を表す表示をつくる

 

 

セッションを使ってユーザー名を管理しよう

ヘッダー表示に必要な条件

ユーザー名でログイン成功した時

セッションに情報を保存

保存されたユーザー名をapp.use関数にて読み出し

 

このように覚える。

 

 

-point-

 

ユーザーを保存する時

ユーザー名を読み出す時

 

 

上記コードの書き方を学ぶ

 

 

 

ユーザー名をEJSファイルに渡そう

 

les.localオブフェクト

app.useからEJSファイルに値(セッション情報)を渡す場合につかうオブフェクト

 

 

このように覚える。

 

 

 

res.localsオブジェクトに値を代入しよう

 

res.localsオブフェクトの型

 

res.locals.プロパティ名 = 値

 

この型で値を代入できる

 

このように覚える。

 

ただし、

条件:レスポンスを返すまで使用可能

 

このように覚える。

 

 

 

localsオブジェクトから値を取得しよう

 

値の取得方法

条件

指定ejsファイルにて代入した値を表示させる

代入された値はlocalsオブジェクトに変換される性質があり

locals.プロパティ名 と書く

 

 

 

 

演習問題

目標物をもう一度確認する

目標:ログイン画面(ヘッダー)にユーザー名を表示させる

 

ターミナル以外に表示させる方法を学ぶ。

 

 

・問題の流れを把握する

ヘッダーにユーザー名を表示する

 

res.localsオブジェクトの値を使うとき、
localsオブジェクトの「username」プロパティの
値を用いる

 

res.localsオブジェクトにゲストを代入
res.locals.username = 'ゲスト';

 

res.localsオブジェクトにセッション情報に保存されたユーザー名を代入
res.loclals.username = req.session.username;

 

ユーザー名をセッション情報に保存
req.session.username = results[0].username;

 

ユーザー名を表示するコード

<p>ようこそ、<%= locals.username %>さん</p>

 

 

要復習。お疲れ様でした。