Pieaugot lietojumprogrammas sarežģītībai, pieaug arī tās vajadzības. Kādā brīdī statisku HTML failu apkalpošana var kavēt progresu vai kavēt lietotnes funkcionalitāti. Tā vietā jūs vēlēsities rādīt dinamisku saturu — tas ir uzdevums, ko nodrošina veidņu dzinēji, piemēram, rokturi.
Stūres ir minimāls, bez loģikas veidņu dzinējs NodeJS. Tas ir ūsu veidņu dzinēja paplašinājums. Tā kā tas ir dzinējs bez loģikas, varat to izmantot, lai stingri nošķirtu prezentāciju no pamatā esošā koda.
Stūrei ir liels atbalsts kā NestJS sistēmas veidņu dzinējam.
Kas ir šablonu dzinējs?
Veidņu programma ir rīks, kas apvieno HTML tagus un programmēšanas valodu, lai izveidotu HTML veidni ar minimālu kodu.
Veidņu dzinējs izpildlaikā ievada datus HTML veidnē, lai pārlūkprogrammā atveidotu galīgo skatu.
Jums var šķist sarežģīti iestatīt veidņu dzinēju, piemēram, Stūri, jo tas ietver daudzas darbības. tomēr Express servera sistēma ko NestJS izmanto pēc noklusējuma, tam ir lielisks stūres atbalsts.
1. darbība: ģenerējiet NestJS lietojumprogrammu
Palaidiet šo komandu, lai izveidotu jaunu Nest lietojumprogrammu:
ligzda jauna <jūsu lietotnes nosaukums>
2. darbība: uzstādiet stūri
Palaidiet šo komandu, lai instalētu rokturus, izmantojot npm pakotņu pārvaldnieks:
npm instalēt express-handlebars@^5.3.0@tipi/express-handlebars@^5.3.0
3. darbība. Ātrās instances konfigurēšana
Pārejiet uz savu galvenais.ts failu un importēt NestExpress lietojumprogramma no @nestjs/platform-express.
Piešķiriet NestExpressApplication kā vispārīgu veidu izveidot metodi.
Tā kā:
konst lietotne = gaidīt NestFactory.create(AppModule)
NestExpressApplication nodošana uz lietotne objekts nodrošina piekļuvi ExpressJS ekskluzīvām metodēm. Šīs metodes būs nepieciešamas, lai konfigurētu konkrētus stūres rekvizītus.
4. darbība: konfigurējiet stūres
Pirmkārt, jums būs jānorāda atrašanās vietas, kur jūsu lietojumprogramma atradīs HTML un citus statiskos failus (stila lapas, attēlus utt.). Jūs varat saglabāt savus HTML failus mapēskatījumi” mapē un citus statiskus failus mapēpubliski” mapi, attiecīgi.
Lai norādītu atrašanās vietas, sāciet ar importēšanu pievienoties no ceļš. Pēc tam iekšpusē bootstrap funkciju, iestatiet stilu atrašanās vietu.
Tā kā:
app.useStaticAssets (join (__dirname, '..', 'publiski'))
Savienojuma funkcijai ir nepieciešams patvaļīgs skaits virkne argumentus, pievienojas tiem un normalizē iegūto ceļu. __dirname atgriež tās mapes ceļu, kurā galvenais.ts fails atrodas.
Pēc tam iestatiet savu HTML failu atrašanās vietu, piemēram:
app.setBaseViewsDir (join (__dirname, '..', 'skatījumi'));
Pēc tam importējiet rokturus savā galvenais.ts fails:
imports * kā hbs no “ātrā stūre”;
Jums būs nepieciešams hbs importēt, lai konfigurētu stūres rekvizītus, piemēram, paplašinājuma nosaukumu utt.
Noklusējuma faila paplašinājuma nosaukums rokturiem ir .stūre.
Šis paplašinājuma nosaukums ir garš, taču to var konfigurēt, izmantojot app.engine zvanu. app.engine ir vietējā iesaiņojuma funkcija ap ekspress.dzinējs metodi. Tam nepieciešami divi argumenti: ext un atzvanīšanas funkcija. Skatīt Ekspress dokumentācija par app.engine lai uzzinātu vairāk par to.
Zvaniet app.engine(), un kā pirmo argumentu nododiet virkni "hbs". Pēc tam kā otro argumentu izsauciet funkciju hbs un ievadiet konfigurācijas objektu ar rekvizītu extname iestatīts uz "hbs". Šis iestatījums maina paplašinājuma nosaukumu no .handlebars uz .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Visbeidzot, iestatiet skata dzinēju uz Rokturi, piemēram:
app.setViewEngine('hbs');
5. darbība: izveidojiet mapes
Sava projekta saknes direktorijā izveidojiet divas jaunas mapes. Jūs izmantosit pirmo, publiski, lai saglabātu savas lietojumprogrammas stila lapas. In skatījumi, jūs saglabāsit visus savus HTML failus.
Ar to ir pabeigta izstrādes vides izveide. Nākamajā sadaļā jums būs pārskats par stūres sintaksi un tās izmantošanu NestJS lietojumprogrammā.
Stūres sintakse
Šī sadaļa aptvers lielāko daļu stūres sintakses, kas jums nepieciešama, lai dinamiski apkalpotu failus.
Palīgie
Palīgi ir funkcijas, kas pārveido izvadi, atkārto datus un renderē nosacījumu izvadi.
Stūre nodrošina divu veidu palīgierīces (Block un Built-in), un jūs varat izveidot pielāgotus palīgus atbilstoši savām vajadzībām.
Jūs apzīmējat palīgu, ietinot to dubultās cirtainās lencēs. Pievienojiet tā nosaukumam jaucējzīmi (#) sākuma palīga tagam un slīpsvītru (/) aizverošajam tagam.
Piemēram:
{{!-- ja vērtība ir taisnība, tiks atveidots div cits, tā nebūs --}}
{{#if value}}
<div>Vērtība ir atveidota</div>
{{/if}}
Ja izveidojat pielāgotu palīgu, jums tas ir jāreģistrē savā hbs konfigurācijas objekts jūsu galvenais.ts failu, pirms varat to izmantot savā lietojumprogrammā.
// galvenais.ts
imports { customHelper } no './helpers/hbs.helpers';
// Bootstrap funkcijas iekšpusē
app.engine('hbs', hbs({ extname: 'hbs', palīgi: { customHelper } }));
Izteicieni
Izteiksmes ir stūres veidnes vienība. Izteicienu lietojums atšķiras atkarībā no uzdevuma sarežģītības. Varat tos izmantot atsevišķi veidnē, nodot tos palīgiem un veikt citas darbības.
Apzīmējiet izteiksmes ar dubultām krokainajām figūriekavām, piemēram:
<h1>{{ziņa}}</h1>
Daļēji
Daļēja attiecas uz iepriekš saglabātu HTML failu, jo tas parādās vairākos HTML failos. Piemēram, navigācijas joslas un kājenes. Varat saglabāt šo saturu vienā failā un vajadzības gadījumā iekļaut to.
Tāpat kā ar statiskajiem un HTML failiem, arī jums būs jāiestata daļējais direktorijs app.engine konfigurācijas objekts.
Reģistrējiet savu daļējo direktoriju, pievienojot savam konfigurācijas objektam šādu kodu:
// galvenais.ts
partialsDir: pievienoties (__dirname, '..', 'skati/daļēji'),
Daļējai zvanam var piekļūt, izmantojot daļēja zvana sintaksi. Dubultās cirtainajās iekavās ievadiet simbolu lielāks par (>), kam seko daļējas daļas nosaukums.
Piemēram:
{{> nameOfPartial}}
Izkārtojumi
Stūres izkārtojums ir HTML lapa, ko izmanto, lai iestatītu pamatā esošos metadatus vai vispārīgo struktūru citām lietojumprogrammas HTML lapām. Tas darbojas kā konteiners ar vietturi, kurā varat ievadīt dinamiskus datus.
Piemēram:
<!DOCTYPE html>
<html lang="lv">
<galvu>
<meta rakstzīmju kopa ="UTF-8">
<meta http-equiv="X-UA saderīgs" saturs="IE=mala">
<meta nosaukums ="skata logs" saturs="platums = ierīces platums, sākotnējais mērogs = 1,0">
<virsraksts>Veidnes NestJS ar stūri</title>
</head>
<ķermenis>
<galvene>
{{!-- Daļēja navigācijas josla --}}
{{>navigācijas josla}}
</header>
<div>
{{!-- Pamatteksta vietturis --}}
{{{body}}}
</div>
{{!-- Daļēja kājene --}}
{{>kājene}}
</body>
</html>
Kad palaižat savu kodu, rokturi pārņem koda saturu .hbs failu, kuru vēlaties renderēt, un ievada tos ķermenis vietturis. Pēc tam tas atveido rezultātu kā galīgo HTML lapu.
Jums būs jāreģistrē izkārtojumu direktorijs savā app.engine konfigurācijas objektu un iestatiet noklusējuma izkārtojuma failu. Noklusējuma izkārtojuma fails ir izkārtojuma fails, ko Handlebars izmanto, ja nedefinējat konkrētu izkārtojumu.
Pievienojiet savam konfigurācijas objektam šādu kodu, lai deklarētu noklusējuma izkārtojumu un reģistrētu izkārtojumu direktoriju:
noklusējuma izkārtojums: 'Izkārtojuma faila nosaukums',
layoutsDir: pievienoties (__dirname, '..', 'skati/izkārtojumi'),
.hbs faila renderēšana
Kontroliera failā importējiet Res dekorators no @nestjs/common un Atbilde no izteikt.
Pēc tam maršruta apstrādātājā norādiet argumentu, res. Piešķiriet res atbildes veidu un anotējiet to, izmantojot Res dekoratoru. Res dekorators atklāj Express vietējās atbildes apstrādes metodes un atspējo NestJS standarta pieeju.
Pēc tam izsauciet renderēšanas metodi uz res un nosūtiet faila nosaukumu, kuru vēlaties renderēt kā pirmo argumentu. Otrajam argumentam nododiet objektu, kas satur izkārtojuma nosaukumu un izteiksmes aizstājējvērtību.
Stūrei tiks izmantots jūsu noklusējuma izkārtojums app.engine konfigurācijas objekts, ja nesniedzat izkārtojumu.
@Gūt()
get Sveiki(@Res() res: Atbilde){
return res.render('Faila nosaukums', { izkārtojums: 'izkārtojuma nosaukums', ziņa: 'Sveika pasaule' });
}
Alternatīvas stūrei
Stūres ir lielisks veidņu rīks ar daudzām parocīgām funkcijām, piemēram, palīgierīcēm un izkārtojumiem. Tomēr atkarībā no jūsu vajadzībām varat izvēlēties alternatīvu, piemēram, EJS (iegultais JavaScript), Mopsis vai ūsas.