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

news/2024/12/12 22:14:19/

1 React搭建

前端我们选用React框架解决界面的渲染和用户交互的问题，React给了我们一个快捷搭建的脚手架，首先在我们的D盘创建一个项目目录project
在这里插入图片描述
进入project目录创建前端工程目录，需要在当前文件夹的地址栏键入cmd快捷的打开命令行窗口

在这里插入图片描述

输入如下命令

npx create-react-app school-system-client

在这里插入图片描述
安装的过程中报错了

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

'Log files:
C:\Users\hp\AppData\Local\npm-cache\_logs\2024-12-10T07_48_07_130Z-debug-0.log# npm resolution error reportWhile resolving: school-system-client@0.1.0
Found: react@19.0.0
node_modules/reactreact@"^19.0.0" from the root projectCould 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 projectFix 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，在命令行输入如下命令

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

在这里插入图片描述
再执行npm install

npm install

在这里插入图片描述
然后执行npm start运行项目

npm start

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

重新安装依赖

npm install

然后再次执行npm start，跳出了默认的Edge浏览器，但是报了一个错
在这里插入图片描述
这个是有一个库缺失了，我们单独安装一下

npm install web-vitals

在这里插入图片描述
浏览器看到这个转动的图标，表示我们的脚手架搭建成功了

2 Express搭建

前端脚手架搭建成功之后，我们就需要搭建后端脚手架了，在项目根目录创建一个文件夹school-system-server
在这里插入图片描述
输入如下命令

npm init -y

在这里插入图片描述
然后安装express的常用依赖包

npm install express mongoose cors dotenv

在这里插入图片描述

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

在根目录创建server.js
在这里插入图片描述
打开文件输入如下代码

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}`);
});