构建您的第一个全栈应用程序是任何开发人员旅程中的一个里程碑。在本指南中，我们将引导您完成使用 React、Node.js 和 MongoDB 创建任务管理器应用程序的过程。在此过程中，我们将解释从设置环境到在 Vercel 和 Render 上部署应用程序的每一步。
最后，您将拥有一个实时、功能齐全的应用程序，并有信心处理更复杂的项目。
必备软件
Node.js（在此下载）：https://nodejs.org/fr
Node.js 是一个允许您在浏览器之外运行 JavaScript 的运行时。安装它以使用其内置的包管理器 npm 来处理依赖项。
node -v && npm -v
安装后运行上面的命令来验证版本。
Git（在此下载）：https://git-scm.com/
Git 是一个版本控制系统，可以跟踪代码更改并促进协作。
MongoDB Atlas（在此注册）：https://www.mongodb.com/products/platform/atlas-database
Atlas 提供免费的云托管 MongoDB 数据库，非常适合初学者。
Vercel CLI（安装指南）：https://vercel.com/
Vercel 是一个用于快速高效地部署 React 前端的平台。
渲染帐户（在此注册）：https://render.com/
Render 为部署后端服务提供了一个强大的环境。
第 1 步：创建项目结构
打开终端并为您的应用程序创建一个目录：
mkdir 任务管理器应用程序 && cd 任务管理器应用程序
初始化 Git 存储库：
git 初始化
设置 package.json 文件来管理依赖项：
npm init -y
第 2 步：安装依赖项
后端依赖
后端将使用 Node.js 和 Express 构建，并将连接到 MongoDB 进行数据存储。
安装所需的软件包：
npm install express mongoose dotenv cors npm install --save-dev nodemon
前端依赖项
前端将使用 React 来构建用户界面。
设置 React 应用程序：
npx create-react-app 客户端
cd 客户端
在 React 目录中，安装其他库：
npm install axios react-router-dom
第 1 步：创建目录结构
像这样组织你的项目：
npm install express mongoose dotenv cors npm install --save-dev nodemon
第 2 步：创建 Express 服务器
在 server/ 目录中，创建一个 server.js 文件：
task-manager-app/ ├── server/ │ ├── models/ # Contains database models │ ├── routes/ # Contains API routes │ ├── .env # Stores environment variables │ ├── server.js # Main server file
第3步：配置环境变量
在 server/ 目录中创建一个 .env 文件并添加您的 MongoDB
连接字符串：
MONGO_URI=
第 4 步：定义 Mongoose 模型
在 server/models/ 目录中，创建 Task.js:
require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
// Connect to MongoDB
mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true })
.then(() => console.log("Connected to MongoDB"))
.catch(err => console.error(err));
// API Routes
app.use('/api/tasks', require('./routes/taskRoutes'));
// Start the server
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
第 5 步：创建 API 路由
在server/routes/目录下，创建taskRoutes.js：
const mongoose = require('mongoose');
const TaskSchema = new mongoose.Schema({
title: { type: String, required: true },
completed: { type: Boolean, default: false },
}, { timestamps: true });
module.exports = mongoose.model('Task', TaskSchema);
第 1 步：设置 React 组件
像这样组织你的 React 目录：
const express = require('express');
const router = express.Router();
const Task = require('../models/Task');
// Fetch all tasks
router.get('/', async (req, res) => {
const tasks = await Task.find();
res.json(tasks);
});
// Add a new task
router.post('/', async (req, res) => {
const task = await Task.create(req.body);
res.json(task);
});
// Update a task
router.put('/:id', async (req, res) => {
const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
res.json(task);
});
// Delete a task
router.delete('/:id', async (req, res) => {
await Task.findByIdAndDelete(req.params.id);
res.json({ message: 'Task deleted' });
});
module.exports = router;
第 2 步：从 API 获取数据
在 src/components/TaskList.js 中：
client/ ├── src/ │ ├── components/ │ │ ├── TaskList.js │ │ ├── AddTask.js │ │ ├── Task.js │ ├── App.js │ ├── index.js
渲染上的后端部署
将您的代码推送到 GitHub：
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const TaskList = () => {
const [tasks, setTasks] = useState([]);
useEffect(() => {
axios.get('http://localhost:5000/api/tasks')
.then(response => setTasks(response.data))
.catch(err => console.error(err));
}, []);
return (
<div>
{tasks.map(task => (
<div key={task._id}>
<h3>{task.title}</h3>
<p>{task.completed ? 'Completed' : 'Incomplete'}</p>
</div>
))}
</div>
);
};
export default TaskList;
在渲染器上部署：
连接您的存储库。
将根目录设置为/server。
添加环境变量（例如 MONGO_URI）。
Vercel 上的前端部署
导航到客户端目录：
cd 客户端
部署：
vercel (https://vercel.com/)
结论
恭喜！ ？您已经构建并部署了第一个全栈应用程序。通过掌握这个过程，您就可以顺利创建更复杂、更有影响力的项目。
保持联系
？访问 GladiatorsBattle.com 了解更多
？在 Twitter 上关注我们
？阅读更多有关 DEV.to
？ CodePen 上的互动演示
让我们一起创造一些令人惊叹的东西！ ？
以上是从初学者到专业人士：用 4 时间构建您的第一个全栈应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！
