たぶん、前回の記事の内容だけではコーディングはまだできなくって、
もっと具体的に動作の仕組みを考えなくちゃいけないと思いまして。
UIの動き
- 文字を入力すると、データベースから入力候補を取得し、表示する
- 入力した内容が入力候補と一致すると、その栄養素値が自動で入力される
- 入力を空にすると、入力候補も空にする
テキスト窓に入力したかどうかはVue.jsではv-on:changeで処理を起動することができるみたいなので、これを使用します。
データベース
基本的には入力済みの食品・栄養素の情報(テンプレート)からデータを抽出して候補がある物から選択するという形にしたいと思います。
ただ、そう言った食品や栄養素の情報を全部用意するのは大変なので、ユーザーが入力した情報を記憶しておいて(ヒストリ)、管理者が正式データとして登録する、という仕組みにしたいと思います。
なので、管理者画面が必要になりますね。
データベースはテンプレートとヒストリの二つ用意しておきたいと思います。
ここらへん、本当はもっと詰めなくちゃいけない所ですが、今回はあとでどうにでもできるように、リスクが少ない方法を選択したいと思います。
あとでデータベース構成を変えるとなるとコードの修正も大変なので。
なので、今後の作業はこんな感じです。
- データベースの構築
- テンプレートからデータを入力する処理
- ユーザーが入力したデータをヒストリに保存する処理
- 管理者がヒストリからテンプレートに移す処理
よし、これでいきましょう。
