开始

◆前端框架
创建前端文件夹，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可能会误判“失败” 不过可以自己看状态码判断。
也可以结合数据库 注意要刷新。

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

然后一依次完成其他模块。

前端

第一步 安装依赖

1
npm install vue-router@4 pinia axios

vue-router页面跳转（发现→专注→我的）
pinia状态管理（保存登录用户信息）
axios发HTTP请求（调后端接口）

第二步 先建目录，再填文件。
🎯按依赖顺序：网络层 → 状态层 → 路由 → 页面 → 主框架。
① 网络层（怎么和后端说话） → utils/request.js
② 状态层（全局共享数据） → stores/user.js
③ 路由层（URL和页面对应） → router/index.js
④ 页面层（每个页面的内容） → views/*.vue
⑤ 主框架（顶部Tab壳子） → App.vue
⑥ 入口（把所有串联起来） → main.js

为什么是这个顺序？
main.js 需要知道：有哪些路由（router）、全局数据在哪（pinia）
↑
App.vue 需要知道：内容区显示哪个页面（router-view）
↑
views/*.vue 需要知道：怎么调接口（request）、用户登录没（stores/user）
↑
stores/user.js 需要知道：怎么发请求（request）
↑
utils/request.js ← 最底层，不被任何人依赖，所以最先建

图标： https://iconify.design/docs/icon-components/vue/

上传github

✅清理敏感信息

  • 把 .env 里的真实密钥替换成占位符
  • 创建 .env.example 模板文件
  • 确保 .gitignore 包含：node_modules/、.env、dist/、uploads/、*.log

✅在 GitHub 官网创建仓库

  • 打开 github.com/new
  • 填仓库名，选 Public
  • ❌ 不勾 README / .gitignore / license（项目里已有）

✅本地初始化并提交

1
2
3
4
cd 项目根目录
git init
git add .
git commit -m "🎉 初始提交"

✅关联远程仓库并推送

1
2
3
git remote add origin https://github.com/你的用户名/仓库名.git
git branch -M main
git push -u origin main

完成。刷新 GitHub 页面即可看到代码。

部署

一、整体架构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
用户浏览器
    │
    ├── 前端（Vercel）: banxue.vercel.app
    │       Vue 3 + Vite 构建的 SPA 单页应用
    │
    └── 后端（Render）: banxue-backend.onrender.com
            Express + MongoDB Atlas
            ├── 用户认证（JWT + GitHub OAuth）
            ├── 帖子 / 评论 / 点赞
            ├── 自习室（创建、加入、计时、自动结算）
            ├── 待办事项
            ├── 图片上传
            ├── AI 聊天（SSE 流式）+ 学习分析
            ├── NFT 成就上链
            └── 管理后台

二、部署前准备
◆MongoDB Atlas 云数据库

  1. 注册/登录 MongoDB Atlas
  2. 创建免费集群（Free Tier，选 AWS 新加坡）
    • Network Access → Add IP Address → 选 “Allow Access from Anywhere”。
    • Database Access → 创建用户，记下用户名和密码。
    • Connect → Drivers → 复制连接字符串。

      ⚠️ 常见问题：忘记加 IP 白名单 → 后端报 `Could not connect to any servers

◆GitHub OAuth 应用

  1. GitHub → Settings → Developer settings → OAuth Apps → New OAuth App
  2. 填写
       - Homepage URL
       - Callback URL
  3. 创建后获取 Client ID 和 Client Secret

三、后端部署（Render）

  1. 关联 GitHub 仓库
    Render 会自动检测到 backend 目录下的 package.json
  2. 配置 Environment Variables
  3. Build & Start 命令
  4. 检查部署

⚠️ 常见问题：

  • 502 Bad Gateway → 通常是 MongoDB 连接失败，检查 IP 白名单和 MONGO_URI
  • Error: Cannot find module → 检查 dotenv 路径，Render 上 .env 文件不走本地，要靠 Environment Variables

四、前端部署（Vercel）
5. 关联 GitHub 仓库
Vercel 会自动检测到 frontend 目录，框架选 Vite
6. 无需手动配置
- 无需 Environment Variables（API 地址在代码里根据域名自动判断）
- 无需手动 Build/Start 命令（Vite 项目自动识别）
7. SPA 路由必须配置 vercel.json

1
2
3
4
5
6
{
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}
  1. 自动部署：每次git push到main分支，Vercel自动重新构建和部署。

五、备忘清单（部署时对照）

  • MongoDB Atlas IP 白名单 → 0.0.0.0/0
  • Render 环境变量全部填完
  • GitHub OAuth Callback URL 指向后端
  • 前端 vercel.json 配置 SPA 路由
  • .env 文件已在 .gitignore 中
  • .vscode 已在 .gitignore 中
  • .vercel-tmp 已在 .gitignore 中
  • git push 后等 Vercel 自动部署（约 1-2 分钟）
  • 部署完访问首页，测试注册/登录/GitHub 登录