serve-static + formidable

serve-static

serve-static 是一款静态资源管理器。

安装

$ npm install --save serve-static

静态资源

var http = require("http"),
    url = require("url"),
    fs = require("fs");
var serveStatic = require("serve-static"),
    //finalhandler 是 serveStatic 的依赖,不需要特意安装。
    finalhandler = require("finalhandler");


//配置静态资源服务 ("要静态化的文件路径",{默认主页的配置});
var serve = serveStatic("public",{"index" : ["index.html","index.htm"]});
http.createServer(function(req,res){

    //路由清单
    if(req.url == "/music"){
        //也让其显示 根目录public 下的主页
        fs.readFile("./public/index.html",function(err,data){
            if(err){
                res.end("没有此文件!");
                return;
            }
            console.log(data.toString());
            res.end(data.toString());
        });
        //读取并呈递完毕之后,在路由中加上return,
        //否则下面的静态资源服务里面会一直寻找这个路由,
        //这个路由是虚拟出来的,因此不会呈递上面我们去读的文件
        return;
    }

    //使用静态资源服务,一般放在中间件最下方,不至于遮蔽中间件的路由
    serve(req,res,finalhandler(req,res));
}).listen(8888);console.log("ok");

get

将get请求的参数写入文件

  1. req.url

    var http = require("http"),
        url = require("url"),
        fs = require("fs"),
        serveStatic = require("serve-static"),
        finalhandler = require("finalhandler");
    var serve = serveStatic("public",{"index" : ["index.html","index.htm"]});
    
    http.createServer(function(req,res){
    
        // url 部分包含 queryString , 所以不能直接使用req.url
        // 如果访问 /music 可以
        // 如果访问 /music?a=1&b=2 则这样写不能识别
        if(req.url == "/music"){
            res.end("music");
        }
    
        serve(req,res,finalhandler(req,res));
    }).listen(8888);console.log("ok");
  2. pathname

    var http = require("http"),
        url = require("url"),
        fs = require("fs"),
        querystring = require("querystring"),
        finalhandler = require("finalhandler"),
        serverStatic = require("serve-static");
    //配置静态资源服务器,将public文件夹静态化出来
    var serve = serverStatic("public",{"index" : ["index.html","index.htm"]});
    http.createServer(function(req,res){
        //过滤 queryString部分
        var pathname = url.parse(req.url).pathname;
        if(pathname == "/add"){
            //拿到queryString
            var queryJSON = url.parse(req.url,true).query;
            //拼接文件,将其格式化一下
            var data = "name:" + queryJSON.name + "\n";
                data += "id :" + queryJSON.id;
            // 写入文件 , 当然你要确保data文件夹真实存在,否则无法写入
            fs.writeFile("./public/data/"+ queryJSON.name + ".txt",data,function(err){
                if(err){
                    res.end("-1");
                }else{
                    res.end("1");
                }
            });
            return;//结束当前路由
        }
        serve(req,res,finalhandler(req,res));
    }).listen(8888);
    console.log("ok")

post

POST 并不需要queryString部分,因为POST并不是通过地址栏传递的。
post请求参数如何拿到?

  1. req.on( )

    var http = require("http"),
        url = require("url"),
        fs = require("fs"),
        querystring = require("querystring"),
        finalhandler = require("finalhandler"),
        serverStatic = require("serve-static");
    
    var serve = serverStatic("public",{"index" : ["index.html","index.htm"]});
    
    http.createServer(function(req,res){
    var pathname = url.parse(req.url).pathname;
    if(pathname == "/add"){
        //暂存post信息
        var content = "";
        //通过req的data事件 监听函数,每当接受到请求体的数据,就累加到content变量中
        req.on("data",function(chunk){
            //post 请求经常很长,此时会分段传输
            //data 是一段一段传输的
            content += chunk;//将段合并
            res.on("end",function(){
                console.log(1);
            });
        });
        //当所有段落合并完毕,触发这个事件
        req.on("end",function(){
            content = querystring.parse(content);
            //content 是object类型,转为字符串
            var contentStr = JSON.stringify(content);
            fs.writeFile("./public/data/" + content.name + ".json",contentStr,function(err){
                if(err){
                     res.end("-1");
                }else{
                    res.end("1");
                }
            });
        });
        return;
    }
    serve(req,res,finalhandler(req,res));
    }).listen(8888);
  2. formidable
    使用 formidable 更好的处理 表单和文件。


formidable

安装

$ npm install --save formidable

处理表单

    var http = require("http"),
        url = require("url"),
        fs = require("fs"),
        querystring = require("querystring"),
        finalhandler = require("finalhandler"),
        serverStatic = require("serve-static");

    //引入 formidable
    var formidable = require("formidable");

    var serve = serverStatic("public",{"index" : ["index.html","index.htm"]});

    http.createServer(function(req,res){

        var pathname = url.parse(req.url).pathname;
        //创建一个表单的实例
        var form = new formidable.IncomingForm();
        //路由
        if( pathname == "/addStudent"){   
            //处理表单
            form.parse(req,function (err, fields,files){
                //fields 普通控件(文本域)
                //files 文件控件
                console.log(fields);//{name:"haha"}
                if(err){
                    res.end("-1");
                }else{
                    res.end("1");
                }
            });
            return;
        }

    serve(req,res,finalhandler(req,res));
    }).listen(8888);

上传文件


    var http = require("http"),
        url = require("url"),
        fs = require("fs"),
        path = require("path"),
        querystring = require("querystring"),
        finalhandler = require("finalhandler"),
        serverStatic = require("serve-static");
        formidable = require("formidable");
    var serve = serverStatic("public",{"index" : ["index.html","index.htm"]});

    http.createServer(function(req,res){
        var pathname = url.parse(req.url).pathname;

        if( pathname == "/updata"){
            //报文内容编码格式,中文容易乱码
            res.setHeader("content-type","text/plian;charset=utf-8");
            //实例化
            var form = new formidable.IncomingForm();
            //设置上传路径
            form.uploadDir = "./public/uploads";//这句话在form实例化后面
            //处理
            form.parse(req,function(err,fields,files){
                //这里的files对象就是传的这个文件,这个files对象的名字 就是 控件的name属性值,
                //这里前台页面中 上传控件 的 name = "pic"; 这里就是pic
                console.log(files.pic.name);
                //如果没有选择文件,直接点上传的话
                if(!files.pic){//文件都不存在,files文件域就不存在
                    return;
                }
                //文件域不存在 自然没有文件名
                if(!files.pic.name){//如果文件名为空
                    res.end("请上传文件啊!");
                    return;
                }

                // 得到拓展名
                var extname = path.extname(files.pic.name);
                //改名(结合fs去改名,不改名是随即码)
                //formidable 传输的文件是没有拓展名的
                //files.pic.files 就是它默认的路径+文件名 , 改成它 默认的路径+文件名+拓展名
                fs.rename(files.pic.path,files.pic.path + extname , function(){
                    //改名成功之后返回状态
                    res.end("上传成功!");
                });
            });
            return;
        }

    serve(req,res,finalhandler(req,res));
    }).listen(8888);
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <!-- 使用 formidable 这里要有enctype 属性 -->
        <form action="updata" method="post" enctype="multipart/form-data">
            <p> 
                <!-- formidable 必须要有name -->
                上传文件 : <input type="file" name="pic" />
            </p>
            <p>
                <input type="submit" value="提交" />
            </p>
        </form>
    </body>
    </html>

express

安装

$ npm install --save express

中间件

    var express = require("express");
    var app = express();

    //中间件(路由清单)
    app.get("/",function(req,res){
        //res.sendFile()呈递html,要使用绝对路径
        //__dirname表示当前目录的绝对路径
        res.sendFile(__dirname + "/public/index.html");
    });

    //app.use() 表示使用中间件
    //参数一:虚拟路径 , / 不再是根目录, /virtual才是
    app.use("/virtual",express.static("public",{"index":["index.html","index.htm"]}));

    app.listen(8888);
    console.log("star server!");
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值