ホームページ > 記事 > ウェブフロントエンド > ノードは最も単純な todo リスト page_html/css_WEB-ITnose を実装します。
ノードは最も単純な todo リスト page_html/css_WEB-ITnose を実装します。
- WBOYオリジナル
- 2016-06-24 11:15:041146ブラウズ
前回は、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』から引用したものです。