スクリプトのお勉強 技術

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なので、以下の手順でパスワードの …

Pythonでの勘違い(if A:)

勘違い 小ネタです。 Pythonでは、以下のように書くことができます。 a = [] if a: print(“not empty!”) else: print(“empty!”) 結果は以下になり …

go 1.16 でviperを使って設定ファイルを読みだすプログラムを作ってみた

他にたくさんあるけど こんな感じの内容はたくさんあると思いますが、、goの初心者がなんとなくgoの手習いとして、まずは設定ファイルを読みだすことをしてみようと思いました。 go動作環境 windows …

VPN

VPNとは VPNとは、「Virtual Private Network」の略です。仮想的なネットワークを構成する技術の総称で、主に専用線の構築や、通信路の暗号化に使用します。 技術 よく使用されるV …

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

顔モザイク Djangoアプリ 前々回 前回 を統合して、Djangoアプリを作成してみようと思います。 前提インストール 前回、ubuntu 18を前提に記述しましたが、CentOS7(CentOS …