⚡ AI AGENT DEVELOPMENT

前后端 Agent
全栈智能体开发

TC又称技术方向，主要学习前端，后端，AI，工具等技术，构建智能应用

🧠 LLM ⚡ SSE 🔧 Tool Use
SCROLL
0
核心模块
0
技术组件
0
工具能力
FRONTEND
01 / FRONTEND
前端
从页面骨架到工程化体系，前端开发需要掌握的核心技能
🏗️
HTML / CSS 基础
语义化标签、Flex / Grid 布局、响应式适配、CSS 动画与变量
点击翻转 →
学习重点
掌握 HTML5 语义化结构、CSS3 选择器与盒模型、Flexbox 与 Grid 双布局体系、媒体查询响应式、CSS 变量与动画关键帧、Sass / Less 预处理器
⚙️
JavaScript 核心
ES6+ 语法、异步编程、DOM 操作、事件机制、闭包与原型链
点击翻转 →
学习重点
变量作用域与闭包、原型链与继承、Promise / async-await 异步、事件循环 Event Loop、DOM / BOM 操作、Fetch / Axios 请求、模块化 import/export
🧩
前端框架
Vue / React 组件化开发、状态管理、路由、生命周期
点击翻转 →
学习重点
Vue3 Composition API、React Hooks、组件通信 props / emit、Pinia / Redux 状态管理、Vue Router / React Router、虚拟 DOM 与 Diff 算法原理
🚀
工程化与性能
Vite / Webpack 构建、Git 协作、性能优化、部署上线
点击翻转 →
学习重点
Vite 构建工具、Webpack 打包配置、Git 分支管理与协作、懒加载与代码分割、图片压缩与 CDN、Lighthouse 性能审计、Nginx 部署
BACKEND
02 / BACKEND
后端
从语言基础到分布式架构，后端开发需要掌握的核心技能
☕

Java 基础与 Spring Boot

Java 集合、多线程、IO/NIO、JVM 原理；Spring Boot 自动配置、IOC / AOP、RESTful API 设计、统一异常处理

🗄️

数据库与 ORM

MySQL 索引与事务、SQL 优化、表设计三范式；MyBatis 动态 SQL 与缓存、Entity / DTO 分层、分页查询

⚡

缓存与消息队列

Redis 五大数据结构与持久化、缓存穿透 / 击穿 / 雪崩方案；RabbitMQ 消息可靠投递、死信队列、异步解耦

🔐

安全与认证

JWT 双 Token 认证机制、Access / Refresh Token 续期、HttpOnly Cookie 存储、接口权限控制、跨域 CORS 处理

03 / PROTOCOL
Action 协议示例
LLM 输出的 JSON 指令格式
1// LLM 返回的 Action 指令 2{ 3 "action": "search", 4 "params": { 5 "keyword": "草莓蛋糕", 6 "filters": { 7 "max_price": 200 8 } 9 }, 10 "message": "正在搜索草莓蛋糕..." 11}
04 / FLOW
全栈架构流
从用户输入到任务执行的完整链路
01
👤
用户输入
用户在前端通过自然语言与 Agent 对话，例如「帮我找一个草莓蛋糕」
02
🧠
前端感知
输入发送至后端 LLM 接口，LLM 分析意图返回 JSON Action 指令
03
⚙️
后端路由
解析 Action 类型，路由到 Handler，调用 MyBatis 查询数据库获取结果
04
🎨
动态渲染
SSE 流式返回结果，前端动态渲染卡片与操作按钮，用户可继续追问或加购
🤖LLM API
📡SSE
☕Spring Boot
📦MyBatis
🔑JWT
🔴Redis
🤖LLM API
📡SSE
☕Spring Boot
📦MyBatis
🔑JWT
🔴Redis
📄HTML5
🎨CSS3
⚡JavaScript
🧩Entity/DTO
🔄WebSocket
🗄️MySQL
📄HTML5
🎨CSS3
⚡JavaScript
🧩Entity/DTO
🔄WebSocket
🗄️MySQL
05 / ROADMAP
开发路线
从零搭建全栈 Agent 系统
PHASE 01
基础设施搭建
Spring Boot 骨架 + MyBatis + MySQL + JWT 认证，确立 Entity / DTO 分层规范
PHASE 02
LLM 接入与 SSE
对接硅基流动 LLM，实现 SSE 流式对话，设计 JSON Action 路由协议
PHASE 03
工具函数与数据操作
搜索、详情、加购等封装为工具函数，通过 Action 路由操作 MyBatis 层
PHASE 04
前端交互打磨
动态组件渲染、打字机效果、骨架屏、触觉反馈，全方位提升体验
06 / SHOWCASE
实战项目展示
前后端 Agent 全栈开发实战成果
🤖
Agent 智能体项目
2 个项目
🤖 AGENT 凉山旅游助手
凉山旅游助手 Agent
基于 LLM 的旅游咨询智能体，支持景点查询、行程规划、美食推荐等对话式服务
LLM Spring Boot SSE 流式 意图识别
🔧 TOOL USE Agent 工具调用
旅游助手 · 工具调用版
集成 Function Calling 实现车票查询、天气查询、图片问答、一键投诉等多工具协同
🔥 Function Calling 多工具 MySQL Action 路由
🎨
前端实战项目
2 个项目
🎨 FRONTEND 四川旅游网
四川旅游宣传网站
中国风山水意境的旅游主题网页，集成景点展示、文化介绍、AI 智能问答助手
HTML5 CSS3 响应式 AI 对话
⚽ SPORTS 川超凉山好医生
川超 · 凉山好医生队
四川省城市足球联赛球队官网，球队介绍、阵容展示、川超第二阶段完整赛程、ECharts 数据可视化
HTML5 CSS3 ECharts 响应式 轮播图
🛒
后端实战项目
1 个项目
🛒 E-COMMERCE 黑马商城
黑马商城 · 电商系统
完整 B2C 电商后端实战，涵盖商品管理、用户中心、购物车、订单、支付等全链路业务
🔥 经典实战 Spring Boot MyBatis Redis RabbitMQ