URL


http://opentutorials.org:3000/main?id=HTML&page=12
  • http
    protocol
    httpプロトコル
  • の使用を宣言
  • opentutorials.org
    名前host(domain)
  • 3000
    port
  • 3000ポートに接続されたサーバと通信
  • main
    ディレクトリ、ファイルの指定
  • id=HTML&page=12
    query string
    Webサーバへのデータ転送の役割を果たす
    ? -> つまりquery stringの開始
  • URL queryセクションの分割

    var url = require('url');
    // 생략
    var _url = requset.url;
    var queryData = url.parse(_url, true).query;
    requireで使用モジュールを宣言し、上のコードでurlモジュールを使用することを宣言します.
    グループ化することで、queryDataからurlの内容を取得できます.

    URL idによる動的Webサイトの作成


    urlをqueryDataからグループ化してurlのid部分を抽出できます.
    var http = require('http');
    var fs = require('fs');
    var url = require('url');
    
    var app = http.createServer(function(request,response){
        var _url = request.url;
        var queryData = url.parse(_url, true).query;
        var title = queryData.id;
        if(_url == '/'){
          title = "Welcome";
        }
        if(_url == '/favicon.ico'){
            response.writeHead(404);
            response.end();
            return;
        }
        response.writeHead(200);
        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){
          var template = `
            <!doctype html>
            <html>
            <head>
              <title>WEB1 - ${title}</title> // id에 따라서 title을 다르게 보여줌
              <meta charset="utf-8">
            </head>![](https://media.vlpt.us/images/harry7231/post/c9b3fdb5-84eb-4dc1-944c-7379e2a3fd34/image.png)
            <body>
              <h1><a href="/">WEB</a></h1>
              <ol>
                <li><a href="/?id=HTML">HTML</a></li>
                <li><a href="/?id=CSS">CSS</a></li>
                <li><a href="/?id=JavaScript">JavaScript</a></li>
              </ol>
              <h2>${title}</h2>
              <p>${description}</p>
            </body>
            </html>
          `;
          response.end(template);
        }) 
    });
    app.listen(3000);
  • ?id=HTML
  • ?id=CSS
  • ?id=JavaScript