如何在单个响应中本地响应多个文件到客户端

时间:2016-08-06 10:14:53

标签: node.js client-server fs

我不熟悉服务器端开发和node.js,但我需要它用于使用多个.css.js文件的Web应用程序。简单的Web服务器应该按客户端请求发送这些文件。我是为.html' file, but if I include。js files to。html`做的,它不会加载到页面。

我认为这是因为应该正确设置的响应标头?或者我应该在服务器端读取我想要响应客户端的每个文件?

服务器代码:

var http = require('http');
var fs = require('fs');    

var port = 8080;
var files = ["app.html", "math.js"];        
http.createServer(function(request, response) {

    fs.readFile('app.html', 'utf8', function(err, data) {
        if (err) {
            return console.log(err);
        }

        response.setHeader('Content-type', 'text/html');
        response.end(data);
    });


}).listen(port);

console.log("listening on port: " + port);

app.html文件

<!doctype html>
<html>
    <head>
        <title>| Demo1</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    </head>
    <body>
        <h1>Loaded</h1>
        <h2>Loaded</h2>
        <h3>Loaded</h3>

        <canvas width="700" height="700" id="cnv"></canvas>
        <script type="text/javascript" src="math.js"></script>
    </body>
</html>

p.s。请不要建议任何框架,如快递或模块,完成所有工作。我需要了解如何使用node.js API来实现此目的。

1 个答案:

答案 0 :(得分:0)

找到了这个解决方案,我知道需要编写一些简单的静态Web服务器

<ul class="size">
     <li data-radius="1"><div class="circleSize"></div> <br /> 2px </li>
     <li data-radius="2"><div class="circleSize"></div> <br /> 4px </li>
     <li data-radius="3"><div class="circleSize"></div> <br /> 6px </li>
     <li data-radius="4"><div class="circleSize"></div> <br /> 8px </li>
     <li data-radius="5"><div class="circleSize"></div> <br /> 10px </li>
     <li data-radius="6"><div class="circleSize"></div> <br /> 12px </li>
     <li data-radius="7"><div class="circleSize"></div> <br /> 14px </li>
     <li data-radius="8"><div class="circleSize"></div> <br /> 16px </li>
     <li data-radius="9"><div class="circleSize"></div> <br /> 18px </li>
     <li data-radius="10"><div class="circleSize"></div> <br /> 20px </li>
     <li data-radius="11"><div class="circleSize"></div> <br /> 22px </li>
     <li data-radius="12"><div class="circleSize"></div> <br /> 24px </li>
</ul>