企业官网建设流程全解析

绵阳建设局网站,群晖打开wordpress4.9.8,服务器搭建网站,合肥公司网站搭建服务商目录 一、概论 二、代码实现 分层设计 模块 1#xff1a;Request 请求参数封装#xff08;OparetionRequest#xff09; 1. 模块定位 2. 核心设计解析 模块 2#xff1a;Controller 接口层#xff08;OperationController#xff09; 1. 模块定位 2. 核心设计解析…目录一、概论二、代码实现分层设计模块 1Request 请求参数封装OparetionRequest1. 模块定位2. 核心设计解析模块 2Controller 接口层OperationController1. 模块定位2. 核心设计解析模块 3Service 业务抽象层OparetionService1. 模块定位2. 核心设计解析模块 4Service 实现层OparetionServiceImpl1. 模块定位2. 核心设计解析三、核心总结四、结果演示五、结语一、概论GUI-Plus 可基于屏幕截图和自然语言指令来解析用户意图并转换为标准化的图像用户界面GUI操作如点击、输入、滚动等供外部系统决策或执行。相较于通义千问VL系列模型提升了GUI操作的准确性。简单来说GUI-Plus 只需一张屏幕截图 你说的自然语言指令就能看懂你想对界面做什么还能转换成点击、输入、滚动这类标准化的 GUI 操作给其他系统用而且它在 GUI 操作的准确性上比通义千问 VL 系列模型更靠谱。现在我们先简单的按照官网给的例子来写一个后端的接口出来二、代码实现这段代码是一个多模态 GUI 操作解析接口核心能力是接收「屏幕截图 URL 自然语言指令」调用阿里云百炼 GUI-Plus 模型将用户意图转换为标准化的 GUI 原子操作点击、输入、滚动等返回 JSON 格式结果。分层设计遵循 Spring MVC 经典分层思想职责边界清晰Request参数封装层DTOController接口入口层接收请求、转发业务Service业务抽象层定义接口ServiceImpl业务实现层核心逻辑调用 GUI-Plus 模型模块 1Request 请求参数封装OparetionRequestimport lombok.Data; /** * author DELL */ Data public class OparetionRequest { private String text; private String imageUrl; }1. 模块定位作为数据传输对象DTO仅封装前端传入的核心请求参数是前后端数据交互的载体。2. 核心设计解析用 Lombok 的Data注解自动生成 getter/setter/toString/equals 等模板代码精简代码量字段设计仅保留text指令和imageUrl截图两个核心字段完全匹配 GUI-Plus 模型的「文本 图片」多模态输入要求无冗余字段。模块 2Controller 接口层OperationControllerpackage gzj.spring.ai.Controller; import com.alibaba.dashscope.exception.NoApiKeyException; import com.alibaba.dashscope.exception.UploadFileException; import gzj.spring.ai.Request.OparetionRequest; import gzj.spring.ai.Service.OparetionService; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; /** * author DELL */ RestController RequestMapping(/api/Operation) CrossOrigin // 跨域支持 public class OperationController { private final OparetionService oparetionService; public OperationController(OparetionService oparetionService) { this.oparetionService oparetionService; } RequestMapping(/operation/easy) public String oparetion(RequestBody OparetionRequest request) throws NoApiKeyException, UploadFileException { return oparetionService.oparetion(request); } }1. 模块定位对外暴露 HTTP 接口是「前端请求 → 后端业务」的入口仅负责请求转发不包含业务逻辑。2. 核心设计解析RestController标识为 REST 接口返回 JSON 而非视图CrossOrigin快速开启跨域支持适配前端本地调试场景构造器注入OparetionServiceSpring 推荐的依赖注入方式优于Autowired避免空指针便于单元测试RequestBody接收 JSON 格式请求体绑定到OparetionRequest对象异常抛出直接抛出 SDK 定义的异常NoApiKeyException、UploadFileException交由上层处理。模块 3Service 业务抽象层OparetionServiceimport com.alibaba.dashscope.exception.NoApiKeyException; import com.alibaba.dashscope.exception.UploadFileException; import gzj.spring.ai.Request.OparetionRequest; import org.springframework.web.bind.annotation.RequestBody; /** * author DELL */ public interface OparetionService { String oparetion(RequestBody OparetionRequest request) throws NoApiKeyException, UploadFileException; }1. 模块定位定义业务逻辑的抽象接口解耦「接口定义」与「实现逻辑」符合「面向接口编程」思想。2. 核心设计解析仅定义一个核心方法oparetion入参为请求 DTO抛出模型调用的特定异常返回模型输出的 JSON 字符串无具体实现将业务逻辑交给ServiceImpl层便于后续扩展如新增通义千问 VL 模型的实现类。模块 4Service 实现层OparetionServiceImplpackage gzj.spring.ai.Service.ServiceImpl; // 导入依赖... Service public class OparetionServiceImpl implements OparetionService { Value(${spring.ai.dashscope.api-key}) private String apiKey; Override public String oparetion(OparetionRequest request) throws NoApiKeyException, UploadFileException { // 1. 初始化多模态对话客户端 MultiModalConversation conv new MultiModalConversation(); // 2. 构造系统提示词核心定义GUI-Plus输出规则 MultiModalMessage systrmMsg MultiModalMessage.builder() .role(Role.SYSTEM.getValue()) .content(Arrays.asList(Collections.singletonMap(text, ## 1. 核心角色...))) // 超长提示词 .build(); // 3. 构造用户消息图片文本 MultiModalMessage userMessage MultiModalMessage.builder() .role(Role.USER.getValue()) .content(Arrays.asList( Collections.singletonMap(image, request.getImageUrl()), Collections.singletonMap(text, request.getText()))) .build(); // 4. 配置模型参数 MultiModalConversationParam param MultiModalConversationParam.builder() .apiKey(System.getenv(DASHSCOPE_API_KEY)) // 读取环境变量API Key .model(gui-plus) // 指定GUI-Plus模型 .messages(Arrays.asList(systrmMsg,userMessage)) .build(); // 5. 调用模型并返回结果 MultiModalConversationResult result conv.call(param); String resText result.getOutput().getChoices().get(0).getMessage().getContent().get(0).get(text).toString(); System.out.println(resText); return resText; } }1. 模块定位核心业务逻辑层负责「组装多模态消息 → 调用 GUI-Plus 模型 → 解析返回结果」是整个接口的核心。2. 核心设计解析Service标识为 Spring 服务 Bean纳入 IOC 容器Value注入 API Key从配置文件读取百炼 API Key避免硬编码系统提示词构造这是核心中的核心通过精细化的系统指令定义 GUI-Plus 的输出规则JSON 格式、Action 类型、参数模板、思维框架保证模型输出的标准化和准确性多模态消息组装将用户的imageUrl图片和text指令组装为百炼 SDK 要求的格式模型参数配置指定模型名gui-plus、API Key优先环境变量、消息列表结果解析提取模型返回的文本结果标准化 GUI 操作 JSON并返回。三、核心总结代码完整实现了 GUI-Plus 模型的调用流程架构上遵循 Spring MVC 分层思想核心亮点是「精细化的系统提示词设计」保证了 GUI 操作解析的准确性四、结果演示五、结语这里我们用的是官方给的图片如图模型通过 得出 定位信息再将信息传给相关脚本进行处理。当然要做到实用我们肯定需要搞本地地图然后通过对自己的电脑进行多张截图才有办法做出多自动化的效果在后续的文章中我将会实现这个功能。如果觉得这份修改实用、总结清晰别忘了动动小手点个赞再关注一下呀 后续还会分享更多 AI 接口封装、代码优化的干货技巧一起解锁更多好用的功能少踩坑多提效 你的支持就是我更新的最大动力咱们下次分享再见呀