简介
npm 是 Node.js 的包管理工具,使用 npm 可以很方便地下载和安装前端和后端包。而 beerjs-cba-firebase-frontend 则是一个适用于前端业务的 firebase 包。它提供了 firebase 的完整功能集,并带有一个友好的前端 UI 界面,帮助您在浏览器中直接管理 firebase 的数据库和存储。
安装
beerjs-cba-firebase-frontend
参考了 FirebaseUI
和 vuefire
,使用了 Vue.js 构建了一个快速构建工具。在使用之前,您需要进行相应的安装。
如果您使用的包管理工具是 npm,可以通过以下命令进行安装:
--- ------- ---------------------------- ------
或者使用 Yarn 安装:
---- --- ----------------------------
使用
在您的应用程序的入口文件中,使用以下代码初始化 firebase
的配置:
------ --- ---- ----- ------ ------------ ---- ------------------------------ --------------------- - --------- - ------- --------------- ----------- ------------------- ------------ -------------------- ---------- ------------------ -------------- ---------------------- ------------------ --------------------------- - --
您可以在 firebase
控制台上找到 API key、auth domain 等配置信息,将其替换为您自己的配置即可。
组件
beerjs-cba-firebase-frontend
包含了各种适用于前端的 grud 组件、验证、认证、授权机制、安全性等等等等功能。因此,我们可以通过在 Vue.js 应用程序中直接使用这些组件来实现多个 Firebase 功能。
1. Firebase 数据库 crud 组件
beerjs-cba-firebase-frontend
为 Vue.js 提供了如下组件:
(1) List Component 列表组件
使用 list
组件来显示数据库中列表数据。它可以使用不同的布局,并具有不同的数据类型。
---------- ----- -------- --------- -------------- ----------------- ---------------------- ---------- ---------------- --------------------------- - --------- ----------- -------------------- ---- --------------- ------------- -------------- ------ -------------------------- ------ ----------- --------- ---------------- ----- -------- ----------- ---------------- ------ -----------
其中, firebase-list
接受以下属性:
query
:定义 Firebase 查询规则(可选)。
attr-name
:定义显示名称。
item-clicked
:定义 item 点击事件(可选)。
item-template
:指定 item 模板(可选)。
no-items-template
:指定无数据模板(可选)。
(2) Create Component 创建组件
使用 create
组件向数据库中添加条目。
---------- ----- ---------- --------- ---------------- ------------------- --------------------------- ---------------- -------------- ------------------------------- ------------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - ------- - ------ ------- ------ ------- ------ ------- ----------- ------ ------ -------- ------ -------- ------ -------- ----------- ------ ------ ----------- ------ ------ ------ ------ ----------- ------ ------ --------- ------ --------------- ------ --------------- -------- ------------- ------------- ----------- ------ ------ ----------- ------ ---------- -- ------- ------- ------ ------------ -- ------ - ----- - - --------- ----- -------- ----- -- ---------- -------- ------- -- ------ - - --------- ----- -------- ------ -- ---------- -------- -------- - ----- -------- -------- ------- ----- - ----- ----- --------- -------- ------- -- ---- - - --------- ----- -------- ---- -- ---------- -------- ------- -- ------------- - - --------- ----- -------- ------------- -- ---------- -------- ------- - - - -- -------- - ------------- -- - ----------------- --------- - - - ---------
其中, firebase-create
接受以下属性:
resource-name
:指定 resource 名称。
fields
:定义字段的类型、标签、数据等。
rules
详细定义(可选)。
form-template
:指定表单模板(可选)。
(3) Read Component 读取组件
使用 read
组件读取数据库中的记录。
---------- ----- -------- --------- -------------- ----------------- --------------------------- ------------ ------------------- ----------------- --------------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - --- --- ----------- -- - -- -------- - --------- ---------- - --------------- - -------- - - - ---------
其中, firebase-read
接受以下属性:
resource-name
:指定 resource 名称。
v-model
:指定 id(可选)。
(4) Update Component 更新组件
使用 update
组件更新数据库中的记录。
---------- ----- ---------- --------- ---------------- ------------------- --------------------------- ---------------- -------------- ------------ ------------------------------- ------------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - --- --- ------- - ------ ------- ------ ------- ------ ------- ----------- ------ ------ -------- ------ -------- ------ -------- ----------- ------ ------ ----------- ------ ------ ------ ------ ----------- ------ ------ --------- ------ --------------- ------ --------------- -------- ------------- ------------- ----------- ------ ------ ----------- ------ ---------- -- ------- ------- ------ ------------ -- ------ - ----- - - --------- ----- -------- ----- -- ---------- -------- ------- -- ------ - - --------- ----- -------- ------ -- ---------- -------- -------- - ----- -------- -------- ------- ----- - ----- ----- --------- -------- ------- -- ---- - - --------- ----- -------- ---- -- ---------- -------- ------- -- ------------- - - --------- ----- -------- ------------- -- ---------- -------- ------- - - - -- -------- - ------------- -- - ----------------- --------- - - - ---------
其中, firebase-update
接受以下属性:
resource-name
:指定 resource 名称。
fields
:定义字段的类型、标签、数据等。
rules
详细定义(可选)。
v-model
:指定 id(可选)。
form-template
:指定表单模板(可选)。
(5) Delete Component 删除组件
使用 delete
组件删除数据库中的记录。
---------- ----- ---------- --------- ---------------- ------------------- --------------------------- ------------ ------------------------------- ------------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - --- -- - -- -------- - ------------- -- - ----------------- --------- - - - ---------
其中, firebase-delete
接受以下属性:
resource-name
:指定 resource 名称。
v-model
:指定 id(可选)。
2. 认证和授权组件
beerjs-cba-firebase-frontend
为 Vue.js 提供了 Passport 风格的认证和授权组件,使用这些组件,您可以通过社交网站帐户登录,或者使用电子邮件/密码进行身份验证。
(1) FirebaseAuth Component
FirebaseAuth
组件使用插件生成的 FirebaseUI。 社会化登录可以使用不同的处理器。
---------- ----- -------- --------- -------------- ------------------ ------------------------- --------------------- --------------------------- - ---------------- ------ -----------
其中 signinOpts
是 firebase 官方的配置项, uiConfig
只需要输入您的社交媒体身份验证的 API key。 如果您没有收到 API 密钥,则可以使用库的默认值。
(2) Firestorage 组件
---------- ----- ----------- --------- -------------------------- --------------------- -------------- ------------------------------ - --------- ---------------- ------- ------------ ----------- ---------------------------- ------- ---------------------------- ------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - --------- -- - -- -------- - ------------ ---------- - ------------- - -------- ------------------------ ---------- -- ---------- -- - -- --------------- - ----- ------- - ------------------------------ ----- ------- - -------------------------------------- ------------------------ -- - ----------------------------- --------- ------------- - -- -- - - - - ---------
其中, firebase-storage-dropzone
接受以下属性:
path
:指定存储路径。
定制组件: uploadImage/avatar
安装:
--- ------- ------ ------------
------ --- ---- ----- ------ ----------- ---- -------------- --------------------
具体使用:
---------- ----- ---------- ----------- ------------- ---------------- ------------- -------------------- -------------- ------------------ --------------------- -------------------- - ---- ------------------------- ---- ------------- ------------- -- -- -------------------- -- ---- ---- ------ ---- -- ---------- ------ --------------- ------- ------------------------------ --------------- ------ ----------- -------- ------ ------- - ---- -- - ------ - ------- -- - -- --------- - ------ -------- -- - ----- ----- - -------------------------- -- ------------------------------ ------ - ---------- ----- - -- -------- -------- -- - ----- ----- - ----------------------------- ------ - -------------- ------- --------- - - -- -------- - ----------- ------- - ----------- - ----- -- ------------ -- - ----------- - -- - - - ---------
结束语
到这里,beerjs-cba-firebase-frontend
的使用就讲解完了。相信您已经从中收获了很多。这个包的使用不仅能够帮助您快速开发前端业务,而且它涵盖了前端相关的各种技能,如果您是新手,它绝对可以帮助您更好地理解和使用 firebase。
如果您对本文档中的任何问题有疑问,或者您想要学习有关本文档或这个包的更多信息,请在下面发表您的评论或给我们留言。我们将会回复您并帮助您解决任何问题。
最后示例代码
为了帮助您更好地使用和理解此包,这里提供一个最后的示例代码,您可以直接拷贝到您自己的项目中使用。如果有任何问题,请随时进行咨询和提问,我们将竭诚为您服务。
---------- ----- --- ----------------------- ---------------- ---- ------------ ---- ---------------- ---------- -- ------ ---- ------------- ---- -------------------- --------------- -------- ------ ---- ------------------ --- ------------------- ------------ ------------------------ -------- ---------------- ----- -- ------------------ ---------- -------- --------------- -- --------------- -- ---- ------ ------ ------ ------ ------ ----------- -------- ------ --- ---- ----- ------ ------- ------------ ------- -- - ---------------- -- --------- - ----- -------- -- - ------ --------------------------- - -- -------- - ---------- -------- -- - -------------------------------------- - - -- ---------
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60055bbe81e8991b448d9561