Loading repository data…
FelipeSantanaa / repository
Projeto para aprendermos a trabalhar com o Express Generator e com EJS.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Projeto para aprendermos a trabalhar com o Express Generator e com EJS.
#Instalando o express generator de forma global
npm install express-generator -g
#Criando um projeto chamado server e indicando que usaremos a template view EJS
express server --view=ejs
#Acessando a pasta criada pelo express generator
cd server
#Instalando as dependências
npm install
#Instalação do nodemon como uma dependência de desenvolvimento
npm i nodemoon --save-dev
Usando o Nodemon para escutar as mudanças nos arquivos JS e atualizar o servidor automaticamente:
{ "start": "nodemon ./bin/www" }
Levantando o servidor - na pasta server executar o comando via terminal npm start.
Para entendermos o esquema MVC + Rotas, vamos percorrer uma rota de usuários.
Tudo começa no arquivo server\app.js. Ele importa o arquivo responsável pelas rotas de usuários e o utiliza quando o usuário final acessar uma rota que comece com
/users, conforme trecho de código (code snippet) a seguir:
app.use('/users', usersRouter);
Vamos ver o arquivo de rotas de usuários - server/routes/users.js:
const express = require('express'),
router = express.Router(),
userController = require('../controllers/users')
router.get('/', userController.index);
module.exports = router;
Pelo arquivo, podemos reparar que estamos importando o arquivo server/controllers/users.js -
arquivo responsável pelos controladores de rotas (de usuários, no caso).
Podemos ainda perceber que para a rota do tipo GET na raiz (/), estamos acessando o método index desse controller.
Vamos ver o que faz esse controller e o seu método index... Arquivo server/controllers/users.js:
const controller = {
index: (req, res, next) => {
res.render('users', {
titulo: 'Usuários',
subtitulo: 'do site do Jefferson'
});
}
}
module.exports = controller
Como podemos observar, esse controller não passa de um objeto. Esse objeto possui uma chave chamada index que, por sua vez tem uma função atribuida a ela.
Por isso a chamamos de método - e não propriedade.
Ou seja, quando o usuário acessa /users, o app chama o arquivo de rotas de usuários. Esse, por sua vez, a partir da rota acessada chama o método do controller que definimos.
No caso, método index do controller de usuários.
A resposta desse método será renderizçaão de uma view chamada users passando 2 propriedades para a view, no caso, title e subtitle
<html>
<head>
<title><%= titulo %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= titulo %></h1>
<p><%= subtitulo %></p>
</body>
</html>
Então finalmente temos nossa view users, consumindo o título e o substítuto enviados como segundo argumento do método render (que recebe o nome da view e o objeto que terá suas propriedades compartilhadas com a view).
Selected from shared topics, language and repository description—not editorial ratings.
celiorscosta /
Uma aplicação criada para aprendermos os principios do TypeScript e como adiciona-lo a um projeto existente.
29/100 healthceliorscosta /
Uma aplicação criada para aprendermos os principios do TypeScript e como adiciona-lo a um projeto existente.
28/100 healthceliorscosta /
Uma aplicação criada para aprendermos os principios do TypeScript e como adiciona-lo a um projeto existente.
29/100 healthMarcosPauloJS /
Be the hero e um projeto que está sendo desenvolvido na semana omniStack, Um excelente conteúdo que a Rocketseat proporciona de forma gratuitas para aprendermos na pratica uma ótima stack javascript. Usando o express para o back end, reactjs para o front e react native para mibile.
15/100 health