在 HTML/CSS 中实现 Node Js [重复]答案

【问题标题】：Implement Nodejs int HTML/CSS [duplicate]在 HTML/CSS 中实现 Node Js [重复]
【发布时间】：2020-07-16 06:03:33
【问题描述】：

我正在学习使用 Nodejs 进行后端开发。从我目前看到的情况来看，似乎没有办法将它与一个已经用普通 HTML 和 CSS 构建的网站集成。

有人告诉我，在没有Nodejs 的情况下在本地运行index.html 文件时，Web 浏览器会自动处理css，但是在使用节点时，我如何同时获得html 和css显示？

我有一个HTML 页面和一个指向我的CSS 文件的href。当尝试使用Nodejs 发出请求并为我的HTML 页面提供服务时，它会显示没有样式的页面并完全忽略我在HTML 中引用的CSS 文件。

我已经尝试过express() 和ejs，但是否可以使用我已经在 HTML/CSS 中制作的内容？

这是源代码，任何解释都会有很大帮助：

const http =  require('http');//importing http
var fs = require('fs');//file stream

let handleRequest = (request, response) =>{
    response.writeHead(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();
    });

   console.log('request was made: ' + request.url);//logg all requests made
}

http.createServer(handleRequest).listen(3000);

【问题讨论】：

nodejs 默认不提供任何文件。因此，您的代码正确地做了一件事——无论请求什么 URL，您都会发送 index.html。但是，一旦浏览器解析 index.html，它就会发送对您的 CSS 文件的请求。当您的 Web 服务器收到这些请求时，它会发回 index.html。这就是为什么他们不工作。如果你打算使用这个手工编码的 Web 服务器（而不是像 Express 这样的简单框架），那么你将不得不实现某种 if/else 或 switch 或使用 req.url 的表查找来查看请求什么，然后发送正确的文件。

标签： javascript html css node.js

【解决方案1】：

如果您想在节点应用程序中呈现 html。你有很多方法可以做到 1.使用ejs pug等模板进行服务器端渲染

您也可以使用不带模板的 html。但是您必须创建一个 /public 文件夹，并在其中从 app.js 中使用 fs 模块选择 index.html 的路径
只是一个节点来制作api，然后用vainlila html或vue之类的框架从客户端调用它

我建议开始一个 node js 课程。

【讨论】：