nodejs之http、fs、querystring模块实现网页与服务器的交互

最新推荐文章于 2024-09-11 09:42:47 发布

pleasecallme_522

最新推荐文章于 2024-09-11 09:42:47 发布

阅读量1.9k

点赞数 3

分类专栏：前端构建工具文章标签： nodejs

本文链接：https://blog.csdn.net/pleasecallme_522/article/details/53503753

版权

前端构建工具专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了使用Node.js的http、fs和querystring模块来处理浏览器的GET和POST请求，实现服务器响应静态网页内容以及接收并处理表单数据。通过分离网页文件和服务器js文件，实现了不同页面之间的切换，并展示了服务器接收到POST请求后的响应过程。

摘要由CSDN通过智能技术生成

一.实现浏览器端请求之后，服务器响应打开相应的静态网页内容：

思路：直接通过浏览器端输入的url值来判断，从而显示出该url对应的网页的内容。直接在配置服务器的js代码里写出静态页面的内容：

//前端页面和服务器未分离

var http = require('http');//使用node提供的http模块
var server = http.createServer(function(req,res){//创建webserver
    //req是客户端（浏览器）传来的参数，包含method、url、head等一些属性
    //res是服务器对客户端的一些响应
    console.log(req.method);
    console.log(req.url);

    if(req.method === 'GET' ){
        switch(req.url){
            case '/':
            //默认根目录下也显示index.html页面的内容
            case '/index.html':
                var html = "<html><head><meta charset='utf-8'><title>nodejs学习</title></head><body>"+
                "<h1>哈哈哈</h1>" +
                "<a href='add.html'> Add</a> " +
                "<a href='remove.html'> Remove</a> " +
                "<a href='find.html'> Find</a> " +
                "<a href='edit.html'> Edit</a> " +
                "</body></html>";
                res.setHeader('Content-Type','text/html');
                res.setHeader('Content-Encoding','utf8');
                res.end(html);

                break;

            case'/add.html':
                var html ="<html><head><meta charset='utf-8'><title>nodejs学习</title></head><body>"+
                        "Add"+
                        "</body></html>";
                res.setHeader('Content-Type','text/html');
                res.setHeader('Content-Encoding','utf8');
                res.end(html);
                break;

            case'/remove.html':
                var html ="<html><head><meta charset='utf-8'><title>nodejs学习</title></head><body>"+
                    "Remove"+
                    "</body></html>";
                res.setHeader('Content-Type','text/html');
                res.setHeader('Content-Encoding','utf8');
                res.end(html);
                break;

            case'/find.html':
                var html ="<html><head><title>nodejs学习</title></head><body>"+
                    "Find"+
                    "</body></html>";
                res.setHeader('Content-Type','text/html');
                res.setHeader('Content-Encoding','utf8');
                res.end(html);
                break;

            case'/edit.html':
                var html ="<html><head><meta charset='utf-8'><title>nodejs学习</title></head><body>"+
                    "Edit"+
                    "</body></html>";
                res.setHeader('Content-Type','text/html');
                res.setHeader('Content-Encoding','utf8');
                res.end(html);
                break;
            default :
                var html ="<html><head><meta charset='utf-8'><title>nodejs学习</title></head><body>"+
                    "404!,Not Find"+
                    "</body></html>";
                res.writeHeader(404,{'Content-Type':'text/html'});
                //res.setHeader('Content-Encoding','utf8');
                res.end(html);
        }
    }

    res.end();
});

server.listen(2333);

打开cmd，启动服务器

这里写图片描述

打开浏览器，输入请求的url,

这里写图片描述

各个url对应的页面之间也可以互相转化：
这里写图片描述

此时会发现cmd里打印出了请求的url:

这里写图片描述

二.将网页文件和服务器js文件相分离，此时就要用到node的fs（file system)模块，浏览器发送请求时，再通过fs将html文件读入：

    //前端页面和服务器分离
var http = require('http');//导入node提供的http模块
var fs = require('fs'); //导入node提供的filesystem模块，用它的属性来进行文件操作
var app = http.createServer(function(req,res){//创建webserver
    //req是客户端（浏览器）传来的参数，包含method、url、head等一些属性
    //res是服务器对客户端的一些响应
    if(req.method === 'GET' ){
        switch(req.url){
            case '/index.html':
                fs.readFile('../index.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.write(data.toString());
                    res.end();
                });
                break;
            case '/add.html':
                fs.readFile('../add.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.write(data.toString());
                    res.end();
                });
                break;
            case '/remove.html':
                fs.readFile('../remove.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.write(data.toString());
                    res.end();
                });
                break;
            case '/find.html':
                fs.readFile('../find.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.write(data.toString());
                    res.end();
                });
                break;
            case '/edit.html':
                fs.readFile('../edit.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.write(data.toString());
                    res.end();
                });
                break;
            default :
                var html = '<html><head><meta charset="UTF-8"><title></title></head><body>' +
                        '404 not found!</body></html>';
                res.writeHeader(404,{'Content-Type':'text/html'});
                //res.setHeader('Content-Encoding','utf8');
                res.end(html);
        }
    }else{
        console.log('not support!');
    }
}).listen(2333);

其他的几个页面分别编写，此时的目录结构是：
这里写图片描述

打开cmd启动服务器：
这里写图片描述

打开浏览器访问：
这里写图片描述

各个页面之间可以互相切换

三.服务器响应浏览器的POST请求

在add.html页面中，会有一个表单，当按下“submit”按钮之后，将上面表单中的所有内容提交到服务器

var http = require('http');
var fs = require('fs');
var qs = require('querystring');//服务器解析表单提交的数据所用到的模块

var websites = [];

var app = http.createServer(function(req,res){
    var dataPost ='';
    if(req.method === 'GET'){
        //处理一些简单的html请求
        switch (req.url){
            case '/index.html':
                fs.readFile('../index.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'utf8'});
                    res.end(data.toString());
                })

                break;
            case '/add.html':
                fs.readFile('../add.html',function(err,data){
                    if(err){
                        throw err;
                    }
                    res.writeHeader(200,{'Content-Type':'utf8'});
                    res.end(data.toString());
                })

                break;

        }

    }else if(req.method === 'POST'){
        //处理复杂的请求
        switch(req.url){
            case '/add.js':
                //通过request的两个事件来完成对post方法传入的数据进行读取等操作
                //data事件，监听数据的传输
                req.on('data',function(chunck){
                    dataPost += chunck;
                });
                //end事件，监听数据发送完成
                req.on('end',function(){
                    //打印服务器接收的form表单的数据格式
                    //domainName=www.nodejs.json.com&name=node.js&email=nodejs%40json.com&age=3&click=3000
                    // console.log(dataPost);

                    //服务器对所接收的数据进行解析
                    //最终将数据解析成一个对象，比如domainname就是该对象的属性，www.nodejs.json.com就是对应属性的值

                    var website = qs.parse(dataPost);
                    console.log(website.domainName);
                    console.log(website.name);
                    console.log(website.age);
                    console.log(website.click);

                    //接下来实现在服务器中对数据的存储，可以存在内存中、文件中或数据库中
                    //下面采用最简单的方式--存储在内存中，即服务器一停止服务，数据将会丢失
                    websites.push(website);
                    //用JSON的方法测试数组的输出
                    //res.end(JSON.stringify(websites));
                    var html = '<html><head><meta charset="utf-8"><title>nodejs</title></head><body>';
                    html +='<table>';
                    for(var i = 0; i<websites.length; i++){
                        var row='<tr>'+
                        '<td>'+websites[i].domainName +'</td>'+
                        '<td>'+websites[i].name +'</td>'+
                        '<td>'+websites[i].email +'</td>'+
                        '<td>'+websites[i].age +'</td>'+
                        '<td>'+websites[i].click +'</td>'+
                        '</tr>';
                        html +=row;
                    }
                    html +='</table>';
                    html += '</body></html>';
                    res.writeHeader(200,{'Content-Type':'text/html'});
                    res.end(html);
                    //测试表单传入服务器的数据
                    // res.end(dataPost);

                });

                break;
        }
    }
}).listen(2333);