Первая страница правильно загружает css, однако при нажатии на ссылку, которая загружает руль с новым параметром url, css не загружается.
Посмотрев на консоль, вкладку сети, я увидел, что приложение пытается загрузить файл CSS на один уровень выше, как если бы была другая папка /styles.css. Я использую узел + express + handlebars.
Вызов файла css в индексе. html file:
Остальные файлы являются .handlebars, загруженными в index. html file.
Проблема возникает при выполнении функции:
app.get('/artistaslist/:letra', function(req, res){
На этом изображении обратите внимание на URL без параметра CSS, загруженного правильно.
На этом изображении обратите внимание на URL с параметром CSS НЕ загружен. И к пути к файлу добавляется еще один уровень, см. Выделение на изображении.
const path = require('path');
const express = require("express");
const app = express();
const handlebars = require('express-handlebars');
const bodyParser = require("body-parser");
const Artista = require('./models/Artista')
// Para raw queries:
const { QueryTypes } = require('sequelize');
const { Op } = require("sequelize"); // Para operações com like
//Configs
// Template engine
app.engine('handlebars', handlebars({defaultLayout: 'main'}))
app.set('view engine', 'handlebars')
// Body parser - usado para pegar dados dos forms
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())
//o recurso path no começo do código resolve todas as pastas abaixo da pasta view
app.use("/views", express.static(path.resolve(__dirname, 'views')));
// Rotas
//Rota página iniciao
app.get('/', function(req, res){
res.sendFile(__dirname + '/views/layouts/index.html');
})
// Rota lista de artistas cadastrados
app.get('/artistaslist', function(req, res){
Artista.findAll({order: [['nome_completo', 'ASC']]}).then(function(artistas){
res.render(__dirname +'/views/layouts/artistaslist', {artistas: artistas})
})
})
//Rota para listar artistas iniciando por uma letra
app.get('/artistaslist/:letra', function(req, res){
Artista.findAll({
where: {
nome_completo: {
[Op.like]: req.params.letra + '%'
}
}
}).then(function(artistas){
res.render(__dirname +'/views/layouts/artistaslist', {artistas: artistas})
console.log("Diretorio atual: "+ __dirname);
})
})
// Rota de cadastro de artistas
app.get('/cadartista', function(req, res){
res.render(__dirname +'/views/layouts/formulario')
})
//Rota para deletar um registro
app.get('/deletar/:id', function(req, res){
Artista.destroy({where: {'id': req.params.id}}).then(function(){
res.send("Artista deletado com sucesso!")
}).catch(function(erro){
res.send("Ocorreu um erro: "+erro)
})
})
app.post('/add', function(req, res){
//Criando artista, acessando o Artistainsert
Artista.create({
nome_completo: req.body.nome,
email: req.body.email,
nacionalidade: req.body.selectNacionalidade,
observ: req.body.obs
}).then(function(){
res.redirect('/artistaslist')
}).catch(function(erro){
res.send("Ocorreu um erro: "+ erro)
})
})
//Final
app.listen(3000, function(){
console.log("Serv rodando na porta 3000");
});
//Parei na aula 20
Я ценю, если кто-то может мне помочь.