Vue.js を使った願いのメモアプリ

はじめに

このプロジェクトでは、Vue.jsとElement-UIライブラリを使って「願いのスティッキーメモ」アプリケーションを作成する方法を学びます。このプロジェクトの目的は、人々が安全かつ機密性の高い方法で自分たちの目標、理想、願いを表現できる匿名性と便利なプラットフォームを提供することです。

👀 プレビュー

フィールドの検証条件が満たされていない場合、次のエラーが報告されます。

条件を満たして願いを投稿した後、結果は次のようになります。

🎯 タスク

このプロジェクトでは、以下を学びます。

• プロジェクト構造を設定し、必要なファイルとフォルダを準備する方法。
• 完了したフォームを願いの壁にレンダリングする方法。
• 入力フィールドが必要な基準を満たすことを確認するためのフォーム検証を実装する方法。
• フォームの送信とリセット機能を処理する方法。
• 画像のアップロードとプレビュー機能を実装する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• Vue.jsプロジェクトを構築して整理する。
• Element-UIライブラリを使ってフォームを作成し、ユーザーインタラクションを処理する。
• Element-UIの検証ルールを使ってフォーム検証を実装する。
• Vue.jsアプリケーションでファイルのアップロードと画像のプレビューを処理する。
• 状態を管理し、ユーザーのアクションに基づいてUIを更新する。

Skills Graph

プロジェクト構造を設定する

このステップでは、プロジェクト構造を設定し、必要なファイルとフォルダを準備します。

コードエディタでプロジェクトフォルダを開きます。ディレクトリ構造は次のとおりです。

├── css
│   ├── fonts
│   │   ├── element-icons.ttf
│   │   └── element-icons.woff
│   ├── index.css
│   └── wish.css
├── images
│   ├── bg.jfif
│   └── ding.png
├── index.html
└── js
    ├── index.js
    └── vue.min.js

ここで：

• cssは、element-uiのプロジェクトスタイルが保存されているフォルダです。
• imagesは画像フォルダです。
• index.htmlはメインページです。
• jsは、プロジェクトの依存JavaScriptライブラリ用のフォルダです。

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新してページを表示します。

ページは初期化時に入力ボックスの検証を行わず、入力を投稿した後に願いの投稿が表示されません。

願いの壁に完成したフォームをレンダリングする

このステップでは、index.htmlファイルを変更して、願いの壁に完成したフォームをレンダリングします。

1. プロジェクトフォルダ内のindex.htmlファイルを開きます。
2. index.htmlファイル内のTODOコメントを探し、コードの問題点を観察したところ、v-for="(item,index) in []"のコードが問題があり、次のコードに変更しました。

<!-- TODO -->
<div
  class="card"
  :class="item.css"
  v-for="(item,index) in wishList"
  :key="index"
>
  <!--... -->
</div>

class="card"属性を持つ<div>要素内のコードは、願いの壁に完成したフォームの名前、内容、画像（利用可能な場合）を表示します。

フォーム検証を実装する

このステップでは、入力フィールドが必要な基準を満たすことを確認するためのフォーム検証を完了します。

1. プロジェクトフォルダ内のindex.htmlファイルを開きます。
2. Vueインスタンスのdataセクション内のrulesオブジェクトを見つけて、次のコードを追加します。

rules: {
  // TODO
  name: [
    {
      required: true,
      message: "Please input your name",
      trigger: "blur"
    },
    {
      min: 2,
      max: 4,
      message: "Length should be between 2 and 4 characters",
      trigger: "blur"
    }
  ],
  content: [
    {
      required: true,
      message: "Please input content",
      trigger: "blur"
    },
    {
      min: 1,
      max: 30,
      message: "Length should be between 1 and 30 characters",
      trigger: "blur"
    }
  ]
},

3. rulesオブジェクトのnameとcontentプロパティで、検証ルールを定義します。

   • name：名前フィールドは必須で、2文字以上4文字以下でなければなりません。
   • content：内容フィールドは必須で、1文字以上30文字以下でなければなりません。

4. これらの検証ルールが設定されると、入力フィールドが指定された基準を満たさない場合、フォームにエラーメッセージが表示されます。

5. 条件を満たして願いを投稿した後、結果は次のようになります。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabExでさらに多くの実験を行って練習してください。