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

目录

  • [1 React搭建](#1 React搭建)
  • [2 Express搭建](#2 Express搭建)
  • 总结

第一篇我们介绍了开发环境的搭建过程,介绍了vscode、git、nodejs和mongodb的安装过程。有了基础的开发环境就需要搭建我们的前后端脚手架了。

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: [email protected]
Found: [email protected]
node_modules/react
  react@"^19.0.0" from the root project

Could not resolve dependency:
peer react@"^18.0.0" from @testing-library/[email protected]
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

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

总结

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

相关推荐
GOTXX5 分钟前
BoostSiteSeeker项目实战
前端·c++·后端·mysql·搜索引擎·项目实战·boost
山青花欲燃31012 分钟前
React 对接流式接口实现
前端·llm
LaoZhangAI14 分钟前
【2025最新】Gemini 2.5 Pro完全指南:强大推理能力提升8大应用场景实战效率
前端
晓风伴月25 分钟前
Css:如何解决绝对定位子元素内容被父级元素overflow:hidden属性剪裁
前端·css·overflow裁剪
Carlos_sam25 分钟前
OpenLayers:海量图形渲染之矢量切片
前端·javascript
Nexmoe26 分钟前
20 万行代码:我们如何构建和维护大规模 AI 原型系统
前端
zhangxingchao26 分钟前
Andrdoid中常用的JVM知识整理
前端
海底火旺26 分钟前
聊一聊JavaScript中的立即执行函数(IIFE)
前端·javascript
76756047927 分钟前
useMemoize 方法源码解读与实战应用
前端·源码
青青奇犽27 分钟前
跨域问题全解析:七种方法轻松拿捏跨域
前端·javascript·面试