Экспресс-маршрутизация не работает при добавлении нескольких заполнителей - PullRequest
Новая
       3

Экспресс-маршрутизация не работает при добавлении нескольких заполнителей

0 голосов
/ 08 мая 2018

Привет, я изучаю узел js, а пока я сталкиваюсь с этой проблемой. 

app.use(express.static("public"));
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

/*This route is working fine */
app.get("/:username", function (req, res) {

res.sendFile(__dirname + "/public/ui/" + "user.html");
});

/*This route is not working */
app.get("/:username/:id", function (req, res) {
 res.sendFile(__dirname + "/public/ui/" + "user.html");
});

Структура моей папки 

-server
  -public
    -ui 
        -ext (external files folder)
        - images(all images folder)
        -js (My js files folder)
        -style (my css folder)
        -user.html 
-index.js
-user.js

Когда я пытаюсь загрузить URL http://localhost:8888/stranger/19,, моя страница загружается, но ни один из файлов, указанных в user.html, не загружается. Похоже, что URL моего CSS-файла http://localhost:8888/stranger/ui/style/main.css вместо http://localhost:8888/ui/style/main.css.

Это происходит для всех файлов, загружаемых через пользовательский интерфейс. ("http://localhost:8888/stranger" это идет вместо" http://localhost:8888"). Как я могу решить эту проблему 

<!DOCTYPE html>
  <html>
    <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="ui/style/main.css" >

    <script src="ui/ext/jquery/jquery.min.js" ></script>   
    <script src="ui/ext/bootstrap-3.3.4/js/bootstrap.min.js" i></script>
    <script src="ui/ext/moment.js" i></script>
    <script src="ui/js/main.js" ></script>
    <script src="ui/js/web.js" ></script>
    <script src="ui/js/user_module.js" ></script>
    <script src="ui/js/chat_module.js" ></script>

</head>
<body class="pz-main"> 
</body></html>

Ответы [ 2 ]

0 голосов
/ 08 мая 2018

Проблема с атрибутом href.

Ваш текущий атрибут href в теге link:

<link rel="stylesheet" href="ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >

Что означает использование текущего URL в качестве base url. Измените его следующим образом:

<link rel="stylesheet" href="/ui/ext/bootstrap-3.3.4/css/bootstrap.min.css" >

Просто добавьте / в начале, и это должно решить проблему.

0 голосов
/ 08 мая 2018

Добавить файл route к static к public directory

app.use(express.static('public'))

Вот документация по использованию общей папки

Тогда в вашем html укажите путь, как 

<link rel="stylesheet" type="text/css" href="/ui/style/main.css">

Вот рабочие коды:

ваш app.js или server.js, где определено express 

var express = require('express');
var app = express();

app.use(express.static('public'))

app.get("/:username", function (req, res) {
    res.sendFile(__dirname + "/public/ui/" + "user.html");
});

app.get("/:username/:id", function (req, res) {
    res.sendFile(__dirname + "/public/ui/" + "user.html");
});

var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
})

Ваш user.html в public/ui direcrtory. 

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/ui/style/main.css">
  </head>
  <body>
    Page will be in green color due to css
  </body>
</html>

Ваш css в каталоге public/ui/style. 

body{
  background: green; 
}

Выполните следующие действия, и все заработает.

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

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

...