使用 Deno 和 Firebase 搭建带有管理后台的 Web 应用程序

阅读时长 11 分钟读完

#使用 Deno 和 Firebase 搭建带有管理后台的 Web 应用程序

随着互联网技术的发展,Web 应用程序已成为我们生活中不可或缺的一部分。为了满足不断增长的需求,前端技术的发展也变得越来越快。在过去,我们使用 Node.js 进行服务器端开发,并且使用 MongoDB 等数据库进行数据存储。但这种方式并不是完美的,有时可能存在一些问题,并且可能需要更高效的方案。

本文将介绍如何使用 Deno 和 Firebase 这两个现代工具来构建一款带有管理后台的 Web 应用程序。

如何使用 Deno

Deno 是一个现代的 JavaScript/TypeScript/V8 引擎,它旨在提供更好的安全性和更好的性能。Deno 与 Node.js 不同,不需要 NPM 和 package.json 文件,并且使用标准 Web API。Deno 的命令行接口(CLI)与 Node.js 的非常类似。

安装 Deno 可以从官网上下载安装包,官网地址:https://deno.land/

使用 Firebase

Firebase 是一种专门用于构建高质量应用程序的平台。它包含了许多用于构建各种 Web 和移动应用程序的工具和服务。Firebase 将基础设施问题和运维处理交给了平台,以便开发人员专注于业务逻辑和应用程序的核心。

Firebase 已经整合了许多功能模块,例如:

  • 实时数据库
  • 认证
  • 云存储
  • 分析和测试
  • 推送通知
  • 告警和监控

Firebase 还整合了云函数,可以在其中编写服务器端代码。

开发带有管理后台的 Web 应用程序

本文将介绍如何使用 Deno 和 Firebase 来构建一个带有管理后台的 Web 应用程序。我们将使用下列的工具和框架:

  • Deno
  • Oak —— 一个基于 Deno 的 Web 框架
  • Firebase 实时数据库 —— 用于存储数据
  • Firebase Cloud Functions —— 用于编写服务器端代码
  • Firebase Authentication —— 用于认证

现在,让我们开始编写一个简单的带有管理后台的 Web 应用程序。

首先,我们需要创建一个包含后台路由的 routes.ts 文件。路由文件定义了 URI 和资源之间的映射。

-- -------------------- ---- -------
------ - ------ - ---- ---------------------------------

----- ------ - --- ---------

--------------- --- -- -
  ----------------- - ------ --------
---

------------------ --- -- -
  ----------------- - -------- --- -- ------------------
---

------ ------- -------

现在,我们需要添加 app.ts 文件。这个文件包含了我们需要为我们的应用程序设置的所有东西。首先,我们需要引入 oak 。我们使用 use 函数来添加路由控制器。路由控制器会让我们的路由文件生效。然后,我们需要启动应用程序并设置它监听 http://localhost:8000 的请求。

-- -------------------- ---- -------
------ - ----------- - ---- ---------------------------------
------ ------ ---- --------------

----- --- - --- --------------

-------------------------
---------------------------------

------------------------ ------- -- ------------------------
----- ------------ ----- ---- ---

现在,我们需要创建一个新的 Firebase 项目。在 Firebase 控制台中,创建新的项目。在控制台左侧导航栏中,点击 “数据库” ,选择 “实时数据库” ,并按照屏幕上的提示设置实时数据库规则。

我们需要初始化 firebase 以及管理身份验证。在控制台中,选择 “齿轮图标” ,然后选择 “项目设置” 中的 “服务帐户” 。然后点击 “生成新的私人密钥”。

firebase-admin 添加到 dependencies 中:

dotenv 将机密键存储在 .env 文件中:

这里的 <your-project-id><your-private-key><your-client-email> 均由 Firebase 配置提供。

现在,我们需要修改 app.ts 以使用 Firebase 。首先,我们需要初始化 Firebase 以及认证。

-- -------------------- ---- -------
------ -------------------------------------
------ - ----------- - ---- ---------------------------------
------ - -------------- - ---- --------------------------------------------

------ ------ ---- --------------

----- --- - --- --------------

----- --------------- -------------- - -
  ---------- -------------------------------------
  ----------- ------------------------------------------------------ ------ -- ----------- ---- ---
  ------------ ---------------------------------------
--

----- ------------- - ----- ----------------------------------------------------

-----------------------------
  ----------- ----------------------------------------------
---

----- ---- - ---------------------

------------- ----- ----- -- -
  ----- ---------- - -----------------------------------------
  -- ----------- -- ----------------------------- --- -
    ----- ----- - ---------------------------- ----------
    --- -
      ----- ------------ - ----- --------------------------
      -------------- - -------------
    - ----- --
  -
  ----- -------
---

-------------------------
---------------------------------

------------------------ ------- -- ------------------------
----- ------------ ----- ---- ---

我们添加了一个 auth 对象来帮助我们解析 auth 的 JSON 令牌。然后,我们在路由之前添加了一个中间件函数,来解析令牌并将令牌的有效负载添加到 ctx.state.user 字段中。

现在,我们应该已经准备好了。接下来,我们可以使用 firebase-admin 模块连接到 Firebase 实时数据库。

-- -------------------- ---- -------
------ -------------------------------------
------ - ----------- - ---- ---------------------------------
------ - -------------- - ---- --------------------------------------------

----- --- - --- --------------

----- --------------- -------------- - -
  ---------- -------------------------------------
  ----------- ------------------------------------------------------ ------ 
  ------------ ---------------------------------------
--

----- ------------- - ----- ----------------------------------------------------

-----------------------------
  ----------- ----------------------------------------------
---

----- -- - --------------------------

--------------------- ------------

------------ ----- ---- ---

在这个新的 app.ts 我们用了 firebase-admin 模块的 .firestore() 方法来连接到我们的实时数据库。

最后,让我们来实现一些基本的路由。

-- -------------------- ---- -------
------ - ------ - ---- ---------------------------------
------ - ----------------- - ---- --------------------------------------------

----- ------ - --- ---------

--------------- ----- --- -- -
  ----- - ---- - - ----- -------------------------------
  ----- ------- - -------------- ------------------------------- -- -
    ----- ------ - -----------
    --------- - -------
    ------ -------
  ---

  ----------------- - --------
---

---------------- ----- --- -- -
  -- ----------------- -
    ------------------- - ----
    -------
  -

  ----- ------ - ----- -------------------------
  ----- - -- - - ----- -------------------------------------

  ----------------- - - -- --
---

------------------ ----- --- -- -
  -- ----------------- -
    ------------------- - ----
    -------
  -

  ----- - -- - - -----------
  ----- ------ - ----- -------------------------
  ----- - --------- - - ----- ------------------------------------------------

  ----------------- - - -------- --------- --
---

--------------------- ----- --- -- -
  -- ----------------- -
    ------------------- - ----
    -------
  -

  ----- - -- - - -----------
  ----- ------------------------------------------

  ------------------- - ----
---

------ ------- -------

以上的路由是提交一个 CRUD 操作。这个 Web 应用程序包括添加、删除、更新和获取课程的操作。

现在,我们可以开启 CLI 来运行我们的代码,终端运行 deno run --allow-net --allow-env app.ts

结论

在本文中,我们使用 Deno 和 Firebase 构建了一个 Web 应用程序。Deno 是一个现代的 JavaScript/TypeScript/V8 引擎,它旨在提供更好的安全性和性能。而 Firebase 是一个非常强大的应用程序开发平台,其提供了各种服务来方便开发者开发应用程序。

我们完整地介绍了如何使用 Deno 和 Firebase 来构建一个简单的 Web 应用程序,包括了如何使用 Deno 构建路由,如何在 Firebase 上设置实时数据库以及如何使用 Firebase 认证和云函数。希望本文可以帮助你更好地理解如何在现代应用程序开发中使用 Deno 和 Firebase,也希望可以为你未来的 Web 应用程序开发提供一些参考。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66fbd24c4471362601643e9c

纠错
反馈