Node实现最简单的todo-list页面

上次是通过curl命令行工具实现的一个简单的todo-list CLI程序，但是没有页面总归是不够自然，这里就添加上简单的HTML页面，然后同样实现那个简单的todo-list功能页面。通过浏览器来感受一下Node Web的魅力。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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()方法就行了。

1
2
3
4
5
6
7
8
9
10
11
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()方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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(),实现如下：

1
2
3
4
5
6
7
8
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实战》一书。

技术, Node
node实战, http, todo-list