Node.js で小規模なアプリケーションを開発する方法 その8

はじめに

今回から3回にわたって、やり忘れてしまった「ページ仮作成」の作業を進めていきます。第1回目は下記のページの仮作成を行います。

• トップページ: /
• ダッシュボードページ: /admin/
• ログインページ: /admin/account/login/
• ログアウトページ: /admin/account/logout/

ビューの編集

上記4件のページについて、編集後の内容を書きに記載します。

app/views/pages/anonymous-home.jade

extends ../layouts/default

block content
  h1.page-header HOME
  p ログインページを表示するには下記のリンクをクリックしてください
  ul
    li
      a(href='./admin/account/login/') ログインページ

app/views/pages/admin-dashboard.jade

extends ../layouts/2-column/admin

block main
  h1.page-header ダッシュボード
  p 作業記録を登録するには、レポート一覧ページから新規登録をクリックしてください 

app/views/account/admin-login.jade

extends ../layouts/full-width/admin

block main
  h1.page-header ログイン
  .row
    .col-md-offset-3.col-md-6
      .panel.panel-default
        .panel-heading ログインフォーム
        .panel-body
          form.form-horizontal
            .form-group
              label.control-label.col-sm-3(for='username') ユーザ名
              .col-sm-9
                input.form-control(type='text', name='username', id='username', placeholder='ユーザ名を入力')
            .form-group
              label.control-label.col-sm-3(for='password') パスワード
              .col-sm-9
                input.form-control(type='password', name='password', id='password', placeholder='パスワードを入力')
            .form-group
              .col-sm-offset-3.col-sm-3
                a.btn.btn-primary(href='../../') ログイン

app/views/account/admin-logout.jade

extends ../layouts/2-column/admin

block main
  h1.page-header ログアウト
  p ログアウトするには「ログアウトを実行する」ボタンをクリックしてください

  div
    a.btn.btn-default(href='../../') ダッシュボードへ戻る
    a.btn.btn-primary.pull-right(href='../login/') ログアウトを実行する

動作確認

動作を確認するには、app と static の両方のサーバを動作させた後、 http://localhost:3000/ にログインします。

cd app
npm start

別のシェルで

cd static
npm start

下記の順序でページ遷移を行い、表示内容を確認します。

1. トップページ
2. ログインページ
3. ダッシュボードページ
4. ログアウトページ

おわりに

次回はプロジェクト関連のページ仮作成を行います！