0
Hello, I have a problem in my code, after registering 2 inputs should appear a message of success in uam green div, but only appears the green div and the message no, already revised the code several times and not yet found the error (probably some silly mistake but unfortunately I can not find), thanks for the help!!
Below is the code:
App.js:
// Carregamento de modulos
// Constante que recebe o express
const express = require('express');
// Constante que recebe o handlebars
const handlebars = require('express-handlebars');
// Constante que recebe o bodyparses
const bodyParser = require('body-parser');
// Constante que recebe o mongoose
const mongoose = require('mongoose');
// Constante que recebe a função do express
const app = express();
// Constante para chamar rotas de um arquivo externo (usar nome do arquivo no nome da constante)
const admin = require('./routes/admin.js');
// Constante para receber modulo de arquivos estaticos e trabalhar com diretorios
const path = require('path');
// Constante pare receber o modulo session
const session = require('express-session');
// Constante para receber o modulo flash
const flash = require('connect-flash');
// Configurações
// Configuração das sessões
app.use(session({
// Chave para gerar uma sessão
secret: 'root',
resave: true,
saveUninitialized: true
}));
// Configuração da sessão flash
app.use(flash());
// Middleware
app.use((req, res, next) => {
// Comando 'locals' para criar variaveis globais
res.locals.success_msg = req.flash('success_msg');
res.locals.error_msg = req.flash('error_msg');
// Comando 'next();' para permitir que as rotas avancem apos passarem no mdidleware
next();
});
// Configuração do BodyParser
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
// Configuração do HandleBars
app.engine('handlebars', handlebars({defaultLayout: 'main'}));
app.set('view engine', 'handlebars');
// Configuração do Mongoose
mongoose.Promise = global.Promise;
mongoose.connect('mongodb://localhost/blogapp', {useNewUrlParser: true}).then(() => {
console.log('Connected to MongoDB');
}).catch((err) => {
console.log('Error to connect: ' + err);
});
// Configuração do caminho (Path) na pasta public
app.use(express.static(path.join(__dirname, 'public')));
// Rotas
// Comando para chamar um grupo de rotas em um arquivo especifico
app.get('/', (req, res) => {
res.send('Index Route!');
});
app.get('/posts', (req, res) => {
res.send('Post Lists!');
})
app.use('/admin', admin);
// Outros
// Constante da porta localhost
const PORT = 8081;
// Função para abrir o servidor na porta selecionada
app.listen(PORT, () => {
console.log('Server running!');
})admin js.:
//Carregamento de modulos
// Constante que recebe o express
const express = require('express');
// Constante para cirar rota em arquivo externo
const router = express.Router();
// Constante que recebe o mongoose
const mongoose = require('mongoose');
// Comando para chamar o path 'models'
require('../models/Category');
// Constante para importar o arquivo Category.js com os comandos do mongo da pasta 'models'
const Category = mongoose.model('categories');
// Rota principal para o painel administrativo
router.get('/', (req, res) => {
res.render('admin/index')
});
// Rota para listar posts
router.get('/posts', (req, res) => {
res.send('Post page!');
});
// Rota para cadastrar categorias
router.get('/categories', (req, res) => {
res.render('admin/categories');
});
// Rota onde são adicionadas as categorias
router.get('/categories/add', (req, res) => {
res.render('admin/addcategories');
});
// Rota onde as categorias adicionadas aparecem
router.post('/categories/new', (req, res) => {
// Validação do formulario (manual)
var error = []
// Verificação do campo nome: vazio, indefinido ou nulo
if (!req.body.name || typeof req.body.name == undefined || req.body.name == null){
// Comando push para colocar um novo dado dentro do array
error.push({text: 'Invalid name'});
}
// Verificação do campo slug: vazio, indefinido ou nulo
if (!req.body.slug || typeof req.body.slug == undefined || req.body.slug == null){
error.push({text: 'Invalid slug'});
}
// Verificação da quantidade de caracteres inseridos do nome
if (req.body.name.length < 2){
error.push({text: "Name of category too short"});
}
// Verificação de erros de acordo com o array, se error for maior que 0, houveram erros
if (error.length > 0){
res.render('admin/addcategories', {error: error})
// Se o array for < ou = 0, os dados são inseridos no banco
} else {
const newCategory = {
// Comando para pegar o input do <form> com o 'name' = name
name: req.body.name,
// Comando para pegar o input do <form> com o 'name = slug
slug: req.body.slug
};
new Category(newCategory).save().then(() => {
// Comando flash para chamar a variavel global 'success_msg' caso tenha sucesso ao cadastrar o formulario
req.flash("success_msg", "Successfully created category!");
// Redirecionamento para a pagina 'categories'
res.redirect('/admin/categories')
}).catch((err) => {
// Comando flash para chamar a variavel global 'error_msg' caso ocorra um erro ao cadastrar o formulario
req.flash("error_msg", "There was an error registering the category, please try again!");
// Redirecionamento para pagina 'admin' caso aconteça um erro
res.redirect('/admin');
})
}
})
// Exportação final para sincronizar as rotas (esse comando sempre devera ficar no final do codigo!)
module.exports = routermain handlebars.:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<!-- Comando para linkar o html com o CSS do Bootstrap -->
<link rel="stylesheet" href="/css/bootstrap.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blog NodeJS</title>
</head>
<body>
<!-- Comando para importar um arquivo .handlebars externo -->
{{>_navbar}}
<div class="container mt-4">
<!-- Comando para chamar as variaveis globais de mensagem de erro -->
{{>_msg}}
<!-- Comando para chamar o body direto do framework handlebars -->
{{{body}}}
</div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="/js/bootrstrap.js"></script>
</html>addcategories.handlebars:
{{#each error}}
<div class="alert alert-danger">{{text}}</div>
{{else}}
{{/each}}
<h3>New category: </h3>
<div class="card">
<div class="card-body">
<form action="/admin/categories/new" method="POST">
<label for="name">Name: </label>
<input type="text" id="name" name="name" placeholder="Category name" class="form-control">
<label for="slug">Slug: </label>
<input type="text" id="slug" name="slug" placeholder="Slug of category" class="form-control">
<br>
<button type="submit" class="btn btn-success">Create cateogry</button>
</form>
</div>
</div>_msg.handlebars:
{{#if success_msg}}
<!-- Div para exibir mensagem de sucesso ao cadastrar formulario -->
<div class="alert alert-success"{{success_msg}}></div>
{{/if}}
{{#if error_msg}}
<!-- Div para exibir mensagem de erro ao cadastrar formulario -->
<div class="alert alert-danger">{{error_msg}}</div>
{{/if}}