Midscene.js自然語言驅動的網頁自動化全指南

一、概述

網頁自動化在數據抓取、UI 測試和業務流程優化中發揮著重要作用。然而，傳統工具如 Selenium 和 Puppeteer 要求用戶具備編程技能，編寫復雜的選擇器和腳本維護成本高昂。Midscene.js 通過自然語言接口革新了這一領域，用戶只需描述任務（如“點擊登錄按鈕”或“提取產品價格”），AI 即可自動執行，大幅降低技術門檻。

Midscene.js 由 web-infra-dev 團隊開發，開源于 GitHub（GitHub - web-infra-dev/midscene），采用 MIT 許可。它支持多種 AI 模型，集成 Puppeteer 和 Playwright，提供豐富的功能。本文基于官網（Midscene.js）內容，全面解析其功能、模型、案例、技術細節和優化建議，為開發者提供詳盡指南。

二、安裝與配置

2.1. npm 安裝

Midscene.js 提供兩個包：

  • @midscene/web：支持瀏覽器自動化，集成 Puppeteer/Playwright。
  • @midscene/core：核心功能，適合輕量級場景。
npm install @midscene/web

配置 GPT-4o：

import { overrideAIConfig } from '@midscene/web';
// 配置 AI 模型和密鑰
overrideAIConfig({OPENAI_API_KEY: '你的密鑰', // OpenAI API 密鑰，用于訪問 GPT-4omodel: 'gpt-4o' // 默認使用 GPT-4o 模型
});

本地模型（如 UI-TARS）：

// 配置本地運行的 UI-TARS 模型
overrideAIConfig({model: 'ui-tars', // 開源 UI 自動化模型endpoint: 'http://localhost:5000' // 本地服務地址
});
2.1.1.環境要求

建議 Node.js 18+，安裝時確保網絡暢通以拉取依賴。

2.2. Chrome 擴展

通過 Chrome Web Store 安裝，提供無代碼體驗，直接在網頁輸入指令即可運行。

2.2.1. 使用步驟
  1. 訪問 Chrome Web Store，點擊“添加至 Chrome”。
  2. 在瀏覽器右上角擴展圖標中輸入指令，如“提取頁面標題”。

2.3.環境變量與高級配置

支持環境變量：

  • MIDSCENE_OPENAI_API_KEY：密鑰。
  • MIDSCENE_LANGSMITH_DEBUG：調試模式（1）。
  • MIDSCENE_CACHE：啟用緩存（1）。

運行時配置：

// 高級配置示例
overrideAIConfig({OPENAI_API_KEY: '你的密鑰', // 設置 API 密鑰model: 'gpt-4o', // 指定模型cache: true, // 啟用緩存以提升性能timeout: 20000, // 設置超時時間為 20 秒logLevel: 'verbose' // 設置詳細日志級別
});
2.2.1. 本地部署

運行 UI-TARS：

docker run -p 5000:5000 ui-tars:latest # 啟動 Docker 容器運行 UI-TARS 服務

配置：

// 配置本地模型連接
overrideAIConfig({model: 'ui-tars',endpoint: 'http://localhost:5000'
});

三、核心功能詳解

3.1. 自然語言交互（aiAction）

通過自然語言執行操作：

// 在搜索框輸入并點擊搜索按鈕
await agent.aiAction('在頁面頂部的搜索框中輸入 "JavaScript"，然后點擊旁邊的搜索按鈕');
使用技巧
  • 具體性：指令越詳細越好，如“點擊右上角的紅色按鈕”。
  • 多步驟：支持連續操作：
// 完整登錄流程
await agent.aiAction('前往 https://example.com/login'); // 訪問登錄頁面
await agent.aiAction('在用戶名輸入框中輸入 "user123"'); // 輸入用戶名
await agent.aiAction('在密碼輸入框中輸入 "pass123"'); // 輸入密碼
await agent.aiAction('點擊 "登錄" 按鈕'); // 點擊登錄按鈕

3.2. 數據提取（aiQuery）

提取結構化數據：

// 提取頁面時間
const data = await agent.aiQuery({time: '頁面左上角顯示的日期和時間，格式為字符串' // 定義提取目標
});
console.log(data); // 輸出：{ time: "2025-03-22 10:00 AM" }

復雜提取：

// 提取產品信息
const product = await agent.aiQuery({name: '產品名稱，字符串格式', // 商品名稱price: '產品價格，數字格式', // 商品價格stock: '庫存狀態，布爾值' // 是否有貨
});
console.log(product); // 輸出：{ name: "iPhone 15", price: 999, stock: true }
動態提取
const item = 'Sauce Labs Onesie'; // 定義商品名稱變量
// 根據變量提取價格
const price = await agent.aiQuery({price: `"${item}" 的價格，數字格式` // 動態生成查詢條件
});
console.log(price); // 輸出：{ price: 7.99 }

3.3. 條件斷言（aiAssert）

驗證頁面狀態：

// 驗證價格是否正確
await agent.aiAssert('"Sauce Labs Onesie" 的價格是 7.99');

復雜條件：

// 檢查購物車狀態
await agent.aiAssert('購物車中的商品數量大于 3'); // 驗證數量
await agent.aiAssert('"結賬" 按鈕可見且可用'); // 驗證按鈕狀態
錯誤處理
try {// 執行斷言await agent.aiAssert('頁面顯示 "登錄成功"');
} catch (e) {console.error('斷言失敗:', e.message); // 輸出錯誤信息
}

3.4. 等待條件（aiWaitFor）

等待特定狀態：

// 等待加載完成
await agent.aiWaitFor('加載動畫不再可見', {timeout: 30000, // 設置超時為 30 秒interval: 5000 // 每 5 秒檢查一次
});
結合操作
// 等待并執行
await agent.aiWaitFor('搜索結果已加載'); // 確保結果加載完成
await agent.aiAction('點擊第一個搜索結果'); // 點擊第一個結果

3.5. YAML 腳本（runYaml）

批量任務：

steps:- action: '點擊登錄按鈕' # 點擊登錄按鈕- action: '在用戶名輸入框中輸入 "user123"' # 輸入用戶名- action: '在密碼輸入框中輸入 "pass123"' # 輸入密碼- action: '點擊提交按鈕' # 提交表單

執行：

// 運行 YAML 腳本
await agent.runYaml('path/to/script.yaml');
復雜腳本
steps:- action: '前往 https://shop.com' # 訪問電商網站- waitFor: '產品列表已加載' # 等待產品加載- query:products: '頁面所有產品名稱和價格，格式為數組 {name: string, price: number}' # 提取產品數據- assert: '"iPhone 15" 的價格低于 1000' # 驗證價格

3.6. 可視化調試

生成動畫和報告：

// 啟用 LangSmith 調試模式
process.env.MIDSCENE_LANGSMITH_DEBUG = '1'; // 設置環境變量以輸出詳細日志
await agent.aiAction('點擊 "注冊" 按鈕'); // 執行操作并生成調試報告
調試輸出

報告示例：

  • “定位到 ID 為 signup 的按鈕”
  • “點擊坐標 (x: 100, y: 50)，耗時 300ms”

四、支持的 AI 模型

4.1. GPT-4o

  • 特點：OpenAI 多模態模型，支持文本和圖像處理。
  • 適用：通用自動化任務。
  • 配置：
// 配置 GPT-4o 模型
overrideAIConfig({model: 'gpt-4o', // 模型名稱OPENAI_API_KEY: '你的密鑰' // OpenAI API 密鑰
});
  • 限制：無法操作跨域 iframe 或 canvas。

4.2. UI-TARS

  • 特點：開源，支持圖像識別和拖拽。
  • 適用：復雜 UI 交互。
  • 配置：
// 配置本地 UI-TARS 模型
overrideAIConfig({model: 'ui-tars', // 模型名稱endpoint: 'http://localhost:5000' // 本地服務地址
});

4.3. Qwen2.5-VL

  • 特點：阿里云視覺語言模型，擅長圖像和文本混合處理。
  • 適用：圖像相關任務。
  • 配置：
// 配置本地 Qwen2.5-VL 模型
overrideAIConfig({model: 'qwen2.5-vl', // 模型名稱endpoint: 'http://localhost:6000' // 本地服務地址
});
模型對比
模型優點缺點適用場景
GPT-4o易用、多模態、性能穩定云依賴、跨域限制快速原型、通用任務
UI-TARS本地部署、支持拖拽、隱私友好配置復雜企業應用、復雜 UI
Qwen2.5-VL視覺能力強、無跨域限制部署需技術支持圖像處理、隱私敏感任務

五、實際應用案例

5.1. 社交媒體自動化

自動發布 X 帖子：

// 自動發帖流程
await agent.aiAction('點擊 "發帖" 按鈕'); // 打開發帖框
await agent.aiAction('在文本框中輸入 "Midscene.js 真好用！"'); // 輸入內容
await agent.aiAction('點擊 "發布" 按鈕'); // 提交帖子

定時發帖：

const cron = require('node-cron');
// 每天凌晨定時發帖
cron.schedule('0 0 * * *', async () => {await agent.aiAction('發布一條帖子，內容為 "每日更新 by Midscene.js"'); // 定時發布
});

5.2. 數據收集

收集音樂會信息：

// 訪問網站并提取數據
await agent.aiAction('前往 https://concert-site.com'); // 打開音樂會網站
const concertData = await agent.aiQuery({event: '音樂會名稱', // 提取活動名稱date: '音樂會日期', // 提取活動日期location: '舉辦地點' // 提取活動地點
});
console.log(concertData); // 輸出結果

5.3. 測試與驗證

驗證電商價格：

// 檢查價格和按鈕狀態
await agent.aiAssert('"iPhone 15" 的價格低于 1000 美元'); // 驗證價格
await agent.aiAssert('"加入購物車" 按鈕可見且可用'); // 驗證按鈕狀態

5.4. 電商價格監控

監控產品價格：

async function monitorPrice() {// 訪問產品頁面await agent.aiAction('前往 https://shop.com/product/123');// 提取當前價格const priceData = await agent.aiQuery({price: '當前產品價格，數字格式' // 獲取價格});console.log(`當前價格: ${priceData.price}`);// 檢查價格是否低于閾值if (priceData.price < 800) {console.log('價格低于 800，發送通知！');// 可集成郵件通知}
}
// 每小時檢查一次
setInterval(monitorPrice, 60 * 60 * 1000);
保存歷史價格
const fs = require('fs');
// 保存價格歷史到 CSV 文件
async function savePriceHistory() {const priceData = await agent.aiQuery({price: '當前產品價格，數字格式' // 提取價格});const record = `${new Date().toISOString()},${priceData.price}\n`; // 格式化記錄fs.appendFileSync('price_history.csv', record); // 追加到文件
}
setInterval(savePriceHistory, 60 * 60 * 1000); // 每小時執行

5.5. 表單自動填寫

自動填寫注冊表單：

async function autoFillForm() {// 訪問注冊頁面await agent.aiAction('前往 https://example.com/register');// 等待表單加載await agent.aiWaitFor('注冊表單已加載'); // 確保表單可見// 填寫表單字段await agent.aiAction('在用戶名輸入框中輸入 "testuser"'); // 輸入用戶名await agent.aiAction('在郵箱輸入框中輸入 "test@example.com"'); // 輸入郵箱await agent.aiAction('在密碼輸入框中輸入 "Password123"'); // 輸入密碼// 提交表單await agent.aiAction('點擊 "提交" 按鈕'); // 提交表單// 驗證結果await agent.aiAssert('頁面顯示 "注冊成功"'); // 檢查注冊是否成功
}
autoFillForm().catch(console.error);
批量填寫
const users = [{ username: 'user1', email: 'user1@example.com', password: 'Pass1' },{ username: 'user2', email: 'user2@example.com', password: 'Pass2' }
];
// 批量注冊多個用戶
for (const user of users) {await agent.aiAction(`在用戶名輸入框中輸入 "${user.username}"`); // 輸入用戶名await agent.aiAction(`在郵箱輸入框中輸入 "${user.email}"`); // 輸入郵箱await agent.aiAction(`在密碼輸入框中輸入 "${user.password}"`); // 輸入密碼await agent.aiAction('點擊 "提交" 按鈕'); // 提交表單
}

5.6. 動態網頁抓取

抓取動態加載內容：

async function scrapeDynamicContent() {// 訪問動態網頁await agent.aiAction('前往 https://dynamic-site.com');// 等待內容加載await agent.aiWaitFor('動態內容已加載', { timeout: 60000 }); // 等待 60 秒// 提取文章標題和摘要const articles = await agent.aiQuery({articles: '頁面所有文章標題和摘要，格式為數組 {title: string, summary: string}' // 提取動態數據});console.log(articles);// 保存到 JSON 文件fs.writeFileSync('articles.json', JSON.stringify(articles, null, 2)); // 寫入文件
}
scrapeDynamicContent().catch(console.error);
處理分頁
async function scrapeAllPages() {let page = 1;const allArticles = [];while (true) {// 等待當前頁面加載await agent.aiWaitFor(`第 ${page} 頁內容已加載`); // 確保頁面加載完成// 提取數據const articles = await agent.aiQuery({articles: '當前頁面所有文章標題，格式為數組 {title: string}' // 提取標題});allArticles.push(...articles.articles); // 追加到總數組// 檢查是否有下一頁const hasNext = await agent.aiQuery({hasNext: '是否存在 "下一頁" 按鈕，布爾值' // 檢查分頁按鈕});if (!hasNext.hasNext) break; // 無下一頁則退出// 點擊下一頁await agent.aiAction('點擊 "下一頁" 按鈕'); // 翻頁page++;}console.log(`共抓取 ${allArticles.length} 篇文章`); // 輸出總數
}
scrapeAllPages();

5.7. 自動化客服

模擬客服回復：

async function autoReply() {// 訪問客服頁面await agent.aiAction('前往 https://support.com/chat');// 等待新消息await agent.aiWaitFor('新客戶消息出現'); // 等待消息加載// 獲取消息內容const message = await agent.aiQuery({message: '最新客戶消息，字符串格式' // 提取最新消息});// 根據消息內容回復if (message.message.includes('價格')) {await agent.aiAction('在回復框中輸入 "我們的價格請查看官網"'); // 回復價格問題} else {await agent.aiAction('在回復框中輸入 "請稍等，我為您查詢"'); // 默認回復}await agent.aiAction('點擊 "發送" 按鈕'); // 發送回復
}
// 每分鐘檢查一次
setInterval(autoReply, 60 * 1000);
多語言支持
async function replyInLanguage(lang) {const message = await agent.aiQuery({message: '最新客戶消息，字符串格式' // 獲取最新消息});// 根據語言回復if (lang === 'zh') {await agent.aiAction(`在回復框中輸入 "感謝您的消息，請稍等"`);} else {await agent.aiAction(`在回復框中輸入 "Thank you for your message, please wait"`);}await agent.aiAction('點擊 "發送" 按鈕'); // 發送回復
}
replyInLanguage('zh'); // 中文回復

六、技術細節與集成

Puppeteer 集成

const puppeteer = require('puppeteer');
const { Midscene } = require('@midscene/web');
// 啟動瀏覽器
const browser = await puppeteer.launch({ headless: true }); // 無頭模式運行
const page = await browser.newPage();
const agent = new Midscene(page); // 創建 Midscene 實例
// 執行操作
await agent.aiAction('前往 https://example.com'); // 訪問頁面
await agent.aiAction('點擊 "注冊" 按鈕'); // 點擊注冊按鈕
自定義配置
// 配置代理和無頭模式
const browser = await puppeteer.launch({headless: true, // 無頭模式args: ['--proxy-server=http://proxy:8080'] // 設置代理
});

緩存機制

提升性能：

// 啟用默認內存緩存
overrideAIConfig({ cache: true });
// 自定義文件緩存
const fs = require('fs');
overrideAIConfig({cache: {get: (key) => fs.readFileSync(`cache/${key}.json`, 'utf8'), // 從文件讀取緩存set: (key, value) => fs.writeFileSync(`cache/${key}.json`, value) // 保存到文件}
});
緩存清理
// 每天清理緩存
setInterval(() => {fs.rmSync('cache', { recursive: true, force: true }); // 刪除緩存目錄console.log('緩存已清理');
}, 24 * 60 * 60 * 1000); // 每天執行一次

數據隱私

本地部署 Qwen2.5-VL：

docker run -p 6000:6000 qwen2.5-vl:latest # 啟動 Qwen2.5-VL 服務

配置：

// 使用本地模型保護隱私
overrideAIConfig({model: 'qwen2.5-vl',endpoint: 'http://localhost:6000'
});
隱私驗證
// 測試數據是否外泄
await agent.aiAction('在輸入框中輸入 "敏感數據"');
console.log('檢查本地服務日志，確保數據未上傳云端');

七、限制與優化

限制

  • 交互類型：僅支持點擊、輸入、滾動等，拖拽限于 UI-TARS。
  • AI 穩定性：自然語言解析可能出錯。
  • 跨域限制：GPT-4o 無法操作跨域 iframe。

優化建議

  • 提示優化：用“點擊藍色提交按鈕”代替“點擊按鈕”。
  • 重試機制：
async function retryAction(action, retries = 3) {for (let i = 0; i < retries; i++) {try {// 執行操作await agent.aiAction(action);return;} catch (e) {console.warn(`第 ${i + 1}/${retries} 次重試: ${e.message}`); // 輸出重試信息await new Promise(resolve => setTimeout(resolve, 1000)); // 等待 1 秒}}throw new Error('操作失敗'); // 重試失敗拋出錯誤
}
// 重試點擊操作
await retryAction('點擊 "提交" 按鈕');
性能監控
// 記錄執行時間
const start = Date.now();
await agent.aiAction('點擊 "搜索" 按鈕');
console.log(`執行時間: ${Date.now() - start}ms`); // 輸出耗時
并行處理
// 并行執行多個任務
const tasks = [agent.aiAction('點擊 "產品" 菜單'),agent.aiAction('點擊 "關于我們" 菜單')
];
await Promise.all(tasks); // 同時執行多個操作

八、社區生態與貢獻

Midscene.js 的開源特性促成了活躍社區：

  • 示例：X 發帖、數據收集（見 GitHub）。
  • 問題跟蹤：通過 GitHub Issues 提交 bug。
  • 貢獻：添加新模型或功能。

貢獻步驟

  1. Fork 倉庫。
  2. 修改代碼，例如添加模型：
// 添加自定義模型
overrideAIConfig({model: 'my-model',endpoint: 'http://my-server:8000'
});
  1. 提交 Pull Request。
社區案例

用戶貢獻的 YAML 示例：

steps:- action: '前往 https://news.com' # 訪問新聞網站- query:headlines: '頭條新聞標題，格式為數組 {title: string}' # 提取頭條

九、參考資料

  • Midscene.js 官網
  • GitHub 倉庫
  • API 文檔
  • 模型選擇

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/73394.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/73394.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/73394.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

winstart.wsf 病毒清理大作戰

winstart.wsf 病毒清理大作戰

0x00 背景 發現感染了winstart.wsf 病毒如何清理。 0x01 現象 遍歷Users下每個目錄以及C:\和C:\Windows\Temp 2個目錄寫入病毒文件。 C:\Users\Administrator\AppData\Local\Temp\winstart.wsf C:\Users\Administrator\AppData\Roaming\Microsoft\Windows\Start Menu\Program…
閱讀更多...
多路轉接Poll

多路轉接Poll

在之前我們講過select是最古老的多路轉接方案&#xff0c;古老就意味著他不是很方便使用&#xff0c;他需要用戶手動保存fd_set這個位圖結構&#xff0c;來表示讀寫事件的關注與否或者就緒性。 而且由于fd_set的大小是固定的&#xff0c;這就意味著他能管理的套接字文件描述符是…
閱讀更多...
多層感知機的簡潔實現

多層感知機的簡潔實現

《動手學深度學習》-4.3-筆記 import torch from torch import nn from d2l import torch as d2l 導入必要的庫和模塊 net nn.Sequential(nn.Flatten(),nn.Linear(784, 256),nn.ReLU(),nn.Linear(256, 10))def init_weights(m):if type(m) nn.Linear:nn.init.normal_(m.we…
閱讀更多...
【GoLang】調用llm時提示詞prompt的介紹以及使用方式

【GoLang】調用llm時提示詞prompt的介紹以及使用方式

介紹 提示詞是一種與大模型交互的對話格式&#xff0c;它以 JSON 格式定義了一個消息列表&#xff08;messages&#xff09;&#xff0c;包含了系統消息和用戶消息。 我們向AI提問時&#xff0c;其實發給AI的都是提示詞&#xff0c;別看我們只是簡單輸入了一句話&#xff0c;…
閱讀更多...
內核編程十二：打印task_struct中的數據

內核編程十二：打印task_struct中的數據

在Linux內核中&#xff0c;current 是一個宏&#xff0c;用于獲取當前正在執行的進程的 task_struct 結構體指針。current 宏返回一個指向當前正在運行的進程的 task_struct 結構體的指針。通過這個指針&#xff0c;內核代碼可以訪問和修改當前進程的各種屬性和狀態。 打印單個…
閱讀更多...
區間端點（java）(貪心問題————區間問題)

區間端點（java）(貪心問題————區間問題)

deepseek給了一種超級簡單的做法 我是真的想不到 貪心的思路是 局部最優——>全局最優 這種我是真的沒有想到&#xff0c;這樣的好處就是后面便利的時候可以通過foreach循環直接便利qu的子元素也就是對應的某一個區間, 將一個二維數組變成一維數組&#xff0c;每一個一維…
閱讀更多...
Qt事件處理（處理鼠標事件、鍵盤事件、定時器事件、窗口移動和大小變化事件）

Qt事件處理（處理鼠標事件、鍵盤事件、定時器事件、窗口移動和大小變化事件）

事件處理 事件是應用程序內部或者外部產生的事情或者動作的統稱。 在 Qt 中&#xff0c;事件是用一個對象來管理一個事件的。所有的事件對象都繼承自抽象類 QEvent 。事件包括鼠標事件、鍵盤事件等&#xff0c;發出自 Qt 或操作系統本身。 處理事件一般通過重寫相關的 Event 函…
閱讀更多...
Apache Hive：基于Hadoop的分布式數據倉庫

Apache Hive：基于Hadoop的分布式數據倉庫

Apache Hive 是一個基于 Apache Hadoop 構建的開源分布式數據倉庫系統&#xff0c;支持使用 SQL 執行 PB 級大規模數據分析與查詢。 主要功能 Apache Hive 提供的主要功能如下。 HiveServer2 HiveServer2 服務用于支持接收客戶端連接和查詢請求。 HiveServer2 支持多客戶端…
閱讀更多...
利用 @eslint/eslintrc 實現 ESLint9的適配

利用 @eslint/eslintrc 實現 ESLint9的適配

深度解析&#xff1a;利用 eslint/eslintrc 實現 ESLint 的高效配置管理 在前端開發領域&#xff0c;代碼質量和一致性是至關重要的。ESLint 作為一款流行的代碼檢查工具&#xff0c;幫助開發者發現代碼中的潛在問題并保持代碼風格的一致性。而隨著項目的復雜度增加和團隊規模…
閱讀更多...
cfca 申請國密證書流程

cfca 申請國密證書流程

之前給某銀行開發項目&#xff0c;需要用到cfca國密雙證證書&#xff0c;證書類型為企業雙證的作為接口加密的密鑰。 因為是第一次對接&#xff0c;其中走了不少的彎路&#xff0c;現將申請的流程發布出來做下記錄 1、需要找到cfca的相關人員進行測試證書的申請 2、大概1天的…
閱讀更多...
基于Spring Boot的鄉村養老服務管理系統的設計與實現（LW+源碼+講解）

基于Spring Boot的鄉村養老服務管理系統的設計與實現（LW+源碼+講解）

專注于大學生項目實戰開發,講解,畢業答疑輔導&#xff0c;歡迎高校老師/同行前輩交流合作?。 技術范圍&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬蟲、數據可視化、安卓app、大數據、物聯網、機器學習等設計與開發。 主要內容&#xff1a;…
閱讀更多...
數字孿生技術如何為制造業開辟新天地？

數字孿生技術如何為制造業開辟新天地？

1. 數字孿生在制造業的崛起背景 1.1 數字孿生的概念演進 “數字孿生”（Digital Twin）一詞最早由美國密歇根大學Michael Grieves博士在2002年提出，但當時并未稱之為“數字孿生”，而是以“信息鏡像模型”描述數字世界與物理世界的映射關系。直到2010年前后，美軍、NASA等在…
閱讀更多...
學一個前端 UI 框架，要學些什么內容？

學一個前端 UI 框架，要學些什么內容？

假如你現在要自學 React/Vue 框架&#xff0c;怎么學&#xff1f; 絕大部分同學可能是這樣學的&#xff1a; 直接去看官方文檔&#xff0c;或者是找一些視頻看一遍&#xff0c;學會這個框架的一些基礎語法&#xff0c;特性功能等等參考一些例子上手編寫 demo&#xff0c;簡單…
閱讀更多...
asp.net core mvc模塊化開發

asp.net core mvc模塊化開發

razor類庫 新建PluginController using Microsoft.AspNetCore.Mvc;namespace RazorClassLibrary1.Controllers {public class PluginController : Controller{public IActionResult Index(){return View();}} }Views下Plugin下新建Index.cshtml {ViewBag.Title "插件頁…
閱讀更多...
2024年MathorCup數學建模C題物流網絡分揀中心貨量預測及人員排班解題全過程文檔加程序

2024年MathorCup數學建模C題物流網絡分揀中心貨量預測及人員排班解題全過程文檔加程序

2024年第十四屆MathorCup高校數學建模挑戰賽 C題 物流網絡分揀中心貨量預測及人員排班 原題再現&#xff1a; 電商物流網絡在訂單履約中由多個環節組成&#xff0c;圖1是一個簡化的物流網絡示意圖。其中&#xff0c;分揀中心作為網絡的中間環節&#xff0c;需要將包按照不同流…
閱讀更多...
鴻蒙Flutter開發故事：不，你不需要鴻蒙化

鴻蒙Flutter開發故事：不，你不需要鴻蒙化

在華為牽頭下&#xff0c;Flutter 鴻蒙化如火如荼進行&#xff0c;當第一次看到一份上百個插件的Excel 列表時&#xff0c;我也感到震驚&#xff0c;排名前 100 的插件赫然在列&#xff0c;這無疑是一次大規模的軍團作戰。 然后&#xff0c;參戰團隊魚龍混雜&#xff0c;難免有…
閱讀更多...
Unity音頻混合器如何暴露參數

Unity音頻混合器如何暴露參數

音頻混合器是Unity推薦管理音效混音的工具&#xff0c;那么如何使用代碼對它進行管理呢&#xff1f; 首先我在AudioMixer的Master組中創建了BGM和SFX的分組&#xff0c;你也可以直接用Master沒有問題。 這里我以BGM為例&#xff0c;如果要在代碼中進行使用就需要將參數暴露出去…
閱讀更多...
Vue項目與云管平臺Nginx部署筆記

Vue項目與云管平臺Nginx部署筆記

Vue項目與云管平臺Nginx部署筆記 一、項目架構說明 footAdmin云管前端 Vue2 Webpack 構建&#xff0c;部署路徑&#xff1a;/usr/share/nginx/html/footAdmin 使用npm run build生成/dist目錄&#xff0c;然后將dist目錄下面的所有文件&#xff0c;上傳到虛擬機/usr/share/n…
閱讀更多...
java常用數據轉換

java常用數據轉換

1. List與數組互轉 ArrayList<String> list new ArrayList<>(); String[] array list.stream().toArray(String[]::new); String[] array1 {"apple", "banana", "orange"}; List<String> list1 Arrays.stre…
閱讀更多...
JAVA學習--java數組--打印稀疏數組和稀疏數組的還原

JAVA學習--java數組--打印稀疏數組和稀疏數組的還原

1.題目描述 2.代碼實現 打印二維數組 public class test04 {public static void main(String args[]){//1.創建一個二維數組11*11&#xff0c;0代表沒有棋子&#xff0c;1代表黑&#xff0c;2代表白棋int[][] array1new int[11][11];array1[1][2]1;array1[2][3]2;//輸出原…
閱讀更多...
最新文章

Copyright @ 2022~2023