Файл Express Javascript не будет включен в метод get с параметрами

ProgramBox

Файл Express Javascript не будет включен в метод get с параметрами

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#node.js #express

#node.js #экспресс

Вопрос:

Я пытаюсь отобразить индексный файл с помощью Express Node.js успешно, но если я использую пространства имен с параметром, без параметра отрисовываю файл twig и включаю собственные скрипты, если я использую try with parameter, отрисовываю нормально, но проблема с путем к файлам скриптов, поэтому файлы скриптов в head в html не могут быть включены, пока путь не правильный

например, без параметра в файле html style.css выглядит как <link rel="stylesheet" href="style.css"> путь http://127.0.0.1:3000/style.css

с параметром в стиле html-файла.css выглядит как <link rel="stylesheet" href="style.css"> путь http://127.0.0.1:3000/mynamespace/style.css <— и это не найдено!

скажем, путь к браузеру не найден!

Server.js

     const port          = 3000;
    const express       = require('express');
    const app           = express();
    const http          = require('http');
    const socketIO      = require('socket.io');
    const server        = http.Server(app);

    server.listen(this.port, () => {
        console.log(`Server running on: http://127.0.0.1:${port}`);
    });

    const io = socketIO(server);


    app.set('view engine', 'twig');
    app.set('views', "views");

    app.use(express.static('public'));
    app.use(express.static('scripts'));
    app.use(express.static("styles"));

    /// Routing

    /**
     * This work fine
     * Render client.twig
     * Including Scripts in head
     */

    app.get('/mynamespace', function (req, res, next) {
        res.render("client");
    });

    /**
     * This work with error
     * Render client.twig
     * don't Including Scripts in head
     * 
     */
    app.get('/mynamespace/:id', function (req, res, next) {
        res.render("client");
    });


    io.of("/mynamespace").on('connection',(socket)=>{

        socket.on('online_users', (data) => {
            console.log(`Online Users ${data}`);
        });
    });

client.js

 let url = `http://127.0.0.1:3000/mynamespace`;
console.log("Url", url);
this.socket =  io(url);

this.socket.on("connect", ()=>{
        try{
            this.socket.emit('welcome', {
                message:"Welcome guest"
            });
        } catch (e) {
            alert(e.message);
        }
});

клиент.twig

 <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" const="text/html;charset=UTF-8"/>
    <title>RestoCommend</title>
    <script src="/socket.io/socket.io.js"></script>
    <link rel="stylesheet" href="style.css"
</head>

<body>
<h3>Client</h3>

<script src="helper.js"></script>
<script src="client.js"></script>
</body>
</html>

Ответ №1:

Из вашего кода похоже, что style.css файл находится в том же каталоге, что и client.twig который является views каталогом. Но вы сказали express, что статическими каталогами являются public , scripts и styles . Для express нет инструкции, позволяющей узнать, откуда использовать css. Попробуйте переместить файл style.css в каталог styles.

Удачи.

1. Спасибо за ответы, моя иерархия файлов Моя иерархия файлов Root > Public. > ‘socket.io.js , Helper.js ‘ Root > скрипты > ‘main.js , support.js , index.js ‘Root> styles > ‘main.css, support.css, index.css’ Root > serv > ‘server.js ‘ Root > views > ‘main.twig, support.twig, index.twig’

Ответ №2:

Похоже, вы хотите обслуживать свои статические файлы по относительному пути. Попробуйте следующее:

 app.use('/mynamespace', express.static('public'))
app.use('/mynamespace', express.static('scripts'))
app.use('/mynamespace', express.static('styles'))

А также

     <link rel="stylesheet" href="mynamespace/style.css" />

Ответ №3:

Моя иерархия файлов

Я решил свою проблему, но не очень хорошая идея

Server.js

 app.get('/mynamespace1', function (req, res, next) {
     app.use(express.static('public'));
     app.use(express.static('scripts'));
     app.use(express.static("styles"));
     res.render("client1");
});

пространство имен, основанное на одном параметре!

 app.get('/mynamespace2/:clientId', function (req, res, next) {
     app.use(express.static(path.join( __dirname   "/../", 'public')))
     app.use(express.static(path.join( __dirname   "/../", 'scripts')))
     app.use(express.static(path.join( __dirname   "/../", 'styles')))
     res.render("client2");
});

больше как одно пространство имен на основе параметров!

 app.get('/mynamespace3/:roomName/:clientId', function (req, res, next) {
     app.use(express.static(path.join( __dirname   "/../", 'public')))
     app.use(express.static(path.join( __dirname   "/../", 'scripts')))
     app.use(express.static(path.join( __dirname   "/../", 'styles')))
     res.render("client3");
});

client1.twig

 <link rel="stylesheet" href="style.css">
<script src="helper.js"></script>
<script src="client.js"></script>

Все нормально

client2.twig

 <script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="../style.css">
<script src="../helper.js"></script>
<script src="../client.js"></script>

с одним параметром пути скрипта определены для родительского

client3.twig

 <script src="/socket.io/socket.io.js"></script>
<link rel="stylesheet" href="../../style.css">
<script src="../../helper.js"></script>
<script src="../../client.js"></script>

при большем количестве параметров родительская папка определена до тех пор, пока не будет задан номер параметра

Моя проблема решена, но мне это так не нравится