随着 Web 应用程序对用户需求的不断增加，前端技术越来越重要，而全栈开发也成为了一种非常流行的趋势。这篇文章将讲解如何使用 Node.js 和 React 实现一个简单的全栈应用，并分享给大家一些实际的经验和指导意义。
简介
本文将使用 Node.js 和 React 来搭建一个简单的“待办事项”应用程序。该应用程序将包含两部分：一个前端组件，用于渲染待办事项列表并允许用户添加新事项，以及一个后端 API，用于存储和检索待办事项。
在这个应用程序中，我们将使用以下技术：
- Node.js 和 Express：用于搭建后端 API
- MongoDB：一个流行的 NoSQL 数据库，用于存储待办事项
- React：用于渲染前端组件
后端搭建
首先，我们需要使用 Node.js 和 Express 搭建一个后端 API。我们将使用 Express 来路由请求，并使用 MongoDB 作为我们的数据库。
安装必要的依赖项
我们需要使用一些依赖项来搭建后端。使用终端进入项目文件夹，并运行以下命令：
npm init # 初始化项目 npm install --save express body-parser mongoose
express：用于搭建路由body-parser：用于解析请求体mongoose：用于操作 MongoDB
创建数据库模型
在 models 文件夹中创建一个新文件 todo.js，并编写以下代码：
const mongoose = require('mongoose');
const todoSchema = new mongoose.Schema({
title: { type: String, required: true },
completed: { type: Boolean, default: false }
});
module.exports = mongoose.model('Todo', todoSchema);该模型定义了一个待办事项列表项的属性结构，包括一个标题和一个完成状态。
安装并连接数据库
在 index.js 中添加以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ------------------------------------------------- - ---------------- ---- --- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- -------- -- - ---------------------- -- --- ------------ ---
这将连接到本地 MongoDB 实例，并向控制台输出连接成功的消息。
编写路由器
在 routes 文件夹中创建一个新文件 todos.js，并编写以下代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ------ - -----------------
----- ---- - --------------------------
--------------- -------- ----- ---- -
------------------ ----- ------ -
-- ----- ------ -------------------
----------------
---
---
---------------- -------- ----- ---- -
----- ---- - --- ------
------ --------------
---
------------------ ----- ----- -
-- ----- ------ -------------------
---------------
--
---
------------------ -------- ----- ---- -
---------------------------- -------- ----- ----- -
-- ----- ------ -------------------
-------------- - -------------------
------------------ ----- ----- -
-- ----- ------ -------------------
---------------
---
---
---
-------------- - -------我们现在拥有了三个路由：
GET /todos：获取所有待办事项POST /todos：添加新待办事项PUT /todos/:id：更新待办事项的状态
前端搭建
现在，我们将使用 React 来搭建一个前端组件来渲染待办事项列表并允许用户添加新事项。
安装必要的依赖项
我们需要使用一些依赖项来搭建前端。使用终端进入项目文件夹，并运行以下命令：
npm install --save react react-dom axios npm install --save-dev webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react
react和react-dom：用于编写前端组件axios：用于访问我们的后端 APIwebpack和webpack-dev-server：用于构建我们的前端应用程序babel-loader、@babel/core、@babel/preset-env和@babel/preset-react：用于将 ES6 和 JSX 编译为浏览器可识别的 JavaScript
编写前端组件
在 src 文件夹中创建一个新文件 App.js，并编写以下代码：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ ----- ---- --------
-------- ----- -
----- ------- --------- - -------------
----- --------- ----------- - -------------
------------ -- -
-------------------
--------- -- -------------------
----------------------
-- ----
-------- --------------- -
-------------------- - ------ ------- --
--------- -- -
------------------- -----------
---------------
--
----------------------
-
-------- --------------------------- -
------------------------------- - ---------- --------------- --
--------- -- -------------------- -- ----- --- ------------ - -------- - ----
----------------------
-
------ -
---- ----------------
-------- ---------
----
--------------- -- -
--- -------------- ------------------------- - ----------- - --- ----------- -- -----------------------------
------------
-----
---
-----
-----
------ ----------- --------------- ----------- -- --------------------------- --
------- ------------------------------------
------
------
--
-
------ ------- ----该组件定义了一个“待办事项”列表，并允许用户添加新项目和标记项目状态。我们使用了 React Hooks 来管理组件的状态，并使用 Axios 库访问我们的后端 API。
配置 Webpack
在项目文件夹中创建一个新文件 webpack.config.js，并编写以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- ----------------------- ----------
--------- -----------
--
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- --------------------- ----------------------
-
-
-
-
--
---------- -
------------ -------------------- ----------
----- ----
-
--entry：我们的入口文件output：我们的输出文件module：Webpack 模块规则devServer：webpack-dev-server 配置
编写入口文件
在 src 文件夹中创建一个新文件 index.js，并编写以下代码：
import React from 'react';
import { render } from 'react-dom';
import App from './App';
render(<App />, document.getElementById('root'));该文件简单地将我们的 React 组件渲染到页面上。
运行应用程序
现在我们已经编写了我们的后端和前端组件，我们可以将它们组合在一起。运行以下命令将启动 Webpack 和服务器：
npm run dev
现在通过浏览器访问 http://localhost:3000，您将看到我们的待办事项应用程序。您可以在文本框中添加新事项，并单击列表项来标记它们的完成状态。
结论
在这篇文章中，我们使用 Node.js 和 React 搭建了一个简单的全栈应用程序，它包括两部分：一个前端组件和一个后端 API。我们使用了许多技术，包括 Express、MongoDB、React 和 Axios，并分享了一些实际的经验和指导意义。
希望本文能对您有所启发。如果您有任何问题或疑问，请随时在评论区留言。代码示例可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f0b4be6fbf96019733c54b