スクリプトのお勉強 技術

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

まとめ

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

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

執筆者:

関連記事

神奈川県横浜市神奈川区のワクチン接種地図作った

作ってみた。東白楽駅を真ん中にしてみました。なんとなく真ん中な感じなので。 データ元 以下のテキストデータからゴニョゴニョしてます。 https://www.city.yokohama.lg.jp/k …

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

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

Selenium + Python によるアップロードアプリの動作確認プログラム作成

私の周りでは、なぜかSeleniumが流行っている模様です。 私自身は、Webアプリ的なのも作ってますが、あまり使ってなかったので、使ってみようと思います。 前回作成した、Djangoのupload_ …

Pythonのmock.patchを使ってみる

単体テストによく使われるMockライブラリ Pythonで単体テストを行う際、実際のライブラリを使用してしまうと、実際の環境を用意しなければいけません。 例えば、データベースのテストをする際に、データ …

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

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

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