什么是 SPA
SPA（Single Page Application）是一种通过 AJAX 技术实现动态页面加载的 Web 应用程序，也称为单页应用程序。与传统的多页应用程序不同，SPA 只有一个 HTML 页面，通过前端路由控制页面的切换和数据的加载，使用户体验更加流畅。
Node.js 和 React
Node.js 是一种基于 Chrome V8 引擎的 JavaScript 运行时环境，可用于构建高性能的网络应用程序。React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库，可以与各种前端框架（如 Angular、Vue）结合使用。
使用 Node.js 和 React 可以让我们快速构建一个高性能的 SPA，使用户体验更加流畅。在这里，我们将介绍如何使用 Node.js 和 React 构建一个名为“仙剑奇侠传”的 SPA。
实现步骤
创建项目并安装依赖
首先，我们需要创建一个名为“xianjian”的空项目，并在项目中安装如下依赖：
npm init -y npm install react react-dom react-router-dom body-parser express mysql nodemon webpack webpack-cli webpack-dev-server -D
其中，react、react-dom 和 react-router-dom 分别是 React 的核心库和路由库，body-parser 和 express 是用于创建服务器和处理 POST 请求的库，mysql 是用于连接和操作数据库的库，nodemon 是用于监视文件变化并重新启动服务器的库，webpack、webpack-cli 和 webpack-dev-server 是用于打包和开发的工具库。
编写服务器代码
接下来，我们需要在项目中创建一个名为“server.js”的文件，并编写如下代码实现一个简单的服务器：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ----- - ----------------- ----- ---- - ---------------- ----- --- - ---------- --------------------------- ------------------------------- --------- ---- ---- ---------------- ----- -- - ------------------------ ----- ------------ ----- ------- --------- --- --------- ----------- --- ---------------- -- - -- ----- - ----------------------- - ---- - ----------------------- - --- -------------------------- ----- ---- -- - ----- --- - ------- - ---- ------------ ------------- ----- ------- -- - -- ----- - ----------------- - ---- - ----------------- - --- --- --------------------- ----- ---- -- - ----- --- - ------- - ---- ------- ------------- ----- ------- -- - -- ----- - ----------------- - ---- - ----------------- - --- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------------ ---------- ---展开代码
这段代码创建了一个 Express 服务器，并监听 8888 端口。其中，使用 body-parser 解析 POST 请求的数据，使用 cors 处理跨域请求。另外，还使用了 mysql 连接数据库，实现了获取人物列表、物品列表的 API。
编写前端代码
我们需要在项目中创建一个名为“src”的文件夹，并编写如下代码来实现前端界面：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - ------------- -- ------- ------ ------- ---- - ---- ------------------- ------ ----- ---- -------- ------ -------------- ----- -------- - ---------------------------- ----- --- ------- --------------- - -------- - ------ - ---- ---------------- -------- ----- ---- --------- --------------------- --------- --------------------------------- --------- ---------------------------- ----- ------ -------- ------ ----- -------- ---------------- -- ------ ------------------ ------------------------- -- ------ ------------- -------------------- -- --------- --------- ------ -- - - ----- ---- ------- --------------- - -------- - ------ - ----- -------------- ----------------------- ------ -- - - ----- ------------- ------- --------------- - ----- - - ----------- --- -- ------------------- - ---------------------------------------------- -- - --------------- ----------- --------- --- --- - -------- - ------ - ----- ------------- ---- -------------------------------------- -- - --- ------------------- ------------------------- ------------------------------ ----- --- ----- ------ -- - - ----- -------- ------- --------------- - ----- - - ------ --- -- ------------------- - ----------------------------------------- -- - --------------- ------ --------- --- --- - -------- - ------ - ----- ------------- ---- ---------------------------- -- - --- -------------- -------------------- ------------------------- ----- --- ----- ------ -- - - -------------------- --- ---------------------------------展开代码
这段代码使用了 React Router 实现前端路由，并调用了后端 API 获取人物列表和物品列表。其中，“App” 组件作为整个应用程序的容器，包含了导航栏和前端路由。每个路由对应一个组件，分别显示首页、人物列表和物品列表。调用后端 API 使用了 axios 库。
编写 webpack 配置文件
我们需要在项目中创建一个名为“webpack.config.js”的文件，并编写如下代码来实现 webpack 的配置：
-- -------------------- ---- ------- ----- ---- - ---------------- -------------- - - ------ ----------------- ------- - ----- ----------------------- --------- --------- ------------ -- ------- - ------ - - ----- -------- -------- --------------- ---- - ------- --------------- -------- - -------- --------------------- ----------------------- -- -- -- - ----- --------- ---- ---------------- -------------- -- -- -- --展开代码
这段代码指定了入口文件为“index.js”，输出文件为“bundle.js”。同时，使用了 babel-loader 对 JS 文件进行转换，使用了 style-loader 和 css-loader 对 CSS 文件进行转换。
修改 package.json 文件
我们需要在项目的“package.json”文件中加入如下命令：
"scripts": { "dev": "webpack-dev-server --config webpack.config.js --open --hot", "build": "webpack --config webpack.config.js" }
其中，“dev”命令启动了 webpack-dev-server 服务器，并默认打开浏览器。在修改代码时，服务器会自动更新。当要发布应用程序时，可以使用 “build” 命令进行打包。
运行示例代码
现在，我们已经编写完了“仙剑奇侠传”的 SPA 应用程序所需的所有代码。首先，我们需要在 MySQL 数据库中创建一个名为“xianjian”的数据库，并创建两张表“characters”和“items”。表结构可以参考如下 SQL 语句：
-- -------------------- ---- ------- ------ -------- --------- --- --------- ------ ----- ---------- - -- --- --- ---- --------------- ---- ----------- --- ----- ----------- ------------- ------- --- ---- -- ------ ----- ----- - -- --- --- ---- --------------- ---- ----------- --- ----- ----------- ------------- ------- --- ---- --展开代码
接下来，我们需要启动服务器。在项目的根目录下执行如下命令：
nodemon server.js
然后，在另一个终端窗口中执行如下命令：
npm run dev现在，我们已经成功运行了“仙剑奇侠传”的 SPA 应用程序。在浏览器中访问 http://localhost:8080 就可以看到首页了。点击导航栏中的“人物列表”和“物品列表”，即可查看相应的内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c435c26e1fc40e36d1966e
