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

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

尊渡假赌尊渡假赌尊渡假赌
發布: 2025-02-19 13:22:12
原創
746 人瀏覽過

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板