Augant programos sudėtingumui, auga ir jos poreikiai. Tam tikru momentu statinių HTML failų teikimas gali trukdyti pažangai arba apriboti programos funkcionalumą. Vietoj to norėsite teikti dinamišką turinį – užduotį, kurią įgalina šablonų varikliai, tokie kaip vairas.
Vairas yra minimalus, logikos neturintis „NodeJS“ šablonų variklis. Tai ūsų šablono variklio pratęsimas. Kadangi tai nelogiškas variklis, galite jį naudoti norėdami griežtai atskirti pateikimą nuo pagrindinio kodo.
Vairas puikiai palaiko kaip šablonų variklį iš NestJS sistemos.
Kas yra šablonų variklis?
Šablonų variklis yra įrankis, kuris sujungia HTML žymas ir programavimo kalbą, kad sukurtų HTML šabloną su minimaliu kodu.
Šablonų variklis vykdymo metu įterpia duomenis į HTML šabloną, kad būtų pateiktas galutinis vaizdas naršyklėje.
Jums gali būti sudėtinga nustatyti šablonų variklį, pvz., Vairą, nes tai apima daug veiksmų. Tačiau „Express“ serverio sistema kurį pagal numatytuosius nustatymus naudoja NestJS, puikiai palaiko rankenas.
1 veiksmas: sugeneruokite „NestJS“ programą
Vykdykite šią komandą, kad sukurtumėte naują „Nest“ programą:
lizdas naujas <jūsų programos pavadinimas>
2 veiksmas: įdiekite vairą
Vykdykite šią komandą, kad įdiegtumėte rankenas naudodami npm paketų tvarkyklė:
npm įdiegti express-handlebars@^5.3.0@tipai/express-handlebars@^5.3.0
3 veiksmas: sukonfigūruokite greitąjį egzempliorių
Eikite į savo pagrindinis.ts failą ir importuoti „NestExpress“ programa iš @nestjs/platform-express.
Priskirkite „NestExpressApplication“ kaip bendrąjį tipą sukurti metodas.
Kaip taip:
konst programa = laukti NestFactory.create(AppModule)
„NestExpressApplication“ perdavimas į programėlė objektas suteikia prieigą prie išskirtinių ExpressJS metodų. Jums reikės šių metodų, kad sukonfigūruotumėte konkrečias vairo ypatybes.
4 veiksmas: sukonfigūruokite vairą
Pirmiausia turėsite nurodyti vietas, kuriose jūsų programa ras HTML ir kitus statinius failus (stilių lapus, vaizdus ir kt.). Savo HTML failus galite saugoti „Peržiūrėjo“ aplanką ir kitus statinius failus „viešas“ aplanką, atitinkamai.
Norėdami nurodyti vietas, pradėkite importuodami prisijungti iš kelias. Tada viduje bootstrap funkciją, nustatykite stilių vietą.
Kaip taip:
app.useStaticAssets (join (__dirname, '..', 'viešas'))
Sujungimo funkcija užima bet kokį skaičių styga argumentus, sujungia juos ir normalizuoja gautą kelią. __dirname grąžina aplanko, kuriame yra pagrindinis.ts failas gyvena.
Tada nustatykite HTML failų vietą, pavyzdžiui:
app.setBaseViewsDir (prisijungti (__dirname, '..', 'Peržiūrėjo'));
Tada importuokite vairą į savo pagrindinis.ts failas:
importuoti * kaip hbs iš „greitinės vairo rankenos“;
Jums reikės hbs importuoti, kad sukonfigūruotumėte vairo ypatybes, pvz., plėtinio pavadinimą ir kt.
Numatytasis rankenos failo plėtinio pavadinimas yra .vairas.
Šis plėtinio pavadinimas yra ilgas, bet galite jį konfigūruoti naudodami app.engine skambinti. app.engine yra vietinė įvyniojimo funkcija aplink express.variklis metodas. Reikia dviejų argumentų: ext ir atgalinio skambinimo funkcija. Žiūrėkite Greita dokumentacija app.engine norėdami sužinoti daugiau apie tai.
Skambinti app.engine(), ir kaip pirmąjį argumentą pateikite eilutę „hbs“. Tada kaip antrą argumentą iškvieskite funkciją hbs ir pateikite konfigūracijos objektą su savybe išorinis vardas nustatytas į "hbs". Šis nustatymas pakeičia plėtinio pavadinimą iš .handlebars į .hbs.
app.engine('hbs', hbs({ extname: 'hbs' }));
Galiausiai nustatykite peržiūros variklį į rankenas, kaip:
app.setViewEngine('hbs');
5 veiksmas: sukurkite aplankus
Savo projekto šakniniame kataloge sukurkite du naujus aplankus. Jūs naudosite pirmąjį, viešas, kad išsaugotumėte savo programos stiliaus lapus. Į Peržiūrėjo, išsaugosite visus savo HTML failus.
Tai baigia kurti kūrimo aplinką. Kitame skyriuje apžvelgsite rankenos sintaksę ir jos naudojimą „NestJS“ programoje.
Vairo sintaksė
Šioje skiltyje bus pateikta didžioji dalis vairo sintaksės, kurios jums reikia norint dinamiškai pateikti failus.
Pagalbininkai
Pagalbininkai yra funkcijos, kurios transformuoja išvestį, kartoja duomenis ir pateikia sąlyginę išvestį.
Vairas siūlo dviejų tipų pagalbininkus (Block ir Built-in) ir galite sukurti pasirinktinius pagalbininkus, kad atitiktų jūsų poreikius.
Padėjėją pažymite apvynioję jį dvigubomis garbanotomis petnešomis. Prieš jo pavadinimą įtraukite maišą (#), jei norite pradėti pagalbinę žymą, ir pasvirąjį brūkšnį (/), jei norite užbaigti žymą.
Pavyzdžiui:
{{!-- jeigu vertė yra tiesa, bus pateiktas div Kitas, nebus --}}
{{#if value}}
<div>Vertė pateikta</div>
{{/if}}
Jei kuriate pasirinktinį pagalbininką, turite jį užregistruoti savo hbs jūsų konfigūracijos objektas pagrindinis.ts failą prieš naudodami jį savo programoje.
// pagrindinis.ts
importuoti { customHelper } iš './helpers/hbs.helpers';
// Įkrovos funkcijos viduje
app.engine('hbs', hbs({ extname: 'hbs', pagalbininkai: { customHelper } }));
Išraiškos
Išraiškos yra vairo šablono vienetas. Jūsų posakių naudojimas skiriasi priklausomai nuo užduoties sudėtingumo. Galite naudoti juos vienus šablone, perduoti juos kaip įvestį pagalbininkams ir kt.
Pažymėkite išraiškas su dvigubais riestiniais skliaustais, pavyzdžiui:
<h1>{{message}}</h1>
Daliniai
Dalis nurodo iš anksto išsaugotą HTML dalį, nes ji rodoma keliuose HTML failuose. Pavyzdžiui, naršymo juostos ir poraštės. Tą turinį galite saugoti viename faile ir prireikus įtraukti.
Kaip ir statiniuose ir HTML failuose, taip pat turėsite nustatyti dalinį katalogą app.engine konfigūracijos objektas.
Užregistruokite savo dalinį katalogą pridėdami šį kodą prie konfigūracijos objekto:
// pagrindinis.ts
partalsDir: prisijungti (__dirname, '..', 'peržiūros/daliniai'),
Dalinį skambutį galite pasiekti naudodami dalinio skambučio sintaksę. Dvigubuose riestiniuose skliaustuose įveskite didesnį nei simbolį (>), po kurio pateikite dalies pavadinimą.
Pavyzdžiui:
{{> nameOfPartial}}
Maketai
Rankenų išdėstymas yra HTML puslapis, naudojamas kitų programos HTML puslapių metaduomenims arba bendrajai struktūrai nustatyti. Jis veikia kaip konteineris su vietos rezervavimo ženklu, į kurį galite įterpti dinaminius duomenis.
Pavyzdžiui:
<!DOCTYPE html>
<html lang="lt">
<galva>
<meta simbolių rinkinys ="UTF-8">
<meta http-equiv="Suderinamas su X-UA" turinys="IE = kraštas">
<meta vardas ="peržiūros sritis" turinys="plotis = įrenginio plotis, pradinė skalė = 1,0">
<titulą>Šablonas „NestJS“ su vairu</title>
</head>
<kūnas>
<antraštę>
{{!-- Dalinė naršymo juosta --}}
{{>naršymo juosta}}
</header>
<div>
{{!-- Turinio rezervuota vieta --}}
{{{kūnas}}}
</div>
{{!-- Dalinė poraštė --}}
{{>poraštė}}
</body>
</html>
Kai paleidžiate kodą, rankenos perima kodo turinį .hbs failą, kurį norite pateikti, ir įterpkite juos į kūnas vietos rezervuaras. Tada jis pateikia rezultatą kaip galutinį HTML puslapį.
Turėsite užregistruoti savo maketų katalogą savo app.engine konfigūracijos objektą ir nustatykite numatytąjį maketo failą. Numatytasis išdėstymo failas yra išdėstymo failas, kurį Handlebars naudoja, jei neapibrėžiate konkretaus išdėstymo.
Pridėkite šį kodą prie savo konfigūracijos objekto, kad deklaruotumėte numatytąjį išdėstymą ir užregistruotumėte maketų katalogą:
numatytasis išdėstymas: 'Maketo failo pavadinimas',
layoutsDir: prisijungti (__dirname, '..', 'vaizdai/išdėstymai'),
.hbs failo atvaizdavimas
Valdiklio faile importuokite Res dekoratorius iš @nestjs/common ir Atsakymas iš išreikšti.
Tada maršruto tvarkyklėje pateikite argumentą, res. Priskirkite atsakymo tipą res ir pakomentuokite jį naudodami Res dekoratorių. „Res“ dekoratorius atskleidžia „Express“ savuosius atsakymų apdorojimo metodus ir išjungia standartinį „NestJS“ metodą.
Tada iškvieskite atvaizdavimo metodą res ir kaip pirmąjį argumentą nurodykite failo, kurį norite pateikti, pavadinimą. Antrajam argumentui perduokite objektą, kuriame yra išdėstymo pavadinimas ir pakaitinė išraiškos reikšmė.
Vairas naudos numatytąjį išdėstymą, nustatytą jūsų app.engine konfigūracijos objektas, jei nepateiksite maketo.
@Gauti()
gauti Sveiki(@Res() res: Atsakymas){
return res.render('Failo pavadinimas', { išdėstymas: 'maketo pavadinimas', žinutė: 'Labas pasauli' });
}
Vairo alternatyvos
Vairas yra puikus šablonų įrankis su daugybe patogių funkcijų, tokių kaip pagalbininkai ir išdėstymai. Vis dėlto, atsižvelgdami į savo poreikius, galite pasirinkti alternatyvą, pvz., EJS (įterptąjį JavaScript), mopsą arba ūsą.