Rumah hujung hadapan web tutorial js Membuat aplikasi Web dengan MATLAB dan Mean Stack

Membuat aplikasi Web dengan MATLAB dan Mean Stack

Feb 19, 2025 pm 01:22 PM

Creating a Web App with MATLAB and the MEAN Stack

mata teras

    Matlab, bahasa peringkat tinggi untuk pengkomputeran teknikal, boleh diintegrasikan dengan tumpukan min untuk membuat aplikasi web yang kuat.
  • Stack min terdiri daripada mongoDB, express.js, angularjs dan node.js, dan apabila digunakan bersama dengan MATLAB, ia membolehkan visualisasi data masa nyata di web.
  • Proses integrasi melibatkan menggunakan kuasa pengkomputeran MATLAB untuk memproses data dan menghasilkan hasil, yang kemudian dipaparkan pada aplikasi web yang dibina menggunakan timbunan min.
  • JSONLAB, pelaksanaan Open Source JSON/Decoder Open Source Free dalam bahasa MATLAB, digunakan untuk menukar data MATLAB ke format JSON untuk digunakan dalam aplikasi web.
  • Mewujudkan aplikasi Web MATLAB termasuk membuat aplikasi mandiri menggunakan pengkompil Matlab, membuat projek aplikasi web dalam pelayan aplikasi Web MATLAB, memuat naik aplikasi mandiri ke projek aplikasi web, dan menggunakan aplikasi web kepada pengguna.
MATLAB adalah bahasa peringkat tinggi untuk pengkomputeran teknikal yang mengintegrasikan pengkomputeran, visualisasi dan pengaturcaraan dalam persekitaran yang mudah digunakan di mana masalah dan penyelesaian dapat dinyatakan dalam notasi matematik yang biasa. Terdapat banyak projek di seluruh dunia yang ditulis di MATLAB dan dibangunkan oleh berjuta -juta saintis dan jurutera. Pelbagai data eksperimen dan operasi yang diperoleh dari MATLAB boleh digunakan untuk menyokong aplikasi web, tetapi terdapat beberapa halangan:

    MATLAB memahami data format matriks, manakala aplikasi web lebih suka data dalam format JSON atau XML.
  • Data biasanya dibuat dan digunakan dalam program MATLAB, yang membatasi kebebasan pemaju dalam menjimatkan dan menggunakan data, dll.
Membuat aplikasi lebih mudah jika MATLAB menghidangkan data dalam format JSON dan aplikasi web boleh menggunakan data JSON ini dari MATLAB untuk membuat sesuatu yang hebat.

Dalam artikel ini, kami akan membangunkan program demonstrasi kecil untuk menunjukkan cara membuat MATLAB dan Mean Stack berfungsi bersama -sama.

Mengenai Aplikasi Web

Aplikasi web ini akan melibatkan pemindahan data masa nyata dari MATLAB ke pelayar. Untuk kesederhanaan, kami akan memindahkan masa semasa dari MATLAB dan memaparkannya pada penyemak imbas. Kami akan menggunakan JsonLab, kotak alat untuk pengekodan/penyahkodan fail JSON di MATLAB. Aplikasi web akan dibuat menggunakan stack min. Jika anda tidak biasa dengan Mean Stack, disarankan agar anda membaca artikel "pemula stack min" sebelum meneruskan.

Pengenalan kepada JSONLAB

JsonLab adalah pelaksanaan sumber terbuka percuma pengekod/decoder JSON dalam bahasa Matlab. Ia boleh digunakan untuk menukar struktur data MATLAB (tatasusunan, struktur, sel, susunan struktur, dan susunan sel) ke dalam rentetan dalam format JSON, atau untuk menyahkod fail JSON ke dalam data MATLAB.

3 Dua fungsi terakhir digunakan untuk mengendalikan format Ubjson.

digunakan untuk menukar rentetan JSON ke dalam objek MATLAB yang berkaitan. Dalam projek kami, kami hanya menggunakan fungsi loadjson(), yang menukarkan objek MATLAB (sel, struktur, atau array) ke rentetan JSON. Ia boleh digunakan seperti berikut: savejson() loadubjson() saveubjson() Oleh kerana kita perlu menulis fail, kita akan menggunakan tandatangan pertama. Ia mengembalikan rentetan JSON serta menulis rentetan ke fail. loadjson() savejson()

pemasangan jsonLab
json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Untuk memulakan, muat turun jsonlab, unzip arkib, dan tambahkan laluan folder ke senarai laluan MATLAB menggunakan arahan berikut:

Jika anda ingin menambah laluan ini secara kekal, anda perlu menaip

, semak imbas ke folder root JSONLAB dan tambahkannya ke senarai. Setelah selesai, anda mesti klik Simpan. Kemudian, jalankan

dalam MATLAB dan taip

. Jika anda melihat output, ini bermakna JsonLab dipasang dengan betul.
addpath('/path/to/jsonlab');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

pathtool Matlab Code rehash which loadjson

Kami memerlukan masa semasa, jadi kami akan menggunakan perintah

. Ia mengembalikan vektor tarikh enam elemen yang mengandungi tarikh dan masa semasa dalam format [tahun, bulan, hari, jam, minit, saat]. Untuk mendapatkan masa berulang kali, kami meletakkan perintah dalam gelung tak terhingga. Oleh itu, kami akan terus mendapatkan data masa nyata sehingga pelaksanaan skrip ditamatkan menggunakan Ctrl C pada tetingkap Perintah MATLAB.

Kod berikut melaksanakan idea ini:

clock clock Dalam projek kami, kami memberi tumpuan kepada jam, minit, dan saat. Fungsi while yang digunakan dalam kod di atas pusingan semua elemen matriks ke integer terdekat. Untuk mendapatkan data jam, kami memerlukan nilai lajur 4 matriks, jadi kami menggunakan arahan

. Menggunakan kaedah yang sama, kami mengambil minit dan saat.

kami akan menghantar jam dan beberapa pembolehubah berasingan ke aplikasi web secara berasingan untuk memaparkan penukaran jenis data yang berbeza dari objek MATLAB ke JSON. Walaupun data jam akan ditukar kepada array, nilai jam, minit dan saat akan ditukar kepada nombor, yang akan kita lihat kemudian.
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
Salin selepas log masuk
Salin selepas log masuk

Dalam projek kami, kami akan menggunakan fungsi fix(c) untuk menukar dan menulis pembolehubah x menggunakan format JSON dan tuliskannya ke fail c(:,4). Untuk kesederhanaan, parameter

akan menjadi rentetan kosong.

Gunakan kod sebelumnya, kami melengkapkan semua kod MATLAB yang diperlukan. Sekarang, sebaik sahaja kita menjalankan skrip, kita dapat melihat bahawa fail JSON dibuat dalam folder data dan data dalam fail akan dikemas kini secara automatik dan sentiasa. Contoh kandungan fail JSON adalah seperti berikut:

savejson() matlabData.json kami akan memantau fail ini dan menggunakan Node.js untuk membaca data terkini. Sekarang mari kita mula membina aplikasi web. rootname

Aplikasi Web

{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}
Salin selepas log masuk
Salin selepas log masuk

Sekarang data MATLAB kami telah ditukar kepada JSON dan disimpan dalam fail, kami dapat membaca fail ini secara bebas dan mendapatkan data dengan memantau perubahannya. Operasi ini tidak ada kaitan dengan MATLAB. Di seluruh artikel ini, saya akan menganggap anda memahami Socket.io dan tumpukan min, walaupun kita hanya menggunakan beberapa konsep asas mereka.

mari mula menulis aplikasi web.

Buat fail Package.json

Untuk memulakan permohonan kami, mari kita tentukan kebergantungan projek. Untuk melakukan ini, kami akan membuat fail package.json seperti berikut:

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Selepas membuat fail, jalankan

dalam folder root projek untuk memasang semua kebergantungan. Jika anda tidak biasa dengan NPM, disarankan agar anda membaca "NPM Bermula Panduan - Pengurus Pakej Node". npm install

kod sampingan pelayan Bahagian kod ini melibatkan penggunaan Node.js, Express, dan MongoDB. Operasi yang dilakukan oleh pelayan termasuk:

disediakan
    fail
  • index.html memantau dan membaca data dalam fail json
  • simpan data ke pangkalan data menggunakan mongoDB
  • Hantar data ke penyemak imbas menggunakan socket.io
  • kami akan membuat fail bernama
dalam folder root di mana kami akan menulis kod yang diperlukan untuk semua fungsi yang diterangkan.

server.js Kami menggunakan Express untuk menyediakan fail statik:

Setiap kali permintaan dihantar ke
addpath('/path/to/jsonlab');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
, fail

yang disimpan dalam direktori / akan disediakan. app index.html Untuk memantau sebarang perubahan pada fail, kami menggunakan

, dan membaca fail setiap kali ia berubah, kami menggunakan

. Sebaik sahaja perubahan dikesan, fail dibaca dan data diambil. Keseluruhan proses selesai menggunakan kod berikut: fs.watch() fs.readFile()

Apabila sambungan ditubuhkan dengan pelanggan dan mula mengambil data, kami akan melakukan dua perkara:
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
Salin selepas log masuk
Salin selepas log masuk

Hantar data ke penyemak imbas menggunakan fungsi Socket.io's
  1. emit() simpan data ke mongoDB menggunakan middware mongoose
  2. Untuk melaksanakan operasi kedua, kami membuat skema data dan kemudian membuat model berdasarkan skema itu. Ini dilakukan menggunakan kod yang ditunjukkan di bawah:

Dalam pernyataan terakhir segmen kod terdahulu, kami membuat model berdasarkan corak yang ditetapkan. Parameter pertama yang diserahkan kepada fungsi adalah nama tunggal set yang dimiliki oleh model kami. Mongoose secara automatik menyerahkan nama jamak ke koleksi. Oleh itu, di sini
{
   "hours": 19,
   "minutes": 28,
   "seconds": 28,
   "clock": [2015,5,27,19,28,28]
}
Salin selepas log masuk
Salin selepas log masuk
adalah model koleksi

. appData appDatas Apabila kami mendapat data baru, kami akan menggunakan data terkini untuk membuat contoh baru skema dan simpannya ke pangkalan data menggunakan kaedah

. Contoh ini dipanggil dokumen. Dalam kod berikut,

adalah dokumen. save() savingData Kod akhir untuk bahagian ini adalah seperti berikut:

json = savejson(rootname, obj, filename)
json = savejson(rootname, obj, opt)
json = savejson(rootname, obj, 'param1', value1, 'param2', value2, ...)
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Kami menggunakan try dan catch untuk mengelakkan permohonan daripada terhempas. Jika kita tidak menggunakannya, dan JSON.parse menyebabkan kesilapan input pengguna yang tidak dijangka disebabkan oleh perubahan pesat, permohonan itu mungkin terhempas. Inilah yang ingin kita elakkan!

Juga ambil perhatian bahawa sila pastikan pelayan MongoDB sedang berjalan, jika tidak, aplikasi itu akan terhempas.

kod klien

Dalam bahagian ini, kami akan membuat halaman HTML statik yang mudah. Apabila data baru diterima melalui Socket.io, kami akan mengemas kini data yang dipaparkan pada halaman. Data ini juga boleh digunakan untuk membuat carta masa nyata.

Berikut adalah kod mudah untuk fail index.html:

addpath('/path/to/jsonlab');
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk
Arahan

ngCloak digunakan untuk menghalang penyemak imbas dari secara ringkas memaparkan bentuk asal (tidak dikompilasi) template angularjs apabila aplikasi dimuatkan.

Jalankan aplikasi

Sebelum memulakan pelayan Node.js, kita perlu memastikan bahawa kod MATLAB dan pelayan MongoDB sedang berjalan. Untuk menjalankan pelayan MongoDB, anda perlu melaksanakan arahan mongod di terminal. Untuk menjalankan pelayan Node.js, anda mesti melaksanakan arahan node server.js dalam direktori root folder projek.

Halaman statik yang menunjukkan masa semasa akan disediakan dalam 127.0.0.1:3000.

Kesimpulan

Dalam artikel ini, kami menggunakan stack min untuk membuat aplikasi web yang mendapat data dalam format JSON dari program MATLAB. Data ditukar dengan bantuan JSONLAB. Data kemudiannya dihantar ke penyemak imbas menggunakan socket.io, jadi perubahan pada penyemak imbas dicerminkan dalam masa nyata. Kod sumber penuh untuk demo ini boleh didapati di GitHub.

Saya harap anda menikmati artikel ini dan berharap dapat membaca komen anda.

(bahagian Soalan Lazim disyorkan untuk mengendalikannya secara berasingan kerana panjang artikel. Soalan dan jawapan utama boleh diekstrak dan diringkaskan secara ringkas atau disusun semula seperti yang diperlukan.)

Atas ialah kandungan terperinci Membuat aplikasi Web dengan MATLAB dan Mean Stack. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Adakah JavaScript sukar belajar? Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Evolusi JavaScript: Trend Semasa dan Prospek Masa Depan Apr 10, 2025 am 09:33 AM

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

See all articles