nodejs写服务器怎么样
2018-01-08 · 百度知道合伙人官方认证企业
目前最主流的三个Web服务器是Apache、Nginx、IIS。
Node.js 提供了 http 模块,http 模块主要用于搭建 HTTP 服务端和客户端,使用 HTTP 服务器或客户端功能必须调用 http 模块,代码如下:
[javascript] view plain copy
var http = require('http');
var http=require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer(function(request,response) {
//解析请求,包括文件名
var pathname= url.parse(request.url).pathname;
//输出请求的文件名
console.log("Request for "+ pathname + " received.");
//从文件系统中都去请求的文件内容
fs.readFile(pathname.substr(1),function(err, data) {
if(err) {
console.log(err);
//HTTP 状态码 404 : NOT FOUND
//Content Type:text/plain
response.writeHead(404,{'Content-Type': 'text/html'});
}
else {
//HTTP 状态码 200 : OK
//Content Type:text/plain
response.writeHead(200,{'Content-Type': 'text/html'});
//写会相应内容
response.write(data.toString());
}
//发送响应数据
response.end();
});
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
body {
border: 1px solid red;
}
div {
border-radius: 10px;
width: 500px;
height: 200px;
border: 2px solid green;
}
</style>
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>
<link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/index.css">
var http=require('http');
var fs = require('fs');
var url = require('url');
//创建服务器
http.createServer(function(request,response) {
//解析请求,包括文件名
var pathname= url.parse(request.url).pathname;
//输出请求的文件名
console.log("Request for "+ pathname + " received.");
//当请求static文件夹时,设置文件返回类型是text/css
var firstDir = pathname && pathname.split('/')[2];
var ContentType = null;
if (firstDir && firstDir === 'static') {
ContentType = {'Content-Type': 'text/css'};
} else {
ContentType = {'Content-Type': 'text/html'}
}
//从文件系统中去请求的文件内容
fs.readFile(pathname.substr(1),function(err, data) {
if(err) {
console.log(err);
//HTTP 状态码 404 : NOT FOUND
//Content Type:text/plain
response.writeHead(404, {'Content-Type': 'text/html'});
}
else {
//HTTP 状态码 200 : OK
//Content Type:text/plain
response.writeHead(200, ContentType);
//写会回相应内容
response.write(data.toString());
}
//发送响应数据
response.end();
});
}).listen(8081);
console.log('Server running at http://127.0.0.1:8081/');
body {
border: 1px solid blue;
}
div {
border-radius: 10px;
width: 400px;
height: 200px;
border: 2px solid yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="http://127.0.0.1:8081/WebServer/static/index.css">
</head>
<body>
这是一个用于进行nodejs服务器测试的html文件,我们能够通过在浏览器上面输入
http://127.0.0.1:8081/WebServer/index.html进行访问
<div>1</div>
<div>2</div>
</body>
</html>
在通常的服务器中,数据流通的方式是客户先通过浏览器进行发送请求,服务器在项目中进行查找,然后进客户所需要的页面进行返回,在查找的过程中可能存在两种情况,就是存在和不存在,当然,我们会做出判断,下面就是简单的服务器实现过程:
1、编写服务器代码server.js
[javascript] view plain copy
通过上面代码,我们就能够实现服务器对于文件的查找,下面,我们就进行创建一个html文件,然后通过浏览器进行访问
2、编写html文件(index.html),用于浏览器进行请求
[html] view plain copy
创建完之后,我们进行测试,现在我的目录结构是这样的:
3、进行测试
(1) 首先我们启动服务器,使用命令node WebServer/server.js
(2) 在浏览器进行访问,在url栏中输入http://127.0.0.1:8081/WebServer/index.html
其显示效果如下所示:
后台效果如下所示:
当然,我们也能够通过访问通过http://127.0.0.1:8081/LoveYou.html访问server.js文件夹外边的文件,进行到这里,我们就可以得到文件返回给前端,但是有些同学可能会问,样式该怎么做??如下面代码,我们进行了样式的定义,修改了两个div的大小,并且给div设置边框
[html] view plain copy
效果如下所示,
有了这些,我们还会问,你这样直接将样式写在html中,我可不干,我要把样式写道另外单独一个文件中,然后通过引用的方式引入,于是就会有人使用下面代码:
[html] view plain copy
然而,这段代码并不会起作用,因为传递给前端的方式Content-Type是有问题的,需要我们的服务器进行下一步操作,也就是处理静态文件。既然传给前端时需要告诉type是css,那么我们就进行区分对待,如下面代码,我们对server.js进行修改如下:
[html] view plain copy
接着,我们需要在项目中创建一个static文件夹,如下面所示结构:
在static文件夹中创建index.css文件,代码内容如下所示:
[html] view plain copy
也就是修改body边框为蓝色,div边框为黄色,同时我们需要更新index.html中文件内容如下所示:
[html] view plain copy
也就是通过引入的方式将样式引入到html文件中,然后在浏览器查看内容,效果如下所示:
很明显,我们的样式已经通过引入的方式引进到html页面中了,同样的原理,我们能够进行将js也通过引入的方式进行使用,在这里我就不一一贴出代码了,看看效果如下所示: