JavaWeb——案例（3/21）-前后端联调（功能概述、前端环境搭建、前后端联调过程、问题排查）

目录

部门管理 - 前后端联调

功能概述

前端环境搭建

1. 启动前端工程

部署步骤：

2. 访问前端页面

前后端联调过程

1. 访问部门管理页面

2. 打开开发者工具（F12）

3. 请求 & 响应分析

发送请求：

服务器处理逻辑

响应数据示例：

问题排查

1. 前端页面不显示数据？

2. 访问 /depts 时报 405 错误？

3. 后端无日志输出？

结论

部门管理 - 前后端联调

功能概述

前后端联调的目的是 确保前端可以正确调用后端接口，并成功展示数据。联调过程包括：

1. 启动 前端工程 和 后端工程。
2. 通过 前端页面访问后端接口。
3. 调试接口，确保数据正确返回。

前端环境搭建

1. 启动前端工程

前端工程通常部署在 Nginx 服务器，这里提供了 Nginx 配置包，包含部署好的前端项目。

部署步骤：

1. 找到提供的 Nginx 压缩包，解压到指定目录（路径中避免中文或空格）。
2. 进入解压后的文件夹，例如：nginx-1.22.0-telas。
3. 启动 Nginx：
   • 双击 nginx.exe 运行。
   • 打开 任务管理器，检查是否有 nginx 进程。

2. 访问前端页面

前端程序默认部署在 90 端口，可通过浏览器访问：

http://localhost:90

如果页面正常加载，说明前端环境启动成功。

前后端联调过程

1. 访问部门管理页面

• 进入 Telas 智能学习辅助系统 首页。
• 点击 系统管理 -> 部门管理。
• 预期：页面表格展示 查询到的部门数据。（记得