Использование Nodejs для рендеринга html-css-javascript-изображений - PullRequest
Новая
       12

Использование Nodejs для рендеринга html-css-javascript-изображений

1 голос
/ 25 апреля 2019

Я изучаю и тестирую nodejs с помощью html, css и javascript.

Когда я запускаю index.html локально (без веб-сервера), я вижу, что css, js, html, изображения правильно отображаются в моем браузере.

Проблема при создании server.js и просмотреlocalhost: 8000 / index.html, он просто возвращает мой заголовок и абзац ... нет хороших изображений, css, js execute ...
Я прошел через SO и из-за вызова находится только в html-файле, но не в css/ JS / изображения.

Я не знаю, в чем проблема, и как действовать дальше.

Это мой 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 ... только могут видеть «Мой первый заголовок» и «Мой первый абзац».

Пожалуйста, помогите и посоветуйте мне дальше.Спасибо. Спасибо всем

Ответы [ 2 ]

1 голос
/ 25 апреля 2019

Вам нужно будет создать API для отправки файла CSS и JavaScript с сервера Node.Поскольку вы уже используете express, вам не нужно использовать connect и http для запуска сервера.Используя экспресс, вы можете запустить сервер, проверьте код

`

var app = express();
app.listen(8000,  function() {
    console.log('app listening on port 8000!');
});

`

Чтобы отправлять файлы next.min.css и next.min.js, просто создайте getAPI в вашем сервере

`

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

1 голос
/ 25 апреля 2019

Поскольку вы используете сервер для обслуживания 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

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

Нет похожих вопросов

...