У меня есть index.html
<!DOCTYPE html>
<html>
<head>
<title>Server-side Example</title>
<script src="./CircleArea.js"></script>
</head>
<body>
<input
id="ftpd"
type="button"
value="Calculate"
onclick="CircleArea()"
/>
</body>
</html>
Он вызывает файл CircleArea.js.
const PI = 3.14
let radius = 3;
function circleArea(){
var inputField = document.createElement("INPUT");
inputField.setAttribute("type", "text");
inputField.setAttribute("value", (PI*radius*radius));
document.body.appendChild(inputField);
}
module.exports ={circleArea}; // This I added for nodejs
Это работает нормально. Но теперь я хочу запустить Index.html на стороне сервера.
Я добавил server.js
let http = require('http');
let fs = require('fs');
let handleRequest = (request, response) => {
response.writeHead(200, {
'Content-Type': 'text/html'
});
fs.readFile('./Index.html', null, function (error, data) {
if (error) {
response.writeHead(404);
respone.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
};
http.createServer(handleRequest).listen(8000);
console.log('Server running at http://localhost:8000');
Теперьnode server.js
выдает ошибку
CircleArea.js:1
Uncaught SyntaxError: Unexpected token '<'
(Index):13
Uncaught ReferenceError: CircleArea is not defined
at HTMLInputElement.onclick ((Index):13:6)
Мой вопрос: как мне изменить Index.html и CircleArea.js, чтобы запустить его на nodejs?
Решение проблемы
Ваш код не имеет ничего общего с оценкой на стороне сервера. Вы используете Node.js в качестве веб-сервера. Сервер не оценивает клиентский код. Он не импортирует CircleArea.js. Вам не нужно
module.exports ={circleArea}; // This I added for nodejs
и должен удалить его. Это экспорт модуля CommonJS, который не разрешен в коде браузера.
Веб-браузер отправляет запрос на index.html. Сервер отвечает содержимым Index.html. Браузер оценивает его. Он находит тег скрипта ./CircleArea.jsи отправляет запрос на этот файл. Сервер отвечает содержимым, Index.htmlпотому что на сервере нет маршрутизации. Откройте инструменты разработчика в браузере, чтобы увидеть проблему. Сервер отвечает одними и теми же данными (содержимым Index.html) на все запросы. Вы должны реализовать маршрутизацию.
let http = require('http');
let fs = require('fs');
let handleRequest = (request, response) => {
let file = 'Index.html';
if (request.url === '/CircleArea.js') {
file = 'CircleArea.js';
response.writeHead(200, {
'Content-Type': 'application/javascript',
});
} else {
response.writeHead(200, {
'Content-Type': 'text/html',
});
}
fs.readFile('./' + file, null, function (error, data) {
if (error) {
response.writeHead(404);
response.write('Whoops! File not found!');
} else {
response.write(data);
}
response.end();
});
};
http.createServer(handleRequest).listen(8000);
console.log('Server running at http://localhost:8000');
Это очень простое и простое решение. Вы можете использовать его для очень простой маршрутизации. Для более сложной маршрутизации я рекомендую такой фреймворк, как Nest.js.
Комментариев нет:
Отправить комментарий