大模型开发 - SpringAI之MCP Client开发：让Agent动态调用远程工具服务

优质文章学习记录

— 17 min read
大模型开发 - SpringAI之MCP Client开发：让Agent动态调用远程工具服务

文章目录

在这里插入图片描述

引言

当我们的AI Agent功能足够丰富时，一个新的问题浮现出来：如何让多个独立的Agent系统共享工具能力？

考虑这样的场景：

  • 一个天气查询服务单独部署在8082端口，提供"获取天气"工具
  • 一个医疗咨询Agent部署在8081端口，需要调用天气工具
  • 两个系统怎样才能优雅地协作，而不是把工具代码重复写一遍？

MCP（Model Context Protocol）协议 应运而生。它是Anthropic定义的一套标准化协议，用于AI模型与外部工具服务进行通信。Spring AI从1.1.0版本开始原生支持MCP Client，让我们可以：

  1. 动态发现远程MCP Server提供的所有工具
  2. 跨进程调用这些工具，就像本地工具一样自然
  3. 简化部署——工具无需重复编码，可以被多个Agent共享

本文将深入讲解MCP协议的设计理念、Spring AI的实现方式，以及如何通过仅仅几行配置，让你的Agent获得访问远程工具服务的能力。

一、MCP协议概念：标准化的工具连接

1.1 为什么需要MCP？

在MCP出现之前，工具调用是这样的：

┌─────────────────────────┐ │ Agent1(8081) │ │ ├─ ToolA │ │ ├─ ToolB │ │ └─ ToolC │ └─────────────────────────┘ ┌─────────────────────────┐ │ Agent2(8082) │ │ ├─ ToolA(重复) │ │ ├─ ToolB(重复) │ │ └─ ToolD │ └─────────────────────────┘

问题多多：

  • 工具代码重复维护
  • 工具版本不一致
  • 扩展新工具需要修改多处代码
  • 微服务之间缺乏标准的工具调用协议

MCP的出现改变了这一切：

┌──────────────────────┐ │ AgentClient │ │ (8081) │ │ ToolCallbackProvider│────┐ └──────────────────────┘ │ │ MCP Protocol │ (HTTP/WebSocket) ▼ ┌──────────────────────┐ │ MCP Server │ │ (8082) │ │ ├─ WeatherTool │ │ ├─ ConfigResource │ │ └─ GreetingPrompt │ └──────────────────────┘

1.2 MCP的三大核心概念

工具（Tools）

MCP Server暴露的可执行函数，Client可以通过标准协议调用。

比如WeatherService的getWeather方法：

@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){// ... 实现}

资源（Resources）

MCP Server暴露的数据资源，可以被Client读取。用于传输静态配置、模板等。

@McpResource(uri ="config://{key}", name ="configuration")publicStringgetConfig(String key){return environment.getProperty(key,"123");}

提示词（Prompts）

MCP Server定义的预设提示模板，Client可以请求并使用这些模板。

@McpPrompt(name ="greeting", description ="欢迎语")publicMcpSchema.GetPromptResultgreeting(@McpArg(name ="name")String name){String message ="你好, "+ name +"! 有什么可以帮您?";returnnewMcpSchema.GetPromptResult(...);}

1.3 MCP的设计哲学

标准化：所有MCP Server都遵循同一套接口规范，Client无需关心具体实现。

解耦：Server和Client独立部署、独立升级，通过协议通信。

动态发现：Client启动时自动探测Server的所有能力（tools、resources、prompts），不需要硬编码工具列表。

协议中立：MCP本身与传输层无关，可以用HTTP、WebSocket、stdio等多种方式实现。

二、MCP架构设计：Client-Server通信模式

2.1 整体架构图

┌─────────────────────────────────────────────────────────────┐ │ Spring AI Application │ │ │ │ ┌──────────────────────────────────────────────────────┐ │ │ │ ChatClient │ │ │ │ (负责与大模型交互) │ │ │ └──────────────────────────────────────────────────────┘ │ │ ▲ │ │ │ │ │ ┌──────────────────────┴──────────────────────────────┐ │ │ │ │ │ │ │ ToolCallbackProvider.getToolCallbacks() │ │ │ │ (动态加载MCP Server的工具) │ │ │ │ │ │ │ └──────────────────────┬──────────────────────────────┘ │ └─────────────────────────┼──────────────────────────────────┘ │ ┌─────────┴─────────┐ │ MCP HTTP Client │ │ ConnectionPool │ └─────────┬─────────┘ │ MCP Protocol(HTTP) streamable-http:// │ ┌─────────▼─────────┐ │ MCP Server │ │ (8082) │ │ │ │ ┌──────────────┐ │ │ │ WeatherTool │ │ │ │ ConfigResource │ │ │ GreetingPrompt │ │ └──────────────┘ │ └───────────────────┘

2.2 通信流程

阶段1：初始化与发现（Startup）

  1. MCP Client启动时，连接到Server
  2. 发送initialize请求，告诉Server客户端信息
  3. Server响应，返回自己支持的协议版本
  4. Client发送list-tools请求，获取所有可用工具
  5. Server返回工具列表，包含工具名、描述、参数schema
ClientServer │ │ ├──────── initialize ─────────►│ │ │ │◄─── initialize response ─────┤ │ │ ├──────── list-tools ─────────►│ │ │ │◄─── [getWeather,...] ───────┤

阶段2：工具调用（Tool Calling）

当大模型决定调用工具时：

┌─ ChatClient ──────────────────────────────┐ │ prompt:"上海天气怎样？" │ │ tools:[getWeather,...] │ │ (tools来自MCP Server) │ └────────────┬──────────────────────────────┘ │ ▼ ┌─ LLM Response ────────────────┐ │ { │ │ "tool_calls":[ │ │ { │ │ "id":"call_123", │ │ "function":{ │ │ "name":"getWeather", │ │ "arguments":{ │ │ "cityName":"上海" │ │ } │ │ } │ │ } │ │ ] │ │ } │ └────────────┬──────────────────┘ │ ▼ ┌─ ToolCallbackProvider ────────────────────┐ │ 1. 识别工具名: getWeather │ │ 2. 从MCP Server动态调用 │ │ 3. 返回结果:"天晴" │ └────────────┬──────────────────────────────┘ │ ▼ ┌─ ChatClient ──────────────────────────────┐ │ 添加tool message到memory │ │ 继续与LLM交互 │ └────────────────────────────────────────────┘

2.3 ToolCallbackProvider的职责

ToolCallbackProvider是Spring AI中的关键接口，负责：

  1. 工具发现：启动时连接MCP Server，获取所有工具定义
  2. 生成Callbacks：为每个工具创建可调用的Callback对象
  3. 动态绑定：大模型调用工具时，动态找到对应Callback并执行

伪代码如下：

publicclassMcpToolCallbackProviderimplementsToolCallbackProvider{privatefinalMCP_CLIENT mcpClient;// MCP HTTP客户端publicList<ToolCallback>getToolCallbacks(){// 1. 从MCP Server发送list-tools请求List<Tool> tools = mcpClient.listTools();// 2. 为每个工具创建动态Callbackreturn tools.stream().map(tool ->createCallback(tool)).toList();}privateToolCallbackcreateCallback(Tool tool){returnnewToolCallback(){@OverridepublicStringgetName(){return tool.getName();}@OverridepublicStringgetDescription(){return tool.getDescription();}@OverridepublicStringcall(String arguments){// 3. 实际调用：远程调用MCP Server的工具return mcpClient.callTool(tool.getName(), arguments);}};}}

三、依赖引入与项目配置

3.1 添加MCP Client依赖

在spring-ai-demo/pom.xml中，与其他Spring AI依赖并列添加：

<dependencies><!-- 现有依赖... --><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-starter-mcp-client</artifactId></dependency></dependencies>

这个依赖包含：

  • MCP Client核心库
  • HTTP连接器（streamable-http）
  • ToolCallbackProvider实现

3.2 MCP Server端配置

在spring-ai-mcp-server-demo/src/main/resources/application.yml中：

spring:ai:mcp:server:name: weather-mcp-server # Server名称protocol: streamable # 使用HTTP协议server:port:8082# 独立端口

关键点：

  • protocol: streamable表示使用HTTP SSE（Server-Sent Events）方式
  • 端口8082与Client的配置相对应

3.3 MCP Client端配置

在spring-ai-demo/src/main/resources/application.yml中：

spring:ai:mcp:client:name: spring-ai-mcp-client-demo # Client名称，标识自己streamable-http:# HTTP连接方式connections:server1:# 连接名（任意）url: http://localhost:8082# MCP Server地址

重要参数说明：

参数说明示例
name当前应用在MCP中的标识spring-ai-mcp-client-demo
connections可以连接多个MCP Server下例支持多Server
urlMCP Server的HTTP入口http://localhost:8082

多Server配置示例：

spring:ai:mcp:client:streamable-http:connections:weather-server:url: http://localhost:8082config-server:url: http://config-server:9000search-server:url: http://search-server:9001

此时Client会自动发现三个Server的所有工具。

四、MCP Server端实现详解

4.1 WeatherService：工具提供者

MCP Server通过@McpTool注解声明工具：

@Service@Log4j2publicclassWeatherService{@AutowiredprivateEnvironment environment;// 工具1：获取天气@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){ log.info("正在获取天气信息...");if(cityName.equals("上海")){return"天晴";}elseif(cityName.equals("北京")){return"下雨";}return"不知道";}// 工具2：问候提示词@McpPrompt(name ="greeting", description ="欢迎语")publicMcpSchema.GetPromptResultgreeting(@McpArg(name ="name")String name){String message ="你好, "+ name +"! 有什么可以帮您?";returnnewMcpSchema.GetPromptResult("Greeting",List.of(newMcpSchema.PromptMessage(McpSchema.Role.ASSISTANT,newMcpSchema.TextContent(message))));}// 工具3：配置资源@McpResource(uri ="config://{key}", name ="configuration")publicStringgetConfig(String key){return environment.getProperty(key,"123");}}

三种能力详解：

@McpTool - 可调用的函数工具

@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){...}
  • 可被Client动态调用
  • 参数自动序列化为JSON Schema
  • 返回值作为工具执行结果

当Client调用时，MCP协议自动处理：

{"jsonrpc":"2.0","method":"tools/call","params":{"name":"getWeather","arguments":{"cityName":"上海"}}}

@McpResource - 只读数据资源

@McpResource(uri ="config://{key}", name ="configuration")publicStringgetConfig(String key){...}
  • URI模板：支持参数化读取
  • 读取示例：config://spring.datasource.url → 返回数据库地址
  • 用途：共享配置、常量、模板等静态资源

@McpPrompt - 预设提示词模板

@McpPrompt(name ="greeting", description ="欢迎语")publicMcpSchema.GetPromptResultgreeting(@McpArg(name ="name")String name){...}
  • 提供预编写的提示词
  • 支持参数化（如用户名）
  • 用途：系统级别的提示词模板共享

4.2 MCP Server的启动配置

@SpringBootApplicationpublicclassMcpServerApplication{// 注意：不需要手动配置ToolCallbackProvider// Spring AI会自动扫描@McpTool @McpResource @McpPrompt注解// 并通过MCP协议暴露这些能力publicstaticvoidmain(String[] args){SpringApplication.run(McpServerApplication.class, args);}}

重要：Spring AI自动检测并注册所有带MCP注解的Bean，无需手动配置。

五、MCP Client端实现详解

5.1 McpController：工具调用的入口

@RestControllerpublicclassMcpController{@AutowiredprivateChatClient chatClient;@AutowiredprivateToolCallbackProvider toolCallbackProvider;@GetMapping("/mcp")publicStringmcp(String message){return chatClient .prompt().user(message).toolCallbacks(toolCallbackProvider.getToolCallbacks()).call().content();}}

逐行解析：

  1. ToolCallbackProvider toolCallbackProvider
    • Spring AI自动注入
    • 负责从MCP Server动态加载工具
  2. toolCallbackProvider.getToolCallbacks()
    • 返回所有可用工具的Callback列表
    • 这些Callback会被传给大模型
    • 大模型可以选择调用其中任何一个
  3. .toolCallbacks(...)
    • 将MCP Server的工具注入到ChatClient
    • 大模型现在可以使用这些工具
  4. 完整执行流：
GET /mcp?message=上海天气怎样？ │ ▼ User:"上海天气怎样？"Tools:[getWeather (from MCP Server)] ◄── 动态加载 │ ▼ LLM Response: tool_calls=[getWeather(cityName="上海")] │ ▼ ToolCallbackProvider.call("getWeather",{...}) │ ▼ MCP Client → HTTP → MCP Server tools/call getWeather │ ▼ MCP Server:"天晴" │ ▼ LLM:"根据天气工具的反馈，上海天晴" │ ▼ 返回给用户

5.2 实际测试

启动两个应用后，测试MCP调用：

# MCP Server启动在8082cd spring-ai-mcp-server-demo mvn spring-boot:run # MCP Client启动在8081cd spring-ai-demo mvn spring-boot:run # 测试调用curl"http://localhost:8081/mcp?message=上海天气怎样？"

预期输出：

根据我获取的天气信息，上海天晴。

背后的调用链：

  1. Client的ChatClient收到请求
  2. 向大模型提交用户问题 + MCP Server暴露的工具列表
  3. 大模型选择调用getWeather("上海")
  4. ToolCallbackProvider通过MCP协议远程调用
  5. 得到"天晴"的结果
  6. 反馈给大模型继续推理
  7. 大模型生成最终回复

六、MCP vs 直接Tool Calling：架构对比

6.1 直接Tool Calling方式（之前的做法）

@ConfigurationpublicclassToolConfig{@BeanpublicToolCallbackProviderlocalTools(WeatherService weatherService){// 把WeatherService的方法注册为本地工具returnMethodToolCallbackProvider.builder().toolObjects(weatherService).build();}}@RestControllerpublicclassChatController{@GetMapping("/chat")publicStringchat(String message){return chatClient.prompt().user(message).toolCallbacks(localTools.getToolCallbacks())// 本地工具.call().content();}}

特点：

  • 工具与Agent紧密耦合
  • 工具代码必须与Agent在同一进程
  • 工具更新需要重启Agent应用

6.2 MCP Client方式（新做法）

# 仅需配置，无需代码spring:ai:mcp:client:streamable-http:connections:server1:url: http://localhost:8082
@RestControllerpublicclassMcpController{@GetMapping("/mcp")publicStringmcp(String message){return chatClient.prompt().user(message).toolCallbacks(toolCallbackProvider.getToolCallbacks())// 远程工具.call().content();}}

特点：

  • 工具独立部署
  • Agent与工具解耦
  • 动态发现，无需硬编码
  • 工具更新无需重启Agent

6.3 对比表

维度直接Tool CallingMCP Client
部署方式单一进程多进程
通信方式方法调用HTTP/WebSocket RPC
工具发现硬编码注册动态发现
工具复用重复编码一次部署，多处使用
更新影响需重启Agent仅Server重启
网络延迟无有（毫秒级）
扩展性中等高
适用场景小型单体应用微服务、多Agent系统

6.4 选择策略

选用直接Tool Calling：

  • Agent数量少（1-2个）
  • 工具相对稳定，不常更新
  • 工具逻辑简单，计算量小
  • 无网络延迟要求

选用MCP Client：

  • Agent数量多（3个以上）
  • 工具经常更新迭代
  • 多个Agent共享相同工具
  • 工具可能部署在不同机器/容器
  • 需要微服务架构

七、MCP协议深度探讨

7.1 MCP的Request-Response模式

所有通信都遵循JSON-RPC 2.0标准：

Request格式

{"jsonrpc":"2.0","id":"1","method":"tools/call","params":{"name":"getWeather","arguments":{"cityName":"上海"}}}

Response格式

{"jsonrpc":"2.0","id":"1","result":{"content":[{"type":"text","text":"天晴"}]}}

或错误响应：

{"jsonrpc":"2.0","id":"1","error":{"code":-32600,"message":"Invalid Request","data":{"details":"city not found"}}}

7.2 参数自动映射

MCP Server会自动将Java方法签名转换为JSON Schema，供Client理解：

@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){...}

自动生成的Schema：

{"name":"getWeather","description":"获取指定城市的天气","inputSchema":{"type":"object","properties":{"cityName":{"type":"string","description":"城市名称"}},"required":["cityName"]}}

LLM看到这个Schema，就知道如何调用这个工具。

7.3 连接池与健康检查

Spring AI MCP Client维护HTTP连接池，定期检查Server健康状态：

spring:ai:mcp:client:streamable-http:connections:server1:url: http://localhost:8082# 可选：配置连接超时timeout: 30s # 可选：配置心跳间隔heartbeat-interval: 60s

如果Server不可用，Client会：

  1. 记录日志
  2. 标记连接为"不可用"
  3. 继续尝试重连
  4. 大模型无法使用该Server的工具（但不会崩溃）

八、生产环保的最佳实践

8.1 错误处理

MCP工具执行失败时，大模型应该收到错误信息：

@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){try{// 调用天气APIWeatherData data = weatherApi.fetch(cityName);return data.getDescription();}catch(CityNotFoundException e){// 返回有意义的错误信息return"Error: 城市 "+ cityName +" 不存在";}catch(ApiTimeoutException e){return"Error: 天气服务暂时不可用，请稍后重试";}}

大模型会收到这个错误信息，并可能：

  • 重新尝试
  • 使用备选方案
  • 向用户解释为什么无法获取信息

8.2 日志与监控

在Server端详细记录所有工具调用：

@McpTool(description ="获取指定城市的天气")publicStringgetWeather(String cityName){ log.info("MCP Tool called: getWeather, cityName={}", cityName);long startTime =System.currentTimeMillis();try{String result =fetchWeather(cityName);long elapsed =System.currentTimeMillis()- startTime; log.info("MCP Tool success: getWeather, cityName={}, elapsed={}ms", cityName, elapsed);return result;}catch(Exception e){ log.error("MCP Tool error: getWeather, cityName={}", cityName, e);throw e;}}

关键指标：

  • 工具调用次数
  • 调用延迟（网络+执行）
  • 错误率
  • Server连接状态

8.3 版本兼容性

Server和Client的版本可以不同步，但要保持兼容：

// Server更新添加新参数时@McpTool(description ="获取天气")publicStringgetWeather(String cityName,@McpArg(required =false)String timestamp // 新参数，但可选){// 旧Client发送的请求不包含timestamp，也能正常工作}

8.4 安全性考虑

认证与授权

spring:ai:mcp:client:streamable-http:connections:secure-server:url: https://secure-server:8082auth:type: bearer token: ${MCP_SERVER_TOKEN}# 环境变量

速率限制

@McpTool(description ="获取天气")@RateLimit(requestsPerMinute =60)publicStringgetWeather(String cityName){...}

九、实战案例：多Agent系统架构

假设你要构建一个企业级AI系统，包含三个独立Agent：

┌─────────────────────┐ │ ChatBotAgent │ 8081 │ (对话机器人) │ └──────────┬──────────┘ │ MCP ├─────────┬─────────┬──────────┐ │ │ │ │ ┌──────▼───┐ ┌───▼────┐ ┌─▼──────┐ ┌▼────────┐ │ Weather │ │ Config │ │ Search │ │Database │ │ Service │ │Service │ │Service │ │Service │ │ 8082 │ │ 8083 │ │ 8084 │ │ 8085 │ └──────────┘ └────────┘ └────────┘ └─────────┘

在ChatBot Agent的配置中：

spring:ai:mcp:client:name: chatbot-mcp-client streamable-http:connections:weather:url: http://localhost:8082config:url: http://localhost:8083search:url: http://localhost:8084database:url: http://localhost:8085

现在ChatBot Agent可以：

  • 调用WeatherService获取天气
  • 调用ConfigService查询配置
  • 调用SearchService搜索网络
  • 调用DatabaseService查询数据库

这些服务可以独立部署、独立更新、独立扩展，ChatBot完全无感知。

十、常见问题与故障排查

10.1 “Tool not found” 错误

现象：大模型要调用某个工具，但系统报错"Tool not found"

原因：

  1. MCP Server未启动
  2. Server地址配置错误
  3. 工具定义有问题

排查步骤：

# 1. 检查Server是否在线curl http://localhost:8082/health # 如果有health endpoint# 2. 检查Client日志# 查看是否有"Connected to MCP Server"的日志# 3. 手动测试工具列表# 在Client启动日志中应该看到工具列表被加载# 4. 验证工具名称拼写# 确保Client请求的工具名与Server定义的完全相同

10.2 网络延迟

现象：工具调用很慢

原因：

  • HTTP连接开销
  • 网络距离远
  • Server处理慢

优化方案：

# 1. 启用连接复用spring:ai:mcp:client:streamable-http:connections:server1:url: http://localhost:8082keep-alive:trueconnection-timeout: 5s # 2. 部署Server靠近Client# 使用容器编排工具（Docker, K8s）确保网络延迟<10ms# 3. 考虑使用WebSocket而非HTTP# WebSocket长连接开销更小（未来版本）

10.3 Server宕机处理

现象：Server无响应，Client应用停滞

原因：Client等待Server响应超时

解决方案：

spring:ai:mcp:client:streamable-http:connections:server1:url: http://localhost:8082timeout: 10s # 设置合理超时retry:max-attempts:3backoff: exponential

此时大模型仍可用，只是无法调用该Server的工具。

十一、总结与展望

11.1 MCP Client的核心价值

能力收益
动态工具发现无需硬编码工具列表
工具共享一个工具，多个Agent使用
独立演进Server和Client独立开发
微服务支持适配容器化部署
协议标准化与Anthropic官方工具无缝对接

11.2 MCP的未来

Anthropic宣布MCP成为AI Agent的通用标准：

  1. 语言无关：Java、Python、Node.js都有SDK
  2. AI模型无关：Claude、GPT、开源模型都支持
  3. 工具市场：未来可能出现MCP工具市场，类似npm
  4. IDE集成：开发工具将内置MCP支持

11.3 学习路线

基础 → 进阶 → 生产 │ │ │ ├─────┴──────┴──────────────────────┐ │ │ ▼ ▼ 单Server工具调用 多Server容器化部署 ↓ ↓ 本地测试 Kubernetes编排 ↓ ↓ 性能优化 工具市场集成

11.4 与我们之前学到的内容的联系

Spring AI学习路线: 第1步:ToolCalling基础 (直接调用本地工具) ↓ 第2步: RAG +Memory(增强知识库与记忆) ↓ 第3步: MCP Client（本文） (远程工具调用) ↓ 第4步: 多Agent系统 (多个Agent协作) ↓ 第5步: 生产化部署 (容器、监控、高可用)

本文介绍的MCP Client正是从单Agent应用到多Agent系统的关键桥梁。

总结

通过MCP（Model Context Protocol），我们打破了Agent与工具的紧耦合关系：

  1. 工具变成了独立服务，可以单独部署和演进
  2. 大模型获得了远程工具调用的能力，就像使用本地工具一样自然
  3. 多个Agent可以共享同一套工具，避免代码重复
  4. 系统整体的扩展性和灵活性得到了质的提升

MCP的出现，标志着AI Agent从"单体应用"走向"分布式系统"的开始。

在下一篇文章中，我们将深入多Agent系统的设计与实现——如何让多个Agent之间互相通信、协作完成复杂任务。

在这里插入图片描述

Read more

企业级web药店管理系统管理系统源码｜SpringBoot+Vue+MyBatis架构+MySQL数据库【完整版】

企业级web药店管理系统管理系统源码｜SpringBoot+Vue+MyBatis架构+MySQL数据库【完整版】

摘要 随着医药行业的快速发展，传统药店管理模式在效率、数据整合及用户体验方面逐渐显现出不足。人工管理药品库存、销售记录和客户信息不仅耗时耗力，还容易出现人为错误，影响药店运营效率和服务质量。信息化管理系统的引入成为解决这一问题的有效途径，能够实现药品信息的精准管理、销售数据的实时分析以及客户服务的智能化。基于此，开发一套高效、稳定且易用的企业级Web药店管理系统具有重要的现实意义。该系统能够帮助药店实现数字化转型，提升管理效率，降低运营成本，同时为顾客提供更便捷的购药体验。关键词：药店管理系统、数字化转型、药品库存管理、销售数据分析、客户服务。 本系统采用SpringBoot作为后端框架，结合Vue.js前端框架和MyBatis持久层框架，构建了一个高性能、易扩展的全栈Web应用。数据库选用MySQL，确保数据存储的稳定性和高效查询能力。系统主要功能包括药品信息管理、库存预警、销售记录统计、会员管理以及多角色权限控制。管理员可通过可视化界面实时监控药品库存状态，自动生成销售报表，优化采购决策；店员能够快速完成药品销售与退换货操作；顾客则可通过会员系统享受个性化服务。系统采用REST

前端 HTML/CSS 核心知识点总结（定位、层级、透明、交互、布局）

在前端开发中，HTML 和 CSS 是构建页面结构与样式的基础，掌握核心的布局、交互、样式控制知识点能大幅提升页面开发效率。本文基于实际代码案例，总结定位、层级、透明效果、表单交互、轮播图、元素居中、Tab 栏切换等高频知识点，助力开发者夯实基础。 一、定位与层级（z-index） 定位是 CSS 布局的核心，z-index则用于控制定位元素的显示层级，二者结合可实现复杂的层叠布局。 1. 定位元素的层级规则 * z-index仅对开启定位（position: relative/absolute/fixed/sticky） 的元素生效，未定位元素无法使用。 * 层级值为正整数，值越高元素越优先显示；默认层级为 0，层级相同时，文档流中下方的元素会盖住上方元素。 * 核心特性：父元素层级再高，也不会盖住其子元素（子元素始终在父元素的层叠上下文中）。 2. 代码示例 .box1 { width:

前端实现Word文档在线编辑与导出：基于mammoth.js与Blob对象的完整解决方案

如何在浏览器中直接编辑Word文档并导出？本文将深入探索一种基于mammoth.js和Blob对象的完整技术方案。 在当今的Web应用开发中，实现文档的在线编辑与导出已成为常见需求。无论是企业内部系统、教育平台还是项目管理工具，都迫切需要让用户能够在浏览器中直接编辑Word文档，而无需安装桌面软件。本文将详细介绍如何利用mammoth.js和Blob对象实现这一功能，并对比其他可行方案。 一、为什么选择mammoth.js与Blob方案？ 在Web前端实现Word文档处理，主要有三种主流方案：浏览器原生Blob导出、mammoth.js专业转换和基于模板的docxtemplater方案。它们各有优劣，适用于不同场景。 mammoth.js的核心优势在于它能将.docx文档转换为语义化的HTML，而非简单复制视觉样式。这意味着它生成的HTML结构清晰、易于维护和样式定制。配合Blob对象，我们可以轻松将编辑后的内容重新导出为Word文档。 与直接使用Microsoft Office Online或Google Docs嵌入相比，mammoth.js方案不依赖外部服务，能更好地

3分钟体验macOS Web：无需苹果设备的在线系统模拟器

3分钟体验macOS Web：无需苹果设备的在线系统模拟器 【免费下载链接】macos-web 项目地址: https://gitcode.com/gh_mirrors/ma/macos-web 想要体验macOS的优雅界面却苦于没有苹果设备？macOS Web为你带来了完美的解决方案！这是一个基于现代Web技术构建的开源项目，让你在浏览器中就能感受到macOS Ventura的桌面体验。🎯 项目概览 macOS Web是由开发者PuruVJ创建的创新项目，它使用Svelte框架和Vite构建工具，将macOS的桌面环境完整地呈现在网页上。从菜单栏到Dock栏，从窗口管理到应用程序启动，每一个细节都精心设计，力求还原真实的macOS操作体验。 核心功能详解 完整的桌面环境 项目提供了完整的macOS桌面模拟，包括： * 菜单栏：包含苹果菜单、应用程序菜单和系统状态区域 * Dock栏：可自定义的应用程序启动器 * 窗口系统：支持窗口拖拽、最小化、最大化等操作 * 应用程序：内置多种模拟应用，如计算器、日历、VSCode等 丰富的应用程序 根据src