第二篇：脚手架搭建 — React 和 Express 的搭建

1 React搭建

前端我们选用React框架解决界面的渲染和用户交互的问题，React给了我们一个快捷搭建的脚手架，首先在我们的D盘创建一个项目目录project

进入project目录创建前端工程目录，需要在当前文件夹的地址栏键入cmd快捷的打开命令行窗口

输入如下命令

bash 复制代码

npx create-react-app school-system-client

安装的过程中报错了

找到提示的错误文件打开看一下报错信息

bash 复制代码

'Log files:
C:\Users\hp\AppData\Local\npm-cache\_logs\2024-12-10T07_48_07_130Z-debug-0.log

# npm resolution error report

While resolving: school-system-client@0.1.0
Found: react@19.0.0
node_modules/react
  react@"^19.0.0" from the root project

Could not resolve dependency:
peer react@"^18.0.0" from @testing-library/react@13.4.0
node_modules/@testing-library/react
  @testing-library/react@"^13.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

报错的原因是因为react19和第三方的库不兼容，我们使用稳定版来开发我们这个项目，将react降级到18，在命令行输入如下命令

bash 复制代码

cd school-system-client
npm install react@18 react-dom@18

再执行npm install

bash 复制代码

npm install

然后执行npm start运行项目

bash 复制代码

npm start

为了解决这个报错，我们进入到项目目录，将node_modules和package-lock.json都删掉

重新安装依赖

bash 复制代码

npm install

然后再次执行npm start，跳出了默认的Edge浏览器，但是报了一个错

这个是有一个库缺失了，我们单独安装一下

bash 复制代码

npm install web-vitals

浏览器看到这个转动的图标，表示我们的脚手架搭建成功了

2 Express搭建

前端脚手架搭建成功之后，我们就需要搭建后端脚手架了，在项目根目录创建一个文件夹school-system-server

输入如下命令

bash 复制代码

npm init -y

然后安装express的常用依赖包

bash 复制代码

npm install express mongoose cors dotenv

express：创建 API 接口的框架。
mongoose：用于与 MongoDB 数据库进行交互。
cors：解决跨域问题。
dotenv：用于管理项目的环境变量。

在根目录创建server.js

打开文件输入如下代码

bash 复制代码

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();

// 中间件
app.use(cors());
app.use(express.json()); // 处理 JSON 请求体

// 路由
app.get('/', (req, res) => {
  res.send('Hello, this is the school system backend!');
});

// 启动服务器
const PORT = process.env.PORT || 5000;
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

在命令行输入启动命令

bash 复制代码

node server.js

在浏览器的地址栏输入访问地址

bash 复制代码

http://localhost:5000

到此为止，我们已经把前后端的脚手架都搭建完毕了。如果用盖房子做比喻，相当于我们把地基已经打好了，剩下就是按照我们的规划一层层的往上盖了。

总结

我们本篇介绍了前后端脚手架的搭建方法，搭建过程中会遇到形形色色的问题，就需要根据问题逐个击破。