AI LLM&Harness上岸第一剑，先斩意中人
文章目录
曾经何时，人们还在猜测，AI将会优先淘汰哪些职业，文员，司机，快递？
然后最先出现现象级爆火却是Claude Code，OpenClaw，不仅功能强大，火到不去体验两把吃个瓜，仿佛就被社会淘汰了似得，尤其是以成熟稳健为主的Claude Code，已经被调侃为“码（汉）奸”，果然还是是验证了那句话上岸第一剑，先斩意中人！，玩笑归玩笑，更多还是在AI和Harness的加持下，现在对程序员的素养乃至所有的任何角色会有更高的要求了。
1. Harness和LLM
什么是Harness，这是不是新造出来的AI家族的词，而本质是换汤不换药？可以说是也可以说不是，基于博主自己的理解就是，因为每次写博客，我不想每次都写Claude Code，OpenClaw，OpenCode，PI等一大堆的词，所以我希望我在写Harness的时候你们就能自动联想到这些东西，但Maybe基于哲学家们，可能就是必须abstract出来一个词来clarify这群东西，这个词就叫Harness；LLM就不说了，读者们都很熟悉了；如果说LLM是赤兔马，Claude Code，OpenClaw，OpenCode，PI等Harness就是马鞍，挽具，而你就是吕布……
Harness和LLM各负责什么？截止2026年03月26日而言；
-
模型要求：自带长上下文、递归推理、自我批判、工具调用意识；
-
截止2026年03月26，国内新一代模型代表
-
GLM-5 -
MiniMax M2.5 -
Kimi-k2.5 -
Deepseek截止目前暂无，人民想念（催更）中……
-
-
国外：
ANTHROPIC为例，LLM的专家们也是命名鬼才，看得出来技术宅都有一颗文艺范的内心，通过名字就能简介地表达了模型的能力，国内的厂商多数也有致敬的命名方式，也有用版本号区分的。ANTHROPIC_DEFAULT_HAIKU_MODEL：HAIKU，俳句；三行俳句诗；你就理解为咱们的五言律诗；咖啡中杯；ANTHROPIC_DEFAULT_SONNET_MODEL：SONNET，十四行诗；商籁诗;你就理解为咱们的宋词；咖啡大杯；ANTHROPIC_DEFAULT_OPUS_MODEL：OPUS，作品；你就理解为咱们的《红楼梦》；咖啡超大杯。- ……
-
-
Harness要求：任务树分解、外挂记忆、分支管理、状态持久化、自我修正循环；常见的五大架构特性为：- 首先，最最重要的，千万不能把Harness做的太重太复杂，这是一个轻量化资产，Harness是模型能力缺口的临时解法它的宿命是随着模型变强，被一点点拆掉，所
Less Is More的极简主义才是Harness的真谛 - 有动态Planning功能而非规则硬编码
- 超长超级细的提示词
- 支持文件为存储的长期记忆
- 支持复杂任务采用分而治之的Sub-Agent模式
- 首先，最最重要的，千万不能把Harness做的太重太复杂，这是一个轻量化资产，Harness是模型能力缺口的临时解法它的宿命是随着模型变强，被一点点拆掉，所
-
未来是
Harness还是LLM？是LLM吸收Harness的优秀特性，吞噬一切？还是Harness为王？现在两个派别都有不少信徒，但就目前可见的未来，两者应该是一个共存的关系，因为你不会把你公司业务和个人的机密context交给模型，但是可以交给可靠的Harness做脱敏等处理，而LLM会专注于更通用的更细节的功能。
2. 以Claude Code为例——聊聊Coding的Harness
2.1 Claude Code简介
Claud Code是啥？官方定义如下：
Claude Code is an agentic coding tool that reads your codebase, edits files, runs commands, and integrates with your development tools. Available in your terminal, IDE, desktop app, and browser.
Claude Code is an AI-powered coding assistant that helps you build features, fix bugs, and automate development tasks. It understands your entire codebase and can work across multiple files and tools to get things done.
翻译翻译就是：就是Claude Code是一个能帮你从0到1或者在原来代码库的基础上帮你构建新功能，修复漏洞和Bug，并实现开发任务的自动化编程助手。
官方给的这个概念是比较适合新手理解的一个概念，写的平平无奇，完全体现不出Claude Code的理念和功能。其实理念有点像当年AI下象棋或围棋，每走一步，AI都会计算所有的棋路，得出距离胜利而言的最优路径。
但是写代码怎么套用这个公式呢？就是基于现在你能给到Claude Code和模型的上下文（你和Claude Code的对话历史记录、文件内容、命令输出、CLAUDE.md 文件、自动记忆、已加载的技能、系统指令等），让Claude Code为了你的最终目标，先做出的一个好的计划，然后根据计划来执行相应的操作得到结果，让Claude Code得到的结果跟你的目标进行自动评估对比，达标则退出，不达标则不停的迭代循环往死里干，直到基于目前所有的条件返回最佳的一个答案给你，这也是Claude Code最经典的agentic loop。
值得注意的这里面每一步该怎么走的这个线，在上一代AI Agent的实现上如基于LangGraph等AI Agent的实现，还是基于规则硬编码出来的，但是这一代的Harness和模型，这些线不再试硬编码了，是Harness和模型自行决定的，是一个基于目前Harness和模型能接触到的上下内容文动态的抉择。
2.2 Claude Code Quick Start——电商网站和贪吃蛇
直接启动claude，建议用shift+tab切换到plan mode on，跟claude说帮忙快速搭建一个电商网站，claude会开始跟你沟通，问你需要什么UI组件，前端框架选什么，后端框架选什么等等，一顿操作猛如虎后，第一个电商网站就这样被启动来了。
生成的README.md文件如下；
# 电商平台 MVP
一个基于 React + Spring Boot + MySQL 的全栈电商网站。
## 技术栈
### 前端
- React 18 + Vite
- Tailwind CSS
- React Router
- Zustand (状态管理)
- Axios
### 后端
- Spring Boot 3
- Spring Security + JWT
- Spring Data JPA
- MySQL 8
## 功能特性
- 用户注册/登录
- 商品浏览与搜索
- 商品分类筛选
- 购物车管理
- 订单创建与查看
## 快速开始
### 环境要求
- Node.js 18+
- Java 17+
- MySQL 8+
### 后端启动
```bash
# 1. 创建数据库
mysql -u root -p -e "CREATE DATABASE IF NOT EXISTS ecommerce"
# 2. 导入初始数据
mysql -u root -p ecommerce < backend/src/main/resources/data.sql
# 3. 修改数据库配置 (backend/src/main/resources/application.yml)
# 更新数据库用户名和密码
# 4. 启动后端
cd backend
mvn spring-boot:run
```
后端将运行在 http://localhost:8080
### 前端启动
```bash
# 1. 安装依赖
cd frontend
pnpm install
# 或
npm install
# 2. 启动开发服务器
pnpm dev
# 或
npm run dev
```
前端将运行在 http://localhost:5173
## API 接口
### 认证
- POST /api/auth/register - 用户注册
- POST /api/auth/login - 用户登录
### 商品
- GET /api/products - 获取商品列表
- GET /api/products/{id} - 获取商品详情
- GET /api/products/category/{id} - 按分类获取商品
- GET /api/products/search?name={name} - 搜索商品
- GET /api/products/categories - 获取所有分类
### 购物车 (需要认证)
- GET /api/cart - 获取购物车
- POST /api/cart - 添加商品到购物车
- PUT /api/cart/{id} - 更新购物车商品数量
- DELETE /api/cart/{id} - 删除购物车商品
### 订单 (需要认证)
- GET /api/orders - 获取用户订单列表
- GET /api/orders/{id} - 获取订单详情
- POST /api/orders - 创建订单
## 项目结构
```
e-commerce/
├── frontend/ # React 前端
│ ├── src/
│ │ ├── components/ # UI 组件
│ │ ├── pages/ # 页面
│ │ ├── store/ # 状态管理
│ │ └── api/ # API 请求
│ └── package.json
├── backend/ # Spring Boot 后端
│ ├── src/main/java/com/ecommerce/
│ │ ├── controller/ # REST 控制器
│ │ ├── service/ # 业务逻辑
│ │ ├── repository/ # 数据访问
│ │ ├── entity/ # 实体类
│ │ ├── dto/ # 数据传输对象
│ │ └── config/ # 配置类
│ └── pom.xml
└── README.md
```
## License
MIT
网站效果如下，商品图片暂时还没架起图片素材服务器，所以是直接引用的https://picsum.photos/网站的图片，有点挂羊头卖狗肉，先凑合意思意思吧，博主也是第一次知道还有这种网站，还得是Claude Code
另外一个case用python写一个贪吃蛇游戏，这种级别的case，Claude Code基本都是一把过的，完全不需要调试错误，遥想当年，博主在象牙塔跟着编程小队的兄弟们学写贪吃蛇，基本都是要把整个周末的时间搭进去的，甚至两个周末，时光荏苒，科学技术也日新月异了。
2.3 Claude Code安装和配置LLM
2.3.1 安装
Claude Code的安装非常简单，以Mac为例，既可以用指令或Visual Studio Code插件，如果你shell命令玩得溜，直接用brew安装；
-- 利用Homebrew安装
brew install --cask claude-code
如果没有Homebrew，则可以用curl；
curl -fsSL https://claude.ai/install.sh | bash
安装好后再在terminal或者在Visual Studio Code的终端输入claude，就可以正常启动了，但是第一次启动会报错模型不可以用，接下来会叫大家如何配置模型。
╰─$ claude
╭─── Claude Code v2.1.86 ───────────────────────────────────────────────────────────────────────────────╮
│ │ Tips for getting started │
│ Welcome back! │ Run /init to create a CLAUDE.md file with instructions for Claude │
│ │ ───────────────────────────────────────────────────────────────── │
│ ▐▛███▜▌ │ Recent activity │
│ ▝▜█████▛▘ │ No recent activity │
│ ▘▘ ▝▝ │ │
│ │ │
│ glm-5 · API Usage Billing │ │
│ ~/.claude/skills/explain-code │ │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────╯
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
❯
────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
? for shortcuts
如果shell命令比较吃力，也可以使用Visual Studio Code插件Claude Code YOLO，有手就行的点击，安装好Claude Code YOLO 的icon会出现在右上角。
2.3.2 配置模型
官方建议是配Anthropic的模型，如HAIKU，SONNET，OPUS，但是大陆区直接使用这些模型有一定门槛，如果你能自己搞定，那么确实是没必要看这篇文章的，当然也可以用一些巧劲，比如去某鱼查一查需要的这些资质，你加米就能解决。或者使用国内的合规代理平台。
那国内用的更多的是利用Claude Code套用国产大模型，如GLM-5，MiniMax M2.5，Kimi-k2.5等，这些模型在不同厂商的Coding Plan平台都可以购买，因为模型是开源的，厂商们只要下载去部署就可以，当然如果家里有矿，也是可以完全自己私有化部署的，所以选择上就到了货比三家，谁家便宜买谁的抉择。
购买好模型以后，通常的配模型的方式有2种；
- 直接修改配置文件
~/.claude/settings.json file，这个是最权威的，也是最可靠的方式，这里以glm-5为例子，当然如果你采购的是智谱官方的Coding Plan，也可以参考官方配置文档：https://docs.bigmodel.cn/cn/guide/develop/claude
{
"alwaysThinkingEnabled": true,
"env": {
"ANTHROPIC_AUTH_TOKEN": "sk_XXX(你采购的API Key)",
"ANTHROPIC_BASE_URL": "https://XXX/api(你采购的Web BASE URL)",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.7",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.7",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5"
},
"model": "glm-5"
}
- 第二种如果
shell命令不熟悉，那么就可以利用CC Switch这个软件，进行图形界面化的配置，如果采购的模型供应商比较正规的话问题不大，如果是一些三方代理商或者自己私有化部署的模型，CC Switch配置claude或者opencode可能会各种报错，此时一定要回到方式1里面再重试下，不要吊死在这里，博主就被坑的怀疑人生过。
2.4 Claude Code核心功能
如果你是新手，比较建议先看菜鸟教程里面的Claude Code教程：https://www.runoob.com/claude-code/claude-code-ui-ux-pro-max-skill.html
如果你是高手，更多还是关注Claude Code的官方文档：https://code.claude.com/docs/en/overview
主要关注以下几个核心功能，当然也可以以发展的眼光来学习，你先用claude用到出了一些问题再来搜索攻略也行。
2.4.1 核心引擎：“打工人的内循环” (The Agentic Loop)
传统的 AI 助手是“你问我答”，而 Claude Code 跑的是一个自治闭环。 它接到你的需求后，会自己走一套流程：收集上下文 ➔ 采取行动 ➔ 验证结果。 比如你说“修一下登录 Bug”，它会自己用内置工具去搜文件（Search）、读代码（File ops）、跑测试（Execution），改完了还要自己 Review。它像个成熟的打工人，懂得根据上一步的报错信息随时调整策略，而不是一头撞死在南墙上。万一真改崩了，它还有代码级别的快照回滚（Checkpoints），按两下Esc就可以回滚当无事发生。
2.4.2 记忆与规范：不犯两次错的“员工手册”
天天给 AI 重复项目架构和命名规范是不是很抓狂？Claude Code 的记忆管理系统非常拿捏痛点：
-
CLAUDE.md：这就相当于你们项目的《员工手册》。把“必须用 pnpm”、“严禁动核心库”写进这个文件，它每次会话一开始就会默念一遍，绝不越界，有3格式的
claude.md，分别是项目级别的claude.md，用户个人级别的claude.local.md和全局的~/.claude/claude.md。
-
Auto memory：自带自动记忆功能，无感学习你的代码习惯和项目套路。
-
动态上下文控制：怕聊多了 AI 脑子糊涂？它有自动压缩机制，你还可以按需加载特定的规则（Rules），不用把所有文档都死记硬背塞进脑子里，精准控制 Token 消耗。
2.4.3 多智能体架构：遇到急活儿？直接摇人！
这里必须重点划线！Claude Code 最性感的底层设计，是它非常成熟的多智能体（Multi-Agent）协同能力：
- Subagents（子智能体）：举一个case其实很好的说明了sub agent的使用场景，就是在plan mode下，给AI开Workshop，让他分小组讨论头脑风暴出不同的approaches，所有approaches汇总前，确实不宜sub agent之间抄作业，最终再让主agent抉择出最优秀的方案。
- Agent Teams（智能体团队）：这招目前还在实验阶段，但极其炸裂。你可以拉起一个相互独立又彼此沟通的“团队”。比如一个 Agent 负责查文献写新功能，另一个负责同步做安全审查，甚至互相挑战假设。这简直就是把整个研发团队搬进了终端里打群架。
2.2.4. 终极外挂层：把触角伸向全宇宙 (Extensions)
如果自带的工具不够用，它还留了极具扩展性的外挂层：
- MCP (Model Context Protocol)：这就是它的物理外挂。连上 MCP 服务，它能直接查你的生产数据库、去 Slack 里发通知，甚至操控浏览器做端到端测试。
- Skills（技能）：把你们团队常用的工作流固化下来。比如写个
/deploy技能，它就能精准调取你们专属的部署清单，一步步带你上云。 - Hooks（钩子）：确定性的自动化脚本。比如配置成每次它改完代码，自动在后台触发一次 ESLint 检查，主打一个流程稳妥。
- Plugin（插件）：插件（Plugin）是 Claude Code 中最高级别的扩展机制，用于将命令、代理、Skills、钩子、MCP、LSP 等能力打包、版本化、共享和分发。插件 = 一组可复用的 Claude Code 扩展能力集合。
2.2.5 与其他Platform的集成
claude是可以与Slack，Github，Jupyter，Figma等工具平台深度集成的，以Github提交代码为例，当Claude Code与Github深度绑定后，那么你在Github上的create new issue，merge request都是Claude Code作为一个机器人自动完成的，以后这个估计会大火，其他Platform集成的思路也大致类似，主要是靠Claude Code识别出需求，然后给出解答和采取action。
3. 截至目前配合Claude Code的建议的模型
Claude Code + Opus4.6: 行业标杆，领衔AI Coding，其他的组合达到的是Agentic Coding IDE的水，Claude Code + Opus4.6已经是Agentic Coding 操作系统的水平，如可以全栈端到端实现代码的重构：JDK全栈升级，前端Vue2升级到Vue3等操作，如果通过Global的协助能用上Claude Code + Opus4.6是最优的选择，如果回到国内，就Coding Plan而言，建议如下：
- GLM-5（首选）：最早在国内学习海外模型提供Coding Plan，并通过社媒和github大量推广，较好的社区反应。
- MiniMax M2.5
- Kimi-k2.5
- ……
Kimi给过一组模型评估的结果参考如下，数据来源：Kimi Github：GitHub - MoonshotAI/Kimi-K2: Kimi K2 is the large language model series developed by Moonshot AI team
| Benchmark | Metric | Kimi K2 Instruct | DeepSeek-V3-0324 | Qwen3-235B-A22B (non-thinking) | Claude Sonnet 4 (w/o extended thinking) | Claude Opus 4 (w/o extended thinking) | GPT-4.1 | Gemini 2.5 Flash Preview (05-20) |
|---|---|---|---|---|---|---|---|---|
| Coding Tasks | ||||||||
| LiveCodeBench v6 (Aug 24 - May 25) | Pass@1 | 53.7 | 46.9 | 37.0 | 48.5 | 47.4 | 44.7 | 44.7 |
| OJBench | Pass@1 | 27.1 | 24.0 | 11.3 | 15.3 | 19.6 | 19.5 | 19.5 |
| MultiPL-E | Pass@1 | 85.7 | 83.1 | 78.2 | 88.6 | 89.6 | 86.7 | 85.6 |
| SWE-bench Verified (Agentless Coding) | Single Patch w/o Test (Acc) | 51.8 | 36.6 | 39.4 | 50.2 | 53.0 | 40.8 | 32.6 |
| SWE-bench Verified (Agentic Coding) | Single Attempt (Acc) | 65.8 | 38.8 | 34.4 | 72.7* | 72.5* | 54.6 | — |
| Multiple Attempts (Acc) | 71.6 | — | — | 80.2 | 79.4* | — | — | |
| SWE-bench Multilingual (Agentic Coding) | Single Attempt (Acc) | 47.3 | 25.8 | 20.9 | 51.0 | — | 31.5 | — |
| TerminalBench | Inhouse Framework (Acc) | 30.0 | — | — | 35.5 | 43.2 | 8.3 | — |
| Terminus (Acc) | 25.0 | 16.3 | 6.6 | — | — | 30.3 | 16.8 | |
| Aider-Polyglot | Acc | 60.0 | 55.1 | 61.8 | 56.4 | 70.7 | 52.4 | 44.0 |
| Tool Use Tasks | ||||||||
| Tau2 retail | Avg@4 | 70.6 | 69.1 | 57.0 | 75.0 | 81.8 | 74.8 | 64.3 |
| Tau2 airline | Avg@4 | 56.5 | 39.0 | 26.5 | 55.5 | 60.0 | 54.5 | 42.5 |
| Tau2 telecom | Avg@4 | 65.8 | 32.5 | 22.1 | 45.2 | 57.0 | 38.6 | 16.9 |
| AceBench | Acc | 76.5 | 72.7 | 70.5 | 76.2 | 75.6 | 80.1 | 74.5 |
| Math & STEM Tasks | ||||||||
| AIME 2024 | Avg@64 | 69.6 | 59.4* | 40.1* | 43.4 | 48.2 | 46.5 | 61.3 |
| AIME 2025 | Avg@64 | 49.5 | 46.7 | 24.7* | 33.1* | 33.9* | 37.0 | 46.6 |
| MATH-500 | Acc | 97.4 | 94.0* | 91.2* | 94.0 | 94.4 | 92.4 | 95.4 |
| HMMT 2025 | Avg@32 | 38.8 | 27.5 | 11.9 | 15.9 | 15.9 | 19.4 | 34.7 |
| CNMO 2024 | Avg@16 | 74.3 | 74.7 | 48.6 | 60.4 | 57.6 | 56.6 | 75.0 |
| PolyMath-en | Avg@4 | 65.1 | 59.5 | 51.9 | 52.8 | 49.8 | 54.0 | 49.9 |
| ZebraLogic | Acc | 89.0 | 84.0 | 37.7* | 73.7 | 59.3 | 58.5 | 57.9 |
| AutoLogi | Acc | 89.5 | 88.9 | 83.3 | 89.8 | 86.1 | 88.2 | 84.1 |
| GPQA-Diamond | Avg@8 | 75.1 | 68.4* | 62.9* | 70.0* | 74.9* | 66.3 | 68.2 |
| SuperGPQA | Acc | 57.2 | 53.7 | 50.2 | 55.7 | 56.5 | 50.8 | 49.6 |
| Humanity’s Last Exam (Text Only) | - | 4.7 | 5.2 | 5.7 | 5.8 | 7.1 | 3.7 | 5.6 |
| General Tasks | ||||||||
| MMLU | EM | 89.5 | 89.4 | 87.0 | 91.5 | 92.9 | 90.4 | 90.1 |
| MMLU-Redux | EM | 92.7 | 90.5 | 89.2 | 93.6 | 94.2 | 92.4 | 90.6 |
| MMLU-Pro | EM | 81.1 | 81.2* | 77.3 | 83.7 | 86.6 | 81.8 | 79.4 |
| IFEval | Prompt Strict | 89.8 | 81.1 | 83.2* | 87.6 | 87.4 | 88.0 | 84.3 |
| Multi-Challenge | Acc | 54.1 | 31.4 | 34.0 | 46.8 | 49.0 | 36.4 | 39.5 |
| SimpleQA | Correct | 31.0 | 27.7 | 13.2 | 15.9 | 22.8 | 42.3 | 23.3 |
| Livebench | Pass@1 | 76.4 | 72.4 | 67.6 | 74.8 | 74.6 | 69.8 | 67.8 |
4. 和Claude Code的聊天金句参考
和Claude Code聊天，提问者的思路和逻辑很重要，这就是为啥有些专家会说未来文科生比较吃香的原因吧，以下是一些经典的案例问答参考。
give me an overview of the codebase (总览一下整个代码库)
give me an overview of the codebase
⏺ I'll explore the codebase structure to give you an overview.
Searched for 1 pattern, read 3 files (ctrl+o to expand)
⏺ Codebase Overview
This is a full-stack e-commerce MVP built with React + Spring Boot + MySQL.
Architecture
e-commerce/
├── frontend/ # React frontend (Vite + Tailwind)
├── backend/ # Spring Boot backend (Java 17)
└── start.sh # Startup script
Backend (Spring Boot 3.2.3)
┌────────────┬────────────────────────────────────────────────────────┬───────────────────────┐
│ Layer │ Files │ Purpose │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ Entity │ User, Product, Category, CartItem, Order, OrderItem │ JPA entities │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ DTO │ AuthDTO, ProductDTO, CartDTO, OrderDTO │ Data transfer objects │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ Repository │ 6 JPA repositories │ Data access layer │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ Service │ AuthService, ProductService, CartService, OrderService │ Business logic │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ Controller │ Auth, Product, Cart, Order controllers │ REST endpoints │
├────────────┼────────────────────────────────────────────────────────┼───────────────────────┤
│ Security │ JWT auth, JwtTokenProvider, JwtAuthenticationFilter │ Authentication │
└────────────┴────────────────────────────────────────────────────────┴───────────────────────┘
Frontend (React 18)
┌─────────────┬──────────────────────────────────────────────────────────────┐
│ Directory │ Purpose │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ pages/ │ Home, ProductDetail, Cart, Checkout, Login, Register, Orders │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ components/ │ Layout, ProductCard │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ store/ │ Zustand state management │
├─────────────┼──────────────────────────────────────────────────────────────┤
│ api/ │ Axios API client │
└─────────────┴──────────────────────────────────────────────────────────────┘
Features
- User registration/login (JWT)
- Product browsing & search
- Category filtering
- Shopping cart management
- Order creation & history
API Endpoints
- Auth: /api/auth/register, /api/auth/login
- Products: /api/products, /api/products/{id}, /api/products/search
- Cart: /api/cart (CRUD, requires auth)
- Orders: /api/orders (CRUD, requires auth)
trace the proces of handling a user's query from fronted to backend（从前端到后端看看用户的查询或请求的旅程是怎么走的）
trace the proces of handling a user's query from fronted to backend
⏺ I'll trace the request flow by examining the key files.
Read 8 files (ctrl+o to expand)
⏺ Request Flow: Frontend → Backend
Here's the complete trace of a user query (e.g., searching for products):
┌───────���─────────────────────────────────────────────────────────────────────┐
│ FRONTEND (React) │
├─────────────────────────────────────────────────────────────────────────────┤
│ 1. User Action │
│ Home.jsx:58 handleSearch() → form submit │
│ ↓ │
│ 2. Component calls API │
│ Home.jsx:29 api.get('/products/search?name=xxx&page=0&size=20') │
│ ↓ │
│ 3. Axios Instance (api/index.js) │
│ ├─ baseURL: '/api' │
│ ├─ interceptor: adds Authorization header from localStorage │
│ │ api/index.js:13-17 │
│ └─ sends HTTP request │
└─────────────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────────┐
│ BACKEND (Spring Boot) │
├─────────────────────────────────────────────────────────────────────────────┤
│ 4. Security Filter Chain │
│ JwtAuthenticationFilter.java:22-38 │
│ ├─ Extract Bearer token from header │
│ ├─ Validate JWT via JwtTokenProvider │
│ └─ Set authentication in SecurityContext │
│ ↓ │
│ 5. Authorization Check (SecurityConfig.java:33-37) │
│ /api/products/** → permitAll() (no auth required) │
│ ↓ │
│ 6. Controller (ProductController.java:42-48) │
│ @GetMapping("/search") │
│ ├─ Parse @RequestParam name, page, size │
│ └─ Call productService.searchProducts() │
│ ↓ │
│ 7. Service Layer (ProductService.java:32-35) │
│ searchProducts() → productRepository.findByNameContainingIgnoreCase() │
│ └─ Map entity to DTO (toResponse) │
│ ↓ │
│ 8. Repository (ProductRepository.java:13) │
│ Spring Data JPA generates SQL: │
│ SELECT * FROM products WHERE LOWER(name) LIKE LOWER('%xxx%') │
│ ↓ │
│ 9. Database (MySQL) │
│ Execute query → return Page<Product> │
│ ↓ │
│ 10. Response Flow (back up) │
│ Repository → Service → Controller → JSON response │
└───────���─────────────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────────────────────┐
│ FRONTEND │
├─────────────────────────────────────────────────────────────────────────────┤
│ 11. Axios receives response │
│ 12. Home.jsx:30 setProducts(response.data.content) │
│ 13. React re-renders ProductCard components │
└─────────────────────────────────────────────────────────────────────────────┘
Key Files Summary
┌─────────────────┬──────────────────────────────────────────┬──────────────────────────────────┐
│ Layer │ File │ Role │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Frontend API │ frontend/src/api/index.js │ Axios instance + JWT interceptor │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Frontend State │ frontend/src/store/index.js │ Zustand stores (auth, cart) │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Frontend Page │ frontend/src/pages/Home.jsx │ Triggers API calls │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Security Filter │ backend/.../JwtAuthenticationFilter.java │ Validates JWT tokens │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Security Config │ backend/.../SecurityConfig.java │ Defines public/protected routes │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Controller │ backend/.../ProductController.java │ REST endpoints │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Service │ backend/.../ProductService.java │ Business logic │
├─────────────────┼──────────────────────────────────────────┼──────────────────────────────────┤
│ Repository │ backend/.../ProductRepository.java │ Data access (JPA) │
└─────────────────┴──────────────────────────────────────────┴──────────────────────────────────┘
Authentication Flow
For protected routes (cart, orders):
1. Frontend attaches Authorization: Bearer <token> header
2. JwtAuthenticationFilter validates token
3. If valid, sets UserPrincipal in SecurityContext
4. Controller can access authenticated user via @AuthenticationPrincipal
to draw a diagram that illustates this flow （把这个架构流程画出来）
to draw a diagram that illustates this flow
⏺ I'll create a diagram file for you.
⏺ Write(docs/request-flow-diagram.md)
⎿ Wrote 242 lines to docs/request-flow-diagram.md
1 # Request Flow Diagram
2
3 ## Overview Diagram
4
5 ```
6 ┌──────────────────────────────────────────────────────────────────────────────────────┐
7 │ USER BROWSER │
8 │ ┌─────────────────────────────────────────────────────────────────────────────────┐ │
9 │ │ Home.jsx │ │
10 │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │
… +232 lines (ctrl+o to expand)
⏺ Created the diagram at docs/request-flow-diagram.md. Here's a quick visual:
User Action → React Component → Axios API → Spring Boot → MySQL
│
┌───────────────────────┘
▼
┌─────────────────────────────┐
│ Spring Boot Layers │
│ ┌─────────┐ ┌─────────┐ │
│ │Controller│─▶│ Service │ │
│ └─────────┘ └────┬────┘ │
│ ▼ │
│ ┌─────────┐ │
│ │Repository│ │
│ └─────────┘ │
│ │ │
│ ┌─────────────────┴──────┐ │
│ │ JWT Security Filter │ │
│ └────────────────────────┘ │
└─────────────────────────────┘
The file includes:
- Detailed ASCII diagram with all layers and data flow
- Simplified flow for quick reference
- Mermaid sequence diagram (renders in GitHub/VS Code)
- Layer responsibilities table
how do I run this application（我怎么启动程序）- 测试出现问题的Bug的经典问答，不但把bug修了，还把单元测试和集成测试也写了；
The RAG chatbot returns 'query failed' for any content-related questions.I need you to:
1. Write tests to evaluate the outputs of the execute method of the CourseSearchTool in @backend/search_tools.py
2. Write tests to evaluate if @backend/ai_generator-py correctly calls for the CourseSearchTool
3. Write tests to evaluate how the RAG system is handling the content-query related questions.
Save the tests in a tests folder within @backend. Run those tests against the current system to identify which components are failing. Propose fixes based on what the tests reveal is broken.
Think a lot|
- 论提问是个艺术活，更多的问题等待有智慧的你来跟
Claude Code交流。
与传统的IDE不同，Claude Code的出现自然是对传统的Coding乃至Digital产品行业都发起了大的冲击，身为程序员的我们也不用太过忧心，世界瞬息万变，总会出现我们不熟悉或者暂时恐惧的东西，但不论遇到什么，更要向Claude Code一样自信的运用你所拥有的Skills和Knowledge[Context],都会帮你渡过难关，最终迭代得到更优秀的解。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
1
0- 0
已为社区贡献1条内容
所有评论(0)