Как включить CSS-файлы в представления Express.js, когда не используется движок шаблонов? - PullRequest
0 голосов
/ 19 апреля 2019

Я пытаюсь создать приложение Express.Мои ограничения заключаются в том, что я не могу использовать какой-либо шаблонизатор для рендеринга HTML.Есть (как минимум) две проблемы:

  1. Одна из проблем, которые я предвидел, - как мне удастся манипулировать данными на основе того, что мне нужно показать пользователю.Например, у меня есть таблица транзакций в моей базе данных, и мне нужно отобразить таблицу HTML всех этих транзакций.Традиционный способ, которым я пользуюсь, - это использование механизма шаблонов, где я могу поместить цикл for, который просматривает записи.
  2. Я отправляю файл HTML, когда вызываю определенный маршрут, но этоне могу получить файлы CSS из другой папки.

Для проблемы 2. Я пробовал:

app.get('/transactions', (req, res) =>
    res.sendFile(path.join(__dirname+'/public/assets/html/transactions.html')))

, а затем в Transactions.html у меня есть

<link rel="stylesheet" href="../stylesheets/shared/constants.css">
и другие ссылкик таблицам стилей.

При отображении страницы не применяется ни один из стилей.Когда я проверил исходный код в браузере и щелкнул ссылку для constants.css, он показывает сообщение:

Cannot GET /stylesheets/shared/constants.css

Это не похоже на правильную логику.Какие вещи должны быть изменены?

1 Ответ

2 голосов
/ 20 апреля 2019

Простой пример:

Предполагая структуру вашей папки:

app.js
|   +-- public
|   |   +-- stylesheets
|   |   |   +-- shared
|   |   |   |   +-- constants.css
...

Вы можете просто настроить общую папку сервера как:

app.use(express.static(__dirname + "/public"))

// In your html
<link rel="stylesheet" href="/stylesheets/shared/constants.css">

С экспрессом лучше использовать absolute путь по relative пути.

Или настройте виртуальный путь для ваших статических файлов, например:

app.use('/static', express.static(__dirname + "/public"))

// In your html
<link rel="stylesheet" href="/static/stylesheets/shared/constants.css">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...