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

最新推荐文章于 2024-08-11 22:37:18 发布
最新推荐文章于 2024-08-11 22:37:18 发布
阅读量1.9k 收藏 2
点赞数 3
分类专栏： 前端构建工具 文章标签： nodejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pleasecallme_522/article/details/53503753
版权
本文介绍了使用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);

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

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

打开add.html
这里写图片描述

填写表单：
这里写图片描述

提交，就会按服务器处理数据的方式将数据显示在页面中：
这里写图片描述

此时控制台的信息：
这里写图片描述

以上就是看捷训网nodejs视频所学内容的总结，对nodejs的服务器搭建有了初步的了解，具体的细节还需要以后分模块逐步学习。

pleasecallme_522
关注
专栏目录
Node核心模块之QueryString
zza000000的博客
01-10 1600
Node核心模块之QueryStringquerystring模块用于解析和格式化URL查询字符串 * const querystring = require(‘querystring’) *1.querystring.escape(str) 设置查询字符串组合时编码格式 * 被querystring.stringify()方法使用 *2.querystring.unescape(str)
NodeJs内置模块之HTTP模块
Science Explorer
08-25 3366
一、HTTP协议与流 1.客户端上的 HTTP 请求 ClientRequest的实例 ——可写流 一般由http.request()方法创建返回 http.request(options[, callback]) 参数说明： options ：可以是一个对象、或字符串、或 URL 对象。 如果 options 是一个字符串，它会被自动使用 url.parse() 解析。 如果它是一...
nodejs之querystring
路在脚下，幸福在手中，莫贪！！！！！
12-08 587
从名字就可以看出是一个和参数相关的帮助类,node.js原生自带,直接 require('querystring') 即可使用. 此类一共包括4个方法: querystring.stringify(obj, [sep], [eq])  querystring.parse(str, [sep], [eq], [options]) querystring.escape
深入解析Node.js中的`fs.stat`方法
最新发布
软考鸭
08-11 532
fs.stat方法是Node.js中用于获取文件或文件夹状态信息的重要API。通过它，我们可以判断文件或文件夹的存在性、获取它们的详细信息以及实现文件或文件夹的遍历和监控。在实际开发中，合理使用fs.stat方法能够显著提升应用的文件处理能力。
前后端交互（二）| Node+Gulp | （3）请求响应原理及HTTP 协议
Better_Xing的博客
10-19 1340
请求响应原理及HTTP协议 文章目录请求响应原理及HTTP协议1. 服务器端基础概念1.1 网站的组成1.2 Node网站服务器1.3 IP地址1.4 域名1.5 端口1.6 URL1.7 开发过程中客户端和服务器端说明2. 创建web服务器3. HTTP协议3.1 HTTP协议的概念3.2 报文3.3 请求报文3.4 响应报文4. HTTP请求与响应处理4.1 请求参数4.2 GET请求参数4.3 POST请求参数4.4 路由4.5 静态资源4.6 动态资源4.7 客户端请求途径5. Node.js异步
node querystring
怖呆的博客。
08-09 332
querystring 是node 中一个解析和转换，解析字符串为json 对象,转换字符串为json。APIstringifyparseescape & unescape
node之querystring
aimei1647的博客
04-14 111
1 转载于:https://www.cnblogs.com/noper/p/6707913.html
NodeJs实现简易WEB上传下载服务器
10-16
3. `fs`：文件系统模块，用于与文件系统交互。 4. `http`：基础HTTP服务器模块。 5. `queryString`：处理查询字符串。 6. `body-parser`：解析HTTP请求体，这里用于处理POST请求中的数据。 7. `path`：处理路径相关...
nodejs 简单实现动态html的方法
10-18
【Node.js 动态HTML实现】 在Web开发中，动态HTML是指能够根据用户输入或服务器端数据实时生成和更新的HTML页面。...这样的方式使得服务器能够灵活地根据用户输入生成个性化的网页，提高了Web应用的交互性和用户体验。
nodejs模块及其作用
flykus的博客
08-27 1026
1、nodejs 模块及其作用 assert 为应用程序的单元测试添加断言处理 buffer 用于二进制数据的存储与转换 url 用于实现URL字符串的解析与格式化 events 用于为事件处理提供一个基础类 fs 用于操作文件及文件系统 path 用于处理文件...
小程序与MySQL数据库的交互_微信小程序与服务器的交互原理
weixin_30821881的博客
01-30 3613
1. 在linux服务器中配置nginx简单说，微信小程序要正常运行起来，就要跟服务器进行数据交互，微信小程序服务器配置需要使用https安全域名，现在https证书可以免费申请，我用的是阿里云服务器，可以在阿里云上申请免费的https证书。关于阿里云服务器配置nginx，请参见《在linux上通过nginx配置微信小程序服务器》。pm2的安装使用在nginx配置微信小程序服务器的文章里，我们安装...
node - querystring
记录点滴
03-19 782
querystring是处理URL中参数的模块。 const queryStr = require('querystring') console.log('111: ', queryStr) // 所有方法 /* { unescapeBuffer: [Function: unescapeBuffer], unescape: [Function: qsUnescape], escape: [Function: qsEscape], stringify: [Function.
Node.js中常用模块
duansamve的博客
05-04 269
querystring从字面上的意思就是查询字符串，一般是对http请求所带的数据进行解析。querystring模块只提供4个方法，在我看来，这4个方法是相对应的。 这4个方法分别是querystring.parse和querystring.stringify,querystring.escape和querystring.unescape。 首先，使用querystring模块之前，需要re...
nodeJs--querystring
空谷足音的博客
03-25 391
querystring模块提供用于解析和格式化 URL 查询字符串的实用工具 1.引入模块 const querystring=require('querystring'); 2.重要API 类似于JOSN.parse() ------ JSON.stringfy(). json序列化和反序列化 const querystring=require('querystring'); ...
nodeJs--querystring模块
qq_56973906的博客
07-31 856
options（可省）传入一个对象，该对象可设encodeURIComponent这个属性值的类型为function，可以将一个不安全的url字符串转换成百分比的形式，默认值为querystring.esca。separator（可省）指用于分割str这个字符串的字符或字符串，默认值为"&“;separator（可省）用于连接键值对的字符或字符串，默认值为"&“;eq（可省）指用于划分键和值的字符或字符串，默认值为”=";eq（可省）用于连接键和值的字符或字符串，默认值为”=";...
nodejs queryString模块
hhthwx的博客
11-18 557
queryString字面上的意思是查询字符串，一般是对http请求所带的数据进行解析。queryString模块提供了四个方法：1.queryString.parse(str,separator,eq,options)该方法是将一个字符串反序列化为一个对象。 参数说明： str：指需要反序列化的字符串 separator(可选)：指用于分割str这个字符串放入字符或者字符串，默认值为’&’
node 的QueryString模块和Path模块
wenxin_liu的博客
07-19 237
" QueryString模块 " “QueryString” 模块用于实现URL参数字符串与参数对象的互相转换： 举例： 1 var url = require('url'); 2 var qs = require('querystring'); 3 var queryUrl = "http://localhost:8888/bb?name=bigbear&memo=helloworld" ; 4 queryUrl = url.parse(queryUrl).query ; 5 console.l
Nodejs06--node常用模块之--querystring
宁静致远
04-23 1501
querystring 模块 字面意思就是 查询字符串，一般是对http请求所带的数据进行解析 引入模块：require('querystring'); querystring模块仅有四个方法 querystring.parse(str);parse函数：是将一个字符串反序列化为一个对象。 querystring.escape(str);escape函数：可使传入的字符串进行编码。 querystring.stringify(str);stringif函数：将一个对象序列化成一个字符串，...
node(querystring)使用
echo_Ae的博客
06-11 428
querystring.stringify(对象，'连接符','键值对') //序列化对象 querystring.parse('对象序列化'，'连接符','键值对'，) //反序列化 序列化: > querystring.stringify( { name:"test",password:"123",coures:['PHP','node'],from:'' }  )
NodeJS中文文档：核心模块与API详解
文档包括标准模块如Buffers（用于处理二进制数据），EventEmitter（实现事件驱动编程），Streams（处理数据流），以及全局对象如process（代表Node.js进程）和fs模块（文件系统操作）。此外，还涉及HTTP服务器和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值