纯原生之使用node.js 实现输入框内容后台存储

纯原生之使用node.js 实现输入框内容后台存储

目录结果如下:一个app.js作为后端启动文件，将index.html 渲染出来，test.json 存储前端ajax 请求过来的数据

本项目不涉及任何第三方库（node.js内置库除外），纯原生

页面结构这块没啥好讲的，使用原生js 实现了下 ajax 请求

 <p>你好这是一个表单提交页面</p>
    <input type="text" placeholder="please input..." width="100px" id="data"/>
    <input type="button" value="请提交" onclick="submit()"/>
    <p id="result"></p>
    <script type="text/javascript">
        function submit(){
           //发送ajax请求
            // 
            var data = document.getElementById("data").value
            //拼接上一个key值
            data = "inputvalue="+data
            var ajax = new XMLHttpRequest();

            //发送的post请求数据
            ajax.open('post','http://127.0.0.1:8888/test.json',true)
            ajax.send(data)
            ajax.onreadystatechange = function(){
                if(ajax.readyState ==4 && ajax.status ==200){
                    //本次请求成功
                    document.getElementById("result").innerHTML = "sucesss" 
                }else{
                    //本次请求失败
                    document.getElementById("result").innerHTML = "fail" 
                }
            }
        }
    </script>

并将本次请求的结构返回到页面输出........

后端使用node.js 来实现，未引入中间件，但这个时候一个比较蛋疼的问题是，node.js对post 请求支持的比较不友好，引出需要自己自行接收与解析来自页面的数据，这个时候我们可以通过判断http 报文 中报头的Transfer-Encoding或者Content-Length 来判断请求中是否含有请求体数据，有的话通过监听data 事件的触发，以流的方式处理这些chunk 数据，存储于一个buffers数组中

然后再将接收到的Buffer列表转换成一个Buffer 对象后，再转换成没有乱码的字符串，就可以将内容挂置在req的rawBody 中了

然后就可以调用fs 模块的appendFile方法，就请求的数据存储起来了....

话不多说，上上代码:

var http = require("http")
var fs = require("fs")
var url = require("url")

http.createServer((req,res) =>{
    if((req.url).indexOf("index") >=0){
        //index目录下渲染index.html
        fs.readFile('./index.html','utf-8',(err,data)=>{
            if(err){res.end("网络传输报错")}
            else{
                // res.setHeader('content-type','text-html;charset=utf-8');
                res.writeHead(200,{"Content-type":"text/html"});
                res.write(data)
                res.end()
            }
        })
    }else if ((req.url).indexOf("test")>=0) {
        function hasBody(req) {
           return 'transfer-encoding' in req.headers || 'content-length' in req.headers 
        }
        function payload(){
           if(hasBody(req)){
               var buffers = [];
                req.on('data',(chunk) =>{
                    buffers.push(chunk)
                });
                req.on('end',()=>{
                    req.rawBody = Buffer.concat(buffers).toString();
                    //获取当前时间:
                    var date=new Date()
                    var date = date.getUTCFullYear()+"/"+date.getUTCMonth()+"/"+date.getUTCDate()+" "+date.getUTCHours()+":"+date.getUTCMinutes()+":"+date.getUTCSeconds()
                    req.body = date+" "+"输入内容为:"+req.rawBody.split("=")[1]+"\n"

                    // console.log(new Date().getUTCFullYear()+"-"+new Date().getUTCMonth())
                    // writeFile 是写入文件，会覆盖之前，使用appendFile可以以追加方式，而不是覆盖
                    fs.appendFile('./test.json',req.body,(err,data)=>{
                        if(err){console.log("文件写入失败")}
                        else{
                            console.log("文件写入成功")
                        }
                    })
                });
            }else{
                console.log("文件写入失败")
            } 
        }
        payload()
        res.end("file input end")
    }
    else{
        res.end("helloworld")
    }
    
}).listen(8888)

console.log("8888端口已启动")

这样就可以实现一个将前端传入的数据，展示在一个test.json 文件中了......test.json 文件的存储效果如下所示:

2020/3/4 14:49:37 输入内容为helloworld
2020/3/4 14:50:7 输入内容为:hello world
2020/3/4 14:54:8 输入内容为:1234565

启动一个app.js 文件，然后页面范文:  http://127.0.0.1:8888/index.html ，输入一个字符串，然后就可以在test.json文件中看到内容啦~~~前后端加起来大概100多行代码，不借助任何第三库，借助原生简单地实现了一番前后台数据的联通~~