真实的企业级应用从来不是“能跑通就行”而是要满足「可访问、可部署、可并发、有界面」的核心需求。今天这篇我们就完成整个系列的闭环把上一篇优化好的“企业智能数据分析Agent”封装成一个完整的Web应用用Spring Boot做后端、Vue3做前端最后用Docker一键打包部署让你一分钟把Agent丢到服务器上任何人都能通过浏览器访问使用。全程复用前两篇的核心代码只做“封装化”和“界面化”改造不新增复杂依赖新手跟着步骤走也能轻松拿下全栈项目。先明确本次实战目标做到心中有数后端改造用Spring Boot封装Agent核心逻辑提供RESTful API接口支持跨域访问兼容前端请求前端开发用Vue3 Element Plus搭建简洁易用的聊天界面支持用户输入问题、展示Agent响应结果、自动渲染图表部署优化编写Dockerfile和docker-compose配置实现后端、前端、依赖服务MySQL、ES、Redis一键启动环境无关、部署无忧。在开始之前先回顾下我们已有的核心组件复用前两篇内容不用重新搭建LLM通义千问主力 GPT-4备用带Redis缓存RAGElasticsearch 通义千问Embedding带相似度筛选检索精准SkillsJdbcTool查数据库、ChartTool生成图表、VectorStoreTool查知识库带决策校验核心逻辑MCP规则规范工具调用Agent决策校验避免乱调用整体稳定、省钱、精准。一、整体架构设计先搞懂“前后端怎么连”本次Web应用采用「前后端分离」架构核心逻辑清晰各组件职责明确避免耦合方便后续扩展和维护。整体架构图如下新手可重点记住流程前端Vue3用户操作界面负责接收用户输入的问题发送请求到后端展示Agent返回的结果文本图表后端Spring Boot核心服务层封装Agent所有逻辑提供API接口接收前端请求调用Agent处理返回响应结果核心依赖MySQL存储业务数据供JdbcTool查询、Elasticsearch存储知识库向量供RAG检索、Redis缓存LLM响应减少调用成本部署层Docker打包所有服务通过docker-compose一键启动实现环境隔离、快速部署。简单来说用户在浏览器输入问题 → 前端发送请求 → 后端调用Agent处理 → Agent调用工具/LLM/RAG → 后端返回结果 → 前端展示结果整个流程闭环用户无需关注底层逻辑只需专注于提问和查看结果。二、后端改造Spring Boot封装Agent核心步骤后端改造的核心目标将前两篇的Agent核心逻辑封装成Spring Boot服务提供API接口同时优化配置、解决跨域确保前端能正常调用。全程复用已有代码只做“封装”和“适配”不修改核心逻辑。1. 项目结构调整规范Spring Boot项目结构首先将前两篇的代码调整为标准的Spring Boot项目结构方便管理和维护调整后结构如下重点关注核心包agent-web-backend/ ├── src/ │ ├── main/ │ │ ├── java/ │ │ │ └── com/enterprise/agent/ │ │ │ ├── config/ // 配置类复用前两篇的Config │ │ │ │ ├── McpConfig.java │ │ │ │ ├── LlmConfig.java │ │ │ │ ├── RagConfig.java │ │ │ │ └── SkillsConfig.java │ │ │ ├── validator/ // 决策校验器复用 │ │ │ │ └── AgentDecisionValidator.java │ │ │ ├── service/ // 新增Agent服务封装 │ │ │ │ └── AgentService.java │ │ │ ├── controller/ // 新增API接口控制器 │ │ │ │ └── AgentController.java │ │ │ └── AgentWebApplication.java // 启动类优化 │ │ └── resources/ │ │ └── application.yml // 配置文件统一管理所有参数 │ └── test/ // 测试类可选 └── pom.xml // 依赖管理新增必要依赖2. 核心依赖调整修改pom.xml在原有依赖基础上新增Spring Boot Web依赖提供API接口、跨域依赖确保后端能正常接收前端请求依赖如下直接替换原有pom.xml相关内容?xmlversion1.0 encodingUTF-8? projectxmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instance xsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd modelVersion4.0.0/modelVersion parent groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-parent/artifactId version2.7.18/version relativePath/ /parent groupIdcom.enterprise.agent/groupId artifactIdagent-web-backend/artifactId version1.0.0/version properties maven.compiler.source17/maven.compiler.source maven.compiler.target17/maven.compiler.target project.build.sourceEncodingUTF-8/project.build.sourceEncoding /properties dependencies !-- Spring Boot Web 依赖提供API接口 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency !-- Redis缓存依赖复用前两篇缓存LLM响应 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-redis/artifactId /dependency !-- LangChain4j 核心依赖 -- dependency groupIddev.langchain4j/groupId artifactIdlangchain4j-core/artifactId version0.21.0/version /dependency !-- 通义千问 LLM Embedding 依赖 -- dependency groupIddev.langchain4j/groupId artifactIdlangchain4j-tongyi/artifactId version0.21.0/version /dependency !-- GPT-4 依赖备用LLM -- dependency groupIddev.langchain4j/groupId artifactIdlangchain4j-openai/artifactId version0.21.0/version /dependency !-- Elasticsearch 向量存储依赖RAG -- dependency groupIddev.langchain4j/groupId artifactIdlangchain4j-elasticsearch/artifactId version0.21.0/version /dependency !-- MySQL JDBC 依赖JdbcTool -- dependency groupIdmysql/groupId artifactIdmysql-connector-java/artifactId scoperuntime/scope /dependency dependency groupIdcom.zaxxer/groupId artifactIdHikariCP/artifactId /dependency !-- 跨域支持解决前端调用后端的跨域问题 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-webflux/artifactId /dependency !-- 测试依赖可选 -- dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-test/artifactId scopetest/scope /dependency /dependencies build plugins !-- Spring Boot 打包插件生成可执行Jar包 -- plugin groupIdorg.springframework.boot/groupId artifactIdspring-boot-maven-plugin/artifactId version2.7.18/version /plugin /plugins /build /project3. 配置文件优化application.yml将前两篇的硬编码参数API密钥、数据库连接、ES配置等全部移到application.yml中统一管理方便不同环境开发、测试、生产切换无需修改代码。配置如下替换原有配置根据自己的实际环境修改参数# 服务器配置 server: port: 8080 # 后端服务端口前端调用时需要对应 servlet: context-path: /api # 接口前缀所有API都以/api开头 # Spring 核心配置 spring: # Redis配置用于LLM缓存 data: redis: host: localhost # 本地开发用localhost服务器部署替换为服务器IP port: 6379 database: 0 timeout: 10000ms # MySQL配置用于JdbcTool查询业务数据 datasource: url: jdbc:mysql://localhost:3306/enterprise_db?useSSLfalseserverTimezoneUTCallowPublicKeyRetrievaltrue username: root # 自己的MySQL用户名 password: your-mysql-password # 自己的MySQL密码 driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 10 # 连接池大小优化性能 # 大模型配置LLM llm: tongyi: api-key: your-tongyi-api-key # 自己的通义千问API密钥 model-name: qwen-plus # 通义千问主力模型 gpt4: api-key: your-gpt4-api-key # 自己的GPT-4 API密钥备用 model-name: gpt-4 # RAG配置知识库检索 rag: es: host: localhost # 本地开发用localhost服务器部署替换为服务器IP port: 9200 similarity-threshold: 0.75 # 相似度标准和前两篇一致 tongyi-api-key: your-tongyi-api-key # 通义千问Embedding API密钥 # 日志配置可选方便排查问题 logging: level: com.enterprise.agent: info # 自己的包路径日志级别info dev.langchain4j: warn # LangChain4j日志级别warn避免日志过多 root: info file: name: ./logs/agent-web.log # 日志文件存储路径 max-size: 100MB # 单个日志文件最大大小 max-history: 7 # 日志保留7天4. 核心代码封装新增Service和Controller这一步是后端改造的核心将Agent的初始化、调用逻辑封装到AgentService中对外提供统一的调用方法再通过AgentController提供RESTful API接口供前端调用。全程复用前两篇的核心逻辑不做修改。1AgentService.java服务层封装Agent核心逻辑负责初始化Agent的所有依赖LLM、RAG、Skills提供execute方法供Controller调用同时集成决策校验和缓存逻辑。packagecom.enterprise.agent.service; importcom.enterprise.agent.config.McpConfig; importcom.enterprise.agent.config.RagConfig; importcom.enterprise.agent.config.SkillsConfig; importcom.enterprise.agent.validator.AgentDecisionValidator; importdev.langchain4j.agent.DefaultAgent; importdev.langchain4j.agent.tool.Tool; importdev.langchain4j.model.chat.ChatLanguageModel; importorg.springframework.beans.factory.annotation.Value; importorg.springframework.data.redis.core.StringRedisTemplate; importorg.springframework.stereotype.Service; importjavax.annotation.PostConstruct; importjava.util.List; /** * Agent服务类封装Agent核心逻辑对外提供调用方法 */ Service publicclassAgentService { // 从配置文件注入参数 Value(${llm.tongyi.api-key}) privateStringtongyiApiKey; Value(${llm.gpt4.api-key}) privateStringgpt4ApiKey; Value(${rag.es.host}) privateStringesHost; Value(${rag.es.port}) privateintesPort; Value(${rag.similarity-threshold}) privatedoublesimilarityThreshold; Value(${spring.datasource.url}) privateStringdbUrl; Value(${spring.datasource.username}) privateStringdbUser; Value(${spring.datasource.password}) privateStringdbPwd; // 注入RedisTemplate用于LLM缓存 privatefinalStringRedisTemplateredisTemplate; // Agent实例全局单例初始化一次即可 privateDefaultAgentagent; // 构造器注入RedisTemplate publicAgentService(StringRedisTemplateredisTemplate) { this.redisTemplateredisTemplate; } // 初始化方法项目启动时自动初始化Agent避免每次调用都重新初始化 PostConstruct publicvoidinitAgent() { // 1. 初始化LLM主力通义千问备用GPT-4并设置Redis缓存 com.enterprise.agent.config.LlmConfig.setRedisTemplate(redisTemplate); ChatLanguageModelmainLlmcom.enterprise.agent.config.LlmConfig.getTongyiLlm(); // 2. 初始化RAG知识库检索加载知识库内容 RagConfigragConfignewRagConfig(esHost, esPort, tongyiApiKey, similarityThreshold); ragConfig.addKnowledgeToRag(); // 3. 初始化Skills工具集 TooljdbcToolSkillsConfig.getJdbcTool(dbUrl, dbUser, dbPwd); // 优化从配置文件获取数据库参数 ToolvectorStoreToolSkillsConfig.getVectorStoreTool(); ToolchartToolSkillsConfig.getChartTool(); ListTooltoolsList.of(jdbcTool, vectorStoreTool, chartTool); // 4. 初始化Agent绑定MCP规则、LLM、工具 this.agentMcpConfig.getAgentBuilder(mainLlm, tools).build(); System.out.println(Agent服务初始化完成可正常调用); } // 对外提供的核心方法接收用户问题调用Agent处理返回结果带缓存 publicStringexecuteAgent(StringuserQuestion) { try { // 1. 决策校验筛选可用工具避免乱调用 ListToolvalidToolsAgentDecisionValidator.filterValidTools(userQuestion, agent.getTools()); DefaultAgentvalidAgentagent.toBuilder().tools(validTools).build(); // 2. 调用Agent处理问题并用缓存优化复用前两篇的缓存逻辑 StringagentResultvalidAgent.execute(userQuestion); returncom.enterprise.agent.config.LlmConfig.callLlmWithCache(agentResult); } catch (Exceptione) { // 异常处理返回友好提示避免前端报错 returnAgent调用失败请稍后再试错误信息e.getMessage().substring(0, 100); } } }2AgentController.java控制器提供API接口提供POST接口接收前端发送的用户问题调用AgentService的方法处理返回响应结果同时解决跨域问题确保前端能正常调用。packagecom.enterprise.agent.controller; importcom.enterprise.agent.service.AgentService; importorg.springframework.web.bind.annotation.*; /** * Agent接口控制器提供RESTful API供前端调用 */ RestController RequestMapping(/agent) // 接口路径/api/agent结合server.context-path CrossOrigin(origins*, maxAge3600) // 解决跨域问题开发环境允许所有来源 publicclassAgentController { // 注入AgentService privatefinalAgentServiceagentService; // 构造器注入 publicAgentController(AgentServiceagentService) { this.agentServiceagentService; } /** * 核心接口接收用户问题返回Agent响应结果 * 接口路径POST /api/agent/chat * 请求体用户问题字符串 */ PostMapping(/chat) publicStringchat(RequestBodyStringuserQuestion) { // 校验用户问题非空校验 if (userQuestionnull||userQuestion.trim().isEmpty()) { return请输入有效的问题; } // 调用AgentService处理问题返回结果 returnagentService.executeAgent(userQuestion.trim()); } }3SkillsConfig.java 优化适配配置文件参数修改SkillsConfig中的getJdbcTool方法从配置文件获取数据库参数之前是硬编码适配Spring Boot的配置管理修改后如下// 优化JdbcTool从配置文件获取数据库参数不再硬编码 publicstaticJdbcToolgetJdbcTool(StringdbUrl, StringdbUser, StringdbPwd) { HikariConfigconfignewHikariConfig(); config.setJdbcUrl(dbUrl); // 从配置文件注入 config.setUsername(dbUser); // 从配置文件注入 config.setPassword(dbPwd); // 从配置文件注入 DataSourcedataSourcenewHikariDataSource(config); // 优化后描述说清楚什么时候用、什么时候不用 Stringdescription只用来查企业MySQL数据库里的销售额、用户量等未知业务数据输入合法的SQL语句输出表格形式的查询结果不用查数据的时候绝对不能调用。; returnJdbcTool.builder() .dataSource(dataSource) .description(description) .build(); }4启动类优化AgentWebApplication.java修改启动类确保Spring Boot能正常扫描到Service、Controller、Config等组件无需额外修改核心逻辑。packagecom.enterprise.agent; importorg.springframework.boot.SpringApplication; importorg.springframework.boot.autoconfigure.SpringBootApplication; /** * Spring Boot启动类启动整个后端服务 */ SpringBootApplication(scanBasePackagescom.enterprise.agent) // 扫描所有组件 publicclassAgentWebApplication { publicstaticvoidmain(String[] args) { SpringApplication.run(AgentWebApplication.class, args); System.out.println(Agent后端服务启动成功访问地址http://localhost:8080/api); } }5. 后端测试确保接口能正常调用后端改造完成后启动Spring Boot项目运行AgentWebApplication.java项目启动成功后用Postman或浏览器测试API接口确保能正常返回结果。测试接口POST http://localhost:8080/api/agent/chat请求体{“查询2026年2月销售额Top3的产品生成柱状图并解释为什么这三个产品销量高”}预期结果能正常返回Agent的响应包含数据结论、图表HTML、原因解释无报错。测试通过后说明后端接口已封装完成前端可以正常调用了。三、前端开发Vue3搭建聊天界面新手友好前端开发目标用Vue3 Element Plus搭建一个简洁、易用的聊天界面类似ChatGPT的交互逻辑支持用户输入问题、发送请求、展示结果文本图表新手也能快速上手无需复杂的前端基础。1. 项目初始化创建Vue3项目首先确保本地安装了Node.js建议版本16然后执行以下命令新建Vue3项目并安装依赖# 1. 新建Vue3项目选择默认Vue3模板即可 vue create agent-frontend # 2. 进入项目目录 cd agent-frontend # 3. 安装依赖Element PlusUI组件库axios发送HTTP请求 npm install element-plus axios2. 项目结构调整简化聚焦核心页面删除Vue3默认的多余文件保留核心文件调整后结构如下重点关注src目录agent-frontend/ ├── src/ │ ├── main.js // 入口文件引入Element Plus和axios │ ├── App.vue // 核心页面聊天界面 │ └── assets/ // 静态资源可选如图片 ├── package.json // 依赖管理 └── vue.config.js // Vue配置可选用于跨域代理3. 核心代码开发1main.js入口文件引入依赖引入Element PlusUI组件库、axios发送请求全局注册方便在页面中使用。import { createApp } fromvue importElementPlusfromelement-plus // 引入Element Plus importelement-plus/dist/index.css // 引入Element Plus样式 importaxiosfromaxios // 引入axios importAppfrom./App.vue constappcreateApp(App) // 全局注册Element Plus app.use(ElementPlus) // 配置axios全局使用 app.config.globalProperties.$axiosaxios // 配置后端接口基础路径和后端server.port、context-path对应 axios.defaults.baseURLhttp://localhost:8080/api // 配置请求超时时间 axios.defaults.timeout30000 app.mount(#app)2App.vue核心聊天界面搭建聊天界面包含头部标题、聊天记录展示区、输入框、发送按钮实现“发送问题→展示结果”的完整交互支持自动渲染图表Agent返回的HTML图表会直接渲染。template div classagent-chat-container !-- 头部标题 -- el-headerclasschat-header h1企业智能数据分析Agent/h1 pclasssub-title支持查询数据、生成图表、解读原因一键搞定数据分析/p /el-header !-- 聊天记录展示区 -- el-mainclasschat-content !-- 空状态无聊天记录时显示 -- divclassempty-statev-ifchatList.length 0 el-iconsize60classempty-iconMessage//el-icon pclassempty-tip请输入问题开始对话/p divclassexample-questions el-tagtypeprimaryclickselectExample(查询2026年2月销售额Top3产品)查询2026年2月销售额Top3产品/el-tag el-tagtypeprimaryclickselectExample(生成2月销售额柱状图)生成2月销售额柱状图/el-tag el-tagtypeprimaryclickselectExample(解释产品A销量高的原因)解释产品A销量高的原因/el-tag /div /el-icon /div !-- 聊天记录列表 -- divclasschat-listv-else div v-for(item, index) in chatList :keyindex :classitem.role user ? user-chat : agent-chat divclasschat-avatar el-avatar:iconitem.role user ? User : Bot/ /div divclasschat-messagev-htmlitem.content/div /div /div /el-main !-- 输入框区域 -- el-footerclasschat-input-area el-input v-modelinputValue placeholder请输入问题例如查询2026年2月销售额Top3产品... classinput-box keyup.entersendMessage clearable template#append el-buttontypeprimaryiconSendclicksendMessage:disabled!inputValue.trim() 发送 /el-button /template /el-input pclasstip-text提示支持查询数据、生成图表、解读原因输入后按回车或点击发送/p /el-footer /div /template scriptsetup import { ref } fromvue import { ElMessage, ElTag, ElAvatar, ElIcon } fromelement-plus import { Message, User, Bot, Send } fromelement-plus/icons-vue importaxiosfromaxios // 聊天记录列表存储用户和Agent的对话 constchatListref([]) // 输入框内容 constinputValueref() // 选择示例问题点击标签自动填充输入框 constselectExample (question) { inputValue.valuequestion } // 发送消息 constsendMessageasync () { // 非空校验 constquestioninputValue.value.trim() if (!question) { ElMessage.warning(请输入有效的问题) return } // 1. 添加用户消息到聊天列表 chatList.value.push({ role: user, content: question }) // 2. 添加加载中提示提升用户体验 constloadingIndexchatList.value.length chatList.value.push({ role: agent, content: div classloading思考中.../div }) // 3. 清空输入框 inputValue.value try { // 4. 调用后端API接口 constresponseawaitaxios.post(/agent/chat, question, { headers: { Content-Type: application/json } }) // 5. 替换加载中提示为Agent的响应结果 chatList.value[loadingIndex] { role: agent, content: response.data } // 6. 滚动到最新消息自动定位到底部 setTimeout(() { constchatContentdocument.querySelector(.chat-content) chatContent.scrollTopchatContent.scrollHeight }, 100) } catch (error) { // 异常处理替换加载中提示为错误信息 chatList.value[loadingIndex] { role: agent, content: 调用失败请稍后再试错误信息 (error.message||未知错误) } ElMessage.error(调用失败请稍后再试) } } /script stylescoped .agent-chat-container { height: 100vh; display: flex; flex-direction: column; background-color: #f8f9fa; } /* 头部样式 */ .chat-header { background-color: #409eff; color: #fff; padding: 16px20px; text-align: center; box-shadow: 02px10pxrgba(0, 0, 0, 0.1); } .chat-headerh1 { font-size: 24px; margin: 008px0; } .chat-header.sub-title { font-size: 14px; opacity: 0.9; margin: 0; } /* 聊天内容区域 */ .chat-content { flex: 1; overflow-y: auto; padding: 20px; background-color: #fff; } /* 空状态样式 */ .empty-state { text-align: center; padding: 50px0; color: #666; } .empty-icon { color: #409eff; margin-bottom: 20px; } .empty-tip { font-size: 16px; margin-bottom: 30px; } .example-questions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* 聊天记录列表 */ .chat-list { display: flex; flex-direction: column; gap: 20px; } /* 用户聊天样式 */ .user-chat { display: flex; justify-content: flex-end; align-items: flex-start; } /* Agent聊天样式 */ .agent-chat { display: flex; justify-content: flex-start; align-items: flex-start; } /* 头像样式 */ .chat-avatar { margin: 010px; } /* 消息内容样式 */ .chat-message { max-width: 70%; padding: 12px16px; border-radius: 16px; line-height: 1.5; font-size: 14px; } .user-chat.chat-message { background-color: #e8f4fd; color: #333; border-bottom-right-radius: 4px; } .agent-chat.chat-message { background-color: #f5f5f5; color: #333; border-bottom-left-radius: 4px; } /* 加载中样式 */ .loading { display: flex; align-items: center; justify-content: center; color: #666; } .loading::after { content: ; width: 16px; height: 16px; border: 2pxsolid#409eff; border-top-color: transparent; border-radius: 50%; margin-left: 8px; animation: spin1slinearinfinite; } keyframesspin { to { transform: rotate(360deg); } } /* 输入框区域样式 */ .chat-input-area { padding: 16px20px; background-color: #fff; border-top: 1pxsolid#e6e6e6; } .input-box { width: 100%; margin-bottom: 8px; } .tip-text { font-size: 12px; color: #999; margin: 0; text-align: center; } /style4. 前端测试确保界面能正常交互前端代码开发完成后执行以下命令启动前端项目npm run dev启动成功后访问控制台输出的地址默认是http://localhost:8081即可看到聊天界面测试以下功能点击示例问题标签能自动填充输入框输入问题点击发送或按回车能正常发送请求能看到“思考中”的加载提示加载完成后展示Agent的响应结果Agent返回的图表HTML能正常渲染显示。测试通过后说明前端界面开发完成前后端能正常联动。四、Docker一键部署企业级落地关键到这里我们已经完成了前后端的开发但如果要部署到服务器上供其他人使用还需要解决“环境不一致”的问题——不同服务器的Java、Node.js、MySQL、ES版本可能不同导致项目无法正常运行。解决方案用Docker打包所有服务后端、前端、MySQL、ES、Redis通过docker-compose一键启动实现“环境无关、一键部署”任何人拿到配置文件执行一条命令就能启动整个应用。1. 准备工作服务器环境确保服务器已安装Docker和docker-compose安装步骤参考官方文档简单来说执行以下命令即可以CentOS为例# 安装Docker yum install -y docker systemctl start docker systemctl enable docker # 安装docker-compose yum install -y docker-compose2. 后端Dockerfile打包后端服务在后端项目agent-web-backend根目录创建Dockerfile文件用于打包后端Spring Boot服务生成Docker镜像。# 构建阶段使用Maven打包项目 FROM maven:3.8-openjdk-17 AS build WORKDIR /app # 复制pom.xml下载依赖缓存依赖避免每次打包都重新下载 COPY pom.xml . RUN mvn dependency:go-offline # 复制源码打包项目 COPY src ./src RUN mvn package -DskipTests # 跳过测试加快打包速度 # 运行阶段使用轻量的OpenJDK镜像运行Jar包 FROM openjdk:17-jdk-slim WORKDIR /app # 从构建阶段复制打包好的Jar包 COPY --frombuild /app/target/*.jar agent-backend.jar # 暴露后端服务端口和application.yml中的port一致 EXPOSE 8080 # 启动命令运行Jar包 ENTRYPOINT [java, -jar, agent-backend.jar]3. 前端Dockerfile打包前端服务在前端项目agent-frontend根目录创建Dockerfile文件用于打包前端Vue3项目生成Docker镜像用Nginx部署前端静态文件。# 构建阶段使用Node.js打包前端项目 FROM node:16 AS build WORKDIR /app # 复制package.json和package-lock.json下载依赖 COPY package*.json ./ RUN npm install # 复制源码打包前端项目 COPY . . RUN npm run build # 生成dist目录静态文件 # 运行阶段使用Nginx部署静态文件 FROM nginx:alpine # 复制打包好的静态文件到Nginx的默认目录 COPY --frombuild /app/dist /usr/share/nginx/html # 暴露Nginx端口默认80端口用户通过浏览器访问 EXPOSE 80 # 启动Nginx后台运行 CMD [nginx, -g, daemon off;]4. docker-compose.yml一键启动所有服务在服务器上创建一个新的目录如agent-web-deployment将后端项目、前端项目复制到该目录下然后在该目录下创建docker-compose.yml文件配置所有服务后端、前端、MySQL、ES、Redis实现一键启动。version: 3.8 # docker-compose版本 services: # 1. MySQL服务存储业务数据 mysql: image: mysql:8.0 # 使用MySQL 8.0镜像 container_name: agent-mysql ports: - 3306:3306 # 端口映射主机3306 → 容器3306 environment: MYSQL_ROOT_PASSWORD: root # MySQL root密码可修改 MYSQL_DATABASE: enterprise_db # 数据库名称和后端配置一致 MYSQL_CHARSET: utf8mb4 # 字符集 volumes: - ./mysql-data:/var/lib/mysql # 数据持久化主机目录 → 容器目录避免容器删除后数据丢失 restart: always # 容器异常退出后自动重启 networks: - agent-network # 加入自定义网络方便服务间通信 # 2. Elasticsearch服务RAG知识库向量存储 elasticsearch: image: elasticsearch:8.10.0 # 使用ES 8.10.0镜像和前两篇一致 container_name: agent-es ports: - 9200:9200 # 端口映射主机9200 → 容器9200 environment: - discovery.typesingle-node # 单节点模式适合部署和测试 - xpack.security.enabledfalse # 关闭安全验证简化部署生产环境可开启 - ES_JAVA_OPTS-Xms512m -Xmx512m # 设置JVM内存根据服务器配置调整 volumes: - ./es-data:/usr/share/elasticsearch/data # 数据持久化 restart: always networks: - agent-network # 3. Redis服务LLM缓存 redis: image: redis:alpine # 使用轻量的Redis镜像 container_name: agent-redis ports: - 6379:6379 # 端口映射主机6379 → 容器6379 volumes: - ./redis-data:/data # 数据持久化 restart: always networks: - agent-network # 4. 后端服务Spring Boot agent-backend: build: ./agent-web-backend # 构建后端镜像指定后端项目目录 container_name: agent-backend ports: - 8080:8080 # 端口映射主机8080 → 容器8080 depends_on: - mysql # 依赖MySQL服务MySQL启动后再启动后端 - elasticsearch # 依赖ES服务 - redis # 依赖Redis服务 environment: # 环境变量覆盖application.yml中的配置适配Docker环境 - SPRING_DATASOURCE_URLjdbc:mysql://mysql:3306/enterprise_db?useSSLfalseserverTimezoneUTCallowPublicKeyRetrievaltrue - SPRING_DATASOURCE_USERNAMEroot - SPRING_DATASOURCE_PASSWORDroot - SPRING_REDIS_HOSTredis - RAG_ES_HOSTelasticsearch - RAG_ES_PORT9200 - LLM_TONGYI_API_KEYyour-tongyi-api-key # 替换为自己的通义千问API密钥 - LLM_GPT4_API_KEYyour-gpt4-api-key # 替换为自己的GPT-4 API密钥 restart: always networks: - agent-network # 5. 前端服务Vue3 agent-frontend: build: ./agent-frontend # 构建前端镜像指定前端项目目录 container_name: agent-frontend ports: - 80:80 # 端口映射主机80 → 容器80浏览器默认访问80端口 depends_on: - agent-backend # 依赖后端服务后端启动后再启动前端 restart: always networks: - agent-network # 自定义网络所有服务加入同一个网络方便通信 networks: agent-network: driver: bridge5. 一键启动命令部署核心步骤在docker-compose.yml所在的目录执行以下命令一键启动所有服务# 一键构建并启动所有服务后台运行 docker-compose up -d # 查看所有服务运行状态 docker-compose ps # 查看后端服务日志排查问题用 docker-compose logs -f agent-backend # 停止所有服务 docker-compose down # 停止并删除所有服务和镜像谨慎使用 docker-compose down --rmi all启动成功后等待3-5分钟让所有服务初始化完成然后在浏览器访问服务器IP无需加端口默认80端口即可看到Agent聊天界面正常使用所有功能。五、系列总结从代码到产品的完整闭环至此我们的LangChain4j实战系列已经完成了完整的闭环从基础入门到企业级落地一步步带你搞定Agent开发第一篇入门篇搭建基础的“企业智能数据分析Agent”整合LLM、RAG、Skills、MCP实现核心功能跑通第二篇进阶篇解决Agent开发的三大痛点乱调用工具、RAG检索不准、LLM调用又慢又贵优化稳定性、精准度和性价比第三篇实战篇将Agent封装成Web应用用Spring Boot做后端、Vue3做前端Docker一键部署实现企业级落地。现在你拥有的不仅仅是一个“能跑通的代码示例”而是一个「可部署、可维护、可扩展、可共用」的企业级智能数据分析Agent无论是作为个人项目还是企业内部工具都可以直接投入使用。六、后续扩展建议可选提升Agent实用性如果想让这个Agent更强大、更贴合企业实际需求可以继续扩展以下功能都是企业里常用的需求新手可逐步尝试用户权限管理新增用户登录、角色管理支持多用户隔离不同用户只能查看自己权限范围内的数据功能扩展新增更多Skills比如Excel导出将查询结果导出为Excel、邮件发送将分析结果发送到指定邮箱、定时任务定时生成数据分析报告性能优化给RAG检索结果加缓存进一步减少Embedding调用成本优化数据库查询添加索引提升查询速度监控告警新增监控面板实时查看Agent调用量、LLM响应时间、工具调用成功率添加异常告警工具调用失败、LLM切换备用方案时自动发邮件/钉钉通知开发人员界面优化美化前端界面新增历史聊天记录保存、主题切换、图表下载等功能提升用户体验。学AI大模型的正确顺序千万不要搞错了2026年AI风口已来各行各业的AI渗透肉眼可见超多公司要么转型做AI相关产品要么高薪挖AI技术人才机遇直接摆在眼前有往AI方向发展或者本身有后端编程基础的朋友直接冲AI大模型应用开发转岗超合适就算暂时不打算转岗了解大模型、RAG、Prompt、Agent这些热门概念能上手做简单项目也绝对是求职加分王给大家整理了超全最新的AI大模型应用开发学习清单和资料手把手帮你快速入门学习路线:✅大模型基础认知—大模型核心原理、发展历程、主流模型GPT、文心一言等特点解析✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑✅开发基础能力—Python进阶、API接口调用、大模型开发框架LangChain等实操✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经以上6大模块看似清晰好上手实则每个部分都有扎实的核心内容需要吃透我把大模型的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】