开始

创建前端文件夹，Vue框架初始化。
简单 不赘述 官网就有命令 然后一直Enter

后端框架

目标：创建后端文件夹，Express框架初始化。

1
2
3
4
5
6
7
# 第一步 初始化
npm init -y 

# 第二步 安装依赖包
npm install express mongoose cors dotenv bcryptjs jsonwebtoken 

npm install nodemon -D

第二步说明：

  • express — Web框架（处理HTTP请求）
  • mongoose — 连接和操作MongoDB的工具
  • cors — 允许前端跨域请求后端
  • dotenv — 管理敏感配置（数据库密码等）
  • bcryptjs — 密码加密
  • jsonwebtoken — 登录令牌（JWT）
  • nodemon — 代码改动后自动重启服务器（开发用）

第三步，打开 backend\package.json，找到 "scripts" 那一段，替换成：

1
2
3
4
"scripts": {  
	"dev": "nodemon src/index.js",
	"start": "node src/index.js"
}

第四步 创建后端文件

1
2
3
4
5
6
7
8
9
10
backend/
├── .env ← 存放数据库地址等配置
└── src/
├── index.js ← 启动入口（服务器从这里跑起来）
├── config/
│ └── db.js ← 连接MongoDB
├── models/ ← 数据模型（用户表、帖子表、自习室表）
├── routes/ ← 路由（定义有哪些API接口）
├── middleware/ ← 中间件（登录验证等）
└── controllers/ ← 控制器（接口的具体逻辑）

一句话理解：请求 → 路由（找路）→ 中间件（检查身份）→ 控制器（处理业务）→ 模型（读写数据库）→ 返回结果。

此时，核心代码骨架已经有了，现在让他能跑起来！

第①步：配置 .env → 告诉程序”数据库在哪、用哪个端口”。
第②步：配置 db.js → 建立和MongoDB的连接。
第③步：编写 index.js → 启动Express服务器。

具体内容不赘述 ai都能生成。

下一步 启动你的数据库。

运行，此时应该后端能正常启动！

产品

第一步 明确要做一个什么产品。

明确思路：接下来分两条线并行推进：
后端（数据+接口） 前端（页面）
| │
① 创建数据模型 ① 搭顶部Tab切换框架
(User/Post/自习室) (发现/专注/我的)
| |
② 写注册登录接口 ② 对接后端接口
| |
③ 写帖子/自习室接口 ③ 完善各页面内容
└─────────┬────────────────┘
前后端联调！

后端

第一步 写模型。

backend/src/models/
├── User.js ← 用户（7个字段）
├── Todo.js ← 待办（3个字段）
├── Post.js ← 帖子 + 评论内嵌
├── StudyRecord.js ← 学习记录
└── StudyRoom.js ← 自习室 + 成员内嵌（最复杂）

第二步 写接口。
🎯 按依赖顺序：先中间件 → 再控制器 → 再路由 → 最后挂载

比如写关于登录注册的代码：
📦 要创建的三个文件

1
2
3
4
5
6
7
backend/src/
├── middleware/
│ └── auth.js ← ① JWT验证中间件（守门员）
├── controllers/
│ └── authController.js ← ② 注册/登录逻辑
└── routes/
└── auth.js ← ③ 路由定义

下一步，测试，我是用的Apifox。
可以把接口地址保存下来。
需要了解一下状态码 apifox可能会误判“失败” 不过可以自己看状态码判断。
也可以结合数据库 注意要刷新。

✅ 注册登录功能完美通过！