- ВКонтакте
- РћРТвЂВВВВВВВВнокласснРСвЂВВВВВВВВРєРСвЂВВВВВВВВ
- РњРѕР№ Р В Р’В Р РЋРЎв„ўР В Р’В Р РЋРІР‚ВВВВВВВВРЎР‚
- Viber
- Skype
- Telegram
Не работаю стили при запуске сервера на node.js
Прошу помощи. Писали стили для странички, писал без запущенного сервера, все работало прекрасно. Решил проверить как это будет функционировать при запущенном сервере, запустил и увидел что стили не отображаются от слова совсем. Почитал про обработку статических файлов в Express, немного пофиксил код, но это ситуацию не поменяло. В чем может быть проблема?
// Подключаем все необходимые пакеты
const express = require('express')
const basicAuth = require('basic-auth')
const app = express()
// Функция для проверки логина и пароля
function checkUser(username, password) {
if (username === 'dhelfy' && password === 'pass1235') {
return true
} else {
return false
}
}
// Middleware для авторизации
function authMiddleWare(req, res, next) {
// Создаем переменную куда положим реквизиты для входа из запроса
let credentials = basicAuth(req)
// Проверяем запрос на заполненность и проверяем реквизиты с помощью функции checkUser
if (!credentials || !checkUser(credentials.name, credentials.pass)) {
res.setHeader('WWW-Authenticate', 'Basic realm="This page requires authentication"')
res.status(401).send('Anauthorized')
} else {
next()
}
}
// Два обработчика запросов на два url
app.get('/index.html', function(req, res) {
res.sendFile(__dirname + '/index.html')
})
app.get('/secured.html', authMiddleWare, function(req, res) {
res.sendFile(__dirname + '/secured.html')
})
app.use(express.static('public'))
// Запуск сервера который будет слушать запросы на 3000 порту
app.listen(3000, () => {
console.log('Сервер запущен на порту 3000')
})
:root {
--text: #e9ecec;
--background: #101014;
--primary: #480f89;
--secondary: #2b2b77;
--accent: #45a1d7;
--linearPrimarySecondaryAccent: linear-gradient(90deg, #480f89, #2b2b77, #45a1d7);
}
* {
padding: 0px;
margin: 0px;
color: var(--text);
font-family: "Poppins";
}
h1 {
font-size: 48px;
}
button {
background-color: var(--primary);
height: 50px;
width: 120px;
border-radius: 5px;
border: none;
font-weight: 600;
}
button:active {
background-color: var(--secondary);
}
.body {
background-color: var(--background);
}
.centered-flex-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.main-content {
width: max-content;
display: flex;
flex-direction: column;
align-items: center;
}
.gradient-italic {
font-style: italic;
background: var(--linearPrimarySecondaryAccent);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Start Page</title>
<link rel="stylesheet" href="/public/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
</head>
<body class="body">
<div class="centered-flex-container">
<main class="main-content">
<h1>Hello! This is a <span class="gradient-italic">start page!</span></h1>
<button class="login-button" onclick="location.href = 'secured.html'">Login</button>
</main>
</div>
</body>
</html>
Ответы (1 шт):
Немного почитав, сам выяснил, что при указании в Express из какой директории брать статически файлы не нужно дополнительно прописывать имя этой директории при указании пути до файла в том же HTML.
В моем случае мы указываем имя директории здесь app.use(express.static('public'))
и его не нужно указывать в пути до .css файла повторно при подключении. Поэтому верный путь будет таким: <link rel="stylesheet" href="/style.css">
, вместо <link rel="stylesheet" href="/public/style.css">
. Большая благодарность @Arbery