简体   繁体   English

提供包含CSS的HTML文件

[英]Serve an HTML file including CSS

I have this code in a file called index1.html 我在名为index1.html的文件中有此代码

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

<script src="./testing.js"></script>
<link rel="stylesheet" type="text/css" href="./formats.css" />

</body>
</html>

This is my testing.js file 这是我的testing.js文件

$(document).ready(function(){
    $("p").click(function(){
        alert("The paragraph was clicked.");
    });
});

This is my formats.css file 这是我的formats.css文件

body {
    color: blue;
}

p {
    color: green;
}

I'm hosting the html file on the local host with this file. 我使用此文件将html文件托管在本地主机上。

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

function send404Response(response){
  response.writeHead(404, {"Content_Type": "text/plain"});
  response.write("Error 404: Page not found!");
  response.end();  
}

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/'){
    response.writeHead(200, {"Content-Type": "text/html"});
    fs.createReadStream(path.join(__dirname, "index1.html")).pipe(response);

  } else{
    send404Response(response);
  }
}

http.createServer(onRequest).listen(port);
console.log("Server is now running on port 2406...");

When I run running.js in node it doesn't include any of the formatting or the Jquery when I go to the local host. 当我在本地节点上运行running.js时,它不包含任何格式或Jquery。 I'm wondering why this is the case and what I can do to fix it. 我想知道为什么会这样,我该如何解决。

Your onRequest function only handles 1 possible url " / ". 您的onRequest函数只能处理1个可能的网址“ / ”。

You COULD add more if statements to serve the different files... 可以添加更多的if语句来服务不同的文件...

function onRequest(request,response){
  if(request.method == 'GET' && request.url == '/'){
    response.writeHead(200, {"Content-Type": "text/html"});
    fs.createReadStream(path.join(__dirname, "index1.html")).pipe(response);

  } else if (request.method == 'GET' && request.url == '/formats.css'){
    response.writeHead(200, {"Content-Type": "text/css"});
    fs.createReadStream(path.join(__dirname, "formats.css")).pipe(response);

  } else if (request.method == 'GET' && request.url == '/testing.js'){
    response.writeHead(200, {"Content-Type": "text/javascript"});
    fs.createReadStream(path.join(__dirname, "testing.js")).pipe(response);

  } else {
    send404Response(response);
  }
}

But you might want to look into an HTTP server framework like express. 但是您可能想研究像express这样的HTTP服务器框架。

Alternatively you may use npm 's http-server in your root directory via installing locally, and then able to host your index.html and its dependencies. 或者,您可以通过在本地安装在根目录中使用npmhttp-server ,然后能够托管index.html及其依赖项。 You don't need to extra code or maintain scripts to host your pages. 您不需要额外的代码或维护脚本来托管页面。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在Javascript中包含HTML文件 - Including HTML file in Javascript 在HTML文档中包括JS和CSS? - Including JS and CSS in an HTML document? 在Node.js服务器中提供HTML文件 - Serve html file in nodejs server 如何使用包含子模块的 vanilla javascript 提供静态 HTML 文件? - How to serve static HTML files with vanilla javascript including submodules? 使用express.js提供html文件以及脚本,css和图像 - Using express.js to serve html file along with scripts, css, and images Node Express Server:如何正确提供HTML文件(包括脚本和CSS)? (csp,相对路径和类似的东西) - Node Express Server : How to serve HTML file properly (scripts and css included) ? (csp, relative path and thing like that) 将CSS,jQuery和HTML都集成到一个.html中 - Including CSS, jQuery, and HTML all into one .html 在另一个HTML文件和JS中包括一个HTML文件 - including an html file in another html file and JS 如何使用 Restify 提供 css 文件 - How to serve css file using Restify 是否在html文件中包含no cache meta标签还可以防止该html文件中链接的js和css文件被缓存? - Does including the no cache meta tag in an html file also prevent the js and css files linked in that html file from being cached?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM