在现代的 Web 开发中，前后端分离已成为一种趋势。前端负责展示界面和数据，后端则处理业务逻辑和数据存储。但是这种做法会带来一些不必要的问题，如跨域请求、接口定义不清等。全栈应用程序解决了这些问题，它将前端和后端放在同一个项目中，使用同一种编程语言和框架，提高了开发效率和代码质量。
本文将介绍如何使用 React 和 Node.js 构建全栈应用程序，包括前端界面和后端接口的实现。我们将使用 create-react-app 和 Express 两个著名的工具来快速构建应用程序。
简介
React 是一个由 Facebook 开发的 JavaScript 库，用于构建用户界面。它采用组件化的模式，可以将 UI 拆分成独立的、可重用的组件，并利用虚拟 DOM 提高渲染性能。React 适用于复杂的前端界面和单页应用程序。
Node.js 是一个由 Ryan Dahl 开发的 JavaScript 运行时环境，用于编写服务器端应用程序。它基于 Chrome V8 引擎，支持非阻塞 I/O 和事件驱动模型，具有高性能和高可伸缩性。
Express 是一个基于 Node.js 的 Web 应用程序框架，用于处理 HTTP 请求和响应。它提供了路由、中间件和模板引擎等功能，可以快速搭建 Web 服务器和 RESTful API。
准备工作
我们需要先安装 Node.js 和 npm，并全局安装 create-react-app 和 Express：
$ sudo apt install nodejs $ sudo apt install npm $ npm install -g create-react-app $ npm install -g express-generator
创建一个新的项目目录并进入：
$ mkdir my-app $ cd my-app
然后使用 create-react-app 创建一个新的 React 应用程序：
$ create-react-app client
创建完成后进入 client 目录，并启动开发服务器：
$ cd client $ npm start
在浏览器中访问 http://localhost:3000/，可以看到默认的 React 界面。
现在我们需要添加一个后端服务器，使用 Express 框架。
回到项目目录，使用 Express Generator 创建一个新的服务器：
$ express server
创建完成后进入 server 目录并安装依赖：
$ cd server $ npm install
在 app.js 文件中编写 Express 应用程序：
-- -------------------- ---- ------- --- ------- - ------------------- --- ---- - ---------------- --- ------------ - ------------------------- --- ------ - ------------------ --- ----------- - -------------------------- --- ----------- - -------------------------- --- --- - ---------- ----------------------- ------------------------ ---------------------------- --------- ----- ---- ------------------------ ------------------------------------------- ------------ ------------ ------------- ----------------- ------------- -------------- - ----
然后在 bin/www 文件中启动服务器：
-- -------------------- ---- -------
-------------- ----
---
- ------ -------------
--
--- --- - ------------------
--- ----- - ----------------------------------
--- ---- - ----------------
---
- --- ---- ---- ----------- --- ----- -- --------
--
--- ---- - ------------------------------ -- --------
--------------- ------
---
- ------ ---- -------
--
--- ------ - -----------------------
---
- ------ -- -------- ----- -- --- ------- -----------
--
--------------------
------------------ ---------
---------------------- -------------
---
- --------- - ---- ---- - ------- ------- -- ------
--
-------- ------------------ -
--- ---- - ------------- ----
-- ------------- -
-- ----- ----
------ ----
-
-- ----- -- -- -
-- ---- ------
------ -----
-
------ ------
-
---
- ----- -------- --- ---- ------ ------- ------
--
-------- -------------- -
-- -------------- --- --------- -
----- ------
-
--- ---- - ------ ---- --- --------
- ----- - - ----
- ----- - - -----
-- ------ -------- ------ ------ ---- -------- --------
------ ------------ -
---- ---------
------------------ - - -------- -------- -------------
----------------
------
---- -------------
------------------ - - -- ------- -- ------
----------------
------
--------
----- ------
-
-
---
- ----- -------- --- ---- ------ ----------- ------
--
-------- ------------- -
--- ---- - -----------------
--- ---- - ------ ---- --- --------
- ----- - - ----
- ----- - - ----------
---------------- -- - - ------
-最后启动服务器：
$ npm start
在浏览器中访问 http://localhost:3001/，可以看到 Express 的默认界面。
前端界面
现在我们有了前端和后端服务器，下面我们将使用 React 编写一个简单的 UI。
在 client 目录下，安装 Material-UI 组件库：
$ npm install @material-ui/core
然后在 App.js 文件中编写 UI:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---------- ----------- ------ ---------- ------ - ---- --------------------
------ ------------
-------- ----- -
------ -
---- ----------------
---------- --------------
----------- ------------ -------------
---- ----
-------------
------ ----------------- --------------
------
----------
-------------------
------------ - ---- -----
------------------
---------------- --
------- ------------------- --------------- -----------------
---
---------
-------
--------
------------
------
--
-
------ ------- ----后端接口
现在我们需要实现一个后端接口，用于返回 Todo 列表和添加新项目。
在 server 目录下，创建一个新的路由文件 todos.js，用于处理相关请求。
首先需要安装 mongoose 库，用于连接 MongoDB 数据库。
$ npm install mongoose
然后在 models/todo.js 文件中定义数据模型：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - ----------------
----- ---------- - --- --------
------ -
----- -------
--------- ----
--
---------- -
----- --------
-------- -----
-
---
-------------- - ---------------------- ------------在 routes/todos.js 文件中处理路由和数据库操作：
-- -------------------- ---- -------
--- ------- - -------------------
--- ------ - -----------------
--- ---- - --------------------------
--------------- ------------- ---- ----- -
------------- ------------- ------ -
-- ----- -
------ ----------
-
----------------
---
---
---------------- ------------- ---- ----- -
--- ---- - --- ------
------ --------------
---
----------------------- ----- -
-- ----- -
------ ----------
-
---------------
---
---
-------------- - -------在 app.js 文件中注册路由：
var indexRouter = require('./routes/index');
var todosRouter = require('./routes/todos');
app.use('/', indexRouter);
app.use('/todos', todosRouter);现在我们需要使用 axios 进行前端和后端的通信，因此需要安装 axios 库。
$ npm install axios
在 App.js 文件中编写前端代码，访问后端接口并渲染 Todo 列表：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ---------- ----------- ------ ---------- ------- ----- --------- ------------ - ---- --------------------
------ ------------
------ ----- ---- --------
-------- ----- -
----- ------- --------- - -------------
----- ----------- ------------- - -------------
------------ -- -
------------------------------ -- -
-------------------
---
-- ----
----- ------------ - --- -- -
-------------------
-------------------- - ------ --------- ------------- -- -
------------------- -----------
-----------------
---
--
------ -
---- ----------------
---------- --------------
----------- ------------ -------------
---- ----
-------------
------ ----------------- --------------
----- ------------------------
----------
-------------------
------------ - ---- -----
------------------
----------------
-----------------
------------- -- ----------------------------- --
------- ------------- ------------------- --------------- -----------------
---
---------
------
----------------- -- -
--------- ---------------
------------- -------------------- --
-----------
---
-------
-------
--------
------------
------
--
-
------ ------- ----构建和部署
在开发完成后，我们需要将应用程序打包并部署到生产环境中。
在 client 目录下，运行以下命令进行打包：
$ npm run build
然后在 server/app.js 中添加以下代码，指定静态文件目录：
app.use(express.static(path.join(__dirname, '../client/build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../client/build/index.html'));
});最后运行以下命令启动服务器：
$ npm run start-prod
结论
本文介绍了如何使用 React 和 Node.js 构建全栈应用程序，包括前端界面和后端接口的实现。我们使用 create-react-app 和 Express 快速搭建了项目框架，并使用 Material-UI 和 mongoose 实现了 UI 和数据库模型。最后我们将应用程序打包并在生产环境中运行。希望读者通过本文学习到如何构建全栈应用程序，并能够运用在实际项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673047f9eedcc8a97c91838c