Node.js 表单提交&静态资源服务器

àì夳堔傛蜴生んèń 2022-04-11 14:09 196阅读 0赞

var http = require("http");
    var url = require("url");
    var server = http.createServer(function(req,res){
        //得到查询部分，由于参数是true,得到的query是一个对象
        var queryObj = url.parse(req.url,true).query;
        var name = queryObj.name;
        var sex = queryObj.sex;
        var age = queryObj.age;
        res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});  
        res.end("服务器收到了表单请求"+"<br>"+name +sex+age);
    });
    server.listen(8080,"127.0.0.1");

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <form action="http://127.0.0.1:8080/" method="get">
            姓名：<input type="text" name="name"><br>
            年纪：<input type="text" name="age"><br>
            <input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女
            <input type="submit" value="提交">
        </form> 
    </body>
    </html>

node form.js，然后浏览器运行form.html，输入姓名，年纪，选择性别，提交表单，结果如下：

![20181208133701264.png][]

安装一个小型服务器，因为只有服务器环境才能发出Ajax请求

$ cnpm install serve-static --save

$ cnpm install finalhandler --save

防止乱码，加：res.writeHead(200, \{'Content-Type': 'text/html; charset=utf-8'\});     //状态码+响应头属性

url.parse方法：将一个URL字符串转换成对象并返回

`var` `params` `= url.parse(req.url,``true``).query; ``//parse将字符串转成对象,req.url="/?url=123&name=321"，true表示params是{url:"123",name:"321"}，false表示params是url=123&name=321`

var url = require('url');
    var a = url.parse('http://example.com:8080/one?a=index&t=article&m=default');
    console.log(a);
     
    //输出结果：
    { 
        protocol : 'http' ,
        auth : null ,
        host : 'example.com:8080' ,
        port : '8080' ,
        hostname : 'example.com' ,
        hash : null ,
        search : '?a=index&t=article&m=default',
        query : 'a=index&t=article&m=default',
        pathname : '/one',
        path : '/one?a=index&t=article&m=default',
        href : 'http://example.com:8080/one?a=index&t=article&m=default'
    }

我们的目标是实现一个**可访问静态文件的服务器，即可以在浏览器访问文件夹和文件，通过点击来查看文件**。

静态资源文件一般放在所有的路由表之后。

下面展示获得真实文件夹publi中的1.png：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2][]

//当我们访问/时，想要呈递一个hh.html页面
    var express=require("express")
    var app=express()
    
    app.get("/",function(req,res){
    	res.set('Content-Type', 'text/html; charset=utf-8'); 
    	res.sendFile(__dirname+"/public/hh.html")
    })

![20181208133619515.png][]

res常用函数是send和sendFile。**sendFile**表示发送一个页面给用户，**必须使用绝对路径当作参数。**

需针对不同类型的文件设置不同的content-type，新建一个文件mime.js，导出部分类型。

[20181208133701264.png]: /images/20220411/90d4407badad43aeb3272c0ffb84ff89.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70]: /images/20220411/51c22dc890784b229dce65d732241b24.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 1]: /images/20220411/75ec78d7a17e4609b067474f5a23d03a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xha2Vzb24_size_16_color_FFFFFF_t_70 2]: /images/20220411/d523a25f52af467da52b63c63b7729ec.png
[20181208133619515.png]: /images/20220411/82ec10a4edf94b2bb486adede97da2d5.png