<prompt> Unda seva ya Node.js Express inayotumikia programu ya ukurasa mmoja SPA iliyojengwa kwa React au Vue.js. SPA inapaswa kuonyesha orodha ya bidhaa zinazoletwa kutoka kwa hifadhidata ya PostgreSQL, na kuruhusu watumiaji kuchuja orodha kulingana na aina na bei.  <response>: Ili kuunda seva ya Node.js Express inayotumikia programu ya ukurasa mmoja SPA iliyojengwa kwa React au Vue.js, utahitaji kufuata hatua hizi:1. Weka muundo wa mradi2. Unda seva ya Express3. Unganisha kwenye hifadhidata ya PostgreSQL4. Leta bidhaa kutoka kwa hifadhidata5. Kutumikia SPA kwa kutumia Express6. Tekeleza utendaji wa kuchujaHapa kuna maelezo ya kina ya kila hatua:1. Sanidi muundo wa mradi:Unda saraka mpya ya mradi wako na uingie ndani yake.mkdir my-spa-appcd my-spa-programuAnzisha mradi mpya wa Node.js kwa kuendesha npm init -y. Hii itazalisha faili ya package.json kwenye folda ya mradi wako.Ifuatayo, sasisha utegemezi muhimu:npm install express pg react react-dom vueSasa, unda faili na saraka zifuatazo ndani ya folda ya mradi wako:- server.js: Sehemu kuu ya kuingilia kwa seva yako ya Express.- publicindex.html: Kiolezo cha HTML cha SPA yako.- src: Saraka ya kuhifadhi msimbo wako wa mbele React au Vue.js vipengele.2. Unda seva ya Express:Fungua server.js na usanidi seva ya msingi ya Express: javascriptconst express needexpress;const app express;const PORT process.env.PORT 3000;app.useexpress.staticpublic;app.listenPORT, console.logSeva inasikiliza kwenye bandari PORT;;3. Unganisha kwenye hifadhidata ya PostgreSQL:Sakinisha kifurushi cha pg ikiwa bado haujafanya:npm kufunga pgKatika server.js, ingiza pg moduli na usanidi muunganisho kwenye hifadhidata yako ya PostgreSQL: javascriptconst Dimbwi needpg;const pool Dimbwi jipya mtumiaji: jina_lako_la_la mtumiaji, mwenyeji: localhost, hifadhidata: database_yako, nenosiri: nenosiri_lako, bandari: 5432,;4. Leta bidhaa kutoka kwa hifadhidata:Unda mwisho wa API katika server.js ili kuleta bidhaa kutoka kwa hifadhidata yako ya PostgreSQL: javascriptapp.getapiproducts, async req, res jaribu const result await pool.queryCHAGUA KUTOKA kwa bidhaa; res.jsonmatokeo.safu; kukamata kukosea console.errorkosa; res.status500.json kosa: Hitilafu imetokea wakati wa kuleta bidhaa ; ;5. Tumia SPA kwa kutumia Express:Katika publicindex.html, unda kiolezo cha msingi cha HTML kwa SPA yako:html Programu Yangu ya SPA kichwa mwili html6. Tekeleza utendakazi wa kuchuja:Sasa unaweza kuunda programu yako ya mbele ukitumia React au Vue.js ndani ya saraka ya src. Utahitaji kuleta bidhaa kutoka sehemu ya mwisho ya apiproducts na utekeleze mantiki ya uchujaji kulingana na aina na bei.Kwa mfano, katika kipengele cha React, unaweza kutumia ndoano ya useEffect kuleta bidhaa na kuzihifadhi katika hali: javascriptimport React, useState, useEffect kutoka react;kazi ProductList const bidhaa, setProducts useState; useEffect letaapibidhaa .kishares res.json .kishadata setProductsdata; , ; Toa orodha ya bidhaa na utekeleze mantiki ya kuchuja hapaKatika kipengele cha Vue.js, unaweza kutumia ndoano ya iliyoundwa kuleta bidhaa na kuzihifadhi kwenye data: javascriptsafirisha chaguomsingi data kurudi bidhaa: , ; , kuundwa letaapibidhaa .kishares res.json .kishadata hii.bidhaa data; , Tekeleza mantiki ya uchujaji na utoe orodha ya bidhaa hapa;Hatimaye, endesha seva yako ya Express ukitumia node server.js, na uende kwenye katika kivinjari chako ili kuona SPA yako ikifanya kazi. 