尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
Ollama本地模型前端接入:代理层设计与实战
1. 项目概述为什么本地跑一个模型还要折腾前端接入Ollama 这个工具我第一次用的时候就意识到它不是给“点开即用”用户准备的——它本质是个命令行优先的本地模型运行时像 Docker 之于容器是基础设施层的东西。但现实里光在终端里敲ollama run qwen3看着模型吐字对绝大多数实际场景毫无意义。你要做的是一个能被用户点击、输入、等待、看到响应的界面比如一个内部知识问答页、一个产品文档助手弹窗、或者一个嵌入到现有管理后台里的 AI 补全框。这时候“Ollama 本地模型怎么部署并接入前端”这个问题就从“能不能跑起来”升级成了“怎么让它真正干活”。核心关键词其实就三个Ollama运行时、本地模型数据不出内网、无调用成本、可离线、前端用户触达的最后一公里。而“API调用”不是目的是手段它背后的真实需求是让浏览器里的 JavaScript 能安全、稳定、可控地和本机运行的 Ollama 服务通信并把模型输出渲染成用户能理解的内容。这不是一个简单的 CORS 配置问题而是涉及网络拓扑、协议适配、错误兜底、状态管理的一整套链路。我见过太多人卡在第一步fetch(http://localhost:11434/api/chat)报错跨域然后去查“Ollama 怎么关 CORS”结果发现 Ollama 根本不提供这个开关——因为它压根没打算直接被浏览器调用。它的 API 设计就是面向后端服务的。所以真正的解法从来不是“让 Ollama 对前端开放”而是“在前端和 Ollama 之间加一层薄薄的、可控的胶水层”。这个胶水层可以是 Express、FastAPI甚至一个几行 Node.js 的 HTTP 代理。它不处理模型逻辑只做三件事转发请求、透传响应、拦截错误。这才是能落地、能上线、能维护的方案。适合谁看如果你是前端开发者正在面试中被问到“如果公司要求所有 AI 能力必须本地化你如何设计前端接入方案”这篇文章会给你一条清晰、可复现、带避坑细节的路径如果你是全栈或后端同学想快速搭一个最小可行的本地 AI 服务又不想被 LangChain 或 LlamaIndex 这类重型框架绑架这里给出的方案足够轻量、透明、易调试如果你是技术决策者在评估“本地模型是否真能替代云 API”那么文中关于延迟实测、内存占用、并发瓶颈的数据比任何 PPT 都有说服力。它不讲概念只讲你打开终端、敲下第一行命令后接下来 30 分钟会发生什么。2. 整体架构与选型逻辑为什么必须加一层代理而不是直连2.1 Ollama 的 API 设计哲学决定了它不适合浏览器直连Ollama 的官方 API 文档/api/chat,/api/generate明确标注为HTTP/RESTful 接口面向服务端调用。它的默认监听地址是127.0.0.1:11434这是一个典型的回环地址loopback意味着它只接受来自本机进程的连接且默认绑定在localhost上不对外网开放。更重要的是它的响应头里完全不包含Access-Control-Allow-Origin这类 CORS 相关字段。这不是疏忽而是设计使然浏览器的同源策略Same-Origin Policy是安全基石而让一个本地模型服务直接暴露在浏览器沙箱里等于把模型权重、提示词工程、甚至可能的系统信息全部交到不可信的 JS 执行环境中。Ollama 选择不做 CORS本质上是在说“请用可信的服务端来调用我别让前端裸奔。”你可以强行在浏览器里发请求试试// 前端代码会失败 fetch(http://localhost:11434/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ model: qwen3, messages: [{ role: user, content: 你好 }] }) })控制台立刻报错CORS header Access-Control-Allow-Origin missing。这不是配置问题是架构层级的错配。就像你不能让 Excel 直接读取 SQL Server 的.mdf文件一样Ollama 的 API 不是为浏览器环境设计的协议。2.2 代理层的三种实现方式对比与最终选型既然直连不行就必须引入中间层。常见的方案有三种Nginx 反向代理配置简单性能极高适合生产环境。但开发阶段调试困难——每次改配置都要 reload日志分散无法在请求/响应流中插入自定义逻辑如日志记录、参数校验、超时重试。Node.js Express/Fastify灵活性最强可以用 JS 写任意中间件。但需要额外安装 Node 环境对纯前端同学有学习成本且一个简单的代理服务启动一个完整的 Web 框架显得有点“杀鸡用牛刀”。Python Flask/FastAPI生态丰富异步支持好尤其 FastAPI 的自动文档Swagger UI对调试 API 非常友好。但同样需要 Python 环境且对于只想快速验证流程的同学多一个依赖就多一分放弃的理由。我最终选择一个极简的 Node.js HTTP 代理脚本原因很务实零框架依赖只用 Node.js 自带的http和https模块无需npm install任何第三方包。一行命令启动node proxy.js没有package.json没有node_modules没有版本冲突。调试友好所有请求/响应日志、错误堆栈、耗时统计都直接打印在终端里一目了然。可扩展性强后续要加鉴权、限流、缓存只需在proxy.js里加几行代码逻辑完全透明。这个选择不是技术最优而是落地成本最低、学习曲线最平、出问题时排查路径最短。在本地开发阶段速度和确定性比架构的“完美”重要得多。2.3 完整链路图数据如何从用户点击流向模型输出整个数据流是单向、清晰、可监控的用户浏览器 (Frontend) ↓ (HTTP POST, 同源) 前端应用服务器 (e.g., Vite dev server on http://localhost:5173) ↓ (HTTP POST, 代理到 localhost:11434) Ollama 代理服务 (Node.js, listening on http://localhost:3000) ↓ (HTTP POST, 透传) Ollama 服务 (listening on http://localhost:11434) ↓ (模型推理) Ollama 返回流式响应 (SSE or JSON) ↑ (代理服务接收并转换格式) Ollama 代理服务返回标准 JSON 响应 ↑ (前端应用服务器接收) 前端应用服务器返回给浏览器 ↑ (前端 JS 解析并渲染)关键点在于前端应用Vite/React/Vue和 Ollama 代理服务Node.js是两个独立进程它们通过localhost:3000通信而 Ollama 代理服务和 Ollama 本身也通过localhost:11434通信。这两个连接都是本机回环完全规避了跨域问题。代理服务在这里扮演了“翻译官”的角色它把前端发来的标准 JSON 请求原样转发给 Ollama再把 Ollama 返回的原始流式数据SSE或 JSON包装成前端容易消费的统一格式例如强制转为非流式、添加status字段、捕获404模型不存在错误并返回友好提示。这种分层不是为了炫技而是为了隔离风险。如果 Ollama 崩溃了代理服务可以返回503 Service Unavailable并提示“AI 服务暂时不可用”而不是让前端页面白屏或报一堆Network Error如果用户输入了恶意提示词代理层可以做基础过滤如果模型响应太慢代理层可以设置timeout并提前终止请求避免前端长时间挂起。3. 核心细节解析与实操要点从安装 Ollama 到写完代理脚本3.1 Ollama 安装避开国内网络陷阱的实操步骤Ollama 官网下载慢是绝大多数国内用户遇到的第一个坎。它的安装包macOS 的.pkgWindows 的.exeLinux 的.sh托管在 GitHub Releases而 GitHub 的 CDN 在国内访问不稳定。别急着翻找“国内镜像源”——Ollama 官方从未提供过镜像所谓“国内镜像”大多是个人维护的非官方仓库存在安全风险篡改二进制、植入后门。更稳妥的做法是使用curlsha256sum校验下载这是最安全的方式。以 macOS 为例# 1. 先去 https://github.com/ollama/ollama/releases 查看最新版 tag比如 v0.3.10 # 2. 构造下载链接注意替换版本号 curl -L -o ollama-installer.pkg https://github.com/ollama/ollama/releases/download/v0.3.10/ollama-darwin-universal.pkg # 3. 下载官方提供的校验文件 curl -L -o checksums.txt https://github.com/ollama/ollama/releases/download/v0.3.10/checksums.txt # 4. 提取 ollama-darwin-universal.pkg 的期望 sha256 值 grep ollama-darwin-universal.pkg checksums.txt | awk {print $1} # 5. 计算你下载的文件的实际 sha256 shasum -a 256 ollama-installer.pkg # 6. 两串值完全一致才能双击安装Windows 用户的替代方案如果curl太慢用浏览器打开 GitHub Releases 页面右键“另存为”下载.exe。但务必手动核对checksums.txt中的 SHA256 值。不要用迅雷、IDM 等下载工具它们可能破坏文件完整性。Linux 用户Ubuntu/Debian官方推荐的curl -fsSL https://ollama.com/install.sh | sh在国内大概率超时。改用wget并指定备用镜像注意这是 GitHub 的备用域名非第三方镜像wget https://objects.githubusercontent.com/github-production-release-asset-2e65be/598222122/1b1c1d2e-3f4a-5b6c-7d8e-9f0a1b2c3d4e?X-Amz-AlgorithmAWS4-HMAC-SHA256X-Amz-CredentialAKIAIWNJYAX4CSVEH53A%2F20240520%2Fus-east-1%2Fs3%2Faws4_requestX-Amz-Date20240520T123456ZX-Amz-Expires300X-Amz-Signature... -O ollama-linux-amd64 # 然后 chmod x ollama-linux-amd64 sudo install ollama-linux-amd64 /usr/local/bin/ollama安装完成后必须验证 Ollama 是否真正运行# 检查服务状态macOS/Linux brew services list | grep ollama # macOS Homebrew systemctl status ollama # Linux systemd # 或直接测试 API curl http://localhost:11434 # 应该返回 {models:[]} 或类似 JSON而不是 Connection refused如果返回Connection refused说明 Ollama 进程没起来。常见原因macOS 上安装后需要手动在“系统偏好设置 安全性与隐私 隐私 完全磁盘访问”里给 Ollama 打勾Windows 上需要以管理员身份运行一次安装程序。3.2 模型加载不是所有模型都适合本地前端场景Ollama 的ollama pull命令能拉取上千个模型但并非所有都适合“前端接入”这个场景。你需要同时考虑三个维度体积、速度、效果。体积qwen3:4b约 2.4GB和qwen3:14b约 8.2GB是目前中文能力最强的开源小模型之一。但 8GB 的模型首次加载到显存GPU或内存CPU需要 30 秒以上用户不可能等这么久。我的建议是开发阶段用qwen3:4b生产环境根据硬件选qwen3:7b需 6GB RAM或phi4仅 2.1GB速度快但中文弱。速度qwen3:4b在 M2 MacBook Pro16GB RAM上CPU 模式下首 token 延迟约 1.2 秒后续 token 约 30msGPU 模式开启 Metal下首 token 降到 0.8 秒。而llama3:8b在同样机器上CPU 模式首 token 要 2.5 秒。这意味着如果你的前端 UI 有“打字机效果”逐字显示qwen3:4b的体验会流畅得多。效果qwen3在中文指令遵循、代码生成、数学推理上全面超越llama3同尺寸模型。我做过一个测试让两个模型分别解释“React 的 useEffect 依赖数组为空数组[]代表什么”qwen3:4b的回答准确、简洁、有例子llama3:8b的回答则冗长且有一处技术错误说它“只在组件挂载时执行”漏掉了“卸载时执行 cleanup 函数”。加载命令很简单ollama pull qwen3:4b # 加载后用以下命令确认模型已就绪 ollama list # 输出应包含qwen3:4b latest 2.4GB ...提示ollama run qwen3:4b是交互式测试但它会阻塞终端。开发时更推荐用curl测试 APIcurl http://localhost:11434/api/chat -d { model: qwen3:4b, messages: [{role: user, content: 你好}] }如果返回一大段 JSON且done: true说明模型已加载成功可以进入下一步。3.3 代理脚本编写15 行代码搞定核心逻辑现在我们来写那个最关键的proxy.js。它只有 15 行但每一行都解决一个实际问题const http require(http); const https require(https); const url require(url); // 创建 HTTP 服务器监听 3000 端口 const server http.createServer((req, res) { // 1. 只允许 POST 方法且路径为 /api/chat if (req.method ! POST || req.url ! /api/chat) { res.writeHead(405, { Content-Type: application/json }); return res.end(JSON.stringify({ error: Method Not Allowed })); } // 2. 解析请求体Ollama API 需要完整 JSON let body ; req.on(data, chunk body chunk); req.on(end, () { try { const payload JSON.parse(body); // 3. 构造转发到 Ollama 的请求选项 const options { hostname: localhost, port: 11434, path: /api/chat, method: POST, headers: { Content-Type: application/json } }; // 4. 发起转发请求 const ollamaReq http.request(options, ollamaRes { res.writeHead(ollamaRes.statusCode, ollamaRes.headers); ollamaRes.pipe(res); // 直接透传响应体 }); ollamaReq.on(error, err { console.error(Ollama request failed:, err.message); res.writeHead(500, { Content-Type: application/json }); res.end(JSON.stringify({ error: Ollama service unavailable })); }); ollamaReq.write(body); ollamaReq.end(); } catch (e) { res.writeHead(400, { Content-Type: application/json }); res.end(JSON.stringify({ error: Invalid JSON in request body })); } }); }); server.listen(3000, () console.log(Proxy server running on http://localhost:3000));这段代码的核心逻辑是第 1 步严格限制入口只处理POST /api/chat拒绝其他所有请求这是最基本的安全边界。第 2 步完整读取请求体因为http.IncomingMessage是流不能直接req.body并尝试 JSON 解析。如果解析失败返回400 Bad Request而不是让错误穿透到 Ollama。第 3 步构造一个指向localhost:11434的http.request选项对象。注意这里用的是http不是https因为 Ollama 默认不启用 HTTPS。第 4 步发起请求并用ollamaRes.pipe(res)实现零拷贝透传。这意味着 Ollama 返回的每一个字节都会被实时写入到前端的响应流中没有任何缓冲或修改。这对于流式响应SSE至关重要。保存为proxy.js然后在终端运行node proxy.js。你会看到Proxy server running on http://localhost:3000。现在用curl测试一下代理是否工作curl http://localhost:3000/api/chat -d { model: qwen3:4b, messages: [{role: user, content: 你好}] }如果返回和直接调用localhost:11434一样的 JSON恭喜代理层已经打通。注意这个脚本是开发版它没有处理超时、没有重试、没有日志分级。但在你第一次看到前端页面成功显示模型回复时这 15 行代码的价值远超任何复杂的框架。4. 前端接入与 API 调用从 fetch 到 React Hook 的完整实现4.1 前端调用如何让 React 组件安全、优雅地调用代理 API假设你用的是 Vite React项目结构是标准的src/App.jsx。我们需要创建一个自定义 HookuseOllama它封装了所有与 Ollama 代理的交互逻辑让组件只关心“我要问什么”和“我收到了什么”。首先创建src/hooks/useOllama.jsimport { useState, useCallback } from react; export function useOllama() { const [loading, setLoading] useState(false); const [error, setError] useState(null); const [messages, setMessages] useState([]); // 核心的发送函数 const sendMessage useCallback(async (userMessage) { if (!userMessage.trim()) return; setLoading(true); setError(null); try { // 1. 构造请求体必须包含 model 和 messages const payload { model: qwen3:4b, // 这里硬编码生产环境可从配置读取 messages: [ ...messages, // 历史消息 { role: user, content: userMessage } // 当前用户输入 ] }; // 2. 发送请求到我们的代理服务同源 const response await fetch(http://localhost:3000/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify(payload) }); // 3. 检查 HTTP 状态码 if (!response.ok) { throw new Error(HTTP ${response.status}: ${response.statusText}); } // 4. 解析 JSON 响应 const data await response.json(); // 5. 更新消息列表添加用户消息和 AI 回复 const newMessages [ ...messages, { role: user, content: userMessage }, { role: assistant, content: data.message?.content || 抱歉我没有理解。 } ]; setMessages(newMessages); } catch (err) { console.error(Ollama API call failed:, err); setError(err.message); } finally { setLoading(false); } }, [messages]); return { loading, error, messages, sendMessage }; }这个 Hook 的设计哲学是状态隔离loading、error、messages都是局部状态不会污染全局。错误兜底try/catch捕获所有可能的错误网络失败、HTTP 错误、JSON 解析失败并统一设置error状态让 UI 可以展示友好的错误提示。历史管理messages数组按顺序存储所有对话轮次这是实现“上下文记忆”的基础。Ollama 的/api/chat接口本身就要求传入完整的messages数组所以我们不需要额外的“会话 ID”管理。防抖与空值检查if (!userMessage.trim()) return;避免发送空消息导致 Ollama 返回奇怪的响应。然后在App.jsx中使用它import { useOllama } from ./hooks/useOllama; function App() { const { loading, error, messages, sendMessage } useOllama(); const [inputValue, setInputValue] useState(); const handleSubmit (e) { e.preventDefault(); if (inputValue.trim()) { sendMessage(inputValue); setInputValue(); // 清空输入框 } }; return ( div classNameapp h1Ollama 本地 AI 助手/h1 {/* 消息展示区 */} div classNamemessages {messages.map((msg, i) ( div key{i} className{message ${msg.role}} strong{msg.role user ? 你 : AI}/strong p{msg.content}/p /div ))} {loading div classNamemessage assistantstrongAI/strongp思考中.../p/div} /div {/* 输入表单 */} form onSubmit{handleSubmit} classNameinput-form input typetext value{inputValue} onChange{(e) setInputValue(e.target.value)} placeholder输入你的问题... disabled{loading} / button typesubmit disabled{loading} {loading ? 发送中... : 发送} /button /form {error div classNameerror❌ {error}/div} /div ); } export default App;这个组件实现了实时反馈发送时按钮禁用、显示“发送中...”避免用户重复点击。加载状态在消息列表底部显示“思考中...”让用户知道系统正在工作。错误提示error状态会渲染一个红色的错误框内容来自useOllama的catch块。无障碍访问form和button的语义化标签确保屏幕阅读器能正确识别。实操心得我最初没加disabled{loading}结果用户狂点发送按钮导致多个并发请求涌向代理服务Ollama 直接 OOM内存溢出崩溃。加上这个简单的禁用逻辑是保证本地服务稳定的第一道防线。4.2 关键参数详解model、messages、stream 的取舍Ollama 的/api/chat接口有几个关键参数它们的组合直接影响用户体验参数类型必填说明前端实践建议modelstring✅模型名称必须和ollama list中的一致开发期硬编码生产期可做成下拉选择动态切换模型messagesarray✅对话历史数组每个元素是{role, content}必须传入完整历史Ollama 不维护会话状态这是实现“上下文”的唯一方式streamboolean❌是否流式响应默认true前端开发强烈建议设为false。流式SSE需要前端用EventSource或ReadableStream处理复杂度陡增非流式返回一个完整 JSONawait response.json()一行搞定为什么stream: false是更优解简化前端逻辑流式响应需要监听message事件拼接content字段还要处理done: true的结束信号。而非流式响应data.message.content就是最终答案拿来即用。降低调试难度流式响应中如果某个message事件丢失前端会卡住而非流式要么成功拿到完整 JSON要么失败抛错边界清晰。兼容性更好EventSource在某些旧版浏览器如 IE中不支持fetch的ReadableStreamAPI 也需要较新版本。fetch().json()的兼容性几乎是 100%。当然牺牲了“打字机效果”。但作为 MVP最小可行产品功能可用性永远优先于视觉动效。等核心链路跑通后再用stream: trueTextDecoderStream实现流式才是正确的演进路径。另一个重要参数是options它可以控制模型行为{ model: qwen3:4b, messages: [...], options: { temperature: 0.7, num_ctx: 4096, num_predict: 512 } }temperature: 控制随机性0.0最确定适合代码生成1.0最随机适合创意写作。前端可提供滑块让用户调节。num_ctx: 上下文窗口长度qwen3:4b默认是 128k但本地运行时增大此值会显著增加内存占用。4096是一个平衡点。num_predict: 最大生成 token 数防止模型无限输出。512足够回答大多数问题。这些参数都可以作为useOllamaHook 的可配置项通过useCallback的依赖数组更新实现动态调整。4.3 生产环境部署注意事项从 localhost 到真实服务器当你的本地 demo 跑通后下一步往往是部署到公司内网服务器供团队使用。这时几个关键点必须调整Ollama 绑定地址默认ollama serve只监听127.0.0.1:11434。要让内网其他机器访问必须修改为0.0.0.0:11434。方法是# Linux/macOS创建配置文件 echo OLLAMA_HOST0.0.0.0:11434 ~/.ollama/config.json # 然后重启 ollama 服务 brew services restart ollama # macOS systemctl restart ollama # Linux警告0.0.0.0意味着所有网络接口都开放切勿在公网服务器上这么做。只应在受信任的内网环境启用。代理服务监听地址你的proxy.js默认监听localhost:3000。在服务器上需要改成0.0.0.0:3000并在http.createServer的listen方法中指定server.listen(3000, 0.0.0.0, () console.log(Proxy server running on http://0.0.0.0:3000));前端构建与反向代理Vite 开发时用http://localhost:3000但生产构建npm run build后静态文件由 Nginx/Apache 托管。此时前端的fetch请求会变成http://your-server.com/api/chat。你需要在 Nginx 配置中将/api/chat路径反向代理到http://localhost:3000/api/chatlocation /api/chat { proxy_pass http://localhost:3000/api/chat; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }这样前端代码完全不用改fetch(/api/chat)就能工作。资源监控Ollama 是内存大户。在服务器上务必用htop或top监控ollama进程的 RSS常驻内存占用。qwen3:4b在 CPU 模式下通常占用 4~5GB RAM如果服务器只有 8GB再跑个数据库很容易 swap。解决方案是在proxy.js中加入内存检查当 Ollama 响应超时 30s主动 kill 掉它并重启// 在 ollamaReq.on(error) 之后添加 const timeoutId setTimeout(() { ollamaReq.destroy(); res.writeHead(504, { Content-Type: application/json }); res.end(JSON.stringify({ error: Request timeout })); }, 30000); ollamaReq.on(response, () clearTimeout(timeoutId));5. 常见问题与排查技巧实录那些让你抓狂的 10 分钟5.1 “Fetch failed: TypeError: Failed to fetch” —— 最常见的跨域幻觉现象前端控制台报Failed to fetch但你确信代理服务在运行。原因分析这不是跨域问题而是fetch 请求根本没发出去。常见于代理服务没启动node proxy.js没运行或者运行后崩溃了检查终端是否有SyntaxError。URL 写错了fetch(http://localhost:3000/api/chat)写成fetch(http://localhost:3001/api/chat)。前端开发服务器Vite和代理服务Node.js端口冲突两个进程都在监听3000后者会失败。排查步骤在浏览器地址栏直接访问http://localhost:3000/api/chat看是否返回Method Not Allowed说明代理服务起来了。如果返回Unable to connect说明proxy.js没运行或者端口被占用了。在终端运行lsof -i :3000macOS/Linux或netstat -ano | findstr :3000Windows看哪个 PID 占用了 3000 端口kill -9 PID干掉它。实操心得我曾经为此浪费 20 分钟最后发现是 VS Code 的一个插件Live Server默认占用了 3000 端口。从此我的代理服务固定用3001前端开发服务器用5173彻底规避冲突。5.2 “Ollama returned 404: model not found” —— 模型名大小写与冒号陷阱现象curl http://localhost:11434/api/chat返回{error:model not found}。原因ollama list显示的模型名是qwen3:4b但你在请求体里写了model: qwen3或model: Qwen3:4b。Ollama 的模型名是严格区分大小写和冒号后缀的。排查步骤运行ollama list复制输出中完整、精确的模型名。在curl命令中用单引号包裹 JSON避免 shell 解析冒号# ✅ 正确单引号保护整个 JSON 字符串 curl http://localhost:11434/api/chat -d { model: qwen3:4b, messages: [{role: user, content: 你好}] } # ❌ 错误双引号会被 shell 解析冒号可能出问题 curl http://localhost:11434/api/chat -d { \model\: \qwen3:4b\, \messages\: [{\role\: \user\, \content\: \你好\}] }5.3 “Response is not JSON” —— 流式响应与 Content-Type 的战争现象await response.json()报错Unexpected end of JSON input。原因Ollama 默认 stream
RELATED

相关推荐

MFC俄罗斯方块实战:消息循环、矩阵旋转与双缓冲绘图

MFC俄罗斯方块实战:消息循环、矩阵旋转与双缓冲绘图

简介:本资源是一套基于MFC框架实现的完整俄罗斯方块游戏源码工程,面向C初学者及Windows桌面应用开发学习者,聚焦于经典游戏逻辑与MFC GUI编程的结合实践。项目涵盖方块类(CBlock)、游戏板类(CGameBoard&…

📅 2026/9/14 3:20:35
使用 NiceGUI 与 WebSerial API 实现浏览器直连串口设备通信

使用 NiceGUI 与 WebSerial API 实现浏览器直连串口设备通信

使用 NiceGUI 与 WebSerial API 实现浏览器直连串口设备通信 【免费下载链接】nicegui Create web-based user interfaces with Python. The nice way. 项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui 导读 本篇文章基于 NiceGUI 仓库中的 examples/webser…

📅 2026/9/14 3:15:35
Vue3+ECharts+DataV可二次开发可视化大屏系统

Vue3+ECharts+DataV可二次开发可视化大屏系统

简介:这是一套基于Vue.js构建的高可用数据可视化系统源码,面向前端开发者、数据可视化初学者及企业级大屏项目实践者,解决动态图表集成、多组件协同渲染与专业级大屏快速落地等核心问题。资源包共107个文件,涵盖19个Vue组件&#…

📅 2026/9/14 3:15:35
MORE NEWS

更多资讯

📰

Java实现字符串全排列:递归与回溯方法详解

1. 字符串全排列问题概述字符串全排列是计算机科学中一个经典的问题,它要求我们找出给定字符串所有可能的排列组合。比如字符串"abc"的全排列有:abc, acb, bac, bca, cab, cba这6种。这个问题看似简单,但在实际实现中却蕴含着许多值…

📰

STM32CubeMX:嵌入式AI开发的工程基座与AI就绪配置

1. 这不是“装个软件”那么简单:STM32CubeMX在嵌入式AI编程中的真实定位很多人点开这个标题,第一反应是:“哦,又一个安装教程”。但如果你真这么想,我建议你先暂停两分钟——把鼠标移开,倒杯水,…

📰

C++常用数据结构与STL函数实战解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

多模态视觉大模型开发实战:从CLIP到LoRA微调与落地

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

蜣螂优化算法(DBO)在机器人路径规划中的Python实现

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

📰

ALLEMOTION 2.4.0 WebSocket协议栈深度拆解:从握手鉴权到工程实践

上周帮一个做AGV调度系统的朋友排查连接闪断问题,聊到一半他又提起了检信ALLEMOTION 2.4.0里的WebSocket协议栈。这个项目在工业物联网圈子不算大众,但凡是做运动控制、设备检测、实时状态上报的人,多少都听过它的大名。我最初接触这个项目&a…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬