Express 是一个基于 Node.js 的快速、简洁、灵活的 Web 应用开发框架。它提供了一系列强大的功能，帮助开发者快速构建各种 Web 应用。Express 的原理是利用 Node.js 内置的 http 模块，通过中间件和路由等功能，实现Web应用的开发。
使用 Express 的具体步骤如下：

1. 安装 Express：在项目目录中运行npm install express安装 Express 模块。
2. 引入 Express：在项目中的主文件（例如：app） .js）中引入 Express，const express = require('express')。
3. 创建应用对象：使用express()函数创建一个应用对象，const app = express()。
4. 创建路由：通过app.get()、app.post()等方法为应用创建路由，例如：app.get('/', (req, res) => { res.send('Hello World!') })。
5. 启动服务器：使用app.listen()方法启动服务器，并指定端口号，例如：app.listen(3000, () => { console.log('Server is running on port 3000') })。
   以下是一个简单的 Express 应用示例（demo）：

// 引入 express 模块
const express = require('express');
// 创建应用对象
const app = express();
// 创建路由
app.get('/', (req, res) => {
res.send('Hello World!');
});
// 启动服务器
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
复制复制

将代码保存到app.js文件中，然后在命令行中运行node app.js，即可启动Express应用。在浏览器中访问http://localhost:3000/，可以看到“Hello World!” 的输出。

创建一个React脚手架：

进入项目：
项目基本结构：
启动项目：
安装router-dom：
创建一个user页面：
javascript复制代码const User = () => {

return

this is a User Page

export default User;

修改App.tsx, 添加一个路由/user
刷新页面：
点击 to user,跳转

功能正常

build项目：
文件中多了一个文件夹build，这里就存放着构建好的文件

基本文件准备好了，就可以创建一个本地server了

Static Server
新建文件夹server
进入server文件夹路径，安装express

在server文件里面创建一个server.js文件
javascript复制代码const express = require("express");
const path = require("path");

const router = express.Router();
router.use(express.static(path.join(dirname, "../build")));
router.get("/*", (req, res) => {
res.sendFile(path.join(dirname, "../build/index.html"));
});

const app = express();
app.use(router);
app.listen(3001, () => {
console.log("server is running on port 3001");
});

这里有两个重点，一个重点是对于所有的/*路径都统一返回build文件夹下面的index.html，这样做的目的是在跳转到其他路径，并且刷新页面之后，仍然可以显示正确的内容。

往下看，你会理解更清楚

测试：
启动本地server：
访问localhost:3001

访问没问题，点击 to user，跳转也没有问题，并且刷新也没有问题

如果我把代码router.get("/",...)中的“/”改成"/"，跳转到/user后刷新页面就会出现问题：
基本静态服务器到这里其实就差不多了，下面再做个接口服务器吧
API Server

增加一个路由对象
增加一个路由router2：/api
javascript复制代码const express = require("express");
const path = require("path");

const router = express.Router();
router.use(express.static(path.join(dirname, "../build")));
router.get("/*", (req, res) => {
res.sendFile(path.join(dirname, "../build/index.html"));
});

const router2 = express.Router();
router2.get("/getUser", (req, res) => {
res.end(JSON.stringify({ name: "zhangsan" }));
});

const app = express();
app.use("/api", router2);
app.use(router);
app.listen(3001, () => {
console.log("server is running on port 3001");
});

新注册的router2要放在注册router之前，这样会优先匹配以/api开头的路由。然后router2准备了一个 /getUser的Api，返回一个简单的对象。
访问接口的就走router2，静态文件就走router，这样和上面的静态文件服务器区分开了。
启动服务器：
访问localhost:3001/api/getUser

没问题

修改前端代码
修改User/index.tsx,访问接口/api/getUser
javascript复制代码import { useEffect, useState } from "react"

const User = () => {
const [user, setUser] = useState(null);
useEffect(() => {
fetch('/api/getUser').then(res => res.json()).then(data => {
setUser(data)
})
}, []);
return user ?

fetch failed

export default User;

修改后的代码表示，在进入到User页面时，就开始访问/api/getUser,并且将返回的结果显示出来
还需要配置一个开发环境的代理：

端口号指向3001