如何为 Vue.js 构建后台？

How to build a backend for Vue.js_
How to build a backend for Vue.js_

本文将全面介绍如何为 Vue.js 构建后端。它将概述 Vue.js、优势和局限性、可用的部署方法，以及如何构建和托管 Vue.js 应用程序的分步指南。

Vue 是一个JavaScript 框架，用于构建灵活、高性能的用户界面（UI）和单页面应用程序（SPA）。

Vue 以其渐进性而著称，这意味着它可以逐步应用到现有项目中。Vue 还采用声明式语法，允许您描述所需的用户界面状态，并让 Vue 处理底层逻辑和更新。

除了渐进的特性和声明式语法外，Vue 还采用了虚拟 DOM，它是实际 DOM 的轻量级表示。这有助于它高效地渲染和更新用户界面。

在开发 Vue 应用程序时，集成像 Back4app 这样的后端即服务（BaaS）平台可以带来多种好处，如数据存储和用户身份验证，从而大大简化开发并节省时间。在本文中，您将了解 Vue 并学习如何使用 Back4app 构建 Vue 应用程序。

Vue 的优势

Vue 因其众多优势而越来越受欢迎，其中包括以下优势。

轻松学习曲线

Vue 的学习曲线相对简单，适合不同技能水平的开发人员。它的模板语法基于熟悉的 HTML，开发人员可以快速掌握基础知识并无缝使用 Vue。

Vue 采用清晰一致的 API 设计，为创建组件、使用指令和利用生命周期钩子提供了逻辑直观的模式，从而简化了应用程序的构建过程。

为了进一步促进学习过程，Vue 提供了全面的文档，其中包含精心撰写的解释和实际示例。此外，Vue 社区通过论坛和在线社区随时提供帮助、协作和丰富的学习资源。

轻量级框架

Vue 的文件大小很小，核心库经过缩减和压缩后只有 20KB 左右。Vue 的小体积加快了初始加载时间，提高了性能和用户体验。

此外，由于其模块化设计，您还可以选择性地只导入必要的功能，从而进一步缩小文件大小并优化性能。

基于组件的架构

在 Vue 中，应用程序是通过创建可重复使用且独立的组件来构建的。Vue 中的组件是封装了 HTML、CSS 和 JavaScript 逻辑的自足单元，因此更易于管理和理解。它们可以在整个应用程序中重复使用，从而节省开发时间和精力。

这种基于组件的架构允许您一次创建组件，并在整个应用程序或多个项目中重复使用。这种可重用性减少了冗余代码，促进了代码模块化。

每个组件都可以独立开发、测试和更新，而不会影响应用程序的其他部分。这反过来又简化了调试、重构以及为应用程序添加新功能的工作。

反应式数据系统

反应式数据是指当底层值发生变化时会自动变化的数据。Vue 通过在代理中封装反应对象来实现反应性。这使得 Vue 可以跟踪被访问的属性。

访问属性时，Vue 会将其添加到依赖项列表中。在更改依赖项的值时，Vue 会自动更新视图。

Vue 的反应式数据系统非常有用，因为当数据发生变化时，您无需手动更新视图，因为 Vue 会自动进行处理。这样，您就可以更轻松地编写声明式代码，并专注于描述所需的结果，而不是实现结果所需的步骤。

Vue 的局限性

虽然 Vue 有很多优点，但也必须考虑使用 Vue 开发网络应用的缺点。这些缺点包括以下几点。

较小的生态系统

与 Angular 和 React 等其他前端框架相比，Vue 的生态系统较小。Vue 的生态系统较小，这意味着它可能没有 Angular 和 React 那样多的可用库和工具。

较小的生态系统导致 Vue 在开发需要大量库和工具的大型复杂应用程序时处于劣势。这导致开发人员经常需要为特定需求构建定制解决方案，因为已有的解决方案要么有限，要么不被广泛支持。

有限的公司支持

与 React 和 Angular 不同，Vue 的企业支持有限。Angular 和 React 分别得到 Google 和 Facebook 的支持，而 Vue 是一个开源项目，维护团队规模较小。

在开发新功能、修复漏洞和安全更新方面，这种有限的企业支持可能是一个不利因素。此外，这也引起了一些企业的担忧，因为他们会优先考虑具有坚实企业支持和稳定性的框架，以便开展长期项目。

构建 Vue 应用程序的后台

Vue 应用程序的后端负责处理数据存储、身份验证、应用程序接口集成和服务器端逻辑任务。它是应用程序功能的基础，可促进前端与外部服务或数据库之间的通信。

在构建 Vue 应用程序的后端时，有多个选项可供使用，包括

传统服务器端技术

传统的后端框架，如 Laravel (PHP)、Ruby on Rails、Node.js 和ASP.NET(C#)，为构建 Vue 应用程序的后端提供了全面的解决方案。

这些框架成熟稳固，拥有庞大的社区和丰富的文档，确保了开发可扩展和安全应用程序的稳定性和成熟实践。

它们提供预建组件、代码生成器和脚手架工具，通过处理常见的后端任务来加速开发，让您可以专注于构建特定于应用程序的功能。

此外，传统框架还提供强大的对象关系映射（ORM）工具，通过面向对象的代码简化数据库操作并确保数据完整性。

不过，与其他选择相比，传统的后端框架可能需要更多的设置和配置，这可能会让初学者或后端经验有限的开发人员望而生畏。此外，这些框架的学习曲线可能会因为其广泛的功能集和惯例而更加陡峭。

后台即服务（BaaS）

后台即服务（BaaS）平台（如 Back4app）为构建 Vue 应用程序的后台提供了便捷的解决方案。BaaS 平台抽象了后端基础设施的复杂性，提供预构建的后端服务和 API，开发人员可以轻松地将其集成到 Vue 应用程序中。

BaaS 平台通过提供各种预构建的后端服务（如数据存储、用户身份验证、文件存储和推送通知）来加速开发。这些服务可快速集成到 Vue 应用程序中，从而减少开发时间和工作量。

虽然后端即服务（BaaS）平台提供了便利性和可扩展性，但也有一些注意事项需要牢记。其中一个缺点是可能会锁定供应商，因为 BaaS 平台可能会将您的后端代码与其特定服务和 API 紧密结合。

对后台的定制和控制也可能有限，这对于有独特需求的应用程序来说可能是一个挑战。

构建 Vue 博客应用程序

要创建 Vue 应用程序，请在项目目录终端运行以下命令：

npm create vue@latest

这段代码将返回一个提示，您可以在此命名 Vue 应用程序，并选择 Vue 应用程序中要使用的功能。

脚手架 VUE 应用程序

命名应用程序并选择 Vue 路由器来处理应用程序中的路由后，cd进入应用程序并运行npm install命令来安装依赖项。

在 Vue 博客应用程序的视图目录中，创建两个视图：CreatePosts.vue和ReadPosts.vue。

创建视图后，将下面的代码块添加到路由器目录下的index.js文件中：

//index.js
import { createRouter, createWebHistory } from 'vue-router'
import CreatePosts from '../views/CreatePosts.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'post',
      component: CreatePosts
    },
    {
      path: '/readposts',
      name: 'read-posts',
      component: () => import('../views/ReadPosts.vue')
    }
  ]
})

export default router

上面的代码块为 Vue 路由器实例设置了两条路由：与CreatePosts组件相关联的"/"路径，以及与动态导入的ReadPosts组件相关联的"/readposts "路径。该路由器实例负责管理 Vue 应用程序中的导航。

接下来，在App.vue文件中添加一个包含嵌套在按钮HTML 标记中的路由的页眉，以便应用程序用户导航到所需的路由。

就像这样

<!-- App.vue -->
<script setup>
import { RouterLink, RouterView } from 'vue-router';
</script>

<template>
  <header>
    <h1>Vue Blog</h1>

    <nav>
        <RouterLink to="/" class="link"><button>Create Posts</button></RouterLink>
        <RouterLink to="/readposts" class="link"><button>Read Posts</button></RouterLink>
      </nav>
  </header>

  <RouterView />
</template>

上面的代码块在博客应用程序中设置了路由。它从vue-router库中导入了RouterLink和RouterView组件。它在App.vue文件的脚本设置块（Vue 3 功能）中导入了这些组件。

模板块包含App.vue文件的 HTML 标记。它包括一个标题为“Vue 博客 “的页眉和一个导航栏，导航栏中有两个按钮，这两个按钮由一个RouterLink组件封装，可链接到相应的路由。RouterView组件用于呈现当前路由的内容。

设置好路由后，将下面的样式块添加到App.vue文件中，为标题和路由链接设计样式：

<style lang= "scss" scoped>
  header{
    padding: 1rem 0;
    display: flex;
    justify-content: space-between;

    nav{
      display: flex;
      gap: 1rem;

      .link{
        text-decoration: none;
        color: inherit;
      }
    }

  }
</style>

将 Back4app 集成到您的 Vue 博客应用程序中

首先设置您的 Vue 应用程序，然后在 Back4app 上创建一个实例，以便与您的 Vue 应用程序建立连接。为此，您需要一个 Back4app 账户。

如果您还不是 Back4app 用户，请按照以下简单步骤注册：

  1. 导航至Back4app 网站。
  2. 在主页上找到注册按钮并点击。
  3. 填写注册表并提交。

账户设置成功后，请登录 Back4app。查找右上角的 “新应用程序 “选项并选择它。这将引导您进入一个表格，您需要在此提供您的应用程序名称。输入名称后，点击 “创建 “按钮完成创建过程。

创建新的 Back4app 应用程序

点击 “创建 “按钮后，您的申请将被生成，您将被引导至申请仪表板。

back4app 仪表板

将 Vue 博客应用程序连接到 Back4app

要将 Vue 应用程序连接到 Back4app，首先需要安装 Parse JavaScript SDK。

要安装 SDK，请根据您使用的软件包管理器运行以下命令之一：

#using npm
npm install parse
		or 
#using yarn
yarn add parse

接下来，您需要使用 Back4app应用程序的两个凭证（应用程序 ID和Javascript KEY）配置 SDK。

在仪表板上选择 “应用程序 设置“，导航至 “安全和密钥“部分，从 Back4app 获取应用程序 ID和JavaScript 密钥。

Back4app 应用程序密钥

以纯文本方式存储应用程序密钥存在安全风险，因为恶意用户可以访问应用程序。因此，应使用环境变量或首选的敏感密钥存储方法安全地存储应用程序的凭证。

接下来，在main.js文件中从安装的parse软件包中导入经过精简的Parse版本。然后调用Parse对象的初始化方法，并将应用程序 ID和JavaScript Key作为参数传递。

最后，将Parse.serverURL属性设置为“https://parseapi.back4app.com/”。

例如

import Parse from 'parse/dist/parse.min.js';

Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';

添加上面的代码块后，main.js文件应与下面的代码块相似：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import Parse from 'parse/dist/parse.min.js';
import './assets/main.css';

const app = createApp(App)

app.use(router)

Parse.initialize(VUE_APP_PARSE_APPLICATION_ID, VUE_APP_PARSE_JAVASCRIPT_KEY);
Parse.serverURL = '<https://parseapi.back4app.com>';

app.mount('#app')

向 Back4app 添加数据

要获取博客用户的数据，您需要创建一个表单。提交表单后，Vue 应用程序将运行一个submitPost()函数，执行将数据保存到 Back4app 实例中所需的逻辑。

将下面的代码块添加到CreatePosts.vue文件中，以创建表格：

<!-- CreatePosts.vue -->
<script setup>
import { ref } from 'vue';
import { Parse } from 'parse/dist/parse.min.js';

const blog = ref({
  title: "",
  post: "",
})

function submitPost() {
  try {
      const Post = new Parse.Object("Post");
  
      Post.set("title", blog.value.title);
      Post.set("body", blog.value.post);
  
      Post.save().then(() => {
        console.log("New Post added successfully");
      });
    } catch (error) {
      console.log(error);
    }
  blog.value.title = ''
  blog.value.post = ''
}
</script>

<template>
  <form @submit.prevent="submitPost">
    <input id="blog-title" v-model="blog.title" placeholder="Title"/>
    <textarea id="blog-post" v-model="blog.post" placeholder="Post" rows="20"></textarea>
    <button>Submit Post</button>
  </form>
</template>

上面的代码块是一个可以让用户提交博文的组件。它使用了 Vue 合成 API 并从 Vue 库中导入了ref函数。

submitPost函数会创建一个新的 ParsePost对象，并使用set方法将该Post对象的title和body属性设置为blog.title和blog.post属性的值。

然后，使用保存方法将Post对象保存到 Back4App。无论成功与否，代码都会在控制台中显示一条信息。提交帖子后，博客对象中的标题和帖子值将重置为空字符串，同时清除表单字段。

该文件的 块定义了一个带有@submit.prevent事件监听器的表单元素，该监听器可在表单提交时触发submitPost函数。

表单中的输入和文本区域元素通过v-model 与博客对象的属性（blog.title和blog.post）绑定。这就实现了双向数据绑定，确保表单元素的变化能更新博客对象。

将下面的代码块添加到CreatePosts.vue文件中，为CreatePosts视图设计风格，使用户界面更具吸引力：

<style lang= "scss" scoped>
  form{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;

    input{
      padding: 1rem;
      background-color: #f2f2f2;
      font-family: 'Poppins', sans-serif;
      border: none;
      border-radius: 12px;
      inline-size: 70%;

      &::placeholder{
        color: #e3e3e3;
        font-weight: bold;
        font-family: 'Poppins', sans-serif;
      }
    }

    textarea{
      padding: 1rem;
      border: none;
      background-color: #f2f2f2;
      font-family: 'Poppins', sans-serif;
      border-radius: 12px;
      inline-size: 70%;

      &::placeholder{
        color: #e3e3e3;
        font-weight: bold;
        font-family: 'Poppins', sans-serif;
      }
    }
  }

</style>

从 Back4app 读取数据

要在应用程序中显示保存在 Back4app 实例中的数据，首先必须能够从 Back4app 实例中读取数据。

要从 Back4app 实例中读取数据，您需要为要获取数据的类创建一个 Parse 查询。然后，您可以使用 Vue 的onBeforeMount生命周期钩子来获取数据并将其显示在您的应用程序中。

例如

<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';

const postList = ref([])

onBeforeMount( async () => {
  try {
      const query = new Parse.Query("Post");

      const post = await query.find();

      console.log('Posts to be read displayed')
      postList.value = post;
      console.log(postList.value)

    } catch (error) {
      console.log(error);
    }
})

</script>

<template>
  <div>
    <ul class="postlist">
      <div class="post" v-for="(post, index) in postList">
        <div>
          <h2>{{ post.get('title') }}</h2>
          <p>{{ post.get('body') }}</p>
        </div>
      </div>
    </ul>
  </div>
</template>

ReadPosts.vue文件从 Back4app 获取并显示帖子。该脚本从vue软件包中导入了onBeforeMount钩子和ref函数。该钩子会在 Vue 应用程序挂载前执行一个异步函数。

该函数使用Parse.Query()方法从 Back4app 应用程序的数据库中搜索 “Post “对象。然后，在Parse.Query()调用的结果上调用 Parse查找方法，返回一个包含查询结果的数组。最后，将返回的数组赋值给postList变量。

在模板块中，v-for指令在postList数组中循环，并为postList数组中的每个帖子生成一个新的div元素。post.get()方法会检索 Back4App 数据库中标题和正文属性的值。

现在，您可以在样式块中添加以下Scss代码，为ReadPosts.vue文件添加样式：

<style lang= "scss" scoped>
  .postlist{
    display: flex;
    flex-direction: column;
    gap: 2rem;

    .post{
      display: flex;
      justify-content: space-between;
      padding: 1rem;

      h2{
        margin-block-end: 1rem;
        text-transform: uppercase;
      }

      p{
        opacity: 0.4;
        font-weight: bold;
        font-size: 13px;
        margin-block-end: 0.5rem;
      }

    }
  }

</style>

修改 Vue 应用程序以添加删除帖子功能

您可以为博客应用程序添加的另一个重要功能是删除文章。要实现这一功能，请使用 Parse SDK 提供的 destroy 方法。

就像这样

<!-- ReadPosts.vue -->
<script setup>
import { onBeforeMount, ref } from 'vue';
import Parse from 'parse/dist/parse.min.js';
const postList = ref([])

onBeforeMount( async () => {
  try {
      const query = new Parse.Query("Post");

      const post = await query.find();

      console.log('Posts to be read displayed')
      postList.value = post;
      console.log(postList.value)

    } catch (error) {
      console.log(error);
    }
})

const deletePost = async (id) => {
  try {
      const Post = Parse.Object.extend("Post");
      const todo = new Post();
      todo.id = id;
      await todo.destroy();
      const newPostList = postList.value.filter( (item) => item.id !== id )
      postList.value = newPostList;
    } catch (error) {
      console.log(error);
    }
}

</script>

此脚本是对ReadPosts.vue文件的更新，用于处理删除功能。deletePost函数使用Parse.Object.extend方法创建了一个新的Post对象。然后将Post对象的id属性设置为传递给函数的id参数。

接下来，它会调用Post对象的destroy方法，从 Back4app 数据库中删除带有给定ID的帖子。然后过滤postList数组，并返回一个新数组newPostList，其中包含除已删除帖子之外的所有帖子。然后将newPostList数组赋值给postList变量。

然后，您可以将deletePost函数绑定到ReadPosts.vue文件模板块中按钮元素的点击事件上。

就像这样

<template>
  <div>
    <ul class="postlist">
      <div class="post" v-for="(post, index) in postList">
        <div>
          <h2>{{ post.get('title') }}</h2>
          <p>{{ post.get('body') }}</p>
        </div>
        <button @click="deletePost(post.id)">Delete</button>
      </div>
    </ul>
  </div>
</template>

最后，在 assets 目录中添加一些全局样式，为 Vue APP 的按钮和主体设计样式：

/* main.css */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    inline-size: 90%;
    margin: auto;
    font-family: 'Poppins', sans-serif;
}

button{
    border: none;
    padding: 0.5rem 0.8rem;
    background-color: inherit;
    font-family: 'Poppins', sans-serif;
    font-size: small;
    font-weight: bold;
    color: #333333;
    border-radius: 12px;
}

button:hover{
    color: #e2e2e2;
    background-color: #333333;
  }

使用集成的 Back4app 测试您的 Vue 博客应用程序

现在，您已构建并将 Back4app 集成到 Vue 应用程序中。您可以在项目终端运行 npm 命令来测试应用程序：

npm run dev

该命令编译应用程序，并将应用程序托管到特定的本地服务器http://localhost:5173/

当应用程序启动时，你应该会看到用于创建帖子的 “创建帖子 “视图作为你的主路径：

vue 博客首页

填写输入字段后，点击 “提交帖子 “按钮即可将输入值添加到 Back4app 数据库中。请查看 Back4app 应用程序控制面板或浏览 ReadPosts 视图以确认这一点。

vue 博客

点击删除按钮可以删除帖子。例如，点击 “删除 “按钮删除 “第二个帖子”：

vue 博客

结论

Vue 凭借其反应式数据绑定、基于组件的架构和库生态系统，为开发人员创建现代网络应用程序提供了强大且可扩展的解决方案。

将 Vue 与 Back4app 集成后，开发人员可以轻松处理应用程序的后台。Back4app 降低了传统后台开发的复杂性，使开发人员可以创建全栈网络应用程序。


David Ekete

David Ekete兼具資深技術作家和傑出後端開發者的雙重專長，使他在提供清晰、全面的技術文檔以及構建高效、可擴展的網絡應用程式方面獨樹一幟，成為業界權威。他的豐富背景包括在back4app、Draft.dev和MUO等行業領袖處擔任高端職位，同時他在Elevate Apps和Terrahaptix等公司擔任後端工程師與工程實習生時表現卓越。 憑藉豐富的實戰經驗，David擁有The Linux Foundation、Sololearn和Udemy頒發的業界認可證書，證明了他在技術文檔、API開發及現代程式語言方面的精通。他的資歷與卓越業績使他成為追求技術卓越與創新解決方案的團隊不可或缺的資產。 請在 GitHub 🛠️ 上瀏覽他的前沿項目和程式碼庫，並透過 LinkedIn 🔗 與他聯繫，了解他的專業知識如何提升您的技術項目。無論您需要專業技術文檔、穩健的後端開發，還是具備扎實工程基礎的協作型問題解決者，David Ekete都已準備好帶來顯著影響。

Leave a reply

Your email address will not be published.