二.nodejs实现加载index.html并响应js css文件。

Bczheng1

已于 2024-02-07 14:01:10 修改

阅读量560

点赞数 8

分类专栏： # JS 文章标签： javascript 开发语言 ecmascript

于 2024-02-07 14:00:42 首次发布

本文链接：https://blog.csdn.net/d3582077/article/details/136067843

版权

JS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

像之前我们创建了一个网页服务，都是在代码里直接输出html给客户端，现在我需要将html和代码分开，单独写成一个index.html，该如何实现呢？

很简单，我们利用node的文件读写模块，读出index.html里面的内容，再响应给客户端就能实现这个功能,test.js代码如下：

var http=require("http")
var fs=require("fs")

http.createServer(function (req, res) {
	fs.readFile("./index.html",function (err,data){

			res.writeHead(200,{"Content-Type": "text/html"});
		    res.end(data);
	});
}).listen(7000);
console.log("Server running at 127.0.0.1:7000");

fs=require("fs"),请求文件读写模块，然后fs.readFile读取index.html，得到的内容data

res.end(data),响应给客户端，原理就是这样。

index.html文件内容:

<!DOCTYPE html>
<html>
	<head>
	<title>index</title>
    
	</head>
		<body>
			<h1>my index.html</h1>
		</body>
	</head>
</html>

接着node test.js 然后浏览器访问，运行效果：

但是这里会有问题，你的index.html如果加载了js文件，css文件，或者jpg图片，是不起作用的。

比如有一个hello.js文件，代码如下：

document.write('hello i am js!')

然后你的index.html如下：

<!DOCTYPE html>
<html>
	<head>
	<title>index</title>

	</head>
		<body>
			<h1>
                <script src="hello.js"></script>
            </h1>
		</body>
	</head>
</html>

我们访问一下，并没有输出：

因为我们编写的服务没有响应js,输入127.0.0.1:7000/hello.js并没有获得js代码。

我们只是输出response index.html,

我们知道node创造的网页服务，跟其它语言不一样，先是客户端访问网页服务器，然后调用解释器执行后台语言，而node就是直接跟客户端对接的。

图片来源：网络

所以这一切得我们手动来实现(后面用框架解决)，这里我就直接用网上通过的处理代码了。

test.js代码如下(来源网络)

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

http.createServer(function(request, response) {
var pathname = url.parse(request.url).pathname;
var ext = pathname.match(/(\.[^.]+|)$/)[0];//取得后缀名
switch(ext){
case ".css":
case ".js":
fs.readFile("."+request.url, 'utf-8',function (err, data) {//读取内容
   
if (err) throw err;
response.writeHead(200, {
"Content-Type": {
".css":"text/css",
".js":"application/javascript",
}[ext]
});
response.write(data);
response.end();
});
break;
default:
fs.readFile('./index.html', 'utf-8',function (err, data) {//读取内容
if (err) throw err;
response.writeHead(200, {
"Content-Type": "text/html"
});
response.write(data);
response.end();
});

}

}).listen(7000);
console.log("server start 7000");

我们再写个hello.css样式，代码如下：

h1{color:red;}

index.html代码：

<!DOCTYPE html>
<html>
	<head>
	<title>index</title>
    <link href="hello.css" rel="stylesheet" type="text/css" />
	</head>
		<body>
			<h1>
                <script src="hello.js"></script>
            </h1>
		</body>
	</head>
</html>

OK,一切正常工作：

test.js里的工作原理，就是获取url,然后提取js,css结尾的目录，然后fs.readFile("."+request.url, 'utf-8',function (err, data) 读取对应的文件，响应即可。

但是这里只做了css,jss其它的jpg没有响应，你们如果感兴趣，可自行查找相应的代码。

这里就不介绍了，后面将使用框架解决一切问题。

Bczheng1

关注

8
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
二.nodejs实现加载index.html并响应js css文件。

test.js里的工作原理，就是获取url,然后提取js,css结尾的目录，然后fs.readFile("."+request.url, 'utf-8',function (err, data) 读取对应的文件，响应即可。像之前我们创建了一网页服务，都是在代码里直接输出html给客户端，现在我需要将html和代码分开，单独写成一个index.html，该如何实现呢？但是这里会有问题，你的index.html如果加载了js文件，css文件，或者jpg图片，是不起作用的。test.js代码如下(来源网络)
复制链接

扫一扫