随着互联网的发展，全栈JavaScript应用成为开发人员的热门选择。全栈开发允许开发人员使用同一种语言（JavaScript）来开发前端和后端，从而提高开发效率并简化技术栈。
在本博客中，我们将介绍如何构建一个全栈JavaScript应用。我们会使用Node.js作为后端服务器，React作为前端框架，以及MongoDB作为数据库。
什么是全栈JavaScript应用？
全栈JavaScript应用是指使用JavaScript作为主要开发语言来构建前端和后端应用程序。这意味着开发人员可以使用相同的语言和工具来编写服务器端代码和客户端代码，从而提高开发效率并降低学习曲线。
技术栈概览
在本次示例中，我们将使用以下技术栈来构建全栈JavaScript应用：
- Node.js：作为后端服务器框架，用于处理HTTP请求和构建API。
- React：用于构建用户界面的JavaScript库。
- MongoDB：作为我们的数据库，用于存储和检索数据。
步骤1：初始化项目
首先，我们需要创建一个新的项目文件夹并初始化项目。打开终端并执行以下命令：
mkdir fullstack-app
cd fullstack-app
npm init -y
上述命令将创建一个名为fullstack-app的文件夹，然后进入该文件夹并初始化项目。
步骤2：设置后端服务器
接下来，我们需要设置后端服务器。为此，我们将使用Node.js和Express框架。使用以下命令安装所需的依赖项：
npm install express body-parser --save
然后，我们在项目根目录中创建一个名为server.js的文件，并添加以下内容：
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/', (req, res) => {
res.send('Hello World!');
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
上述代码创建了一个基本的Express应用程序，并在3000端口上监听HTTP请求。此应用程序设置了一个简单的路由，当访问根目录时返回“Hello World!”。
保存server.js并在终端中执行以下命令以启动后端服务器：
node server.js
现在，你可以在浏览器中访问http://localhost:3000，将看到“Hello World!”的消息。
步骤3：设置前端应用
接下来，我们设置前端应用。我们将使用create-react-app脚手架来初始化React应用程序。在终端中执行以下命令以安装create-react-app：
npm install -g create-react-app
然后，返回到项目根目录并执行以下命令以创建React应用：
create-react-app client
上述命令将在fullstack-app文件夹中创建一个名为client的新文件夹，并在其中初始化React应用程序。
步骤4：连接前后端
现在，我们需要设置前端应用与后端服务器之间的连接。为此，我们将使用fetchAPI来发送HTTP请求。
首先，在client文件夹中创建一个新文件夹名为src/api，并在其中创建一个名为api.js的新文件。然后，添加以下内容：
const BASE_URL = 'http://localhost:3000';
export const fetchData = async () => {
try {
const response = await fetch(`${BASE_URL}/data`);
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
};
上述代码导出一个名为fetchData的异步函数，该函数通过发送HTTP GET请求获取数据。
然后，在src/App.js文件中，使用以下代码替换默认的应用程序：
import React, { useEffect, useState } from 'react';
import { fetchData } from './api/api';
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
const getData = async () => {
const response = await fetchData();
setData(response);
};
getData();
}, []);
return (
<div>
<h1>Full Stack JavaScript App</h1>
<ul>
{data.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
};
export default App;
上述代码通过调用fetchData函数获取数据，并在HTML中使用data数组来渲染列表。
步骤5：设置数据库
最后，我们将设置MongoDB作为我们的数据库。
首先，确保在你的机器上安装了MongoDB，并启动MongoDB服务。
然后，在终端中执行以下命令来安装相关的包：
npm install mongoose dotenv --save
接下来，创建一个名为.env的新文件，并添加以下内容：
MONGODB_URL=mongodb://localhost/fullstack-app
上述代码指定MongoDB的URL连接字符串。如果你使用了不同的数据库名称，请相应地修改URL。
然后，在server.js文件中添加以下内容以连接MongoDB：
const mongoose = require('mongoose');
require('dotenv').config();
const uri = process.env.MONGODB_URL;
mongoose.connect(uri, {
useNewUrlParser: true,
useUnifiedTopology: true,
});
const db = mongoose.connection;
db.on('error', console.error.bind(console, 'MongoDB connection error:'));
db.once('open', () => {
console.log('Connected to MongoDB');
});
上述代码使用mongoose库连接到MongoDB。
总结
通过使用Node.js作为后端服务器框架，React作为前端框架以及MongoDB作为数据库，我们可以构建出一个全栈JavaScript应用。这种方法可以提高开发效率并简化技术栈。希望这篇博客对于你构建全栈JavaScript应用有所帮助！
本文来自极简博客，作者：梦里花落，转载请注明原文链接：构建全栈JavaScript应用：Node.js、React与MongoDB
