ExpressJS для рендеринга контента по запросу GET - PullRequest
Новая
       2

ExpressJS для рендеринга контента по запросу GET

0 голосов
/ 05 сентября 2018

У меня есть HTML-страница, как показано ниже 

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Report</title>
<link rel="stylesheet" href="assets/app.css"/></head><body>

//Content//

<div id="report"></div><script src="assets/app.js"></script></body></html>

Эта HTML-страница находится в папке ниже со структурой 

report
   --assets
      --app.js
      --app.css
   --myfile.html

Теперь у меня есть приложение, которое пытается отрисовать этот HTML. Внизу находится вways.js и структура выглядит следующим образом 

app.use('/Users/report/assets', express.static('/Users/report/assets'));
app.get('/api/testresults/:id', (req, res) => {
    const id = req.params.id;
    res.sendFile('/Users/report/myfile.html');
  });

Моя структура приложения выглядит следующим образом 

MyApp 
app 
 —routes
    —index.js
    —routes.js
node_modules
package.json
server.js

Что я должен добавить сюда. Я не хочу менять html, так как считаю, что он сможет найти файлы после того, как я использую express.static () Я продолжаю получать сообщение об ошибке app.js не найдено 404

ПРИМЕЧАНИЕ: если я изменю href моего html на 

/Users/report/assets/app.js

и то же самое для CSS, это работает, но я не хочу этого.

Ответы [ 3 ]

0 голосов
/ 05 сентября 2018

Вы все еще пытаетесь указать путь с /Users/report/assets, где в html <script src="assets/app.js"></script>

Попробуйте изменить приведенный ниже код, 

app.use('/Users/report/assets', express.static('/Users/report/assets'));

до 

app.use('assets', express.static('/Users/report/assets'));
0 голосов
/ 05 сентября 2018

Так как у вас есть: 

app.use('/Users/report/assets', express.static('/Users/report/assets'));

Вы должны использовать в качестве пути app.js вместо assets / app.js в любом случае с app.css

0 голосов
/ 05 сентября 2018

Если вы хотите, чтобы ваши ресурсы, такие как assets/app.css, не зависели от URL-адреса страницы, с которой они пришли, чтобы они могли жить где угодно в вашей файловой системе, то прекратите использовать относительные URL-адреса. Используйте абсолютные URL-адреса для ссылки на них на вашей веб-странице, например: 

/assets/app.css
/assets/app.js

Затем вы можете очень легко настроить маршрут express.static() для обработки их для всех страниц. 

app.use(express.static("put directory here that contains the assets folder"));

Что, я понимаю из вашего вопроса, будет следующим: 

app.use(express.static('/Users/report'));

Когда Express получает запрос на /assets/app.css, он проверяет обработчик маршрута express.static(). Если вы указали родительский каталог для своей папки assets в express.static(), тогда этот обработчик маршрута будет искать В ЭТОМ ДИРЕКТОРИИ для /assets/app.css, что вам и нужно.

Итак, в приведенном выше примере запрос на /assets/app.css будет скомбинирован с путем, указанным в express.static('/Users/report'), и будет выглядеть: 

/Users/report/assets/app.css

Что бы вы хотели.

Если путь, который вы используете для ресурса в своем HTML-файле, не начинается с http:// или с /, то браузер считает, что он относится к URL-адресу страницы, поэтому браузер выбирает путь веб-страницу и подготавливает ее к URL, указанному в вашем HTML. Это действительно усложняет статические ресурсы, поэтому обычно это не то, что вам нужно. Вместо этого вы хотите сделать их абсолютными путями, убедившись, что они начинаются с /. Затем их легко настроить, потому что маршрут будет одинаковым независимо от того, какой путь содержит страница, на которой они находятся.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...