Как правильно визуализировать пользовательский элемент с файлом NodeJS? - PullRequest
Новая
       47

Как правильно визуализировать пользовательский элемент с файлом NodeJS?

2 голосов
/ 14 мая 2019

Я новичок в использовании пользовательских элементов и Node.js, поэтому я создаю простой пример сервера и компонента. Дело в том, что когда я импортирую компонент, браузер выдает ошибку 400 с ошибочным запросом и пытается загрузить компонент, но несколько раз повторяет путь импорта, как вы можете видеть.

Это файл моего сервера: 

//server.js
var http = require('http');
var fs   = require('fs');

function onRequest(request, response){
    response.writeHeader(200, {"Content-Type": "text/html"});  
    fs.readFile('./index.html',null,function(error, data){
        if(error){
            response.writeHead(404);
            response.write('File Not Found');
        }
        else{
            response.write(data);
        }
        response.end();
    });
}

http.createServer(onRequest).listen(8001);

Это мой index.html: 

<!-- index.html-->
<!DOCTYPE html>
<html lang="es">
    <head>

        <meta charset="utf-8">
        <title>TimeStack</title>

        <link rel="import" href="./Components/time-row.component.html">

    </head>
    <body>
        <time-row></time-row>
    </body>
</html>

И компонент: 

<!-- time-row.component.html-->
<html>
  <template id="sellBtn">

    <style>
      :host {
        --orange: #e67e22;
        --space: 1.5em;
      }
      .btn-container {
        border: 2px dashed var(--orange);
        padding: var(--space);
        text-align: center;
      }
      .btn {
        background-color: var(--orange);
        border: 0;
        border-radius: 5px;
        color: white;
        padding: var(--space);
        text-transform: uppercase;
      }
    </style>

    <div class="btn-container">
      <button class="btn">Comprar Ahora</button>
    </div>
  </template>

  <script>
    class TimeRow extends HTMLElement {
      constructor () {
        super();
        this.importDocument = document.currentScript.ownerDocument;
      }

      connectedCallback () {
        let shadowRoot = this.attachShadow({mode: 'open'});
        const t = this.importDocument.querySelector('#sellBtn');
        const instance = t.content.cloneNode(true);
        shadowRoot.appendChild(instance);
      }
    }

    window.customElements.define('time-row', TimeRow);
  </script>
</html>

И это моя ошибка>: / enter image description here

Как вы можете видеть повторы "/ Компоненты / Компоненты / Компоненты / ..." много раз и компонент не рендерится.

Ответы [ 2 ]

1 голос
/ 14 мая 2019

Как предложено @Jordan Running, используйте ExpressJS: 

//server.js
var express = require ( 'express' )
var app = express()
app.use( express.static( 'public' ) )
app.listen( 8001 )

Затем поместите статические файлы в папку public .

0 голосов
/ 14 мая 2019

Из того, что я могу сказать, похоже, что вы, возможно, не сказали своему серверу, как обрабатывать запросы такого типа.

Я не совсем уверен, как лучше сделать это с ванильным узлом, но с экспрессом вы можете использовать функцию serveStatic для обслуживания этих файлов.

Кроме того, как заметил другой пользователь, вашей текущей настройки недостаточно - код, который вы используете для своего сервера, говорит: «Для любого запроса, который вы получаете, отправьте им этот файл index.html.»

...