将 Ionic Vue 应用程序与 Firebase 集成 — Firestore CRUD 操作

[](https://res.cloudinary.com/practicaldev/image/fetch/s--AGLvqLae--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/1024/1%2A8HepPqrsdvtFHopkRe9VSA.png)

在本教程中,我们将学习如何将 Ionic Vue 应用程序与 Firebase firestore 集成并使用基本的数据库操作。 Firebase 是与少量用户打交道时的最佳选择之一(对于未付费版本)。您可以使用 Firebase 添加很多东西,例如推送通知、数据库提供程序、身份验证方法、Firebase 函数等等。

什么是离子?

Ionic 是由 Drifty Co. 的 Max Lynch、Ben Sperry 和 Adam Bradley 于 2013 年创建的用于混合移动应用程序开发的完整开源 SDK。Ionic 为使用 CSS 等 Web 技术开发混合移动应用程序提供工具和服务、HTML5 和 Sass。可以使用这些 Web 技术构建应用程序,然后通过本地应用程序商店分发以安装在设备上。

我们可以使用 Cordova 或 Capacitor 来构建这些很棒的应用程序并拥有原生功能。有了这个,我们可以使用一些很棒的原生插件,比如 Image cropper、Camera 等等。

电容 — 和Cordova有什么区别?

本节仅与使用 Ionic / Cordova 一段时间的人相关。很长一段时间以来,Cordova 一直是 Ionic 应用程序开发人员的唯一选择。 Cordova 帮助将 Ionic Web 应用程序构建到设备可安装应用程序中。

Capacitor 与 Cordova 非常相似,但在应用程序工作流程中存在一些关键差异

以下是 Cordova 和 Capacitor 之间的区别(只有在您之前使用过 Cordova 时您才会欣赏这些,否则您可以跳过)

1. Capacitor 将每个平台项目视为_源资产_而不是_构建时间资产_。这意味着 Capacitor 希望您将平台源代码保留在存储库中,这与 Cordova 不同的是,Cordova 始终假定您将在构建时生成平台代码

2. 由于以上原因,Capacitor 没有使用 config.xml 类似的自定义配置进行平台设置。相反,通过编辑 Android 的 AndroidManifest.xml 和 Xcode 的 Info.plist 来进行配置更改

3. 电容器不会“在设备上运行”或通过命令行进行仿真。相反,此类操作通过特定于平台的 IDE 进行。因此,您不能使用 ionic run ios 之类的命令来运行离子电容器应用程序。您必须使用 Xcode 运行 iOS 应用程序,使用 Android Studio 运行 Android 应用程序

4. 由于平台代码不是_源资产,_您可以直接使用Xcode或Android Studio更改原生代码。这为开发人员提供了更大的灵活性

从本质上讲,Capacitor 就像一个全新的、更灵活的 Cordova 版本。

什么是Vue?

Vue 是一个用于构建用户界面的渐进式框架。与其他单体框架不同,Vue 从头开始设计为可逐步采用。核心库仅专注于视图层,易于获取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue 也完全能够为复杂的单页应用程序提供动力。 (如果您想了解更多关于 Ionic Vue 的信息,请阅读 Ionic Vue 博客简介)

火力基地🔥

如果你已经知道什么是 firebase — 跳过本节。

Firebase 是一种流行的后端即服务 (BaaS) 平台。它从YC11 初创公司开始,并成长为谷歌云平台上的下一代应用程序开发平台。由于易于集成和可用的各种功能,它日益流行。

Firebase 提供了许多快速集成。下面列出了其中一些:

• 实时数据库🗄️

• Firestore 数据库

• 邮件认证📧

• 社交登录📱

• 应用内消息

• 推送通知

• 分析📊

• Crashlytics 💥

• 远程配置

Firebase 正在迅速成长为最受欢迎的移动应用后端平台。现在我们有了一种使用 emulator 来处理 firebase 项目的简单方法。您可以在 localhost 中运行一个 firebase 项目,而不是花钱创建一个云实例,它使工作变得简单而干净。如果您想了解有关 Firebase 模拟器的更多信息,您可以访问Firebase 模拟器博客。

将 Ionic Vue 应用程序与 Firebase 连接

在本节中,我们将完成三个步骤:

1. 从 firebase 控制台设置 firebase 项目

2.创建Ionic VueProject(与firebase集成)

3. 最后,在 Cloud Firestore 中执行 CRUD 操作。

Step — 1.设置firebase项目:-

首先,我们必须在firebase Console中创建一个新的 Firebase 项目,然后只需点击 Add Project 并输入项目详细信息。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--tJPTw3-F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images- 1.medium.com/max/914/1%2AfpCWNXgmZJh-X_JwWbRolQ.png)

现在一旦创建了 firebase 项目,然后转到 cloud firestore 并创建一个 firestore 数据库。请记住,您应该在测试模式下创建 firestore 数据库**(测试模式为每个人启用读取、写入、更新和删除权限)**

[](https://res.cloudinary.com/practicaldev/image/fetch/s--c3gtKA9H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/285/1%2AkZDN6bsEs_Yix3Hdpzqadg.png)

现在我们已准备好将 Firebase 与 Ionic Vue 集成,但我们必须复制 Firebase 项目配置,以便我们可以在 Vue 项目中使用它。要复制配置,只需转到 project settings 并复制 firebase 项目。 (我们只需要项目 ID)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--23WcTPkB--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/1024/1%2Akci9NM0iQsdzv4E0n0oF4Q.png)

2\。创建一个新的 Ionic Vue 项目并将其与 Firebase 项目集成

您可以在此处获取 Ionic Vue 应用程序的完整源代码。在集成之前,我们必须创建一个新的 Ionic Vue 项目,要创建一个新的 Ionic 项目,请按照以下步骤操作:-

要创建 Ionic Vue 项目,您必须遵循与 Ionic react 或 angular 相同的步骤。但请记住,您拥有的是最新版本的 Ionic-cli,因为 Vue 在较新版本中进行了更新(Ionic-cli V6.12.2 — 在撰写博客时)。您可以使用以下命令更新 ionic-cli:-

$ npm install -g @ionic/cli

进入全屏模式 退出全屏模式

更新完成后,现在我们可以创建一个新的 Ionic + Vue 应用程序。要创建,您可以运行以下命令:-

$ ionic start firebaseVue blank --type vue

进入全屏模式 退出全屏模式

上面的命令包含项目名称,之后你可以传递模板类型,如‘blank’、‘tabs’来选择Ionic Vue项目的布局。最后,我们将 vue 作为 type of framework 使用。该命令将需要一些时间来创建项目,之后将在工作目录中创建一个新项目。我们已经创建了一个新的 Ionic Vue 项目,现在我们将它与 Firebase 集成。

要将 Ionic Vue 与 firebase 集成,我们必须使用以下命令在项目中安装 firebase:

npm install firebase

进入全屏模式 退出全屏模式

在 Ionic Vue 项目中安装 firebase 后,我们必须在 Vue 项目的 src 目录中创建 firebase-service.ts 文件。 src 文件夹结构如下所示:-

[](https://res.cloudinary.com/practicaldev/image/fetch/s--n8F9s4cX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/216/1%2AEZ93ClRK0l7kFxlvM5QyUw.jpeg)

firebase-service.ts 将包含所有与 firebase 相关的逻辑,例如 firebase 项目的初始化、查询相关逻辑。首先,我们来看一下 Ionic Vue 项目中 Firebase 项目的初始化。

在上面的代码中,我们首先使用firebase-service.ts中的import语句导入安装好的firebase

import firebase from "firebase/app";

import "firebase/firestore";

进入全屏模式 退出全屏模式

现在我们将使用 firebase 实例使用它的 initializeApp () 方法来初始化 firebase 项目。要初始化 firebase 项目,我们必须使用 projectID(我们从 Firebase Config 复制而来)。

您还需要 Firebase CLI 才能使用一些 Firebase 命令。如果您想了解有关如何安装 firebase/cli 的更多信息,您可以在此处访问并检查您的操作系统的要求。

您必须登录 Firebase。 (如果不使用 firebase login 命令登录到您的终端,该命令将在安装 firebase/cli 后生效)

_const_ db = firebase.initializeApp({
   projectId: ' **Your firebase projectID**'
}).firestore();

进入全屏模式 退出全屏模式

现在数据库实例已创建,我们将使用此数据库实例来使用云 Firestore 中的集合和文档。 firebase-service.ts 导出包含执行查询相关逻辑的子函数的函数。我们以从 Firestore 集合中读取数据为例。我们将在下一节中进行更多解释。

_const_ readFromFirebase = async (_collectionName_) _=>_ {
  _const_ FirebaseCollection = db.collection(collectionName);
  _const_ querySnapshot = await FirebaseCollection.get();
  _const_ result = querySnapshot.docs.map((_doc_: _any_) _=>_ {
  return {...doc.data()}
});
  return result;
};

进入全屏模式 退出全屏模式

在此代码中,db.collection(collectionName) 将创建集合/表的实例。我们将使用该实例使用实例的 get () 方法从表中读取数据。

3\。使用 Cloud Firestore 添加 CRUD 操作

我们在 Vue 项目中添加了 firebase-service.ts 文件并初始化了 firebase 项目。现在我们将创建用于执行 CRUD 操作的视图。

1. 创建操作:-

为了执行 CREATE 操作,我们将构建一个简单的 UI,它将输入作为 username 和 password。给定的输入将保存到云 Firestore 中的 users 集合中。我们将使用 Create.vue 文件来执行创建操作。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WMlqEhLv--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/215/1%2AOf8D-tsINXcUlESpUDs6pg.jpeg)

创建 Create.vue 文件后,我们将在文件中添加 UI 和相关 Logic。在下面的代码中,我们使用 User Object 调用 firebase-service createOperation() 方法 [Line 68 in below code]。代码如下,我们稍后会解释 firbase CRUD 部分:

上面的代码 UI 将呈现如下:-

[](https://res.cloudinary.com/practicaldev/image/fetch/s--hos2imxy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/301/1%2Aa21aV_z15Hqww-4yb2JzLA.jpeg)

在上面的代码中,我们创建了两个输入字段(用于_username_ 和_password_)和两个按钮(用于保存数据和获取用户列表)。为了执行创建操作,我们定义了 createOperation()

async createOperation() {
  _const_ userObject = {
    username: this.username,
    password: this.password
   }
  _console_.log('Data', this.username, this.password);
  _const_ UsersData = await firebaseService().createOperation('Users',
  userObject);
},

进入全屏模式 退出全屏模式

只需调用 firebase-service.ts 文件 (在博客前面创建)中定义的 create operation() 函数,使用 collectionName 和 userData 作为参数 [第 68 行以上代码]。并在阅读操作(查看数据按钮)[上面代码中的第 29 行]_ 导航到 ** Read.vue**

2\。读取操作:-

要执行读取操作,请添加 Read.vue 文件并显示带有更新和删除按钮的用户列表。下面是 Read.vue 文件的代码,它由 UI 渲染和读取操作相关的逻辑组成。

上面的代码将呈现这样的 UI:-

[](https://res.cloudinary.com/practicaldev/image/fetch/s--2FLAiqB6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1。 medium.com/max/298/1%2AOTX-4RKcftp0YMkJZwD-IA.jpeg)

上面的代码由 created () 方法_[上面代码中的第 36 行]_ 组成,一旦 Read.vue 页面加载到 DOM 中就会被调用。所以在这个方法中,我们将调用 firebase-service 的方法来获取/读取 Users 集合中的所有用户。

created() {
  _const_ usersList = firebaseService().readOperation('Users');
  usersList.then((_data_: _any_) _=>_ {
  this.usersList = data;
  })
}

进入全屏模式 退出全屏模式

现在我们可以使用 ion-list 渲染用户列表(即 this. usersList ),并将使用“ v-for ”道具_[上面代码中的第10行]_渲染它。

<ion-list>
  <ion-item v-for="(item, index) in usersList" :key="index">
    {{ item.username }}
    <ion-button slot="end" @click="updateOperation(item, index)">update</ion-button>
    <ion-button slot="end" @click="deleteOperation(item, index)">Delete</ion-button>
  </ion-item>
</ion-list>

进入全屏模式 退出全屏模式

3\。删除和更新操作:-

对于删除操作,将调用 deleteOperation () 方法(在 firebase-service.ts 中定义)并传入 collectionName 和用户 username 作为参数。

deleteOperation(_item_: _any_, _index_: _any_) {
  _console_.log(item);
  this.usersList.splice(index, 1);
  firebaseService().deleteOperation('Users', item.username);
}

进入全屏模式 退出全屏模式

对于更新操作方法_[read.vue 文件中的第 50 行]_,我们只需导航到 Update.Vue 页面,其中用户的用户名作为 params [passing {id: data.username}]使用路由器功能。

async updateOperation(_item_: _any_, _index_: _any_) {
  _const_ data: _any_ = await firebaseService().findIdForDoc('Users', item.username);
  this.$router.push({name: 'Update', params: {id: data.username}})
}

进入全屏模式 退出全屏模式

4\。更新操作:-

要执行更新操作,我们只需创建 Update.vue 文件。并将向其添加更新的页面 UI 和查询相关的逻辑。下面是 Update.Vue 文件的代码。

上面的代码将呈现如下:-

[](https://res.cloudinary.com/practicaldev/image/fetch/s--i1P6VfJg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn-images-1. medium.com/max/302/1%2AL9ONaNUOwHdgg9Ez9cpk_A.jpeg)

我们已经从 Read.vue 文件 [第 54 行 in read.vue 文件] 中传递了用户的用户名,并将使用 props 选项在 Update.Vue 文件中获取该用户名。现在我们可以在整个代码中将用户名称为 this.id。

props: ['id']

进入全屏模式 退出全屏模式

现在要执行更新操作,我们定义了 updateOperation () 方法。并且在这个函数内部将调用 updateOperation () 方法(在 firebase-service 文件中定义)并传入 collectionName 和更新的用户数据作为参数。

async updateOperation() {
  _const_ updated = await firebaseService().updateOperation('Users', this.usersData);
  this.router.push('/read');
}

进入全屏模式 退出全屏模式

现在我们完成了在 Firebase 集合中执行的所有 CRUD 操作。但是要使这段代码工作,我们必须更改在 router/index.ts 中定义的路由器文件

上面的代码将处理 Ionic Vue 应用程序中存在的所有路由,您可以将 index.ts 文件更改为此代码。我们在不同的页面上定义了许多 firebase-service.ts 函数。以下是 firebase-service.ts 文件的完整代码。

结论

在本教程中,我们学习了如何将 Ionic Vue 应用程序与 Firebase 云 Firestore 集成,并学习了 Ionic Vue 应用程序的一些基础知识。您可以在此处获取此 Ionic Vue 应用程序的源代码。如果您想了解更多关于任何技术或功能的信息,您可以访问Enappd 博客。

后续步骤

如果您喜欢这个博客,您还会发现以下 Ionic 博客很有趣且很有帮助。欢迎在评论区提出任何问题

• 离子支付网关 — Stripe|贝宝|苹果支付|剃须刀支付

• 离子图表与 — Google 图表|高图表|d3.js|Chart.js

• 离子社交登录 — Facebook|谷歌|推特

• 离子认证 — 通过电子邮件|匿名

• 离子特征 — 地理位置|二维码阅读器|计步器

• 离子媒体 — 音频|视频|图像选择器|图像裁剪器

• Ionic Essentials — 原生存储|翻译|RTL

• 离子消息传递 — Firebase 推送|阅读短信

• Ionic 与 Firebase — 基础|托管和数据库|云功能

带电容器的离子反应完整应用程序

如果您需要一个基础来启动您的下一个 Ionic 5 React Capacitor 应用程序,您可以使用Ionic 5 React Full App in Capacitor制作您的下一个很棒的应用程序

[的 Ionic 5 React Full App in Capacitor ](https://res.cloudinary.com/practicaldev/image/fetch/s--VtnFDcof--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https ://cdn-images-1.medium.com/max/760/1%2AG3yOFVX4oABx9MhUy-3kng.png)

离子电容器全应用(角)

如果您需要一个基础来启动您的下一个 Angular Capacitor 应用程序,您可以使用Capacitor Full App制作您的下一个很棒的应用程序

[](https://res.cloudinary.com/practicaldev/image/fetch/s--3CTfBLjg--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/ https://cdn-images-1.medium.com/max/736/0%2AUwSHcofTMStMnzAX.png)

离子完整应用程序(Angular 和 Cordova)

如果您需要一个基础来启动您的下一个 Ionic 5 应用程序,您可以使用Ionic 5 Full App制作您的下一个很棒的应用程序

[](https://res.cloudinary.com/practicaldev/image/fetch/s--g_hLq_eU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/ https://cdn-images-1.medium.com/max/700/0%2A1ArpKyhiDHZnevwB.jpeg)

---