## 📚 技术栈背景 | Tech Stack & Context
- 列出所有的相关技术/语言
- [[Express.js]]
- [[public/CODE/Node.js|Node.js]]
- 主题：一句话总结这张卡片讲解了什么？
-
- 相关文档
-
## 🧩 相关场景 | Context
- 契机：为什么现在写它？
- 所有 [[MERN]] 的项目都要用到 express 和 node 作为 server
- 作用：它解决了什么问题？
- 快速搭建 API 接口
- 应用场景：你未来会在什么地方用到它？
- 任何前后端分离的项目都能用到（前端访问 Express 提供的接口）
## 🔑 基本概念 | Key
[[Express.js#是什么]]
## 🔄 工作流程 | Flow
### 总体流程
### 详细步骤
#### 0. 初始化
- 初始化项目
例如位于项目根目录下，在其下创建一个新的 server folder
```bash
mkdir server && cd server
npm init -y
```
- 安装依赖
```shell
# 在 server 目录下
npm install express cors dotenv
npm install nodemon --save-dev
```
- `express`: 后端框架，用来创建服务器和 API
- `cors`: 允许前端访问后端 API 的工具，常用于前后端分离的项目
- `dotenv`: 用来读取环境变量（比如数据库密码）的工具
- `nodemon`: 开发工具，当你改代码时自动重启服务器
- `--save-dev`: 表示 nodemon 只在开发时使用，不在生产环境使用
- 创建目录
```shell
mkdir -p src/{config,controllers,routes,models,middlewares,utils}
touch .env
```
- `touch`: 创建空文件
- src/{}: 花括号里的内容会被展开，相当于同时执行
#### 1. 配置
- 在 `package.json`
- 添加：
```json
"scripts": {
"dev": "nodemon src/index.js"
}
```
- 意思是：当你运行 `npm run dev` 的时候，等于运行了：`nodemon src/index.js`
- nodemon 是一个 hot reload 的监听工具，改了代码会自动 trigger重启服务
- 修改 `"main": "src/index.ts"` ⚠️：路径符合真实情况
- 新建 `.env` 文件：
```
PORT=5000
MONGO_URI=mongodb+srv://...（if use MongoDB）
```
#### 2. 创建入口文件：`src/index.js`
```js
import express from 'express';
import dotenv from 'dotenv';
import cors from 'cors';
dotenv.config();
const app = express();
const PORT = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
app.get('/', (req, res) => {
res.send('Hello, Express!');
});
app.listen(PORT, () => {
console.log(`Server is listening on http://localhost:${PORT}`);
});
```
- 导入
- express
- dotenv 读取环境变量
- cors 跨域访问 让前端能跨域访问后端 API
- `dotenv.config()`
- 读取 .env 文件，把里面的值挂到 process.env 上
- `const app = express()`
- 创建一个 Express 应用实例
- 可选： `app.use(cors())`
- 启用跨域请求（前后端分离时必加）
- 可选：`app.use(express.json());`
- 要处理前端 fetch / axios.post() 发来的 JSON 数据（也就是 req.body）。如果你不加这句，req.body 就是 undefined，你就没法处理 POST 的数据。
- `app.get('/', ...)`
- 测试接口，访问 / 路径时返回一段文字
- `app.listen(PORT, ...)`
- 启动服务，监听端口，准备接收请求
#### 3. 运行
- 运行服务器
```bash
npm run dev
```
如果成功，你可以看到 `Server is listening on http://localhost:xxxx`
- 打开浏览器访问 `http://localhost:5000/`
- 如果成功，你可以在界面上看到 `Hello, Express!`
> [!success] Congratulations!
> 你已经成功把 server 跑起来啦！
## 🤔 常见问题 / 提示 | Tips
%%
- 每个功能都按照“route -> controller -> 模型”三段式写法，后期好维护
- `.env` 永远别 push 上 GitHub
- 推荐搭配 Postman 做 API 测试，前端开发更轻松
%%