ノードは最も単純な todo リスト page_html/css_WEB-ITnose を実装します。-htmlチュートリアル-php.cn

ノードは最も単純な todo リスト page_html/css_WEB-ITnose を実装します。

WBOY

リリース： 2016-06-24 11:15:04

オリジナル

1147 人が閲覧しました

前回は、curl コマンドラインツールを使用して単純な todo リスト CLI プログラムを実装しましたが、ページがないと不自然です。ここでは、単純な HTML ページを追加し、単純な todo リストも実装します。機能のページ。ブラウザを通じて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 コードを直接記述することです。これは推奨されませんが、これより直感的な方法はありますか? res オブジェクトを通じて HTML をクライアントに直接返します。

もちろん、 badReq() と noFound() という 2 つのメソッドがあり、実装は次のとおりです:

function badReq(res){  res.statusCode = 500;  res.end('Bad Request!');}function noFound(res){  res.statusCode = 404;  res.end('Not Found!');}

ログイン後にコピー

OK、ファイルを app.js として保存し、ノード app.js で起動し、http と入力しますブラウザ ://localhost:9000 で効果を確認してください。通常、ブラウザは GET リクエストと POST リクエストのみを送信します。削除機能を実現したい場合は、URL または Ajax を使用して実現できます。 URL を通じてこれを実現する方法は次のとおりです。最初のものを削除したい場合は、http://localhost:9000/del/1 を使用してみてください。

この記事の例は、書籍『Node.js in Practice』から引用したものです。