第二篇:脚手架搭建 — 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

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

总结

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

相关推荐
sunbyte2 小时前
Tailwind CSS 初学者入门指南:项目集成,主要变更内容!
前端·css
可爱的秋秋啊3 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林3 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
IT瘾君5 小时前
JavaWeb:Html&Css
前端·html
264玫瑰资源库5 小时前
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
java·开发语言·前端·游戏
喝拿铁写前端5 小时前
从圣经Babel到现代编译器:没开玩笑,普通程序员也能写出自己的编译器!
前端·架构·前端框架
HED5 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js
拉不动的猪6 小时前
前端自做埋点,我们应该要注意的几个问题
前端·javascript·面试
王景程6 小时前
如何测试短信接口
java·服务器·前端
安冬的码畜日常6 小时前
【AI 加持下的 Python 编程实战 2_10】DIY 拓展:从扫雷小游戏开发再探问题分解与 AI 代码调试能力(中)
开发语言·前端·人工智能·ai·扫雷游戏·ai辅助编程·辅助编程