JavaScript не загружается в HTML-файл - nodejs + http - PullRequest
0 голосов
/ 01 октября 2018

Отказ от ответственности: я новичок в node.js, поэтому я предполагаю, что есть очень простой ответ на этот вопрос.

Я использую node.js в Windows с модулем http для создания статической страницы с содержимым, созданным из файла js.

Файл сервера (server.js):

var http = require('http');
var fs = require('fs');

fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err;
    }
    http.createServer(function(request, response) {
        response.writeHeader(200, {"Content-Type": "text/html"});
        response.write(html);
        response.end();
    }).listen(8080);
});

HTML-файл (index.html):

<!DOCTYPE html>
<html>

<body>

<div id="div1">
  <p id="p1">This is a static paragraph.</p>
</div>

<p>
  <script type="text/javascript" src="start.js"></script>
</p>

</body>
</html>

JS-файл (start.js)

var para = document.createElement("p");
var node = document.createTextNode("This text is loaded from a js file.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);

Когда язагрузить index.html напрямую, я получаю следующий вывод:

Это статический абзац.

Этот текст загружается из файла js.

^^ это мой желаемый вывод.

Проблема: Однако, когда я использую node.js и запускаю сервер.js , содержимое start.js не загружается.Я получаю:

Это статический абзац.

Любая помощь будет принята.

К вашему сведению, структура моей папки

/
- node_modules
-- http
-- fs
- index.html
- server.js
- start.js

Ответы [ 3 ]

0 голосов
/ 01 октября 2018

Я думаю, что он не может найти js. Прежде чем ссылаться на js, убедитесь, что он находится на сервере, и вы можете загрузить его с сервера, например так: 'http://127.0.0.1:8000/start.js'. Все наши статические файлы,такие как img, css, js должны быть помещены на сервер, только тогда на них будут ссылаться.

0 голосов
/ 01 октября 2018

Каждый URL-адрес запроса, который вы получаете для файла, должен обрабатываться сервером узла.Я бы предложил использовать Express.js, так как это упростит обработку различных путей URL-адресов, и файлы можно будет обслуживать напрямую.Но если вам нужна реализация на основе чистого node.js, проверьте код ниже.

Чтобы обслуживать файл с сервера, вам придется изменить файл server.js на что-то вроде этого:

var http = require('http');
var fs = require('fs');

http.createServer(function(request, response) {
    if(request.url=='/'){
        fs.readFile('./index.html', function (err, html) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/html"});
             response.write(html);
             response.end();
        });
    } else if(request.url=='/start.js'){
        fs.readFile('./start.js', function (err, jsFile) {
             if (err) {
                  res.send(500,{error: err});
             }
             response.writeHeader(200, {"Content-Type": "text/javascript"});
             response.write(jsFile);
             response.end();
        });
    }

}).listen(8080);

Надеюсь, это поможет:)

0 голосов
/ 01 октября 2018

Ваша логика добавления дочерних узлов выглядит нормально.

Я думаю, вам следует попробовать изменить src="start.js" на src="./start.js" или src="/start.js" просто для того, чтобы убедиться, что вы правильно ссылаетесь на путь.Добавьте оператор console.log() в start.js, чтобы убедиться, что он загружается.

РЕДАКТИРОВАТЬ: убедитесь, что вы размещаете файл на своем сервере.Вы можете добавить что-то вроде express или connect.

Чтобы использовать connect, запустите npm install --save connect в каталоге вашего проекта.

var connect = require('connect'),
directory = '/path/to/Folder'; // probably just '/' for all your files

connect()
  .use(connect.static(directory))
  .listen(80);

console.log('Listening on port 80.');

Обратитесь к их документам. для полных инструкций и других примеров, используя http.

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