在现代 Web 开发中，全栈应用已经成为了一种趋势。全栈应用可以在一个项目中组合多个技术栈，如前端框架、后端框架、数据库等，从而实现 Web 应用的完整功能。本文将介绍如何使用 Deno、React、Redux 和 MongoDB 构建现代全栈 Web 应用。
Deno
Deno 是一个新的 JavaScript 运行时环境，由 Node.js 的创始人 Ryan Dahl 开发。与 Node.js 不同的是，Deno 不依赖于 npm 包管理器，而是通过 URL 来引入模块。Deno 同时支持 JavaScript 和 TypeScript，并且内置了多种安全特性，如默认禁止访问网络和文件系统等。Deno 的命令行工具非常简单易用，可以通过以下命令安装：
- ---- ----- -------------------------------------- - --
安装完成后，可以通过以下命令检查版本号：
- ---- ---------
React
React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。React 的核心思想是组件化，将界面拆分为一个个独立的组件，从而实现代码的复用和可维护性。React 同时支持服务器端渲染和客户端渲染，可以与多种后端框架结合使用。React 可以通过以下命令安装：
- --- ------- ----- ---------
Redux
Redux 是一个 JavaScript 应用状态管理库，用于管理应用的状态。Redux 将应用的状态存储在一个单一的 store 中，通过 dispatching actions 来更新状态，从而实现应用的数据流控制。Redux 的设计思想是函数式编程，可以与 React 结合使用。Redux 可以通过以下命令安装：
- --- ------- ----- -----------
MongoDB
MongoDB 是一个 NoSQL 数据库，用于存储非结构化数据。MongoDB 支持多种数据格式，如 JSON、BSON 等，可以通过 JavaScript API 进行操作。MongoDB 的优点是高度可扩展、高性能、高可用性和灵活性等。MongoDB 可以通过以下命令安装：
- ---- ------- -------
构建全栈应用
下面将介绍如何使用 Deno、React、Redux 和 MongoDB 构建全栈应用。
1. 创建 Deno 服务器
首先需要创建一个 Deno 服务器，用于提供数据 API。可以通过以下代码创建一个简单的服务器：
------ - ------------ ------ - ---- --------------------------------- ----- --- - --- -------------- ----- ------ - --- --------- --------------- ----- -- - ----------------- - ------ ------- --- ------------------------- --------------------------------- ------------------- -- ------- -- ------------------------ ----- ------------ ----- ---- ---
该代码使用了 Deno 的 oak 模块来创建服务器和路由。运行该代码后，可以通过 http://localhost:8000 访问服务器。
2. 创建 React 应用
接下来需要创建一个 React 应用，用于展示数据。可以通过以下命令创建一个 React 应用：
- --- ---------------- ------
该命令会创建一个名为 my-app 的 React 应用。进入 my-app 目录，可以通过以下命令启动应用：
- --- -----
此时可以通过 http://localhost:3000 访问应用。
3. 集成 Redux
在 React 应用中集成 Redux，可以通过以下步骤：
- 创建 store：在 src 目录下创建一个名为 store.js 的文件，用于创建 Redux store。
------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- ------ ------- ------
- 创建 reducer：在 src/reducers 目录下创建一个名为 index.js 的文件，用于创建 Redux reducer。
----- ------------ - -
------ ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
--
---- --------------
------ -
---------
------ ------------------------- -- ------- --- ----------------
--
--------
------ ------
-
-
------ ------- ------------- 集成 React：在应用中使用 Redux，可以通过以下代码：
------ - -------- - ---- --------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
---- ----------------
------ ---- ---------
--------- --
------
-----------
--
-此时，应用已经集成了 Redux。
4. 集成 MongoDB
最后需要集成 MongoDB，用于存储数据。可以通过以下代码连接 MongoDB：
------ - ----------- - ---- ----------------------------------- ----- ------ - --- -------------- ----- -------------------------------------------- ----- -- - ------------------------ ----- ----- - ----------------------- ----- ----------------- ----- ---- ------ ---------- ------ ---
该代码使用了 Deno 的 mongo 模块来连接和操作 MongoDB。运行该代码后，可以在 MongoDB 中看到一个名为 todos 的集合，并且已经插入了一条数据。
5. 整合全栈应用
现在可以将以上代码整合为一个全栈应用。在 Deno 服务器中提供数据 API，将数据存储到 MongoDB 中，在 React 应用中展示数据。可以通过以下代码实现：
------ - ------------ ------ - ---- --------------------------------- ------ - ----------- - ---- ----------------------------------- ------ - -------- - ---- ------------------------------------ ----- ------ - --- -------------- ----- -------------------------------------------- ----- -- - ------------------------ ----- ----- - ----------------------- ----- --- - --- -------------- ----- ------ - --- --------- --------------- ----- ----- -- - ----- ---- - ----- ------------- ----------------- - ----- --------------- --- ---------------- ----- ----- -- - ----- ---- - ----- ------------------- ----- - ----- --------- - - ----------- ----- ------ - ----- ----------------- ----- --------- --- ----------------- - ------- --- --------------------- ----- ----- -- - ----- -- - -------------- ----- ------ - ----- ----------------- ---- ------------ --- ----------------- - ------- --- ------------------------- --------------------------------- ------------------- -- ------- -- ------------------------ ----- ------------ ----- ---- ---
该代码将数据 API 挂载到 http://localhost:8000 上，并且提供了 GET、POST 和 DELETE 接口。
在 React 应用中，可以通过以下代码获取数据并展示：
------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - -------- ---------- - ---- ------------
-------- ---------- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
------------ -- -
------------------------------
---------------- -- ----------------
------------ -- -
------------------- -- -
------------------
--- --------------
----- ----------
---------- ---------------
----
---
---
-- ------------
----- ------------- - ------ -- -
------------------------------ -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ----- ---------- ----- ---
--
---------------- -- ----------------
------------ -- -
------------------
--- ----------
----- -----
---------- ------
----
---
--
----- ---------------- - ---- -- -
------------------------------------ - ------- -------- --
---------------- -- ----------------
------------ -- -
-------------------------
---
--
------ -
-----
----
----------------- -- -
--- --------------
------------- --
------- ----------- -- -------------------------------------
-----
---
-----
------ ----------- -------------- -- -
-- ------ --- -------- -
------------------------------
-------------- - ---
-
-- --
------
--
-该代码使用了 React Redux 中的 useSelector 和 useDispatch hooks，从服务器中获取数据，并且提供了添加和删除数据的功能。
总结
本文介绍了如何使用 Deno、React、Redux 和 MongoDB 构建现代全栈 Web 应用。全栈应用可以在一个项目中组合多个技术栈，从而实现 Web 应用的完整功能。Deno 提供了一个新的 JavaScript 运行时环境，React 提供了一个用于构建用户界面的 JavaScript 库，Redux 提供了一个 JavaScript 应用状态管理库，MongoDB 提供了一个 NoSQL 数据库。通过以上技术的组合，可以构建出一个现代全栈 Web 应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6627441fc9431a720c3d6e53