Question

我是Node js的新手，试图使用该技术制作我的第一个静态网页。我只是使用node-js将css，图像链接到我的html文件。

现在，我正在尝试将链接添加到我的文件，但是它不起作用。下面是我的html代码：

<html>
  <link rel="stylesheet" type="text/css" href="./css/style.css">
  <h1 class="had"><a href="/next">Hello I m here</a></h1>
  <img src="images/download.jpg" alt="img not found">
  <img src="images/flower.png" alt="img not found">
</html>

和Node-J：

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

http.createServer(function(req,res){
   if(req.url === "/index"){
      fs.readFile("./public/index.html","UTF-8",function(err,html){ 
          res.writeHead(200,{"Content-Type":"text/html"});
          res.end(html);
      });
   }
   else if(req.url.match("\.css$")){
      var csspath = path.join(__dirname,'public',req.url);
      var filestream = fs.createReadStream(csspath,"UTF-8");
      res.writeHead(200,{"Content-Type":"text/css"});
      filestream.pipe(res);
   }
   else if(req.url.match("\.jpg$")){
      var jpgpath = path.join(__dirname,'public',req.url);
      var filestream = fs.createReadStream(jpgpath);
      res.writeHead(200,{"Content-Type":"image"});
      filestream.pipe(res);
   }
   else if(req.url.match("\.png$")){
      var pngpath = path.join(__dirname,'public',req.url);
      var filestream = fs.createReadStream(pngpath);
      res.writeHead(200,{"Content-Type":"image"});
      filestream.pipe(res);
   }
   else{
      res.writeHead(404,{'Content-Type':'text/html'});
      res.end("File not found");
   }

   if(req.url === "/next"){
       fs.readFile("./public/next.html","UTF-8",function(err,html){ 
          res.writeHead(200,{"Content-Type":"text/html"});
          res.end(html);
       });
   }
}).listen(3010);

请帮我解决这个问题。

Answer 1

请问所有链接是否都有效，或者只有某些链接有效？

在您的中，文件路径可能无法解析，如果下一个html文件位于同一目录中，则可以这样做

 <html>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <h1 class="had"><a href="./next">Hello I m here</a></h1>
    <img src="images/download.jpg" alt="img not found">
    <img src="images/flower.png" alt="img not found">
 </html>

如果在其他目录中，请提供绝对路径

Answer 2

实际上，这在我的机器XD上正常工作。

我强烈不建议通过客户端将路径发送到服务器，然后使用这些路径搜索文件。这是巨大的安全风险，因为仅通过输入有效的文件路径就可以在您的计算机上访问任何文件。而是使用固定路径，并让服务器在这些特定路径上提供静态文件。

创建单独的路由来分别处理静态文件，这使您的生活变得更加轻松。

您可以使用fs.readFile代替createReadStream来提供图像，因为它更易于处理错误，只需在res.send（）函数中添加“ binary”参数即可将它们作为二进制流发送出去。

最后，我建议在HTML文件上使用<base href= "http://localhost:3010"/>，这样会使页面上的所有路径都相对于基本URL，在这种情况下为http://localhost:3010。这样，您就不会与所有路径混淆。

HTML

<html>
<head>
    <base href= "http://localhost:3010"/>
</head>
  <link rel="stylesheet" type="text/css" href="/css/style.css">
  <h1 class="had"><a href="/next">Hello I m here</a></h1>
  <img src="/images/download.jpg" alt="img not found">
  <img src="/images/flower.png" alt="img not found">
</html>

NODE.JS

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

http.createServer(function(req,res){
  if(req.url == "/index"){
      fs.readFile("./public/index.html","UTF-8",function(err,html){
      if(!err) {
        res.writeHead(200,{"Content-Type":"text/html"});
        res.end(html);
      }
    });
  }
  else if(req.url === "/css/style.css"){
    fs.readFile(path.join(__dirname, 'public/css/style.css'), function(err, data){
      if(!err){
        res.writeHead(200,{"Content-Type":"text/css"});
        res.end(data);
      }
    });
  }
  else if(req.url === "/images/download.jpg"){
    fs.readFile(path.join(__dirname, 'public/images/download.jpg'), function(err, data){
      if(!err){
        res.writeHead(200,{"Content-Type":"image"});
        res.end(data, 'binary');
      }
    });
  }
  else if(req.url === "/images/flower.png"){
    fs.readFile(path.join(__dirname, 'public/images/flower.png'), function(err, data){
      if(!err){
        res.writeHead(200,{"Content-Type":"image"});
        res.end(data, 'binary');
      }
    });
  }
  else{
    res.writeHead(404,{'Content-Type':'text/html'});
    res.end("File not found");
  }

  if(req.url === "/next"){
    fs.readFile("./public/next.html","UTF-8",function(err,html){ 
      res.writeHead(200,{"Content-Type":"text/html"});
      res.end(html);
    });
  }
}).listen(3010);

节点JS- HTML链接

2 个答案: