Question

我是使用自定义元素和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 / ...” 很多时候，该组件无法渲染。

Answer 1

根据@Jordan Running的建议，使用ExpressJS：

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

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

Answer 2

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

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

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

如何使用NodeJS文件正确呈现自定义元素？

2 个答案: