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

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
在JavaScript中替換字符串字符在JavaScript中替換字符串字符Mar 11, 2025 am 12:07 AM

JavaScript字符串替換方法詳解及常見問題解答 本文將探討兩種在JavaScript中替換字符串字符的方法:在JavaScript代碼內部替換和在網頁HTML內部替換。 在JavaScript代碼內部替換字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 該方法僅替換第一個匹配項。要替換所有匹配項,需使用正則表達式並添加全局標誌g: str = str.replace(/fi

構建您自己的Ajax Web應用程序構建您自己的Ajax Web應用程序Mar 09, 2025 am 12:11 AM

因此,在這裡,您準備好了解所有稱為Ajax的東西。但是,到底是什麼? AJAX一詞是指用於創建動態,交互式Web內容的一系列寬鬆的技術。 Ajax一詞,最初由Jesse J創造

10個JQuery Fun and Games插件10個JQuery Fun and Games插件Mar 08, 2025 am 12:42 AM

10款趣味橫生的jQuery遊戲插件,讓您的網站更具吸引力,提升用戶粘性!雖然Flash仍然是開發休閒網頁遊戲的最佳軟件,但jQuery也能創造出令人驚喜的效果,雖然無法與純動作Flash遊戲媲美,但在某些情況下,您也能在瀏覽器中獲得意想不到的樂趣。 jQuery井字棋遊戲 遊戲編程的“Hello world”,現在有了jQuery版本。 源碼 jQuery瘋狂填詞遊戲 這是一個填空遊戲,由於不知道單詞的上下文,可能會產生一些古怪的結果。 源碼 jQuery掃雷遊戲

如何創建和發布自己的JavaScript庫?如何創建和發布自己的JavaScript庫?Mar 18, 2025 pm 03:12 PM

文章討論了創建,發布和維護JavaScript庫,專注於計劃,開發,測試,文檔和促銷策略。

jQuery視差教程 - 動畫標題背景jQuery視差教程 - 動畫標題背景Mar 08, 2025 am 12:39 AM

本教程演示瞭如何使用jQuery創建迷人的視差背景效果。 我們將構建一個帶有分層圖像的標題橫幅,從而創造出令人驚嘆的視覺深度。 更新的插件可與JQuery 1.6.4及更高版本一起使用。 下載

使用jQuery和Ajax自動刷新DIV內容使用jQuery和Ajax自動刷新DIV內容Mar 08, 2025 am 12:58 AM

本文演示瞭如何使用jQuery和ajax自動每5秒自動刷新DIV的內容。 該示例從RSS提要中獲取並顯示了最新的博客文章以及最後的刷新時間戳。 加載圖像是選擇

Matter.js入門:簡介Matter.js入門:簡介Mar 08, 2025 am 12:53 AM

Matter.js是一個用JavaScript編寫的2D剛體物理引擎。此庫可以幫助您輕鬆地在瀏覽器中模擬2D物理。它提供了許多功能,例如創建剛體並為其分配質量、面積或密度等物理屬性的能力。您還可以模擬不同類型的碰撞和力,例如重力摩擦力。 Matter.js支持所有主流瀏覽器。此外,它也適用於移動設備,因為它可以檢測觸摸並具有響應能力。所有這些功能都使其值得您投入時間學習如何使用該引擎,因為這樣您就可以輕鬆創建基於物理的2D遊戲或模擬。在本教程中,我將介紹此庫的基礎知識,包括其安裝和用法,並提供一

如何在瀏覽器中優化JavaScript代碼以進行性能?如何在瀏覽器中優化JavaScript代碼以進行性能?Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略,重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
2 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
2 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

記事本++7.3.1

記事本++7.3.1

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

SublimeText3 Mac版

SublimeText3 Mac版

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

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器