9.ユーザー名をヘッダーに表示しよう
ユーザー名をヘッダーに表示しよう
目標:ログイン画面にユーザー名を表示させる
ターミナル以外に表示させる方法を学ぶ。
表示を確認しよう
具体的な目標:ヘッダーにログイン状態を表す表示をつくる
セッションを使ってユーザー名を管理しよう
ヘッダー表示に必要な条件
ユーザー名でログイン成功した時
セッションに情報を保存
保存されたユーザー名をapp.use関数にて読み出し
このように覚える。
-point-
ユーザーを保存する時
ユーザー名を読み出す時
上記コードの書き方を学ぶ
ユーザー名をEJSファイルに渡そう
les.localオブフェクト
app.useからEJSファイルに値(セッション情報)を渡す場合につかうオブフェクト
このように覚える。
res.localsオブジェクトに値を代入しよう
res.localsオブフェクトの型
res.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>
要復習。お疲れ様でした。