Экспресс-сервер загружает HTML-страницу с / без css / js, когда последний символ маршрута без / с '/', соответственно - PullRequest
0 голосов
/ 30 марта 2019

Следующее влияет на мою вторую html-страницу. model.html : Если мой адрес маршрута с '/ в конце (напечатан в поле адреса браузера), например: http://localhost:3002/home/model/, тогда загружается правильная html-страница, но не загружаются css / js.

Если мой адрес маршрута без '/ в конце, например: http://localhost:3002/home/model, тогдазагружается правильная html-страница и загружается css / js.

Без '/' в конце, css / js прекрасно загружается, используя statics / css / style.css и js / dynamicData.js

Странная часть в том, что когда '/' заканчивается, я могу использовать .. / statics / css / style.css для загрузкиcss и "../ js / chartData.js" для загрузки js - но это означает, что тот без '/' теперь больше загружает css / js.

My folder structure:
    js - has other js scripts
    node_modules
    statics
      css - has style.css
      image - has images
      index.html
      model.html
    index.js - init express server
    pc_server.js - express server

Express code(pc_server.js)

Настройка промежуточного программного обеспечения?:

process.chdir(__dirname);
// base = '/home'
app.use(base, express.static(__dirname));

Маршруты:

const INDEX_PAGE = '/';
const MODEL_PAGE = '/home/model';

function setupRoutes(app) {

  const BASE = app.locals.base;

  app.get(INDEX_PAGE, redirectHome(app));

  // BASE = '/home'
  app.get(BASE, toHomePage(app));
  app.get(MODEL_PAGE, toModelPage(app));

Определены функции маршрутов:

function redirectHome(app) {
  return errorWrap(async function(req, res) {
    try {
      res.redirect(app.locals.base);
    }
    catch (err) {
      console.error(err);
    }
  });
}

function toHomePage(app) {
  return errorWrap(async function(req, res) {
    try {
      res.sendFile(path.join(__dirname+'/statics/index.html'));
    }
    catch (err) {
      console.error(err);
    }
  });
}

function toModelPage(app) {
  return errorWrap(async function(req, res) {
    try {
      res.sendFile(path.join(__dirname+'/statics/model.html'));
    }
    catch (err) {
      console.error(err);
    }
  });
}

Цельдолжен загрузить ту же страницу css / js с http://localhost:3002/home/model/ or http://localhost:3002/home/model

Дополнительно: почему при вводе http://localhost:3002/home я автоматически получаю http://localhost:3002/home/ в поле адреса моего браузера?

1 Ответ

1 голос
/ 30 марта 2019

проблема

это, вероятно, происходит из-за относительных ссылок на вашем сайте.

  • при использовании home/model - относительная ссылка css/style.css приведет к home/css/style.css
  • при использовании home/model/ та же ссылка приведет к home/model/css/style.css

решение:

Самый простой способ решить эту проблему - изменить тег ссылки на:

<link rel="stylesheet" type="text/css" href="../../home/statics/css/style.css">

эта ссылка идет на корневой адрес, а затем вводит ваш путь независимо от пути пользователя.

почему это работает?

префикс ../../ указывает браузеру перейти на два уровня вверх.

браузер рассматривает "home / model /" как посещение внутри папки модели внутри домашней папки. два уровня вверх ведут браузер на корневой уровень, где он имеет чистый старт. когда пользователь заходит в «home / model», он рассматривается как файл внутри домашней папки. один уровень вверх является корневым, а второй ../ ничего не делает.

после достижения корневого уровня - браузер вводит "home / statics / css / style.css" и находит нужный файл в обоих случаях:)

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