搜索
首页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

8令人惊叹的jQuery页面布局插件8令人惊叹的jQuery页面布局插件Mar 06, 2025 am 12:48 AM

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

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

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

如何创建和发布自己的JavaScript库?如何创建和发布自己的JavaScript库?Mar 18, 2025 pm 03:12 PM

文章讨论了创建,发布和维护JavaScript库,专注于计划,开发,测试,文档和促销策略。

使用AJAX动态加载盒内容使用AJAX动态加载盒内容Mar 06, 2025 am 01:07 AM

本教程演示了创建通过Ajax加载的动态页面框,从而可以即时刷新,而无需全页重新加载。 它利用jQuery和JavaScript。将其视为自定义的Facebook式内容框加载程序。 关键概念: Ajax和JQuery

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 06, 2025 am 01:18 AM

此JavaScript库利用窗口。名称属性可以管理会话数据,而无需依赖cookie。 它为浏览器中存储和检索会话变量提供了强大的解决方案。 库提供了三种核心方法:会话

jQuery视差教程 - 动画标题背景jQuery视差教程 - 动画标题背景Mar 08, 2025 am 12:39 AM

本教程演示了如何使用jQuery创建迷人的视差背景效果。 我们将构建一个带有分层图像的标题横幅,从而创造出令人惊叹的视觉深度。 更新的插件可与JQuery 1.6.4及更高版本一起使用。 下载

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无尽的。

热工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),