搜索
首页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
node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

幕后:什么语言能力JavaScript?幕后:什么语言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在浏览器和Node.js环境中运行,依赖JavaScript引擎解析和执行代码。1)解析阶段生成抽象语法树(AST);2)编译阶段将AST转换为字节码或机器码;3)执行阶段执行编译后的代码。

Python和JavaScript的未来:趋势和预测Python和JavaScript的未来:趋势和预测Apr 27, 2025 am 12:21 AM

Python和JavaScript的未来趋势包括:1.Python将巩固在科学计算和AI领域的地位,2.JavaScript将推动Web技术发展,3.跨平台开发将成为热门,4.性能优化将是重点。两者都将继续在各自领域扩展应用场景,并在性能上有更多突破。

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,适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

JavaScript是用C编写的吗?检查证据JavaScript是用C编写的吗?检查证据Apr 25, 2025 am 12:15 AM

是的,JavaScript的引擎核心是用C语言编写的。1)C语言提供了高效性能和底层控制,适合JavaScript引擎的开发。2)以V8引擎为例,其核心用C 编写,结合了C的效率和面向对象特性。3)JavaScript引擎的工作原理包括解析、编译和执行,C语言在这些过程中发挥关键作用。

JavaScript的角色:使网络交互和动态JavaScript的角色:使网络交互和动态Apr 24, 2025 am 12:12 AM

JavaScript是现代网站的核心,因为它增强了网页的交互性和动态性。1)它允许在不刷新页面的情况下改变内容,2)通过DOMAPI操作网页,3)支持复杂的交互效果如动画和拖放,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脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具