要做网站,向服务器提交请求肯定是避不过去的
要搞清在页面文本框里输入的字符是怎么变成服务器端字符串里的内容,并不是很容易
是的,我们知道用form,但form是怎么工作的(写到这里的时候我又忘了=。=赶紧再回去看看)
使用node.js创建服务器的时候,最熟悉的代码:
var server = http.createServer(function(req,res){
//To Do SomeThing
});
当我们发起到服务器的连接时,req——代表了我们的请求,包含了大量相关的信息,我们把req的内容log到控制台里查看
即使我们仅仅输入
localhost:3000
也向服务器发起了一个get请求,包含在req字段里,如下图所示
可以看出被圈出来的部分里,有我们的访问类型:‘GET’
我们可以依此来判断客户端的请求类型,并加以处理
下面一段代码是我写的,当接收到
/staticfile/writeblog.html
的路由请求时,这个路由是get类型,调用write(res)方法。
if(req.url=='/staticfile/writeblog.html')
switch(req.method){
case 'GET':
write(res);
break;
case 'POST':
add(req,res);
break;
default:
badRequest(res);
}
对于比较简单的页面,直接使用内嵌式的html也是个不错的选择,下面的代码渲染了一个简单的写博客页面
注意,无论是渲染写博客页面还是提交内容,req.url的值没有改变
function write(res){
var html = '<html><head><title>写博客</title></head><body>'
+'<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'
+'<form method = "post" action= "./writeblog.html">'
+'<select id="selType" name = "kind">'
+'<option value="0">请选择</option>'
+'<option value="Node">Node</option>'
+'<option value="Cocoa">Cocoa</option>'
+'<option value="IOS">IOS</option>'
+'</select>'
+'<p><input type = "text" name = "title" /></p>'
+'<textarea name = "content" rows="50" cols="80"></textarea>'
+'<p><input type = "submit" name = "add item" /></p>'
+ '</body></html>';
res.setHeader('Content-Type','text/html');
res.setHeader('Content-Length',Buffer.byteLength(html));
res.end(html);
}
写博客的界面搞定后,接下来就是提交内容
检测到post请求后,执行add方法
function add(req,res){
var body = '';
req.setEncoding('utf8');
req.on('data', function(chunk){
body += chunk;
});
req.on('end', function(){
var obj = qs.parse(body);
//console.log(body);
console.log(obj);
//title,kind,content是定义的全局变量
title = obj.title;
content = obj.content;
kind = obj.kind;
//items.push(obj.item);
show(res);
});
}
nodejs用json来封装post数据,把body和obj分别log出来看看,结果如下:
post原始数据和处理后的json数据:
然后就可以获取内容了
接下来是show方法,用于显示刚刚写的博客内容,同样使用了简单的嵌入式html:
function show(res){
var html = '<html><head><title>hahah</title></head><body>'
+'<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'
+'<h1>'
+title
+'</h1>'
+'<ul>'
+content
+'</ul>'
+ '</body></html>';
save(html);//写文件操作
res.setHeader('Content-Type','text/html');
res.setHeader('Content-Length',Buffer.byteLength(html));
res.end(html);
}
除了显示之外,还要把刚才的文章保存下来,这就涉及到nodejs的文件操作,代码如下:
function save(content){
var road = './article/'+kind+'/'+title+'.html';
fs.open(road,'a',function opened(err,fd){
if(err){throw err;}
var writeBuffer = new Buffer(content);
var bufferPosition = 0;
var bufferLength = writeBuffer.length;
var filePosition = null;
fs.write(fd,
writeBuffer,
bufferPosition,
bufferLength,
filePosition,
function wrote(err, written) {
if (err) { throw err; }
console.log('wrote ' + written + ' bytes');
});
});
savetodb(title,kind,road);
// list.push(title);
// listroad.push(road);
}
根据文章的不同分类保存到不同目录下,关于node.js文件操作这里不再介绍