createServer 创建简单的 http 服务器

1
2
3
4
5
6
7
8
9
10
11
12
const http = require('http');
http.createServer(function(req,res){
console.log(req.url);
res.write('123');
res.end();
}).listen(3000);
//这里创建了一个服务器,并监听了3000端口
//createServer的回调函数 is a function which is automatically added to the 'request' event.即每当客户端有请求来就会执行该函数
//参数req和res分别代表输入和输出,也即客户端请求request和服务器响应response ,当然参数命名是随意的,命名为req和res更具语义化
//其中req是输入对象,很复杂,req.url表示客户端请求的目录如:
//xxx.xxx.xxx.xxx:3000对应/ xxx.xxx.xxx.xxx:3000/index.html则对应 /index.html xxx.xxx.xxx.xxx:3000/1/2/index.html 则对应 /1/2/index.html
//res.write 表示往浏览器客户端输出(响应)数据,这里可以是字符串,也可以是服务器上的文件
  • 如下图所示:利用上面的代码,我们就创建好了一个简单的服务器,当客户端来请求时,我们就输出请求的目录req.url 以及往客户端发送一个字符串’123’
  • pic
    createServer
  • 眼尖的你一定发现了,我们明明只请求了index.html文件,为什么会多出一个请求 favicon.ico 其实这是Chrome 浏览器自作多情(自作主张的为我们去请求网站图标ico)

用 http 模块配合 fs 模块 创建服务器

  • 下面给一个Node.js读取服务器端的文件再发给浏览器的例子(两个文件一个js文件,一个待返回的html文件test001.html)
1
2
3
4
5
6
7
8
9
10
11
//js文件
const http = require('http');
const fs = require('fs');
http.createServer(function(req,res) {
console.log('客户端正在请求'+req.url);
fs.readFile('test001.html',(err,data)=>{
if (err) res.write('404');
res.write(data);
res.end();
});
}).listen(3000);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//test001.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<style>

</style>
</head>
<body>
<h1 style="background:#f00;color:#000;">运用Node.js读取服务器上的文件,再发送给客户端</h1>
<script>

</script>
</body>
</html>
  • 效果图:
  • pic
    createServer

服务器接收客户端的get数据

  • 这里要两个文件服务器端的js文件receive-get-data.js 和 客户端的静态html文件 form.html
  • 下面是form.html 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    </style>
    </head>
    <body>
    <form action="http://xxx.xxx.xxx.xxx:3000/index.html" method="get">
    用户名:<input name="username" />
    密码<input type="password" name="pass" />
    <button>提交</button>
    </form>
    </body>
    </html>
  • 下面是 receive-get-data.js 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    const http = require('http');
    http.createServer((req,res)=>{
    let para = [],arr1=[],arr2=[],arr3=[],getData={};
    console.log(req.url);
    if (req.url.indexOf('?')!=-1) {
    arr1 = req.url.split('?');
    arr2 = arr1[1].split('&');
    for (var i=0;i<arr2.length;i++) {
    arr3 = arr2[i].split('=');
    getData[arr3[0]] = arr3[1];
    }
    console.log(getData);
    res.write('123');
    res.end();
    } else {

    }
    }).listen(3000);
  • 效果图:

  • pic
    receiveGetData
  • 上面的 receive-get-data.js 文件可以利用 querystring 模块进一步的改进

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const http = require('http');
    const querystring = require('querystring');
    http.createServer((req,res)=>{
    let para = [],arr1=[],arr2=[],arr3=[],getData={};
    console.log(req.url);
    if (req.url.indexOf('?')!=-1) {
    let strtemp = req.url.slice(req.url.indexOf('?')+1);//得到?后面的字符串
    getData = querystring.parse(strtemp);//该方法会解析url字符串返回一个json对象
    console.log(getData);
    res.write('123');
    res.end();
    } else {

    }
    }).listen(3000);
  • 还可以利用 url 模块的 parse 的函数进行改进

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    const http = require('http');
    const urlLib = require('url');
    http.createServer((req,res)=>{
    console.log(req.url);
    let obj = urlLib.parse(req.url,true);
    //console.log(obj);//这里面是url的详细信息,想要用到什么就可以从里面拿
    console.log(obj.query);
    res.write('123');
    res.end();
    }).listen(3000);

服务器接收客户端的 post 数据

  • 这里有两个文件1:服务器js文件receive-post-data.js 2:客户端 html 文件form.html
  • form.html如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style>

    </style>
    </head>
    <body>
    <form action="http://xxx.xxx.xxx.xxx:3000/index.html" method="post">
    用户名:<input name="username" />
    密码<input type="password" name="pass" />
    info<textarea name="info"></textarea>
    <button>提交</button>
    </form>
    </body>
    </html>
  • receive-post-data.js如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const http = require('http');
    http.createServer((req,res)=>{
    let i = 0;
    let str = '';
    //监听post的每一次数据块
    req.on('data',function(data){
    console.log(`第${i++}次推送数据`);
    str += data;
    });
    //数据发送完毕
    req.on('end',function() {
    console.log(`post数据推送完毕`);
    res.write(str.length.toString());
    res.end();
    });
    }).listen(3000);
  • 效果图如下:

  • pic
    post数据分块