Hej gutter! Jeg hedder João Pedro, og i dag vil jeg gennem denne artikel tale om en teknologi, som jeg bruger meget, nunjucks, og også lave en CRUD med den!
Men hvad er en skabelonmotor?
Skabelonmotor er grundlæggende for dig at gøre din html mere "dynamisk", for eksempel:
I back-end sender jeg en variabel med værdien "x", og for at få adgang til denne variabel gennem html'en kan jeg bruge en skabelonmotor.
Brug af nunjucks i praksis!
Det første trin er at oprette et node.js-projekt
Det er ret simpelt!!
Åbn din terminal, indtast projektbiblioteket og skriv:
Skal have node og npm installeret!
npm init -y
"-y" bruges til at oprette filen package.json uden at stille spørgsmål. Denne fil indeholder information om dette projekt.
Når vi har gjort det, kan du åbne projektbiblioteket i en editor efter eget valg. I mit tilfælde vil jeg bruge Vscode.
Så vil vi oprette server.js-filen i projektets rod, i denne fil vil projektets ruter være.
For at oprette ruterne skal vi installere Express
Express er en node.js-ramme til at skabe webapplikationer og api'er
For at installere det skal du køre følgende kommando i din terminal.
npm install express
Efter installationen vil du i filen package.json have alle afhængigheder for dit projekt, og mappen node_modules blev også oprettet, hvor afhængighedskoden er.
I server.js-filen vil vi skrive vores ruter!
const express = require("express")
const server = express()
server.get("/", (request , response) => {
return response.send("Está rota está funcionando!")
})
I koden ovenfor:
- Vi importerer ekspres til vores projekt
- Vi oprettede variablen "server", den vil indeholde alle vores ruter.
- Vi lavede en GET-rute, der, når den åbnes, returnerer:"Denne rute virker!"
Nu kan vi oprette en mappe kaldet "views" den vil indeholde hele html'en i projektet.
Opret filen "home.html" i visningsmappen og skriv:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>CRUD com nunjucks</h1>
<form action="/post" method="post">
<input type="text" placeholder="Seu nome." name="name">
<input type="email" name="email" placeholder="Seu email.">
<button type="submit">Enviar!</button>
</form>
</body>
</html>
I server.js-filen skal vi importere nunjucks, men først skal vi have det installeret.
npm install nunjucks
Efter installationen, lad os konfigurere den.
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")
// Configurando a pasta public.
server.use(express.static("public"))
// Configurando para receber dados do request.body.
server.use(express.urlencoded({extended:true}))
server.use(express.json());
// Config da template engine.
server.set("view engine", "njk")
nunjucks.configure("views", {
express:server,
autoescape:false,
noCache:true,
})
server.get("/", (request , response) => {
return response.render("home")
})
// Adicionando uma porta para o projeto.
server.listen(3333)
Bemærk, at vi har oprettet en mappe kaldet "offentlig", men hvorfor?
Hvis du vil tilføje css-filer, kan du oprette mappen "styles", js-filer kan du oprette mappen "scripts" og for billeder kan du oprette mappen "assets". Men disse 3 mapper skal være inde i den "offentlige" mappe og den "offentlige" mappe i projektets rod. Og nunjucks vil genkende det.
Når alt er konfigureret, skal du omdøbe filen "home.html" til "home.njk".
I terminalkørsel:
node server.js
Åbn din browser, og skriv:
i søgefeltetParat! Vi var i stand til at bruge nunjucks og node til at gengive en html-fil!
Lad os nu gøre dette CRUD! Men lad os først møde nodemon!
Nodemon
Hvis du ikke ønsker at skrive "node server.js" med hver ændring, kan du installere nodemon.
npm install nodemon -D
Efter installationen skal du bemærke, at kommandoen til at installere nodemon har "-D".
"-D" er så nodemon kun kan bruges i udviklingsmiljøet.
Nu for at starte serveren, skriv "nodemon server.js", og det er det! Serveren genstartes ved hver ændring.
CRUD med nunjucks
I roden af projektet vil vi oprette filen "data.json", en fil, hvor de data, der vil blive sendt, vil være, som om det var en database og skrive følgende:
{
"dados":[]
}
I server.js-filen vil vi lave ruten "/post" af POST-typen og importere fs for at skrive dataene i data.json-filen.
const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")
server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
express:server,
autoescape:false,
noCache:true,
})
server.get("/", (request , response) => {
return response.render("home")
})
server.post("/post", (request, response) => {
const keys = Object.keys(request.body)
// Vendo se nenhum dado está vazio.
for (key of keys) {
if (request.body[key] == '') {
return response.send("Please, fill all fields")
}
}
// Desestruturando o request.body e pegando os dados dele.
let { name, email } = request.body
// A Variavel do ID.
const id = Number(data.dados.length + 1)
// Inserindo no json os dados.
data.dados.push({
id,
name,
email,
})
// Escrevendo no json as alterações.
fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
if (err) {
return response.send("White file error... :(")
}
return response.redirect("/")
})
})
server.listen(3333)
I GET-ruten for server.js-filen vil vi ændre den til også at returnere en variabel.
const data = require("./data.json")
const fs = require("fs")
const express = require("express")
const server = express()
const nunjucks = require("nunjucks")
server.use(express.static("public"))
server.use(express.urlencoded({extended:true}))
server.use(express.json());
server.set("view engine", "njk")
nunjucks.configure("views", {
express:server,
autoescape:false,
noCache:true,
})
server.get("/", (request , response) => {
// Retornando uma variavel para o frontend.
return response.render("home",{data: data.dados})
})
server.post("/post", (request, response) => {
const keys = Object.keys(request.body)
for (key of keys) {
if (request.body[key] == '') {
return response.send("Please, fill all fields")
}
}
let { name, email } = request.body
const id = Number(data.dados.length + 1)
data.dados.push({
id,
name,
email,
})
fs.writeFile("data.json", JSON.stringify(data, null, 2), (err) => {
if (err) {
return response.send("White file error... :(")
}
return response.redirect("/")
})
})
server.listen(3333)
Til sidst, i "home.njk" filen vil vi skrive:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
</head>
<body>
<h1>CRUD com nunjucks</h1>
<form action="/post" method="post">
<input type="text" placeholder="Seu nome." name="name">
<input type="email" name="email" placeholder="Seu email.">
<button type="submit">Enviar!</button>
</form>
<div class="dados">
<ul>
<h1>Dados</h1>
<!--
Aqui ja estamos utilizando um método do nunjucks o for.
-->
{% for dados in data %}
<ul>
<li>Nome:{{dados.name}}</li>
<li>Email:{{dados.email}}</li>
</ul>
{% endfor %}
</ul>
</div>
</body>
</html>
Bemærk, at vi i denne kode ovenfor har et for, men hvad for?
For blev brugt til at gennemgå datavariablen, som vi sendte i backend, og nu returnerer den en anden variabel med navnet data
Altså
For hver data vil den returnere:
<ul>
<li>Nome:"o nome"</li>
<li>Email:"o email"</li>
</ul>
Afsluttende projekt med nogle data:
Glem ikke, at med hver ændring køres "node server.js"
Hvis denne artikel virkelig hjalp dig, så del den med dine venner, efterlad et like, hvis du har, og vi ses næste gang!
Hvis du har spørgsmål, så tjek github-lageret, der indeholder al den kode, der er udviklet i denne artikel!
Link til depotet.