首頁 web前端 js教程 使用MATLAB和MEAN堆棧創建Web應用程序

使用MATLAB和MEAN堆棧創建Web應用程序

Feb 19, 2025 pm 01:22 PM

Creating a Web App with MATLAB and the MEAN Stack

核心要點

  • MATLAB,一種用於技術計算的高級語言,可以與MEAN堆棧集成以創建功能強大的Web應用程序。
  • MEAN堆棧由MongoDB、Express.js、AngularJS和Node.js組成,與MATLAB結合使用時,允許在Web上進行實時數據可視化。
  • 集成過程涉及使用MATLAB的計算能力來處理數據並生成結果,然後在使用MEAN堆棧構建的Web應用程序上顯示這些結果。
  • JSONlab,一個免費的開源JSON編碼器/解碼器在MATLAB語言中的實現,用於將MATLAB數據轉換為JSON格式,以便在Web應用程序中使用。
  • 創建MATLAB Web應用程序包括使用MATLAB Compiler創建獨立應用程序,在MATLAB Web App Server中創建Web應用程序項目,將獨立應用程序上傳到Web應用程序項目,以及將Web應用程序部署給用戶。

MATLAB是一種用於技術計算的高級語言,它在一個易於使用的環境中集成了計算、可視化和編程,在這個環境中,問題和解決方案可以用熟悉的數學符號來表達。全球有許多項目是用MATLAB編寫的,由數百万科學家和工程師開發。人們從MATLAB獲得的各種實驗和操作數據可用於支持Web應用程序,但存在一些障礙:

  • MATLAB理解矩陣格式數據,而Web應用程序更喜歡JSON或XML格式的數據。
  • 數據通常在MATLAB程序內部創建和使用,這限制了開發人員在保存數據、使用數據等方面的自由度。

如果MATLAB以JSON格式提供數據,而Web應用程序可以使用來自MATLAB的這些JSON數據來創建一些很棒的東西,那麼創建應用程序就會容易得多。

在本文中,我們將開發一個小型演示程序,以演示如何使MATLAB和MEAN堆棧協同工作。

關於Web應用程序

該Web應用程序將涉及從MATLAB到瀏覽器的實時數據傳輸。為簡便起見,我們將從MATLAB傳輸當前時間並在瀏覽器上顯示它。我們將使用JSONlab,這是一個在MATLAB中編碼/解碼JSON文件的工具箱。 Web應用程序將使用MEAN堆棧創建。如果您不熟悉MEAN堆棧,建議您在繼續之前閱讀《MEAN堆棧入門》一文。

JSONlab簡介

JSONlab是MATLAB語言中JSON編碼器/解碼器的免費開源實現。它可用於將MATLAB數據結構(數組、結構體、單元格、結構體數組和單元格數組)轉換為JSON格式的字符串,或將JSON文件解碼為MATLAB數據。

它使我們可以訪問四個函數:loadjson()savejson()loadubjson()saveubjson()。最後兩個函數用於處理UBJSON格式。 loadjson()用於將JSON字符串轉換為相關的MATLAB對象。在我們的項目中,我們只使用savejson()函數,該函數將MATLAB對象(單元格、結構體或數組)轉換為JSON字符串。它可以按以下方式使用:

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
登入後複製
登入後複製
登入後複製

由於我們必須編寫文件,因此我們將使用第一個簽名。它返回JSON字符串以及將字符串寫入文件。

JSONlab安裝

要開始使用,請下載JSONlab,解壓縮存檔,並使用以下命令將文件夾的路徑添加到MATLAB的路徑列表中:

addpath('/path/to/jsonlab');
登入後複製
登入後複製
登入後複製

如果您想永久添加此路徑,則需要鍵入pathtool,瀏覽到JSONlab根文件夾並將其添加到列表中。完成後,您必須單擊“保存”。然後,在MATLAB中運行rehash,並鍵入which loadjson。如果您看到輸出,則表示JSONlab已正確安裝。

MATLAB代碼

我們需要當前時間,因此我們將使用clock命令。它返回一個六元素日期向量,其中包含當前日期和時間,格式為[年 月 日 時 分 秒]。為了反复獲取時間,我們將clock命令放在無限while循環中。因此,我們將一直獲取實時數據,直到使用MATLAB命令窗口上的Ctrl C終止腳本執行。

以下代碼實現了這個想法:

format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end
登入後複製
登入後複製

在我們的項目中,我們關注小時、分鐘和秒。上述代碼中使用的fix(c)函數將矩陣的所有元素四捨五入到最接近的整數。要獲取小時數據,我們需要矩陣第4列的值,因此我們使用命令c(:,4)。使用相同的方法,我們檢索分鐘和秒。

我們將分別向Web應用程序發送時鐘及其一些單獨的變量,以顯示從MATLAB對像到JSON的不同數據類型的轉換。雖然時鐘數據將轉換為數組,但小時、分鐘和秒的值將轉換為數字,我們稍後將看到這一點。

在我們的項目中,我們將使用savejson()函數使用JSON格式轉換和寫入變量x,並將其寫入文件matlabData.json。為簡便起見,rootname參數將是一個空字符串。

使用之前的代碼,我們就完成了所有需要的MATLAB代碼。現在,一旦我們運行腳本,我們就可以觀察到JSON文件是在data文件夾內創建的,並且文件中的數據會自動不斷更新自身。 JSON文件內容示例如下:

{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}
登入後複製
登入後複製

我們將監視此文件並使用Node.js讀取最新數據。現在讓我們開始構建Web應用程序。

Web應用程序

現在我們的MATLAB數據已轉換為JSON並存儲在文件中,我們可以獨立讀取此文件並通過監視其更改來獲取數據。此操作與MATLAB完全無關。在本文的其餘部分,我將假設您了解socket.io以及MEAN堆棧,即使我們只使用它們的某些基本概念。

讓我們開始編寫Web應用程序。

創建package.json文件

為了開始我們的應用程序,讓我們定義項目的依賴項。為此,我們將創建一個package.json文件,如下所示:

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
登入後複製
登入後複製
登入後複製

創建文件後,在項目的根文件夾中運行npm install,以便安裝所有依賴項。如果您不熟悉npm,建議您閱讀《npm入門指南——Node包管理器》。

服務器端代碼

代碼的這一部分涉及使用Node.js、Express和MongoDB。服務器執行的操作包括:

  • 提供index.html文件
  • 監視和讀取JSON文件中的數據
  • 使用MongoDB將數據保存到數據庫
  • 使用socket.io將數據發送到瀏覽器

我們將在根文件夾中創建一個名為server.js的文件,我們將在其中編寫所有描述的功能所需的代碼。

我們使用Express提供靜態文件:

addpath('/path/to/jsonlab');
登入後複製
登入後複製
登入後複製

每當向/發送請求時,將提供存儲在app目錄中的index.html文件。

為了監視文件的任何更改,我們使用fs.watch(),並且為了在每次更改時讀取文件,我們使用fs.readFile()。一旦檢測到更改,就會讀取文件並檢索數據。整個過程使用以下代碼完成:

format shortg;
y=0;
while y == 0
    % c = [year month day hour minute seconds]
    c=clock;
    % 将每个值四舍五入为整数
    c=fix(c);
    x.clock=c;
    % 访问c的第4列,即小时
    x.hours=c(:,4);
    % 访问c的第5列,即分钟
    x.minutes=c(:,5);
    % 访问c的第6列,即秒
    x.seconds=c(:,6);
    % 将x转换为JSON并写入matlabData.json
    savejson('',x,'data/matlabData.json');
end
登入後複製
登入後複製

當與客戶端建立連接並開始獲取數據時,我們將執行兩個操作:

  1. 使用socket.io的emit()函數將數據發送到瀏覽器
  2. 使用mongoose中間件將數據保存到MongoDB

為了執行第二個操作,我們創建數據的模式,然後基於該模式創建模型。這是使用下面顯示的代碼完成的:

{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}
登入後複製
登入後複製

在前面代碼段的最後一條語句中,我們基於定義的模式創建模型。傳遞給函數的第一個參數是我們模型所屬集合的單數名稱。 Mongoose會自動為集合分配複數名稱。因此,這裡appDataappDatas集合的模型。

當我們獲得新數據時,我們將使用最新數據創建該模式的新實例,並使用save()方法將其保存到數據庫中。此實例稱為文檔。在下面的代碼中,savingData是一個文檔。

這部分的最終代碼如下所示:

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
登入後複製
登入後複製
登入後複製

我們使用trycatch來防止應用程序崩潰。如果我們不使用它,並且JSON.parse由於更改速度快而導致數據有時未完全讀取而引發意外用戶輸入錯誤,則應用程序可能會崩潰。這是我們想要避免的!

另外需要注意的是,請確保MongoDB服務器正在運行,否則應用程序將崩潰。

客戶端代碼

在本節中,我們將創建一個簡單的靜態HTML頁面。當通過socket.io接收新數據時,我們將更新頁面上顯示的數據。這些數據也可用於創建實時圖表。

以下是index.html文件的簡單代碼:

addpath('/path/to/jsonlab');
登入後複製
登入後複製
登入後複製

ngCloak指令用於防止在應用程序加載時瀏覽器短暫顯示AngularJS的模板的原始(未編譯)形式。

運行應用程序

在啟動Node.js服務器之前,我們需要確保MATLAB代碼和MongoDB服務器正在運行。要運行MongoDB服務器,您需要在終端上執行命令mongod。要運行Node.js服務器,您必須在項目文件夾的根目錄中執行命令node server.js

顯示當前時間的靜態頁面將在127.0.0.1:3000提供服務。

結論

在本文中,我們使用MEAN堆棧創建了一個Web應用程序,該應用程序從MATLAB程序中獲取JSON格式的數據。數據在JSONlab的幫助下進行轉換。然後,數據使用socket.io發送到瀏覽器,因此瀏覽器上的更改會實時反映出來。此演示的完整源代碼可在GitHub上找到。

我希望您喜歡這篇文章,期待閱讀您的評論。

(FAQs部分,由於篇幅過長,建議單獨處理。可以根據需要提取關鍵問題和答案進行簡短概括或重新組織。)

以上是使用MATLAB和MEAN堆棧創建Web應用程序的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1321
25
PHP教程
1269
29
C# 教程
1249
24
JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python vs. JavaScript:學習曲線和易用性 Python vs. JavaScript:學習曲線和易用性 Apr 16, 2025 am 12:12 AM

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

從C/C到JavaScript:所有工作方式 從C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript和Web:核心功能和用例 JavaScript和Web:核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在行動中:現實世界中的示例和項目 JavaScript在行動中:現實世界中的示例和項目 Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

了解JavaScript引擎:實施詳細信息 了解JavaScript引擎:實施詳細信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python vs. JavaScript:社區,圖書館和資源 Python vs. JavaScript:社區,圖書館和資源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

Python vs. JavaScript:開發環境和工具 Python vs. JavaScript:開發環境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

See all articles