Использование Nodejs для рендеринга html-css-javascript-изображений
Я изучаю и тестирую nodejs с помощью html, css и javascript.
Когда я запускаю index.html локально (без веб-сервера), я вижу, что css, js, html, изображения правильно отображаются в моем браузере.
Проблема, когда я создаю server.js и просматриваю localhost:8000/index.html, он просто возвращает мой заголовок и абзац... нет хороших изображений, выполняются css, js...
Я прошел через SO и из-за вызова находится только в html-файле, но не в css/js/images.
Не знаю в чем проблема и как быть дальше.
Это мой server.js:
var express = require('express');
var connect = require('connect');
var http = require('http');
var path = "";
var app = connect().use(express.static(__dirname + path));
http.createServer(app).listen(8000);
Это мой index.html:
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel = "stylesheet" href = "/home/xero/next/css/next.min.css">
<script type = "text/javascript" src = "/home/xero/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel = "stylesheet" href = "/home/xero/next/font-
awesome/css/font-awesome.min.css">
</head>
<body>
<div id = "topology-container"></div>
<!-- Application scripts -->
<script type = "text/javascript" src = "topology_data.js"></script>
<script type = "text/javascript" src = "action-panel.js"></script>
<script type = "text/javascript" src = "topology.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Это структура папок на моей машине:
home
xero
next
js/next.min.js
css/next.min.css
myweb
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
Когда я просматриваю index.html..only, я вижу «Мой первый заголовок» и «Мой первый абзац».
Пожалуйста, помогите и посоветуйте мне дальше. Спасибо. Спасибо всем
Я не вижу никакого кода в вашем server.js, который обрабатывает любой входящий запрос, так как же вы собираетесь получить файл HTML?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Поскольку вы используете сервер для обслуживания html. Ссылки в html относятся к базе сервера.
то есть
ваш сервер работает /home/xero/myweb
Итак, ваши ссылки в css или js становятся /home/xero/myweb/home/xero/next/css/next.min.css,
Которого не существует
Так как вы не можете получить доступ к родительскому каталогу базового каталога вашего сервера.
Используйте следующую структуру каталогов
home
xero
myweb
next
js/next.min.js
css/next.min.css
index.html
topology_data.js
action-panel.js
topology.js
main.js
server.js
А затем в index.html
<!DOCTYPE html>
<html>
<head>
<title>TEST NODEJS WEB</title>
<!-- library -->
<link rel = "stylesheet" href = "/next/css/next.min.css">
<script type = "text/javascript" src = "/next/js/next.min.js">
</script>
<!-- Font Awesome -->
<link rel = "stylesheet" href = "/next/font-awesome/css/font-awesome.min.css">
</head>
<body>
<div id = "topology-container"></div>
<!-- Application scripts -->
<script type = "text/javascript" src = "topology_data.js"></script>
<script type = "text/javascript" src = "action-panel.js"></script>
<script type = "text/javascript" src = "topology.js"></script>
<script type = "text/javascript" src = "main.js"></script>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
*Редактировать
Используйте app.use(express.static(<path>)). здесь — это документация.
код:
var express = require("express");
var connect = require("connect");
var http = require("http");
var path = "";
var app = connect().use(express.static(__dirname + path));
app.use(express.static("../next/"));
http.createServer(app).listen(8000);
Теперь в html вам просто нужно обратиться как
css/next.min.css и js/next.min.js
Привет, сэр... спасибо.... но возможно ли, что я смогу поддерживать свою структуру каталогов..? Если я поддерживаю структуру... где я должен добавить/редактировать в server.js
Если я могу поддерживать структуру каталогов и что-то делать с server.js, чтобы он мог ссылаться на папку css и js
@chenoi Добавлено решение! :p и отметьте ответ, если он работает!
Вам нужно будет создать API для отправки файла css и javascript с сервера Node. Поскольку вы уже используете express, вам не нужно использовать соединение и http для запуска сервера. Используя экспресс, вы можете запустить сервер, проверить код
`
var app = express();
app.listen(8000, function() {
console.info('app listening on port 8000!');
});
`
Чтобы отправить файлы next.min.css и next.min.js, просто создайте get api на своем сервере.
`
app.get('/script', (req,res) => {
res.sendFile("/home/xero/next/js/next.min.js");
});
`
`
app.get('/css', (req, res) => {
res.sendFile("/home/xero/next/css/next.min.css");
});
`
и вызовите эти API из вашего index.html файла.
`
<link rel = "stylesheet" href = "http://localhost:8000/css">
<script type = "text/javascript" src = "http://localhost:8000/script">
`
Проверьте все рабочее решение -
https://codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034ffc
Я получаю сообщение об ошибке при запуске node server.js app.use(express.static(path.join(__dirname, path))); ^ TypeError: path.join не является функцией в Object.<anonymous> (/home/xero/next/server.js:20:29) в Module._compile (module.js:653:30) в Object.Module. _extensions..js (module.js:664:10) в Module.load (module.js:566:32) в tryModuleLoad (module.js:506:12) в Function.Module._load (module.js:498: 3) в Function.Module.runMain (module.js:694:10) при запуске (bootstrap_node.js:204:16) в bootstrap_node.js:625:3
Любой простой способ сделать это...?
Обновил код, оформите заказ по ссылке codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034fFC
Это самый простой способ, он сработает, попробуйте, и я здесь, чтобы помочь вам, не беспокойтесь.
Я получаю больше ошибок, сэр ... path.js: 28 throw new TypeError («Путь должен быть строкой. Получено» + проверка (путь)); ^ TypeError: Путь должен быть строкой. Получено { разрешить: [Функция: разрешить], нормализовать: [Функция: нормализовать], isAbsolute: [Функция: isAbsolute], присоединиться: [Функция: присоединиться], относительная: [Функция: относительная], _makeLong: [Функция: _makeLong], dirname: [Функция: dirname], basename: [Функция: basename], extname: [Function: extname], format: [Function: format], parse: [Function: parse],
Теперь это работает ... но значок / изображение меню не визуализируется должным образом .... Я протестировал его локально без веб-сервера, и все значки меню могут быть красиво отображены ...
Я думаю, вы используете font-awesome.min.css для иконок, верно?
Да... хорошо... опечатка в моем файле шрифта... после изменения все в порядке... мои вопросы (1) Если у меня есть несколько файлов js для использования... как это сделать с этим решением? (2) например, font-awesome.min.css... как добавить это в server.js?
Вы можете сделать это, динамически указав путь к файлам, как показано ниже.
app.get('/script/:pathToFile', (req,res) => { res.sendFile("/home/xero/next/js/" + req.params.pathToFile); });
обновлено решение для динамических файлов, оформить заказ codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034fFC
Если это поможет, пожалуйста, лайкните мой пост codesharehub.com/post/e6b58ce0dab274f977af2fd7a855008ff6034fFC на codesharehub.com
Я пробовал выше... не работает... нужно ли комментировать app.get('/script', (req,res) => { res.sendFile("/home/xero/next/js/next.min .js");?
Да, если вы хотите использовать динамическое решение, вы можете прокомментировать приведенное выше API и использовать API, который динамически отправляет файл javascript.
Я очень ценю ваше время и поддержку в этом... спасибо, сэр.
Спасибо, Ченой, и вы можете поделиться своими проектами и кодом на codesharehub.com. Вы можете создать свое резюме и добавить свои проекты вместе с ним бесплатно.
@chenoi или просто используйте однострочник app.use(express.static("../next")) без лишних слов.
Что за ошибка в консоли браузера?