Node实现最简单的todo-list页面_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:15:04
原创
1141 人浏览过

上次是通过 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实战》一书。

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板