スクリプトのお勉強 技術

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 }})
},

まとめ

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

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

執筆者:

関連記事

暗号モードによる処理時間の違いを測定してみた

はじめに 前回、AESで暗号化する実装をしてみた際、知らない暗号モードが増えたなと思いました。 なので、どの暗号モードを使用すべきかの、判定材料の一つとして、代表的な暗号モードの処理速度を簡単に計って …

小ネタ: Python のdataclass でNone or “”を使わないJSONデータを定義する

PythonをREST APIのクライアントとして作成する際、dataclassesを使用しようと思いました。型が見た瞬間分かるし、しっかりしているからです。 でも、そのREST API は&#822 …

Python3 – VCR.py でネットワーク系テストを簡単に作成する

1. 始めに python3で実装すると、モックテストをしたくなります。モックを使って、比較的簡単にテストできるからです。 問題はネットワーク系テスト モックテストで問題になるのは、外部に依存するテス …

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

前回の記事の続きです。以下について書いていきます。この記事で終わりのはず? バリデーション機能(主にIPアドレスのバリデーション追加)画面 バリデーション機能 バリデーション機能は、vee-valid …

pipenv + Apache + Django起動設定

仕事でwebアプリケーションを作成しています。 Djangoで作成し、webサーバをApache、環境をpipenvで設定したpython3環境上で動かす予定です。 Apacheが起動するまでに、苦労 …

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