Home > Article > Web Front-end > Node实现最简单的todo-list页面_html/css_WEB-ITnose
Node实现最简单的todo-list页面_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:15:041143browse
上次是通过 curl命令行工具实现的一个简单的todo-list CLI程序，但是没有页面总归是不够自然，这里就添加上简单的HTML页面，然后同样实现那个简单的todo-list功能页面。通过浏览器来感受一下Node Web的魅力。
var http = require('http');var qs = require('querystring');var items = [];var server = http.createServer(function(req,res){ if('/' == req.url){ switch(req.method){ case 'GET': show(res); break; case 'POST': add(req,res); break; default: badReq(res); } }else{ noFound(res); }}); 添加一个 req.url访问路径的限制，然后指定 GET请求以及 POST请求对应的方法。当服务器接收到 GET请求时，执行 show()方法;当服务器收到 POST请求时，执行 add()方法。同时为了程序的健壮性，填加了相关错误处理的方法，分别为响应失败以及 404 Not Found处理方法。
下面主要实现 show()方法以及 add()方法就行了。
function add(req,res){ var body = ''; req.on('data',function (chunk) { body += chunk; }); req.on('end',function(){ var list = qs.parse(body); items.push(list.name); show(res); });} 先看下 add()方法，因为不涉及到页面，所以此处代码基本没有什么变化，只是在添加完成后，直接执行 show()方法显示出来。下面再来看看 show()方法。
function show(res){ var item = ''; var pageContent1 = '<html><head><title>Todo List</title></head><body>' + '<h1> Todo List </h1>' + '<ol>'; var pageContent2 = ''; for (var i = 0; i < items.length; i++) { pageContent2 += '<li>' + items[i] + '</li>'; }; var pageContent3 = '</ol>' + '<form method="POST" action="/">' + '<input type="text" name="name"><br/>' + '<input type="submit" value="add a list"><br/>' + '</form>'; var pageContent = pageContent1 + pageContent2 + pageContent3; res.setHeader("content-type","text/html"); res.end(pageContent);} 最原始的显示页面的方法，将HTML代码直接写进逻辑中，虽然不建议这么干，但是还有比这更直观的吗？将HTML直接通过 res对象返回到客户端。
当然还有两个方法 badReq()和 noFound(),实现如下：
function badReq(res){ res.statusCode = 500; res.end('Bad Request!');}function noFound(res){ res.statusCode = 404; res.end('Not Found!');} OK了，保存文件为 app.js，然后 node app.js启动它，在浏览器中输入 http://localhost:9000看下效果吧。通常情况下，浏览器只发送 GET和 POST请求，想实现删除的功能，可以借助URL来实现或者通过Ajax都是可行的。 这里给出了通过URL来实现的方法，想要删除第一条，使用 http://localhost:9000/del/1试试。
本文例子取自《Node.js实战》一书。