山东大学软件学院项目实训-基于大模型的可解释英语写作评估与反馈系统（三）
·
一、本周重点
页面能访问后端 ：
- 登录页面对接真实 API
- 主界面调用 /api/essay/submit
配置： VITE_API_BASE_URL=http://127.0.0.1:8000
二、关键技术点理解
1. 环境变量统一配置（VITE_API_BASE_URL）
- 这是前后端分离项目的标准入口配置。
- 通过
.env环境变量定义后端根地址，让所有请求统一使用同一个基础 URL，避免硬编码。 - 好处：切换环境（开发 / 测试 / 生产）只需改一个地方，维护性极强。
2. 请求工具封装（http.ts）
- 基于 Axios 封装统一请求实例，是前端访问后端的 “总出口”。
- 自动携带 baseURL、处理请求头、统一捕获错误、处理 token。
- 所有页面、所有接口都必须走这个封装，保证项目请求行为一致。
3. 接口类型约束（api.ts）
- 使用 TypeScript 定义请求体、响应体类型，让前后端数据结构标准化。
- 避免字段名错误、类型不匹配，提升联调效率与代码健壮性。
4. 登录页面对接真实 API
- 登录是整个系统的权限入口。
- 前端提交账号密码 → 请求后端登录接口 → 获取 token → 存储到全局状态 → 用于后续接口鉴权。
- 这是最典型、最基础的前后端交互流程。
5. 主界面调用 /api/essay/submit
- 核心业务接口，代表真实功能上线。
- 前端提交内容 → 经过请求封装 → 发送到后端 → 接收并展示结果。
- 标志前端从静态展示变成可真实提交数据的业务系统。
三、整体技术架构理解
本周完成的是一套标准 Vue3 + Vite 前后端分离架构：
环境变量配置
↓
请求工具封装（http.ts）
↓
全局状态管理（登录/提交）
↓
页面组件调用接口（登录页 + 主界面）
更多推荐
6
0- 0
已为社区贡献8条内容
所有评论(0)