简介
随着 Web 技术的日新月异，前端开发人员需要不断提升自身的技术水平才能与业务需求相适应。React 是目前主流的前端框架之一，其提供了高效的组件化编程方式和灵活的状态管理机制。Node 是一个开源的 JavaScript 运行环境，具有事件驱动、非阻塞 I/O 等特性，能够方便地构建高性能的 Web 应用。MySQL 是一款流行的关系型数据库，通常用于存储 Web 应用的数据。
将这三种技术相结合，可以实现一个完整的 SPA（Single Page Application）应用，本文将介绍如何搭建一个基于 React + Node + MySQL 的 SPA 应用实例。
准备工作
在开始之前，需要确保已经安装了以下软件和工具：
- Node.js，下载地址：https://nodejs.org
- MySQL，下载地址：https://www.mysql.com
创建项目
首先，我们需要创建一个基础的项目目录结构。在命令行终端中输入以下命令：
mkdir react-node-mysql-demo && cd react-node-mysql-demo touch server.js npm init -y
以上命令会创建一个名为 react-node-mysql-demo 的文件夹，并在其中创建一个名为 server.js 的文件，还会生成一个默认的 package.json 配置文件。
接下来，我们需要安装一些必要的依赖包：
npm install express mysql body-parser cors --save
express是一个 Node.js Web 框架，用于处理 HTTP 请求和响应。mysql是 Node.js 的 MySQL 数据库驱动程序。body-parser是一个 Node.js 中间件，用于解析 HTTP 请求的主体。cors是一个 Node.js 中间件，用于控制跨域资源共享。
编写服务器代码
在 server.js 文件中，我们需要编写一个简单的服务器程序，用于处理客户端的 HTTP 请求：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
----- ---------- - -----------------------
----- ---- - ----------------
----- --- - ----------
----------------
---------------------------
----- ---------- - ------------------------
----- ------------
----- -------
--------- -----------
--------- ------
---
-------------------------------- -
-- ----- -
-------------------- ----------- - - -----------
-------
-
---------------------- -- -- - - ---------------------
---
--------------------- ------------- ---- -
------------------------ - ---- ------- ------------- ----- -
-- ----- ----- ----
---------------
---
---
---------------- ---------- -
------------------- -- ------- -- ---- -------
---以上服务器程序会创建一个名为 app 的 Express 实例，并配置一些中间件。其中，app.use(cors()) 的作用是允许跨域访问，app.use(bodyParser.json()) 的作用是解析 HTTP 请求页面的 JSON 数据。
接着，我们使用 mysql.createConnection() 方法创建一个 MySQL 数据库连接。在这里，我们使用本地 MySQL 服务器，并连接到名为 test 的数据库。
在这个示例程序中，我们定义了一个 /api/users 的路由，该路由会从 MySQL 数据库中查询所有用户数据，并将其返回到客户端。
最后，我们使用 app.listen() 方法创建一个 HTTP 服务器，并使其在本地的 5000 端口上运行。
编写客户端代码
现在，我们需要编写一个简单的客户端代码，用于与服务器进行交互并显示数据。在项目根目录中，创建一个名为 client 的文件夹，并在其中创建一个名为 src 的文件夹。在 src 文件夹中，创建三个文件：
index.jsApp.jsUserList.js
首先，我们需要在 index.js 文件中渲染 App 组件：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));接着，我们需要在 App.js 文件中定义 App 组件：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- -------------
----- --- ------- --------- -
------------- -
--------
---------- - -
------ --
--
-
------------------- -
----------------------------------------
-------------- -- ----------------
----------- -- --------------- ----- ----
-
-------- -
----- - ----- - - -----------
------ -
-----
-------- ---------
--------- ------------- --
------
--
-
-
------ ------- ----在上面的代码中，我们首先使用 import 命令引入 UserList 组件。接着，我们定义一个名为 App 的 React 组件，并初始化 this.state 对象。在 componentDidMount() 方法中，我们使用 fetch() 方法从服务器加载用户数据，并使用 this.setState() 方法将其存储在组件的状态中。
最后，在 render() 方法中，我们将用户列表作为属性传递给 UserList 组件，并将其呈现在界面上。
最后，我们需要在 UserList.js 文件中定义 UserList 组件：
-- -------------------- ---- -------
------ ----- ---- --------
-------- --------------- -
----- - ----- - - ------
------ -
----
--------------- -- -
--- ------------------------------
---
-----
--
-
------ ------- ---------以上代码中，我们定义了一个名为 UserList 的组件，并使用 props 属性将用户列表传递给组件。在 render() 方法中，我们使用 map() 方法遍历用户列表，并将每个用户的名称作为列表项呈现在界面上。
运行应用
现在，我们已经完成了服务器和客户端的代码编写。在命令行终端中，进入项目根目录，并启动服务器程序：
node server.js
接着，在另一个命令行终端中，进入项目根目录的 client 文件夹，并启动客户端程序：
cd client && npm start
在浏览器中打开 http://localhost:3000，即可看到我们编写的 SPA 应用。当客户端应用启动时，它会从服务器加载用户数据，并显示在应用界面中。
总结
在本文中，我们学习了如何使用 React、Node 和 MySQL 创建一个基于 SPA 的 Web 应用。我们从服务器端开始，使用 Express 框架和 MySQL 数据库驱动程序创建一个简单的 API，用于查询并返回用户数据。接着，我们创建了一个名为 App 的 React 组件，使用 fetch() 方法从服务器加载用户数据，并使用 UserList 组件在界面上呈现用户列表。最后，我们使用 npm 命令启动服务器和客户端应用，并在浏览器中查看应用效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482f2c448841e989425044d