20190203 原生node版计算器

下面是最开始完成计算机后台的代码部分

var http = require('http');
var url=require('url');
http.createServer(function(req,res){
    if(req.url!=="/favicon.ico"){
        var params=url.parse(req.url,true).query;
        var num1=parseFloat(params.num1);
        var num2=parseFloat(params.num2);
        var signal=params.signal;
        var result=0;
        console.log(num1);
        console.log(num2);
        console.log(signal);
        if(num1&&num2&&signal){
            if(signal=="+"){
                result=num1+num2;
            }else if(signal=="-"){
                result=num1-num2;
            }else if(signal=="*"){
                result=num1*num2;
            }else if(signal=="/"){
                result=num1/num2;
            }else{
                console.log("请输入正确的符号");
            }
        }
        console.log(result);
        res.write(result.toString());
        res.end();
    }else{
        return;
    }
}).listen(3000,"localhost");

这部分代码是我在看菜鸟教程以及学习视频中的案例模仿过来的
其中引入了两个模块，分别为‘http’以及‘url'
查阅了官方文档中关于http.createServer()部分的内容：官方文档的写法为http.createServer([options][, requestListener])，该方法返回一个新建的http.Server实例，其中requestListener是一个自动添加到’request‘事件的函数。
var params=url.parse(req.url,true).query;这里面的url.parse()方法在官方文档中的写法为url.parse(urlString[, parseQueryString[, slashesDenoteHost]])，返回URL对象，其中urlString为要解析的URL字符串，parseQueryString为布尔值，如果设置为true，则返回的URL对象的query属性会是一个使用 querystring 模块的 parse() 生成的对象； 如果设为 false，则 query 会是一个未解析未解码的字符串。 默认为 false
response.write(chunk[, encoding][, callback])该方法会发送一块响应主体，可以多次调用该方法以提供连续的响应主体片段。第一次调用该方法时，会将缓冲的响应头信息和主体的第一个数据块发送给客户端。
response.end([data][, encoding][, callback])方法向服务器发出信号，表示已发送所有响应头和主体，必须在每个响应上调用方法response.end()
如果指定了data，就相当于先调用response.write(data,encoding)将data先写入response中传递给前端，再调用response.end(callback)

上面的代码实现的是通过表单提交然后跳转页面查看到计算结果，那时候接触过来的nodejs学习视频或者文章之类的都是通过表单实现前后台交互，但那时候想做成不跳转就能在当前页面上查看到计算结果的样式，但是一直实现不了，就一直卡在这里了
后面在网上找案例的时候，找到了一个使用XHR实现异步刷新的代码，然后模仿着写出来了

let xmlHttp=new XMLHttpRequest();//初始化一个XMLHttpRequest对象
            console.log(str.value);
            xmlHttp.onreadystatechange=function () {//当readyState属性发送变化时调用函数
                if(xmlHttp.readyState===4 && xmlHttp.status===200){
                    str.value=xmlHttp.responseText;//接受到后台返回的数据并赋值给str
                }
            };
            xmlHttp.open('POST',url,true);//向指定URL发送POST请求
            xmlHttp.send("result="+str.value);//向指定URL发送参数

var http=require('http');//引入http模块
var server=http.createServer(function (req,res) {//创建一个服务器
    var result='';
    req.on('data',function (data) {//接受传递过来的参数
        result=data.toString();//把传递过来的参数类型变成string
        let array=result.split('=');//分割数学表达式，得到需要求值的部分
        let partTwo=eval(array[1]);
        result=partTwo.toString();//转换值的类型，变成string
        console.log(result);
    });
    req.on('end',function () {//监听response流的end事件
        res.writeHead(200,{//向请求发送响应头以及200的HTTP状态码
            'Content-Type':'text/plain',//设置数据以文本形式编码
            'Access-Control-Allow-Origin': '*',//解决跨域问题
            'Access-Control-Allow-Methods':'POST',
            'Access-Control-Allow-Headers':'x-requested-with,content-type'
        });
        res.write(result);//把result发送给客户端
        res.end();//完成请求，向服务器发出完成信号
    })
});
server.listen(3000,function () {//监听3000端口
    console.log('server start at localhost:3000');
});

这部分代码里面查了response.writeHead(statusCode[, statusMessage][, headers]),目的是向请求发送响应头，这个方法只能在消息上调用一次，并且需要在调用response.end()之前调用