Vue.js 结合 Firestore 实际应用
作者: Lukas van Driel | 译:永无止晋
原文地址:https://www.smashingmagazine.com/2018/04/vuejs-firebase-firestore/
你想做一个网站或者APP,竟然没有服务器?竟然没有数据库?竟然没有域名?你还不会后端技术?那都不是事儿!本文讲解如何利用 Firestore 配合 vue.js 做一个“八卦”网站。
ps: 访问 firebase 控制台需要“蓝灯”等网络代理
Firestore
是 Google Firebase 的一种新的数据存储方式(目前处于测试阶段),它以 Firebase 实时数据库为基础,且增加了一些漂亮的功能。在本文中,我们将使用 Vue.js 和 Firestore 建立一个网站。
假设你想制作一个新的产品(例如下一个 Twitter ,Facebook 或 Instagram )。 首先,你要制作本产品的原型或最小可行产品,即 MVP(Minimum Viable Product), 这样尽可能快地构建应用程序的核心,以便你可以将其展示给用户获取反馈并分析使用情况。这样用最短的时间完成,后续也可以快速迭代。
开始之前,我们先来给这个产品起一个厉害的名字,我们就叫它 “Amazeballs” 。
下面是我预想的设计:
Amazeballs 的定位是—–一个与朋友们分享生活中的“八卦”的应用。网站分为两部分,上面区域,我们放一个输入表单用来发表你的“八卦”,下面用来展示好友们的“八卦”。
构建一个 MVP,你需要能够快速实现功能,随后可以灵活的添加和更改功能的工具。Amazeballs 的技术选型为 Vue.js( JavaScript 渲染框架),并用 Firebase(by Google)以及他的实时数据库—- Firestore 提供支持。
Firestore 可以使用传统的HTTP请求直接访问,可以让你在没有任何服务器的情况下在线存储数据,这使得它成为一个完整的后端即服务解决方案。
以上听起来可能有点挑战性,但其实很容易,我会引导你一步一步的创建和托管这个网站。不要看这篇文章有一个长长的滚动条,它并没有很多步骤。当然,如果你想直接看这个项目的源码,你可以在 GitHub 上下载并运行程序。
让我们开始吧
我们从 Vue.js 开始,这是一个非常适合 JavaScript 初学者的框架,别小看了它,它包含了很多强大的功能,可以从 HTML 开始并逐渐添加逻辑,这也使它成为我前端框架的首选。
Vue.js有一个搭建项目脚手架的命令行界面(CLI)。 我们将使用它快速搭建项目开发环境。 首先,安装 CLI ,然后使用它来创建基于 webpack-simple
模板的新项目。
1 2 |
npm install -g vue-cli vue init webpack-simple amazeballs |
如果您按照以上截图上的步骤( npm install和npm run dev ),浏览器将打开一个大 Vue.js 徽标。
恭喜你,项目的脚手架已经搭建成功,好的开头是成功一半哦。
下一步,我们需要创建一个 Firebase 项目,打开 firebase 控制台(由于网络问题,控制台打开过程可能有点慢,请耐心等待),点击添加项目创建一个项目。一个项目从免费的 Spark 计划开始,它为您提供有限的数据库(1 GB 数据,每天读取5万次)和1 GB 托管。 这对我们的 MVP 来说已经绰绰有余。当访问量不断增大时,可以升级配置。
点击“将 Firebase 添加到您的网页应用”来查看你需要的配置信息。我们将在应用程序中使用这个配置,和 Vue.js 的状态管理配合使用使一种很好的方式。
首先运行 npm install firebase
安装 firebase ,然后创建一个文件 src/store.js
。这个文件将会被用来做状态管理,让每一个 Vue 组件都可以独立于组件树去访问它。以下是该文件的内容:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import Vue from 'vue'; import firebase from 'firebase/app'; import 'firebase/firestore'; import 'firebase/auth'; // 初始化 Firebase, 从云控制台辅助 var config = { apiKey: "AIzaSyCsXiKteCMbIhsDpGK277SR8A8P3HOjC8U", authDomain: "amazealls-24823.firebaseapp.com", databaseURL: "https://amazealls-24823.firebaseio.com", projectId: "amazealls-24823", storageBucket: "amazealls-24823.appspot.com", messagingSenderId: "187582214062" }; firebase.initializeApp(config); // 共享状态对象,即任何vue组件 // 可以访问 export const store = { ballsInFeed: null, currentUser: null, writeBall: (message) => console.log(message) }; |
现在我们将添加 Firebase 部分的功能。用下面代码获取 Firestore 数据:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 引用balls const ballsCollection = firebase.firestore().collection('balls'); // onSnapshot 在数据改变时执行 // 在底层的firestore集合中进行更改 // 它将通过一个引用数组传递给 // 与你的查询匹配的文档 ballsCollection .orderBy('createdOn', 'desc') .limit(5) .onSnapshot((ballsRef) => { const balls = []; ballsRef.forEach((doc) => { const ball = doc.data(); ball.id = doc.id; balls.push(ball); }); console.log('Received Balls feed:', balls); store.ballsInFeed = balls; }); |
然后用 firebase 的一个写入方法替换 writeBall
函数。
1 2 3 4 5 |
writeBall: (message) => ballsCollection.add({ createdOn: new Date(), author: store.currentUser, message }) |
注意两者如何完全解耦。 当你插入一个集合时,执行了 add
方法, onSnapshot
也会被触发。 这使得我们的状态管理变得更容易。
现在有了一个共享的状态对象,任何Vue组件都可以很容易访问。接下来,让我们好好利用它。
正好在用Vue.js 的 Firestore,受教了。
jdjbchdjscsbcsdh