前端上手后端起手式

星月日
6 阅读6分钟

前端上手后端起手式

面向前端工程师，用熟悉的前端概念理解支付后端（以 pay-basic 为主，兼及 payment / search / invoice）。
目标：能读目录、追请求、看配置、理解协作要点，而不是先啃一整本 Spring。

1. 先建立心智模型

把后端想成：一个没有页面的 API 服务（类似 Node/Express 或 BFF），不是又一个 Vue 应用。

你熟悉的前端后端大致是什么
Vue / React 应用Spring Boot 服务（如 pay-basic）
浏览器访问页面前端 / 其它服务通过 HTTP 调接口
npm run dev 起在 8080启动类起进程，监听端口（pay-basic 默认 8255）
页面组件几乎没有；主要是 接口 + 业务逻辑 + 查库

支付前端 payment 通过代理访问各个后端服务，例如 basic / payment / search / invoice。

2. 启动类 ≠ App.vue

更准确的类比：启动类 ≈ main.js / main.ts。

前端：main.js → createApp(App).use(router).use(pinia).mount('#app')
后端：BasicApplication.main() → SpringApplication.run(...) → 监听端口

pay-basic 示例：

@SpringBootApplication
public class BasicApplication {
    public static void main(String[] args) {
        SpringApplication.run(BasicApplication.class, args);
    }
}
启动类常见注解前端直觉
@SpringBootApplication自动装一堆框架能力
@ComponentScan自动注册一批模块
@MapperScan注册数据库访问模块
@EnableFeignClients注册调用其它微服务的客户端（类似封装好的 axios）

App.vue 更像根布局；后端没有一一对应的「UI 根组件」。

3. 一次请求怎么走（最重要）

浏览器
  → 前端 axios（src/api/*.js）
  → 网关 / nginx 代理
  → Controller（接请求）
  → Service（业务逻辑）
  → Mapper + XML（拼 SQL）
  → 数据库
  → 原路返回 JSON
  → 前端表格 / 表单展示
后端层前端类比典型位置
Controllerapi/*.js + 接口处理apis/controller/
Servicecomposables / servicesdomain/.../service/
Mapper + xml服务端 DAO（前端无直对应）mapper/ + resources/mapper/xml/
dto / voTS 类型、入参出参apis/model/dto、vo
entity表结构对象domain/.../entity/
Result<T>{ code, message, result }前端常取 res.result

读代码顺序建议： 从 Controller 的 @RequestMapping 顺着点进 Service → 需要时再看 Mapper。
像从前端 api 追到业务函数一样。

4. 打开项目先看哪些目录

以 pay-basic 为例：

pay-basic/
├── pom.xml                              ≈ package.json
├── src/main/resources/
│   ├── bootstrap.yml                    ≈ 启动前环境入口（连配置中心）
│   ├── application.yml                  ≈ 本地兜底（端口等）
│   ├── mapper/xml/                      ≈ SQL
│   └── logback-spring.xml               ≈ 日志
└── src/main/java/.../basic/
    ├── BasicApplication.java            ≈ main.js
    ├── apis/controller/                 ★ 对外 API（优先看）
    ├── apis/model/dto|vo/               ≈ 入参 / 出参类型
    ├── domain/.../service/              ≈ 业务逻辑
    ├── domain/.../mapper/               ≈ 数据库访问接口
    ├── infrastructure/.../config/       ≈ 全局中间件 / 拦截器一类

导航卡（想知道什么 → 去哪看）

我想知道……去看……
有哪些接口apis/controller
入参出参结构dto / vo
业务怎么算domain/.../service
数据从哪张表来mapper + resources/mapper/xml
端口 / 应用名application.yml / bootstrap.yml
lemon / 生产连谁Config 仓库 application-*.yml
依赖了什么pom.xml

5. 工具链对照（JDK / Maven 等）

前端有 Node + npm/pnpm + Vite/Webpack；后端常见是 JDK + Maven + Spring Boot。

后端前端类比干什么
JDK（Java Development Kit）Node.js语言运行时 + 开发工具。没有 JDK 就跑不了/编不了 Java，就像没装 Node 跑不了 npm run dev
JRE仅运行时的 Node（不带完整开发工具的体感）只负责跑已编译好的程序；开发一般直接装 JDK
Java 版本（如 8 / 11 / 17）Node 16 / 18 / 20版本要和项目约定一致，不对会编译失败或运行异常
Mavennpm / pnpm / yarn依赖管理 + 构建。pom.xml ≈ package.json
mvn install / mvn packagenpm install + npm run build拉依赖并打包
mvn spring-boot:runnpm run dev本地启动服务（也可用 IDEA 直接跑启动类）
jar 包dist/ 构建产物打成可部署的包；生产跑的是 jar，不是源码目录
target/dist / build编译输出目录，一般不提交 Git
依赖坐标 groupId:artifactId:version"vue": "^3.x"Maven 用三元组定位依赖，npm 用包名+版本
父 POM（如 chic-parent）根 package.json 统一依赖版本统一依赖与插件版本，子项目继承
IDEAVS Code / Cursor / WebStorm后端最常用 IDE；跑 *Application 类似前端跑 dev server
Lombok少量「代码生成」插件的体感自动生成 getter/setter 等，减少样板代码（看源码时若缺方法，可能是 Lombok 生成的）

常用命令直觉

前端                         后端（Maven）
-------------------------    ---------------------------
node -v                      java -version
npm install                  mvn install / mvn package
npm run build                mvn package
npm run dev                  mvn spring-boot:run 或 IDEA 运行启动类
查看 package.json 依赖        查看 pom.xml <dependencies>

和「配置 / 启动」的关系（别混）

JDK          -> 能跑 Java（像装了 Node）
Maven        -> 能装依赖、能打包（像 npm）
启动类        -> 进程入口（像 main.js）
bootstrap.yml -> 启动时连哪个配置中心（像选 .env）

四者分工不同：JDK/Maven 是工具链，启动类是入口，yml 是环境配置。

6. 配置体系（用 .env 思维理解）

bootstrap.yml
  → 我是谁、去哪拉配置、默认什么环境
        ↓
Config Server（配置中心）
  → payBasic/application-lemon.yml 等
        ↓
真正生效：数据库、Redis、业务开关...
后端前端
bootstrap.yml启动前环境入口
远端 application-lemon.yml.env.lemon
远端 application-production.yml.env.production
spring.profiles.active--mode / VITE_APP_ENV

pay-basic 的 bootstrap 关键点

  • spring.cloud.config.name: payBasic → 配置仓库目录名
  • spring.profiles.active 默认常为 production（仓库安全默认）
  • ci.environment.slug → 拼 Config Server 域名（lemon / mango / production）
  • label → 配置 Git 分支（如 master / feature-payment-k8s）

三维组合：

name + profile + label
→ payBasic / lemon / feature-payment-k8s
→ 实际下发的 application-lemon.yml

各类业务配置项经常在 Config 仓库，不在 Java 里写死。本地 application.yml 可能只有端口等兜底。

7. 和前端协作最常碰到的点

7.1 接口路径

后端：

@RequestMapping("pb/suspenseCredits")

前端常对应：

url: `${basicApi}/pb/suspenseCredits/...`

对不上时：先对 Controller 路径，再对代理 / 网关前缀。

7.2 统一返回

常见结构：{ code, message, result }
前端业务数据多在 res.result。

7.3 多环境不一致时先问三句

  1. 调的是哪个环境的服务？
  2. Config 的 profile / label 是什么？
  3. 当前账号 / 部署版本是否一致？

8. 五步练手（建议按顺序做一遍）

  1. 打开 BasicApplication，确认「这是 main.js」。
  2. 打开任意 Controller，在前端 src/api 里找对应路径。
  3. 从接口方法点进 Service，扫一眼业务。
  4. 打开 bootstrap.yml，对照 Config 仓库 payBasic/application-lemon.yml。
  5. 浏览器 Network 看一条真实请求的 URL 与响应结构。

做完这五步，后端就会从「一堆 Java」变成「有目录、有请求链、有环境配置的 API 服务」。

9. 一句话总结

把后端当成没有 App.vue 的 API 服务；
用 JDK/Maven → Node/npm，启动类/Controller/配置 → main.js/api/.env 来映射；
按 请求链路 读代码，先建立目录与协作认知，再深入具体业务。

附录：名词速查

名词一句话
JDKJava 开发与运行环境（类比 Node.js）
Maven依赖与构建工具（类比 npm）
父 POM统一依赖版本的父工程（类比根 package.json）
pom.xmlMaven 项目描述文件（类比 package.json）
jar构建产物（类比 dist 打包结果）
Spring BootJava 里常用的服务端框架
Controller对外 HTTP 接口入口
Service业务逻辑
Mapper数据库访问
Bean被容器管理的组件实例（可粗理解为「自动注入的单例模块」）
profile环境切片：lemon / mango / production
Config Server集中下发各环境 yml
label配置仓库的 Git 分支
bootstrap.yml比业务配置更早加载的启动引导配置
actuator健康检查 / 环境查看等运维端点
Feign声明式调用其它微服务（像类型化的 axios）

文档维护：支付前端视角整理，示例以 pay-basic 为主；各服务端口与配置名以实际仓库为准。

avatar
文章
阅读
粉丝