下面是最开始完成计算机后台的代码部分
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()之前调用
网友评论