首页 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教程
1662
14
CakePHP 教程
1419
52
Laravel 教程
1312
25
PHP教程
1262
29
C# 教程
1235
24
神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

JavaScript引擎:比较实施 JavaScript引擎:比较实施 Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时,效果会有所不同,因为每个引擎的实现原理和优化策略各有差异。1.词法分析:将源码转换为词法单元。2.语法分析:生成抽象语法树。3.优化和编译:通过JIT编译器生成机器码。4.执行:运行机器码。V8引擎通过即时编译和隐藏类优化,SpiderMonkey使用类型推断系统,导致在相同代码上的性能表现不同。

JavaScript:探索网络语言的多功能性 JavaScript:探索网络语言的多功能性 Apr 11, 2025 am 12:01 AM

JavaScript是现代Web开发的核心语言,因其多样性和灵活性而广泛应用。1)前端开发:通过DOM操作和现代框架(如React、Vue.js、Angular)构建动态网页和单页面应用。2)服务器端开发:Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发:通过ReactNative和Electron实现跨平台开发,提高开发效率。

Python vs. JavaScript:学习曲线和易用性 Python vs. JavaScript:学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者,学习曲线平缓,语法简洁;JavaScript适合前端开发,学习曲线较陡,语法灵活。1.Python语法直观,适用于数据科学和后端开发。2.JavaScript灵活,广泛用于前端和服务器端编程。

如何使用Next.js(前端集成)构建多租户SaaS应用程序 如何使用Next.js(前端集成)构建多租户SaaS应用程序 Apr 11, 2025 am 08:22 AM

本文展示了与许可证确保的后端的前端集成,并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库

从C/C到JavaScript:所有工作方式 从C/C到JavaScript:所有工作方式 Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1)C/C 是静态类型语言,需手动管理内存,而JavaScript是动态类型,垃圾回收自动处理。2)C/C 需编译成机器码,JavaScript则为解释型语言。3)JavaScript引入闭包、原型链和Promise等概念,增强了灵活性和异步编程能力。

使用Next.js(后端集成)构建多租户SaaS应用程序 使用Next.js(后端集成)构建多租户SaaS应用程序 Apr 11, 2025 am 08:23 AM

我使用您的日常技术工具构建了功能性的多租户SaaS应用程序(一个Edtech应用程序),您可以做同样的事情。 首先,什么是多租户SaaS应用程序? 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务

See all articles