首頁 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

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

熱工具

記事本++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教學
1655
14
CakePHP 教程
1413
52
Laravel 教程
1306
25
PHP教程
1252
29
C# 教程
1226
24
前端熱敏紙小票打印遇到亂碼問題怎麼辦? 前端熱敏紙小票打印遇到亂碼問題怎麼辦? Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中,小票打印是一個常見的需求。然而,很多開發者在實...

神秘的JavaScript:它的作用以及為什麼重要 神秘的JavaScript:它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

誰得到更多的Python或JavaScript? 誰得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript開發者的薪資沒有絕對的高低,具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大,薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。

如何實現視差滾動和元素動畫效果,像資生堂官網那樣?
或者:
怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? 如何實現視差滾動和元素動畫效果,像資生堂官網那樣? 或者: 怎樣才能像資生堂官網一樣,實現頁面滾動伴隨的動畫效果? Apr 04, 2025 pm 05:36 PM

實現視差滾動和元素動畫效果的探討本文將探討如何實現類似資生堂官網(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演變:當前的趨勢和未來前景 JavaScript的演變:當前的趨勢和未來前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? 如何使用JavaScript將具有相同ID的數組元素合併到一個對像中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中將具有相同ID的數組元素合併到一個對像中?在處理數據時,我們常常會遇到需要將具有相同ID�...

JavaScript引擎:比較實施 JavaScript引擎:比較實施 Apr 13, 2025 am 12:05 AM

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

前端開發中如何實現類似 VSCode 的面板拖拽調整功能? 前端開發中如何實現類似 VSCode 的面板拖拽調整功能? Apr 04, 2025 pm 02:06 PM

探索前端中類似VSCode的面板拖拽調整功能的實現在前端開發中,如何實現類似於VSCode...

See all articles