Node.js(day2) (3)

html代码(views文件夹下)
js/css/img(public文件夹下,其实只用到了bootstrap.css,可自行网上下载引用)
模板引擎代码(node_modules文件夹下)
index.html

Node.js(day2)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言本</title> <link href="http://www.likecs.com/default/index/public/css/bootstrap.css"> </head> <body> <div> <div> <h1>Example page header <small>Subtext for header</small></h1> <a href="http://www.likecs.com/post">发表留言</a> </div> </div> <div> <ul> {{each comments}} <li> <span>{{ $value.name }}:</span>{{ $value.message }} <span>{{ $value.dateTime }}</span> </li> {{/each}} </ul> </div> </body> </html>

post.html

Node.js(day2)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="http://www.likecs.com/default/index/public/css/bootstrap.css"> </head> <body> <div> <div> <h1><a href="http://www.likecs.com/">首页</a> <small>发表评论</small></h1> </div> </div> <div> <form action="/addComment" method="post"> <div> <label for="input_name">你的大名</label> <input type="text" required minlength="2" maxlength="10" placeholder="请写入你的姓名"> </div> <div> <label for="textarea_message">留言内容</label> <textarea cols="30" rows="10" required minlength="1" maxlength="20"></textarea> </div> <button type="submit">发表</button> </form> </div> </body> </html>

404.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>抱歉! 您访问的页面失联啦...</h1> </body> </html> 2.编写app.js文件(post提交) var http = require('http'); var fs = require('fs'); var template = require('art-template'); var comments = []; http.createServer(function(req,res){ var url = req.url; var rootDir = 'D:/Users/Administrator/Desktop/Node/feadback'; var filePath = '/views/index.html'; if(url === '/addComment'){ //request的data事件 req.on('data',function(postdata){ //postdata是二进制数据,postdata.toString()返回的数据编码方式任然有问题,所以需要解码 var decodedata = decodeURIComponent(postdata.toString());//对表单数据进行解码--->name=xxx&massage=xxx var data = {},key,value,arr; decodedata.split('&').forEach(function(v){ arr = v.split('='); key = arr[0]; value = arr[1] || ''; data[key] = value; }); data['dateTime'] = new Date().toLocaleString(); comments.unshift(data); }); url = 'http://www.likecs.com/'; } if(url !== 'http://www.likecs.com/'){ filePath = url; } if(url === 'http://www.likecs.com/post'){ filePath = '/views/post.html'; } if(url !== 'http://www.likecs.com/'){ fs.readFile(rootDir+filePath,function(err,data){ if(err){ fs.readFile(rootDir+'/views/404.html',function(err1,data1){ if(err1) return res.end('404,Not Fond.'); return res.end(data1); }) return; } res.end(data); }); }else{ //index.html需要进行模板渲染 fs.readFile(rootDir+filePath,function(err,data){ if(err){ fs.readFile(rootDir+'/views/404.html',function(err1,data1){ if(err1) return res.end('404,Not Fond.'); return res.end(data1); }) return; } var html = template.render(data.toString(),{comments:comments}); res.end(html); }); } }).listen(8000); console.log('server running...');

值得注意的一些细节:

注意fileRead()读取到的数据是二进制数据,要当做模板代码需要使用toString()进行处理。

我们使用的是post提交,那么表单数据就不会显示在url上,我们需要使用request的data事件来获取post提交获得的数据。

postdata也是二进制数据,且使用toString()方法后编码任然可能不是正常编码,需要使用decodeURIComponent()方法进行解码。

将表单提交的数据添加到数组中,使用模板引擎渲染到页面即可。

3.get提交的一些区别

首先,request.url会变成这样:

Node.js(day2)

也就是多了后面的参数,那么if(url === '/addComment')就会失效,而request的data事件也不会触发。
所以如果是get提交,我们需要使用另外的处理方式。

首先使用url核心模板即:var url = require('url');

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpfgyj.html