[Node.js]MainページのQuery String、ファイルリストの読み込み、ファイルリストの利用、関数

32885 ワード
テキストリンク
生活コード~26
ホームページのタイトル、説明の指定
コードで説明します.
var http = require('http');
var fs = require('fs');
var url = require('url'); //url 모듈 사용
var app = http.createServer(function(request,response){
    var _url = request.url; //url 값이 들어간다.
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;

    if (pathname === '/') { //루트라면
      if(queryData.id === undefined) { //메인 페이지의 queryString 존재 X, 즉 메인 페이지라면.

        fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ //불러온 내용을 description에 저장하는 것 같음
          var title = 'Welcome';
          var description = 'Hello, Node.js';
          var template = `
          <!doctype html>
          <html>
          <head>
            <title>WEB1 - ${title}</title>
            <meta charset="utf-8">
          </head>
          <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.writeHead(200); //파일을 성공적으로 전송
          response.end(template);
          });



    } else {
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ //불러온 내용을 description에 저장하는 것 같음
        var title = queryData.id;
        var template = `
        <!doctype html>
        <html>
        <head>
          <title>WEB1 - ${title}</title>
          <meta charset="utf-8">
        </head>
        <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.writeHead(200); //파일을 성공적으로 전송
        response.end(template);
        });

    }

    } else {
      response.writeHead(404); //파일을 찾을 수 없음
      response.end('Not found');
    }

});
app.listen(3000);
  • 説明
    mainpage urlは(http://localhost:3000/)なので、クエリー文字列は存在しません.このときJavaScriptはundefinedと呼ばれます!
    だからqueryDataid==undefinedラーメン~これで
    • を実現
    ファイルリストの取得
  • データディレクトリ内部ファイル:CSS、HTML、JavaScript
    • readdir.js
    var testFolder = './data';
var fs = require('fs');

fs.readdir(testFolder, function(error, filelist) {
  console.log(filelist);
})
    コード実行結果
    [ 'CSS', 'HTML', 'JavaScript' ]
  • 、すなわち、データディレクトリ内のファイルのリストが表示される.
    • 記事リストの出力
    データディレクトリファイルを配列として受信するには
      var list = '<ul>';

            var i = 0;
            while(i < filelist.length) { //filelist가 배열!
              list = list +`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`; //받아온 값을 태그 내부에 적용하여
              i = i +1;
            }

            list = list+'</ul>';

            var template = `
            <!doctype html>
            <html>
            <head>
              <title>WEB1 - ${title}</title>
              <meta charset="utf-8">
            </head>
            <body>
              <h1><a href="/">WEB</a></h1>
              ${list} //여기에서 출력되게 한다!
              <h2>${title}</h2>
              <p>${description}</p>
            </body>
            </html>

            `;
            response.writeHead(200); //파일을 성공적으로 전송
            response.end(template);
          })

    filist出力成功!
    これにより、データディレクトリにファイルを追加すると、リストに直接追加されます.
    Nodejsファイルを追加します.

    このように追加されました!
    関数でコードを整理する
    そくじコーディング
    var http = require('http');
var fs = require('fs');
var url = require('url');

function templateHTML(title, list, body){ //html 껍데기 함수
  return `
  <!doctype html>
  <html>
  <head>
    <title>WEB1 - ${title}</title>
    <meta charset="utf-8">
  </head>
  <body>
    <h1><a href="/">WEB</a></h1>
    ${list}
    ${body}
  </body>
  </html>
  `;
}

function templateList(filelist) { //list를 보여주는 함수
  var list = '<ul>';

  var i = 0;
  while(i < filelist.length) {
    list = list +`<li><a href="/?id=${filelist[i]}">${filelist[i]}</a></li>`;
    i = i +1;
  }
  list = list+'</ul>';
  return list;
}

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(_url, true).query;
    var pathname = url.parse(_url, true).pathname;

    if (pathname === '/') {
      if(queryData.id === undefined) {

          fs.readdir('./data', function(error, filelist) {

            var title = 'Welcome';
            var description = 'Hello, Node.js';

            var list = templateList(filelist); //파일 리스트를 매개변수로 파일 리스트를 보여주는 함수를 호출
            var template = templateHTML(title, list, `<h2>${title}</h2>${description}`); //title과 filelist와 body를 매개변수로 html 틀을 호출
            response.writeHead(200);
            response.end(template);
          })
    } else {
      fs.readdir('./data', function(error, filelist) {
      fs.readFile(`data/${queryData.id}`, 'utf8', function(err, description){ 
        var title = queryData.id;
        var list = templateList(filelist);
        var template = templateHTML(title, list, `<h2>${title}</h2>${description}`);
        response.writeHead(200);
        response.end(template);
        });
      });
    }

    } else {
      response.writeHead(404); 
      response.end('Not found');
    }

});
app.listen(3000);
    2つの特定の配列で交差を検索
    北京航空宇宙大学のある年の保研は飛行機の問題に乗ります