ノードを使用して軽量の請求アプリを構築する方法：ユーザーインターフェイス

投稿日: 2022-04-20 2022-04-20
タグ: Applications, Node.js, Vue.js

序章

前のチュートリアルでは、請求書発行アプリケーション用のバックエンドサーバーを構築しました。このチュートリアルでは、ユーザーインターフェイスと呼ばれる、ユーザーが操作するアプリケーションの部分を構築します。

注：これは3部構成のシリーズのパート2です。最初のチュートリアルは、ノードを使用して軽量の請求書作成アプリを構築する方法：データベースとAPIです。 3番目のチュートリアルは、 Vueとノードを使用して軽量の請求書作成アプリを構築する方法：JWT認証と請求書の送信です。

このチュートリアルのユーザーインターフェイスはVueで構築され、ユーザーがログインして請求書を表示および作成できるようにします。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

このチュートリアルは、Node v16.1.0、npm v7.12.1、Vue v2.6.11、Vue Router v3.2.0、axios v0.21.1、およびBootstrapv5.0.1で検証されました。

ステップ1—プロジェクトの設定

@ vue / cli を使用して、新しいVue.jsプロジェクトを作成できます。

注：この新しいプロジェクトディレクトリは、前のチュートリアルで作成したinvoicing-appディレクトリの隣に配置できるはずです。これにより、serverとclientを分離する一般的な方法が導入されます。

ターミナルウィンドウで、次のコマンドを使用します。

npx @vue/cli create --inlinePreset='{ "useConfigFiles": false, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-eslint": { "config": "base", "lintOn": ["save"] } }, "router": true, "routerHistoryMode": true }' invoicing-app-frontend

これは、 VueRouterでVue.jsプロジェクトを作成するためのインラインプリセット構成を使用します。

新しく作成されたプロジェクトディレクトリに移動します。

cd invoicing-app-frontend

プロジェクトを開始して、エラーがないことを確認します。

npm run serve

Webブラウザでローカルアプリ（通常はlocalhost:8080）にアクセスすると、"Welcome to Your Vue.js App"メッセージが表示されます。

これにより、この記事で構築するサンプルVueプロジェクトが作成されます。

この請求書発行アプリケーションのフロントエンドでは、バックエンドサーバーに対して多くの要求が行われます。

これを実現するために、axiosを使用します。 axiosをインストールするには、プロジェクトディレクトリで次のコマンドを実行します。

npm install axios@0.21.1

アプリケーションでデフォルトのスタイルを使用できるようにするには、Bootstrapを使用します。

まず、コードエディタでpublic/index.htmlファイルを開きます。

Bootstrap用のCDNでホストされているCSSファイルをドキュメントのheadに追加します。

public / index.html

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

PopperおよびBootstrap用のCDNでホストされているJavaScriptファイルをドキュメントのheadに追加します。

public / index.html

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>

App.vueの内容を次のコード行に置き換えることができます。

src / App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

また、自動生成されたsrc/views/Home.vue、src/views/About.vue、src/components/HelloWorld.vueファイルは無視または削除できます。

この時点で、AxiosとBootstrapを使用した新しいVueプロジェクトがあります。

ステップ2—Vueルーターの設定

このアプリケーションでは、2つの主要なルートがあります。

/ログインページをレンダリングします
/dashboardユーザーダッシュボードをレンダリングします

これらのルートを構成するには、src/router/index.jsを開き、次のコード行で更新します。

src / router / index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import SignUp from '@/components/SignUp'
import Dashboard from '@/components/Dashboard'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'SignUp',
    component: SignUp
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

これは、ユーザーがアプリケーションにアクセスしたときにユーザーに表示する必要のあるコンポーネントを指定します。

ステップ3—コンポーネントの作成

コンポーネントを使用すると、アプリケーションのフロントエンドをよりモジュール化して再利用できるようになります。このアプリケーションには、次のコンポーネントが含まれます。

ヘッダ
ナビゲーション
サインアップ（およびサインイン）
ダッシュボード
請求書を作成する
請求書を表示する

ヘッダーコンポーネントの作成

Headerコンポーネントは、アプリケーションの名前を表示し、ユーザーがサインインしている場合はNavigationを表示します。

Header.vueファイルをsrc/componentsディレクトリに作成します。コンポーネントファイルには、次のコード行があります。

src / components / Header.vue

<template>
  <nav class="navbar navbar-light bg-light">
    <div class="navbar-brand m-0 p-3 h1 align-self-start">{{title}}</div>
    <template v-if="user != null">
      <Navigation v-bind:name="user.name" v-bind:company="user.company_name"/>
    </template>
  </nav>
</template>

<script>
import Navigation from './Navigation'

export default {
  name: "Header",
  props : ["user"],
  components: {
    Navigation
  },
  data() {
    return {
      title: "Invoicing App",
    };
  }
};
</script>

ヘッダーコンポーネントには、userと呼ばれる単一のpropがあります。このpropは、ヘッダーコンポーネントを使用するすべてのコンポーネントによって渡されます。ヘッダーのテンプレートでは、Navigationコンポーネントがインポートされ、条件付きレンダリングを使用して、Navigationを表示するかどうかが決定されます。

Navigationコンポーネントは、さまざまなアクションのリンクを格納するサイドバーです。

/src/componentsディレクトリに新しいNavigation.vueコンポーネントを作成します。コンポーネントには次のテンプレートがあります。

src / components / Navigation.vue

<template>
  <div class="flex-grow-1">
    <div class="navbar navbar-expand-lg">
      <ul class="navbar-nav flex-grow-1 flex-row">
        <li class="nav-item">
          <a class="nav-link" v-on:click="setActive('create')">Create Invoice</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" v-on:click="setActive('view')">View Invoices</a>
        </li>
      </ul>
    </div>
    <div class="navbar-text"><em>Company: {{ company }}</em></div>
    <div class="navbar-text h3">Welcome, {{ name }}</div>
  </div>
</template>

...

次に、コードエディタでNavigation.vueファイルを開き、次のコード行を追加します。

src / components / Navigation.vue

...

<script>
export default {
  name: "Navigation",
  props: ["name", "company"],
  methods: {
   setActive(option) {
      this.$parent.$parent.isactive = option;
    },
  }
};
</script>

コンポーネントは、ユーザー名と会社名の2つのpropsで作成されます。 setActiveメソッドは、ユーザーがナビゲーションリンクをクリックすると、Navigationコンポーネントの親（この場合はDashboard）を呼び出すコンポーネントを更新します。

SignUpコンポーネントには、サインアップおよびサインインフォームが格納されています。 /src/componentsディレクトリに新しいファイルを作成します。

まず、コンポーネントを作成します。

src / components / SignUp.vue

<template>
  <div class="container">
    <Header/>

    <ul class="nav nav-tabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
      </li>
    </ul>

    <div class="tab-content p-3">
      ...
    </div>
  </div>
</template>

<script>
import axios from "axios"

import Header from "./Header"

export default {
  name: "SignUp",
  components: {
    Header
  },
  data() {
    return {
      model: {
        name: "",
        email: "",
        password: "",
        c_password: "",
        company_name: ""
      },
      loading: "",
      status: ""
    };
  },
  methods: {
    ...
  }
}
</script>

Headerコンポーネントがインポートされ、コンポーネントのデータプロパティも指定されます。

次に、データが送信されたときに何が起こるかを処理するメソッドを作成します。

src / components / SignUp.vue

...

  methods: {
    validate() {
      // checks to ensure passwords match
      if (this.model.password != this.model.c_password) {
        return false;
      }
      return true;
    },

    ...
  }

...

validate()メソッドは、ユーザーから送信されたデータが要件を満たしていることを確認するためのチェックを実行します。

src / components / SignUp.vue

  ...

  methods: {
    ...

    register() {
      const formData = new FormData();
      let valid = this.validate();

      if (valid) {
        formData.append("name", this.model.name);
        formData.append("email", this.model.email);
        formData.append("company_name", this.model.company_name);
        formData.append("password", this.model.password);

        this.loading = "Registering you, please wait";

        // Post to server
        axios.post("http://localhost:3128/register", formData).then(res => {
          // Post a status message
          this.loading = "";

          if (res.data.status == true) {
            // now send the user to the next route
            this.$router.push({
              name: "Dashboard",
              params: { user: res.data.user }
            });
          } else {
            this.status = res.data.message;
          }
        });
      } else {
        alert("Passwords do not match");
      }
    },

    ...
  }

...

コンポーネントのregisterメソッドは、ユーザーが新しいアカウントを登録しようとしたときのアクションを処理します。まず、validateメソッドを使用してデータを検証します。次に、すべての基準が満たされると、formDataを使用してデータを送信できるように準備されます。

また、コンポーネントのloadingプロパティを定義して、フォームが処理されていることをユーザーに通知します。最後に、POSTリクエストがaxiosを使用してバックエンドサーバーに送信されます。サーバーからステータスがtrueの応答を受信すると、ユーザーはダッシュボードに移動します。それ以外の場合は、エラーメッセージがユーザーに表示されます。

src / components / SignUp.vue

  ...

  methods: {
    ...

    login() {
      const formData = new FormData();

      formData.append("email", this.model.email);
      formData.append("password", this.model.password);
      this.loading = "Logging In";

      // Post to server
      axios.post("http://localhost:3128/login", formData).then(res => {
        // Post a status message
        this.loading = "";
    
        if (res.data.status == true) {
          // now send the user to the next route
          this.$router.push({
            name: "Dashboard",
            params: { user: res.data.user }
          });
        } else {
          this.status = res.data.message;
        }
      });
    }
  }

...

loginメソッドは、registerメソッドに似ています。データは準備され、ユーザーを認証するためにバックエンドサーバーに送信されます。ユーザーが存在し、詳細が一致する場合、ユーザーはダッシュボードに移動します。

次に、登録用のテンプレートを見てください。

src / components / SignUp.vue

<template>
  <div class="container">
    ...

    <div class="tab-content p-3">
      <div id="login" class="tab-pane fade show active" role="tabpanel" aria-labelledby="login-tab">
        <div class="row">
          <div class="col-md-12">
            <form @submit.prevent="login">
              <div class="form-group mb-3">
                <label for="login-email" class="label-form">Email:</label>
                <input id="login-email" type="email" required class="form-control" placeholder="[email protected]" v-model="model.email">
              </div>

              <div class="form-group mb-3">
                <label for="login-password" class="label-form">Password:</label>
                <input id="login-password" type="password" required class="form-control" placeholder="Password" v-model="model.password">
              </div>

              <div class="form-group">
                <button class="btn btn-primary">Log In</button>
                {{ loading }}
                {{ status }}
              </div>
            </form>
          </div>
        </div>
      </div>

      ...
    </div>
  </div>
</template>

ログインフォームは上に表示されており、入力フィールドは、コンポーネントの作成時に指定されたそれぞれのデータプロパティにリンクされています。フォームの送信ボタンをクリックすると、コンポーネントのloginメソッドが呼び出されます。

通常、フォームの送信ボタンをクリックすると、フォームはGETまたはPOSTリクエストを介して送信されます。これを使用する代わりに、フォームの作成時に<form @submit.prevent="login">を追加して、デフォルトの動作をオーバーライドし、ログイン関数を呼び出すように指定しました。

登録フォームも次のようになります。

src / components / SignUp.vue

<template>
  <div class="container">
    ...

    <div class="tab-content p-3">
      ...

      <div id="register" class="tab-pane fade" role="tabpanel" aria-labelledby="register-tab">
        <div class="row">
          <div class="col-md-12">
            <form @submit.prevent="register">
              <div class="form-group mb-3">
                <label for="register-name" class="label-form">Name:</label>
                <input id="register-name" type="text" required class="form-control" placeholder="Full Name" v-model="model.name">
              </div>

              <div class="form-group mb-3">
                <label for="register-email" class="label-form">Email:</label>
                <input id="register-email" type="email" required class="form-control" placeholder="[email protected]" v-model="model.email">
              </div>

              <div class="form-group mb-3">
                <label for="register-company" class="label-form">Company Name:</label>
                <input id="register-company" type="text" required class="form-control" placeholder="Company Name" v-model="model.company_name">
              </div>

              <div class="form-group mb-3">
                <label for="register-password" class="label-form">Password:</label>
                <input id="register-password" type="password" required class="form-control" placeholder="Password" v-model="model.password">
              </div>

              <div class="form-group mb-3">
                <label for="register-confirm" class="label-form">Confirm Password:</label>
                <input id="register-confirm" type="password" required class="form-control" placeholder="Confirm Password" v-model="model.c_password">
              </div>

              <div class="form-group mb-3">
                <button class="btn btn-primary">Register</button>
                {{ loading }}
                {{ status }}
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

@submit.preventは、送信ボタンがクリックされたときにregisterメソッドを呼び出すためにもここで使用されます。

次に、次のコマンドを使用して開発サーバーを実行します。

npm run serve

ブラウザでlocalhost:8080にアクセスして、新しく作成されたログインおよび登録ページを確認してください。

注：ユーザーインターフェイスを試すときは、invoicing-appサーバーを実行している必要があります。さらに、Access-Control-Allow-Originヘッダーを設定することで対処する必要があるCORS（クロスオリジンリソースシェアリング）エラーが発生する場合があります。

ログインして新しいユーザーを登録してみてください。

ダッシュボードコンポーネントの作成

ユーザーが/dashboardルートにルーティングされると、ダッシュボードコンポーネントが表示されます。デフォルトでは、HeaderおよびCreateInvoiceコンポーネントが表示されます。

Dashboard.vueファイルをsrc/componentsディレクトリに作成します。コンポーネントには次のコード行があります。

src / component / Dashboard.vue

<template>
  <div class="container">
    <Header v-bind:user="user"/>
    <template v-if="this.isactive == 'create'">
      <CreateInvoice />
    </template>
    <template v-else>
      <ViewInvoices />
    </template>
  </div>
</template>

...

テンプレートの下に、次のコード行を追加します。

src / component / Dashboard.vue

...

<script>
import Header from "./Header";
import CreateInvoice from "./CreateInvoice";
import ViewInvoices from "./ViewInvoices";

export default {
  name: "Dashboard",
  components: {
    Header,
    CreateInvoice,
    ViewInvoices,
  },
  data() {
    return {
      isactive: 'create',
      title: "Invoicing App",
      user : (this.$route.params.user) ? this.$route.params.user : null
    };
  }
};
</script>