【Node.js】超簡単な行先掲示板を仕上げる

研究
OLYMPUS PEN E-PL9 (c)Maya
この記事は約8分で読めます。

ちょっと時間が経ってしまったし、次のLaravelなどの習得に掛かりたいので一段落つけます。
環境はこちらを使います。

Release 20201106 · mayarin/NodejsMySQLDocker

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

こちらの残り作業は以下の通り。
・入力バリデートをHTML5でいいので実装
・パスワードリマインダ
・ログイン中の会員情報の修正
・機能実装(今回は行先掲示板にでもします)
・herokuに公開
・気が向いたらAngularでSPAにしてみる
このうち下2つを次回に回します。

入力バリデートはHTML5のrequiredを利用。pug文法では以下の通りの記述になりました。

input.form_parts(type='text' name='name' placeholder='ユーザー名...' value=signup_name required)

ログイン中の会員情報の修正については実装ソースにて割愛。
行先掲示板への実装に先んじてusersテーブルを以下の通りに修正しておきます。
(ひとまずメンバー:行先は1:1で実装します。)

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL,
  `mailaddress` varchar(255) COLLATE utf8mb4_bin DEFAULT NULL,
  `password` text COLLATE utf8mb4_bin,
  `wheretogo` text COLLATE utf8mb4_bin,
  `go_date` date DEFAULT NULL,
  `go_time` time DEFAULT NULL,
  `back_date` date DEFAULT NULL,
  `back_time` time DEFAULT NULL,
  `active` tinyint(1) DEFAULT NULL,
  `createdAt` datetime NOT NULL,
  `updatedAt` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin

次に以下の通りの入力フォームを用意します。

  div
    h2 行先登録
    form(action="/setdata", method="post")
      span.form_title 行先
      input.form_parts(type='text' name='wheretogo' placeholder='行先...' value=userinfo.wheretogo required)
      br
      span.form_title 出発日時
      if userinfo.wheretogo != '' && userinfo.wheretogo != null
        input.form_parts(type='date' name='go_date' placeholder='出発日...' value=userinfo.go_date required)
        input.form_parts(type='time' name='go_time' placeholder='出発時刻...' value=userinfo.go_time required)
      else
        input.form_parts(type='date' name='go_date' placeholder='出発日...' value='' required)
        input.form_parts(type='time' name='go_time' placeholder='出発時刻...' value='' required)
      br
      span.form_title 帰社日時
      if userinfo.wheretogo != '' && userinfo.wheretogo != null
        input.form_parts(type='date' name='back_date' placeholder='帰社日...' value=userinfo.back_date required)
        input.form_parts(type='time' name='back_time' placeholder='帰社時刻...' value=userinfo.back_time required)
      else
        input.form_parts(type='date' name='back_date' placeholder='帰社日...' value='' required)
        input.form_parts(type='time' name='back_time' placeholder='帰社時刻...' value='' required)
      br
      input.form_parts(type='checkbox' name='remove' value='1')
      span.form_title 削除
      br
      button(type='submit') 反映

cssをサボっていますが、このようなUIになります。

submitされたデータを反映する旨実装します。

router.post('/setdata', async function(req, res) {
  await Users.findByPk(req.session.user.id)
  .then(user => {
    if(user){
      if(req.body.remove != 1){
        user.wheretogo = req.body.wheretogo;
        user.go_date = req.body.go_date;
        user.go_time = req.body.go_time;
        user.back_date = req.body.back_date;
        user.back_time = req.body.back_time;
      } else {
        user.wheretogo = '';
      }
      user.save();
      res.redirect('/');
    }
  });
});

一覧を表示したい際には、indexのログインセッションがある場合の分岐内で以下のように記述し

    const dataset = await Users.findAll();

    var username = '';
    var userinfo = '';
    await Users.findByPk(req.session.user.id)
    .then(user => {
      console.log(user.name);
      userinfo = user;
      username = user.name;
    });
    res.render('user', { title: username + ' is logined.', userid : req.session.user.id, userinfo : userinfo, dataset });

.jadeファイル内で以下のようにループして表示します。

  div
    h2 メンバー一覧
    table.tasks
      tr
        th.name 名前
        th.where 行先
        th.time 自
        th.time 至
      each t in dataset
        tr
          td.name= t.name
          if t.wheretogo != '' && t.wheretogo != null
            td.where= t.wheretogo
            td.time= t.go_date+t.go_time
            td.time= t.back_date+t.back_time
          else
            td.where= '社内'
            td.time= ''
            td.time= ''

UIを割愛していますが、登録がある場合には右のように表示されます。

パスワードリマインダについてはこちらのサイトを参考にしました。

Expressでパスワード再発行機能をつくる(ダウンロード可)

こんにちは❗フリーランス・エンジニアの 九保すこひ です。 さてさて、前回記事「 Expressでユーザー登録機能」でも少し触れましたが、ユーザー登録機能をつくる際に「 パスワード再発行機能 」、いわゆる「パスワード・リマインダー」も同時に開発しようと考えていました。 ただ、ユーザー登録機能が予想を上回るコード量になってしまい、あえなく別記事にするべきと判断しました。 そのため、今回はそれを受けて、 パスワードの再発行機能をExpressでつくる をテーマにしてお届けします。 ぜひみなさんのお役に立てると嬉しいです😊✨ 開発環境: Node 8、Express 4.1 今回開発する「 パスワード再発行機能 」は以下の手順で実行する機能になります。 ユーザーがメールアドレスを送信 パスワード再発行メールを送信 メールに書かれているURLをクリック 表示されたフォームから新しいパスワードを送信 新パスワードを保存する なお、前回もそうですがこの流れに加えてコードは Laravelを参考したものです。 Laravel さん、いつもありがとうございます。m_ _m 必要になるパッケージですが、ほぼ前回記事と同じになりますので、「 前提として 」を参考にして以下のパッケージをインストールしておいてください。 なお、テンプレート・エンジンには mustache-express を使っています。 では、パスワード再発行に必要なDBテーブル「 PasswordResets 」をつくります。以下のコマンドを実行してください。 npx sequelize-cli model:generate –name PasswordReset –attributes email:string,token:string すると、以下の2ファイルが作成されます。 /models/passwordreset.js /migrations/************-create-password-reset.js マイグレーションには、不要な項目が含まれているので以下のように変更してください。 ‘use

ここまでの作業内容をgithubに反映しました。

Release 20201112 · mayarin/NodejsMySQLDocker

You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

総括するとライブラリ頼みな感じでした。
時間を持て余すのもまあ飽きてきたので、明日くらいからはLaravelで会員サイトなどを作ろうと思います。

コメント

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