zoukankan      html  css  js  c++  java
  • nodejs中http服务器,如何使用GET,POST请求发送数据、npm、以及一些插件的介绍

    浏览器给服务器传递参数,最常用的是地址栏传参(get),以及表单提交(post)

    先说get传参,就是在url后跟上?key=value&key2=value2......

    但是按照前几篇的http服务器中,当我们访问localhost:3000/text?a=1时,服务器却返回了404页面

    在终端打印出的request.url中是这样的:/text?a=1

    这样当然匹配不到路由方法了,当然要返回404页面

    首先我们要只取到?号以前的路径,再去想办法取到?号之后的参数,这样就不会返回404页面了

    nodejs中有一个专门处理url的核心库,可以取地址栏上的各种值,下面来更改一下之前的http服务器代码,来取到url路径以及参数:

    把整个服务器代码都考过来:

    api.js:(未变动)

    var server = require("./server");
    var router = require("./router");
    var handler = require("./handler");
    
    var handle = {};
    
    handle["/"]=handler.home;
    handle["/home"]=handler.home;
    handle["/review"]=handler.review;
    handle["/api_records"]=handler.api_records;
    handle["/text"]=handler.text;
    
    server.startServer(router.route,handle);

    server.js:(有变动  变动的用红色字体标出)

    var http = require("http");
    var url = require("url");
    
    var startServer = function(route,handle){
        var onRequest = function(request,response){
            var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
            console.log("request received"+pathname);
            var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
            route(handle,pathname,response,params);
            
        }
    
        var server = http.createServer(onRequest);
        //最后让服务器监听一个端口
        server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地
    
        console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
    }
    
    module.exports.startServer=startServer;

    router.js(有变动)

    var fs = require("fs");
    
    function route(handle,pathname,response,params){
        console.log("Routing request for"+pathname);
        if(typeof handle[pathname] === 'function'){
            handle[pathname](response,params);
        }else{
            response.writeHead(200,{"Content-Type":"text/html"});
            fs.createReadStream(__dirname+"/404.html","utf8").pipe(response);
        }
    }
    
    module.exports.route=route;

    handler.js(有变动)

    var fs = require("fs");
    
    function home(response,params){
        response.writeHead(200,{"Content-Type":"text/html"});
        fs.createReadStream(__dirname+"/index.html","utf8").pipe(response);
    }
    
    function review(response,params){
        response.writeHead(200,{"Content-Type":"text/html"});
        fs.createReadStream(__dirname+"/review.html","utf8").pipe(response);
    }
    
    function api_records(response,params){
        response.writeHead(200,{"Content-Type":"application/json"});
        response.end(JSON.stringify(params));
    }
    
    function text(response,params){
        response.writeHead(200,{"Content-Type":"text/plain;charset=UTF-8"});
        response.end("文本内容");
    }
    
    module.exports={
        home,
        review,
        api_records,
        text
    }

    上面代码就是关于应对get请求的全部更改,我们在handler.js中的api_records方法中,把取回来的params返回到了页面上,输入:localhost:3000/api_records?a=1&b=2

    页面会展示出{a:1,b:2}

    这样,我们在服务端获取到参数值后,可以根据参数值来返回给页面对应的内容!!!

    下面说一下,怎么接受post传来的数据,我们以表单提交为例

    在index.html中写上一个表单:

    `<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>html</title>
        <style>
            div{
                color:red;
                font-size:50px;
            }
        </style>
    </head>
    <body>
       <div>我是从服务器传回来的html页面</div> 
       <form action="/api_records" method="POST">
            name:<input type="text" name="name">
            age:<input type="text" name="age"> 
            job:<input type="text" name="job">
            <input type="submit" value="提交">
       </form>
    </body>
    </html>

    主要更改server.js中的代码就行;

    var http = require("http");
    var url = require("url");
    var querystring = require("querystring");//解析post传过去的数据,以防乱码
    
    var startServer = function(route,handle){
        var onRequest = function(request,response){
            var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
            console.log("request received"+pathname);
            var data = "";
            request.on("error",function(err){//请求发生错误时触发
                console.error(err);
            }).on("data",function(chunk){//请求接收到数据时触发
                data+=chunk;
            }).on("end",function(){//请求结束后触发
                if(request.method === "POST"){
                    route(handle,pathname,response,querystring.parse(data));
                }else if(request.method === "GET"){
                    var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                    route(handle,pathname,response,params);
                }
            })
            
            
        }
    
        var server = http.createServer(onRequest);
        //最后让服务器监听一个端口
        server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地
    
        console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
    }
    
    module.exports.startServer=startServer;

    这样在 请求接收到之后,可以冲request.method中判断是get还是post请求,若是get,就把params响应回去,若是post就把data响应回去!!!

    接收post传来的数据还有一种写法,把data定义成数组,然后在request接收数据时,将chunk挨个push进去,然后用Buffer.concat()方法将data片段合并,取字符串:

    var http = require("http");
    var url = require("url");
    var querystring = require("querystring");//解析post传过去的数据,以防乱码
    
    var startServer = function(route,handle){
        var onRequest = function(request,response){
            var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
            console.log("request received"+pathname);
            var data = [];
            request.on("error",function(err){//请求发生错误时触发
                console.error(err);
            }).on("data",function(chunk){//请求接收到数据时触发
                data.push(chunk);
            }).on("end",function(){//请求结束后触发
                if(request.method === "POST"){
                    data = Buffer.concat(data).toString();
                    route(handle,pathname,response,querystring.parse(data));
                }else if(request.method === "GET"){
                    var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                    route(handle,pathname,response,params);
                }
            })
            
            
        }
    
        var server = http.createServer(onRequest);
        //最后让服务器监听一个端口
        server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地
    
        console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
    }
    
    module.exports.startServer=startServer;

    如果浏览器端发送给服务端的数据量很大的话,可以把这个请求取消掉:

    server.js:

    var http = require("http");
    var url = require("url");
    var querystring = require("querystring");//解析post传过去的数据,以防乱码
    
    var startServer = function(route,handle){
        var onRequest = function(request,response){
            var pathname = url.parse(request.url).pathname;//取到?号前面的url路径
            console.log("request received"+pathname);
            var data = [];
            request.on("error",function(err){//请求发生错误时触发
                console.error(err);
            }).on("data",function(chunk){//请求接收到数据时触发
                data.push(chunk);
            }).on("end",function(){//请求结束后触发
                if(request.method === "POST"){
                    if(data.length>1e6){//若post发送给服务端数据量很大时,将请求取消
                        console.log(data.length);
                        request.connection.destroy();
                    }
                    data = Buffer.concat(data).toString();
                    route(handle,pathname,response,querystring.parse(data));
                }else if(request.method === "GET"){
                    var params = url.parse(request.url,true).query;//取到url上?之后的内容  第二个参数是布尔值,true:格式化  false:非格式化 返回的是字符串形式的
                    route(handle,pathname,response,params);
                }
            })
            
            
        }
    
        var server = http.createServer(onRequest);
        //最后让服务器监听一个端口
        server.listen(3000,"127.0.0.1");//还可以加第二个参数 127.0.0.1代表的是本地
    
        console.log("server started on localhost port 3000");//加一个服务器启动起来的提示
    }
    
    module.exports.startServer=startServer;

    如果我们想要使用别人编写好的express服务器框架,

    可以执行:

    npm install express

    来安装express框架,

    按住那个完后,项目中会出现node_modules文件夹,里面放着依赖文件,当我们用require()引入库时,就会来这个文件递归查找,不用我们写详细路径

    npm官网:www.npmjs.com   里面海量资源,等着你去用,可以在里面查看各种包的用法

    当我们想知道我们的node项目中到底引入了哪些npm包时,我们很希望有一个文件去显示这些安装过的包名称,做一个记录,package.json就是你想要的文件:

    我们执行

    npm init

    就会出现这个package.json文件,运行过这个命令后,会问一些问题,项目名称啊,版本啊,git地址啊等,直接一路回车就行!!

    一般这个npm init命令是来初始化一个项目的,初始化之后就会出现package.json文件

    比如上面的,我们想使用express框架,我们可以执行

    npm install --save express

    这样,安装的express版本号 名称 就会记录在package.json文件中

    注意,npm init  要在npm install --save express之前执行,这样项目中才会出现node_modules文件夹

    最后说一下nodemon工具,它可以监听自己的服务器项代码改变,如果代码改变,会自动重启服务器,不用自己再去手动重启服务器了

    安装

    npm install -g nodemon

    之前我们是用node app来启动服务器的

    但是现在我们可以使用 nodemon app来启动服务器,这样当我们代码发生改变时,服务器会自动重启!!!

  • 相关阅读:
    关于浮动清除的一些小感悟,4种方法清除浮动
    6号css学习小记
    pexpect-pxssh-登陆Linux-执行命令
    chroot命令
    Loadrunner11点击录制脚本无响应,IE页面弹不出——解决方案汇总
    JAVA实验五(网络编程)
    Java实验三
    JAVA实验二(面向对象)
    JAVA实验一
    Tfs链接错误解决方案
  • 原文地址:https://www.cnblogs.com/fqh123/p/11258681.html
Copyright © 2011-2022 走看看