运行Web应用程序时出现以下问题,HTML源代码似乎在chrome开发人员工具的css文件中:
我的HTML文件名为index.html,以下为源文件。
<!DOCTYPE html>
<html>
<head>
<title>Node</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css" title="Default Styles"
media="screen">
</head>
<body>
<h1> Welcome to my first node.js Website </h1>
<h2> this is how you and where you do the mark up in node js</h2>
<!-- footer -->
<div class= "base">
<footer>
<nav>
</nav>
</footer>
</div>
</body>
</html>
以下是我的CSS文件,称为style.css
html, body{
font-family: 'Open Sans', sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
width: 100%;
background: skyblue;
color: #fff;
}
/*
footer
*/
.base{
height: 50px;
width: 100%;
background-color: black;
border-bottom: 1px solid rgba(221, 221, 221, 0.13);
bottom: 0%;
position: fixed;
}
当我在本地服务器上运行此代码并在google chrome上打开开发人员的工具时 我看到HTML源代码在CSS文件中。[![CSS文件现在具有在本地服务器上运行的HTML源代码] [1]] [1]
这是我的Node.js
// Load the http module to create an http server.
var http = require('http');
var fs = require('fs');
var server = http.createServer(function (request, response) {
console.log('request was made:' + request.url);
fs.readFile('index.html', function(err,data){
response.writeHead(200, {'Content-Type' : 'text/html'});
response.write(data);
response.end();
});
});
// Listen on port 8000, IP defaults to 127.0.0.1
server.listen(8005);
// send a message on the terminal
console.log("Server running at http://127.0.0.1:8005/");
答案 0 :(得分:1)
问题出在服务器请求处理程序中。您正在为浏览器的每个请求手动发送not a number
。当您导航到index.html
时,服务器发送的http://127.0.0.1:8005/
到目前为止效果很好,但是浏览器看到index.html
并要求输入<link href="style.css" rel="stylesheet" type="text/css" title="Default Styles"
,但是服务器再次返回http://127.0.0.1:8005/style.css
,即为什么它在index.html
处收到index.html
的内容。您需要过滤对服务器的请求,以使用正确的文件进行响应。在您的情况下,可能像这样:
style.css
请注意,这是一个非常基本的服务器。它缺乏错误处理,并且很难扩展和维护。也许您想尝试像express
这样的节点服务器框架