2

我是使用自定义元素和 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>

这是我的错误>：/ 在此处输入图像描述

就像你可以看到重复“/Components/Components/Components/...”很多次并且组件没有呈现。

4

2 回答 2

1

正如@Jordan Running 所建议的，使用 ExpressJS：

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

然后将静态文件放在公用文件夹中。

于 2019-05-14T20:26:03.060 回答
0

据我所知，您可能没有告诉您的服务器如何处理这种性质的请求。

我不太确定使用 vanilla 节点执行此操作的最佳方法，但是使用 express，您可以使用该serveStatic功能来提供这些文件。

此外，正如另一位用户所指出的，您当前的设置是不够的——您的服务器代码显示“对于您收到的任何请求，请为他们提供这个 index.html 文件。”

于 2019-05-14T20:16:19.983 回答