如何使用 Node 构建轻量级发票应用程序：用户界面

笔记首页 >> 教程系列 >> 如何使用 Node 构建轻量级发票应用程序：用户界面

如何使用 Node 构建轻量级发票应用程序：用户界面

介绍

在上一教程中，您为发票应用程序构建了后端服务器。在本教程中，您将构建用户将与之交互的应用程序部分，即用户界面。

注意：这是 3 部分系列的第 2 部分。第一个教程是How To Build a Lightweight Invoicing App with Node: Database and API。第三个教程是如何使用 Vue 和 Node 构建轻量级发票应用：JWT 身份验证和发送发票。

本教程中的用户界面将使用Vue构建，并允许用户登录以查看和创建发票。

先决条件

要完成本教程，您需要：

Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。

本教程已通过 Node v16.1.0、npmv7.12.1、Vue v2.6.11、Vue Router v3.2.0、axiosv0.21.1 和 Bootstrap v5.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

这将使用内联预设配置通过Vue Router创建 Vue.js 项目。

导航到新创建的项目目录：

cd invoicing-app-frontend

启动项目以验证没有错误。

npm run serve

如果您localhost:8080在 Web 浏览器中访问本地应用程序（通常位于），您将看到一条"Welcome to Your Vue.js App"消息。

这将创建Vue我们将在本文中构建的示例项目。

对于此发票应用程序的前端，将向后端服务器发出大量请求。

为了实现这一点，我们将使用axios。要安装axios，请在项目目录中运行命令：

npm install axios@0.21.1

要在应用程序中允许一些默认样式，您将使用Bootstrap.

首先，public/index.html在代码编辑器中打开文件。

将用于 Bootstrap 的 CDN 托管的 CSS 文件添加到head文档的：

公共/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文档的：

公共/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使用以下代码行替换的内容：

源代码/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 Router

对于此应用程序，您将有两条主要路线：

/ 呈现登录页面
/dashboard 呈现用户仪表板

要配置这些路由，请打开src/router/index.js并使用以下代码行更新它：

src/路由器/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>

Header 组件有一个prop名为user. 这prop将由将使用标头组件的任何组件传递。在标题的模板中，Navigation组件被导入并使用条件渲染来确定是否Navigation应该显示。

该Navigation组件是包含不同操作链接的侧边栏。

Navigation.vue在/src/components目录中创建一个新组件。该组件具有以下模板：

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>

创建的组件有两个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运行服务器。此外，您可能会遇到 CORS（跨源资源共享）错误，您可能需要通过设置Access-Control-Allow-Origin标头来解决该错误。

尝试登录和注册新用户。

创建仪表板组件

当用户路由到/dashboard路由时，将显示仪表板组件。它默认显示Header和CreateInvoice组件。

Dashboard.vue在src/components目录中创建文件。该组件有以下几行代码：

源代码/组件/仪表板.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>

...

在模板下方，添加以下代码行：

源代码/组件/仪表板.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>