スクリプトのお勉強 技術

Nuxt.jsのFormで入力/確認/完了フォームを作成してみた(その1)

投稿日:

背景

今回は、Webアプリケーションの、フロントエンド系のお話です。
ほとんどの場合、バックエンドなのですが、時々フロントエンドもするんですよね。。

私の派遣先では、入力フォームを以下のように分ける要望が多いです。

  • 入力フォーム(+検証)
  • 確認フォーム(保存ボタンで保存開始)
  • 完了フォーム(保存した値を表示)

入力フォームから確認フォームにボタンを押して次に行くとき、値を検証し、間違っていた場合は次に行きません。
確認フォームで「保存」をしたら保存を開始し、完了フォームは、保存したデータを表示する、というのがおおよその流れです。

これだと、保存のダブルクリック対応が不要なのがいいところです。無意識に二回連続でぽちぽちしたら同じなのですが、その場合は「使用者がボケッとしているのが悪い」と責任転嫁、、は出来ませんが抗弁はできます。

画面が一つ確認分が増えますが、まぁしょうがないというところでしょうか。

ただ、昔のHTMLサーバベースのシステムだとしっくりくるのですが、近年のJavaScriptでやってしまうタイプだとはやすぎてあまり意味がないように思いますが、、まぁサンプルを作ってみようかなと思いました。

ソース

ソースは以下に格納しました。

https://github.com/KenichiTanino/confirm_form.git

開発環境

開発は以下の環境で行いました。

  • OS: Ubuntu 18.04
  • Nodejs: 12.16.3
  • yarn: 1.12.3
  • Nuxt.js: 2.0.0
  • vee-validate: 3.3.1

確認方法

以下を行ってからブラウザでアクセスします。

$ git clone https://github.com/KenichiTanino/confirm_form.git
$ yarn install
$ yarn run dev

作成内容

作成した内容を説明していきます。

画面

作成した画面は以下の通りです。

  • 一覧
  • 編集
  • 確認
  • 完了

データ

データは、vuexで制御しています。
vuexは一覧のデータと、完了時の更新時に使用しています。

編集から確認までのデータやり取りは、ルーティング機能を使用しています。

ルーティング機能

ルーティング機能とは、
vue-routerの機能を使って、画面遷移を制御する機能です。

画面遷移するついでに、paramを使用して、データを次の画面に送っています。

以下は、一覧(pages/users.vue)から編集画面に遷移しているところです。

    @click="$router.push('/edituser/' + item.id)"

編集画面(components/editform.vue)から、確認画面(pages/confirmuser.vue)に移動しているのは以下です。

this.$router.push({ name: 'confirmuser', params: { user: edituser }})

確認画面(/components/editform.vue)から、完了画面or編集画面に移動しているのは以下です。
cancelで戻っているのがediteduserになっているのは、
一覧画面から、編集画面に飛ぶ場合、情報がidで、
確認画面から編集画面に飛ぶ場合は、user情報全部、という違いがあるからです。

submit () {
  this.$router.push({ name: 'saveuser', params: { user: this.$props.user }})
},
cancel () {
  this.$router.push({ name: 'editeduser', params: { user: this.$props.user }})
},

まとめ

長くなったので、とりあえずここらへんまでにしておきます。

-スクリプトのお勉強, 技術
-, ,

執筆者:

関連記事

Ubuntu 20.04のMySQL8.0.22でrootパスワードをリセットする

小ネタです。 休みなので 久しぶりにローカル環境のUbuntuでMySQLにアクセスしようとして、パスワードを見事に忘れたことに気づきました。 ubuntu 20.04なので、以下の手順でパスワードの …

Pipenvでライブラリ(*.whl)をキャッシュする方法

仕事でWebアプリケーションを作成した場合、ガンガンとライブラリのバージョンを上げたりはしない場合があります。 そして、長期間放置されるタイプのWebアプリケーションの場合、使用しているライブラリが、 …

Djangoのurls.pyにはまった。。

けっこうハマった。。 Django 2.2.4の話。以下のエラーを修正するのに、とっても時間がかかった。 django.urls.exceptions.NoReverseMatch: Reverse …

Nuxt.js – CRUDアプリケーションのフォーム/一覧を作成する

前回で作ったAPIのフロントエンドアプリケーションを作ろうと思います。 どういうアプリ? サンプルとして作ったAPIが住所録的だったので、住所録を作りました。 以下の機能があります。 登録(確認付き) …

Djangoアプリサンプル – 画像ファイルアップロード + 顔モザイク(画像アップロード編)

仕事で使用している、Djangoについて、サンプルを作成してみようと思います。ここでは、画像ファイルのアップロードと顔モザイクを行うwebアプリを作成してみようと思います。 この記事ではファイルアップ …

google オプトアウト Click here to opt-out.