前端上手后端起手式

面向前端工程师，用熟悉的前端概念理解支付后端（以 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。

text 复制代码

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

pay-basic 示例：

java 复制代码

@SpringBootApplication
public class BasicApplication {
    public static void main(String[] args) {
        SpringApplication.run(BasicApplication.class, args);
    }
}

启动类常见注解	前端直觉
`@SpringBootApplication`	自动装一堆框架能力
`@ComponentScan`	自动注册一批模块
`@MapperScan`	注册数据库访问模块
`@EnableFeignClients`	注册调用其它微服务的客户端（类似封装好的 axios）

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

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

text 复制代码

浏览器
  → 前端 axios（src/api/*.js）
  → 网关 / nginx 代理
  → Controller（接请求）
  → Service（业务逻辑）
  → Mapper + XML（拼 SQL）
  → 数据库
  → 原路返回 JSON
  → 前端表格 / 表单展示

后端层	前端类比	典型位置
Controller	`api/*.js` + 接口处理	`apis/controller/`
Service	composables / services	`domain/.../service/`
Mapper + xml	服务端 DAO（前端无直对应）	`mapper/` + `resources/mapper/xml/`
dto / vo	TS 类型、入参出参	`apis/model/dto`、`vo`
entity	表结构对象	`domain/.../entity/`
`Result<T>`	`{ code, message, result }`	前端常取 `res.result`

读代码顺序建议： 从 Controller 的 @RequestMapping 顺着点进 Service → 需要时再看 Mapper。

像从前端 api 追到业务函数一样。

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

以 pay-basic 为例：

text 复制代码

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	版本要和项目约定一致，不对会编译失败或运行异常
Maven	npm / pnpm / yarn	依赖管理 + 构建。pom.xml ≈ package.json
mvn install / mvn package	npm install + npm run build	拉依赖并打包
mvn spring-boot:run	npm run dev	本地启动服务（也可用 IDEA 直接跑启动类）
jar 包	dist/ 构建产物	打成可部署的包；生产跑的是 jar，不是源码目录
target/	dist / build	编译输出目录，一般不提交 Git
依赖坐标 groupId:artifactId:version	"vue": "^3.x"	Maven 用三元组定位依赖，npm 用包名+版本
父 POM（如 chic-parent）	根 package.json 统一依赖版本	统一依赖与插件版本，子项目继承
IDEA	VS Code / Cursor / WebStorm	后端最常用 IDE；跑 *Application 类似前端跑 dev server
Lombok	少量「代码生成」插件的体感	自动生成 getter/setter 等，减少样板代码（看源码时若缺方法，可能是 Lombok 生成的）

常用命令直觉

text 复制代码

前端                         后端（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>

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

text 复制代码

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

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

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

text 复制代码

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）

三维组合：

text 复制代码

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

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

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

7.1 接口路径

后端：

java 复制代码

@RequestMapping("pb/suspenseCredits")

前端常对应：

js 复制代码

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

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

7.2 统一返回

常见结构：{ code, message, result }

前端业务数据多在 res.result。

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

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

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

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

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

9. 一句话总结

把后端当成没有 App.vue 的 API 服务；

用 JDK/Maven → Node/npm，启动类/Controller/配置 → main.js/api/.env 来映射；

按 请求链路 读代码，先建立目录与协作认知，再深入具体业务。

附录：名词速查

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

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