Блог

Главная - Вопросы по программированию - JS-файл на стороне клиента не работает | node.js

JS-файл на стороне клиента не работает | node.js

#javascript #html #node.js

#javascript #HTML #node.js

Вопрос:

Итак, я просто создал HTML-страницу, добавил тег script с src в js-файл и отправил HTML-файл в качестве ответа с помощью node js, используя HTTP-модуль. Но файл js не работает, и когда я проверил вкладку сеть, я увидел, что файл js получен как текстовый / html-файл.

Ниже приведены коды js и html.

Серверный код с узлом js

 const http = require('http') ;
const file = require('fs') ;

const server = http.createServer((req, res) => {
    
    file.readFile('public/login.html', (err, data) => {
        if (err) throw err ;
        res.writeHead(200, {'Content-Type': 'text/html'}) ;
        res.write(data) ;
        res.end() ;
    })
}) ;

server.listen(5000) ;

код интерфейса : login.html

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <script defer src="js/index.js"></script>
</head>
<body>
    <h1>Login</h1>
    <form action="" method="post">
        <input type="email" name="user" id="user">
        <input type="password" name="pass" id="pass">
        <button type="submit" name="button" value="login">Login</button>
    </form>
</body>
</html>

теперь, когда я загружаю страницу по адресу localhost:5000, js не выполняется и принимается как текст / html.

Комментарии:

1. Почему бы тогда не сделать тип text / javascript вместо html?

2. Что вы подразумеваете под «js не выполняется». Вы ожидаете idex.js выполнять на сервере NodeJS вместо браузера? Этого точно не произойдет, если вы не используете безголовый браузер на своем конце API NodeJS.

3. @jae.phoenix как это делается. Я новичок…

4. @sribasu так что мой index.js это справедливо alert("hellow world") ; . но когда я захожу на localhost: 5000, предупреждения нет. но когда я загружаю login.html с его абсолютным путем в браузере оповещение работает

5. Примечание сбоку: Вы увидите if (err) throw err; в Node.js много обратных вызовов. Это редко, если вообще когда-либо, что нужно делать. Вместо этого вы должны обработать ошибку (например, отправив ответ с кодом состояния 500 или 404 или …).

Ответ №1:

Браузер получит HTML, увидит script тег и сделает запрос js/index.js с вашего сервера. Но ваш сервер отправляет только ваш HTML-файл. Он не обращает никакого внимания на то, что запрашивал браузер, он просто всегда отправляет обратно HTML. Таким образом, скрипт никогда не отправляется в браузер, поэтому браузер не может его выполнить.

Ваш серверный код необходимо просмотреть, req чтобы определить, что было запрошено (просмотр url и т. Д.), И Отправить соответствующий ответ, А не всегда отправлять один и тот же контент.

Вот довольно простой пример, который обрабатывает / , /login.html , и /js/index.js пути (делая первые два синонима):

 const http = require('http');
const file = require('fs');

const FILENAME_404 = "public/404.html";

const server = http.createServer((req, res) => {
    let filename = null;
    let contentType = "text/html";
    let status = 200;

    // What did the browser ask for?
    switch (req.url.toLowerCase()) {
        case "/":
        case "/login.html":
            // The login page
            filename = "public/login.html";
            break;
        case "/js/index.js":
            // The JavaScript file
            filename = "public/js/index.js";
            contentType = "text/javascript";
            break;
        default:
            // Something we don't support -- send a 404
            filename = FILENAME_404;
            status = 404;
            break;
    }

    sendFile(res, filename, contentType, status);
});

function sendFile(res, filename, contentType, status, callback) {

    file.readFile(filename, (err, data) => {
        if (err) {
            // Couldn't read the file, send a 404
            if (filename !== FILENAME_404) {
                sendFile(res, FILENAME_404, "text/html", 404);
            } else {
                // Couldn't even find the 404 file, send a minimal plaintext 404
                res.writeHead(404, {"Content-Type": "text/plain"});
                res.write("The requested resource does not exist on this server.");
                res.end();
            }
        } else {
            res.writeHead(status, {"Content-Type": contentType});
            res.write(data);
            res.end();
        }
    });
}

server.listen(5000);

Примечание: Это всего лишь пример. Если вы собираетесь создавать что-либо любого размера, вам понадобится больше структуры, чем эта. Вы можете посмотреть на Express или Koa или другие, которые обрабатывают больше HTTP-каналов, маршрутизации URL и т. Д. для вас и есть модули, доступные и для других целей.

Комментарии:

1. Я вижу index.js получено в виде текста / html на вкладке сеть. так это не настоящий файл js ?

2. не могли бы вы, пожалуйста, объяснить свой ответ немного подробнее. Я новичок, поэтому это было бы очень полезно

3. @me.nkr — Правильно, это не так, это ваш HTML-файл.

4. @me.nkr — Я обновил ответ, чтобы показать простой пример. FWIW, это важно, когда начинаешь много читать, экспериментировать, искать примеры и т. Д. Удачи и получайте удовольствие!

5. Спасибо, чувак, теперь я все понял. Итак, req.url содержит файлы, запрошенные клиентской стороной, верно?

Метки: