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

面试官：小伙子，你的数组去重方式惊艳到我了

#使用 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

阅读全文

猜你喜欢

  • 前后端一体化开发必须知道的性能优化策略

    在前后端一体化开发中，性能优化是一个非常重要的主题。随着用户对网站和应用程序的需求不断增长，我们不得不采取各种方法来提高性能和响应速度。在本文中，我们将介绍一些前后端一体化开发中必须了解的性能优化策略...

    17 天前
  • 在 React/Redux 中使用 Axios 处理 Ajax 请求

    在现代 Web 应用中，Ajax 技术已经成为了一个必要的技能。在前端开发中，我们通常使用 Axios 库来处理 Ajax 请求，因为它是一个功能强大、易于使用的 JavaScript 库。

    17 天前
  • TypeScript 中如何使用命名空间提高代码的组织性？

    命名空间是 TypeScript 中一种重要的组织代码的方式，可以将代码分组并避免全局命名冲突，同时提高代码的可读性和维护性。本文将介绍命名空间的基本概念和使用方法，并提供实际示例，帮助读者深入了解 ...

    17 天前
  • 从 Express.js 迁移到 Koa.js：Node.js Web 框架比较

    从 Express.js 迁移到 Koa.js：Node.js Web 框架比较 Node.js 是一个非常流行的服务器端 JavaScript 运行环境，它有很多优秀的 Web 框架供选择。

    17 天前
  • webpack4 之路：升级过程中遇到的坑

    随着前端技术的不断发展，webpack 作为前端打包工具也随之发展并不断推出新版本。webpack 4 是其中的一个比较重要的版本，它带来了更好的性能和更好的处理方式，包括缓存和 Tree Shaki...

    17 天前
  • 使用 Jest 进行全栈应用测试的实践方案

    在现代 Web 应用中，前端和后端的交互愈发复杂，为了保证应用的正确性和稳定性，我们需要对它们进行全方位的测试。Jest 是一个广泛应用于 JavaScript 应用的测试框架和断言库，它是由 Fac...

    17 天前
  • 如何在 Chai 中集成第三方测试工具和插件

    简介 Chai 是一个用于 JavaScript 测试的断言库，它让我们可以编写易于阅读和维护的测试。Chai 可以与许多其他测试工具和插件集成，这使得它变得更加强大和灵活。

    17 天前
  • Vue.js 与 Bootstrap 集成实践：如何快速搭建页面

    前言 Vue.js 是一个用于构建用户界面的渐进式框架，能够很好地处理复杂的交互逻辑。Bootstrap 是一个流行的前端 UI 框架，包含了大量的 CSS 样式和 JavaScript 插件，可以快...

    17 天前
  • 如何使用 CSS Reset 解决 z-index 层次问题？

    什么是 z-index？ 在 CSS 中，z-index 属性用于控制元素在层叠上下文（stacking context）中的显示顺序，也就是所谓的“层次”或“叠层次序”。

    17 天前
  • Node.js 中的推送通知技术及其应用实例

    在 Web 应用程序中，推送通知是将实时信息传递到客户端的一种方法，它可以在后端服务器或第三方推送服务提供商的帮助下完成。Node.js 是一种强大的后端平台，提供了许多用于应用程序的推送通知技术。

    17 天前
  • ECMAScript 2017 的新特性：Async Iteration 的使用方法

    在 ECMAScript 2017 中，我们迎来了一项新特性，Async Iteration（即“异步迭代”），它是一种在异步操作中使用迭代器（Iterator）的方法。

    17 天前
  • 如何测试 GraphQL API

    GraphQL 是一种新型的 API 查询语言，它允许开发者请求和返回所需的数据，而不需要像传统的 RESTful API 那样收到不必要的数据。然而，由于 GraphQL 的灵活性和动态性，测试 G...

    17 天前
  • 使用 Docker 和 Nginx 搭建 Node.js 应用

    使用 Docker 和 Nginx 搭建 Node.js 应用 在现代 Web 应用开发中，Docker 已经成为了一个必要的工具。Docker 是一个容器化技术，可以将整个应用程序打包到一个可移植的...

    17 天前
  • CSS Grid 如何取舍 “使用场景” 或 “适用范围”

    在前端开发中，布局一直是最基础也是最核心的一部分。在 CSS 中，我们用过很多布局方法，比如使用浮动实现多列布局，使用弹性盒子实现对齐等等。而在 CSS3 中，CSS Grid 布局成为了一种新的布局...

    17 天前
  • Deno 应用中常见的 SQL 注入错误及解决方法

    前言 SQL 注入是一个经典的安全问题，它存在于几乎所有 Web 应用中，也特别容易出现在基于 Deno 的后台应用程序中。本文将讨论 Deno 应用程序中常见的 SQL 注入错误，以及如何防止它们出...

    17 天前
  • 如何在 Mocha 测试中测试 redux reducer 的方法？

    在前端应用开发中，Redux 已经成为了一个流行的状态管理工具。然而，Redux 的 reducer 函数需要经常保证其正确性，这就需要有一个好的测试框架来确保 reducer 编写正确。

    17 天前
  • ES9 中 Reflect.ownKeys() 的详细用法

    在 ES9 中加入了一个新的方法 Reflect.ownKeys()，该方法可以用于获取一个对象所有的属性，包括 Symbol 类型的属性。这个方法可以帮助我们更方便地操作对象属性，同时也增强了代码的...

    17 天前
  • 在 React Native 中使用 Redux 构建电商应用

    React Native 是一个跨平台的框架，可以同时为 iOS 和 Android 创建本机应用。Redux 是一个流行的状态管理库，它可以更好地处理数据流，并简化代码的管理。

    17 天前
  • 在 Web 应用程序中使用 Fastify 和 GraphQL

    在 Web 应用程序中使用 Fastify 和 GraphQL Fastify 是一个快速和低开销的 Node.js web 框架，非常适合构建高性能的 Web 应用程序。

    17 天前
  • 如何在 React 中使用异步函数以及 ES2020 异步函数的优化

    如何在 React 中使用异步函数以及 ES2020 异步函数的优化 前言 在现代前端开发中，异步编程是不可避免的一个主题。React 作为当今最流行的前端框架，对于异步编程的支持也非常友好，同时 E...

    17 天前

相关推荐

    暂无文章