리셋 되지 말자

동적 웹 만들기 본문

NodeJS/생활코딩

동적 웹 만들기

kyeongjun-dev 2020. 9. 8. 14:08

템플릿을 이용한 웹페이지 생성

1.html의 내용을 카피하여 var template = ` `; 의 ` ` 안에 넣는다. 그리고 qeuryData에 따라 달라지는 부분을 ${queryData}로 변경하여 웹페이지를 요철할 때마다 query string의 id 값에 따라 내용이 변경되도록 한다.

  • 전체 소스코드
var http = require('http');
var fs = require('fs');
var url = require('url') // url 모듈을 사용한다

var app = http.createServer(function(request,response){
    var _url = request.url;
    var queryData = url.parse(request.url, true).query;
    console.log(queryData.id); // 쿼리 스트링 값 확인
    console.log(_url); // url 값 확인
    if(_url == '/'){
      _url = '\\index.html';
    }
    if(_url == '/favicon.ico'){
        response.writeHead(404);
        response.end();
        return;
    }
    response.writeHead(200);
    
    var template = `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - HTML</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="index.html">WEB</a></h1>
      <ol>
        <li><a href="1.html">${queryData.id}</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JavaScript</a></li>
      </ol>
      <h2>${queryData.id}</h2>
      <p><a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 speicification">Hypertext Markup Language (HTML)</a> is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      <img src="coding.jpg" width="100%">
      </p><p style="margin-top:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets.
      </p>
    </body>
    </html>    
    `;

    //response.end(fs.readFileSync(__dirname + url));
    response.end(template);
    
 
});
app.listen(80);
  • id=HTML로 접속

  • id=CSS로 접속

 

  • id=hello world로 접속

캡처사진에는 title 부분이 빠졌지만, 똑같이 변경되었다.(HTML이면 HTML, CSS면 CSS)

 

  • HTML, CSS, JavaScript 버튼을 누르면, URL에 Query String으로 접속하도록 코드 변경
<body>
      <h1><a href="index.html">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>
      ...

 

  • 최상단 'WEB'링크 클릭시, welcoe 메시지 출력되도록 코드 변경
...
if(_url == '/'){
      //_url = '\\index.html';
      title='Welcome';
    }
...
저작자표시

'NodeJS > 생활코딩' 카테고리의 다른 글

Not found 오류 구현  (0) 2020.09.09
파일을 이용해 본문 구현  (0) 2020.09.08
파일 읽기  (0) 2020.09.08
URL  (0) 2020.09.08
웹서버 만들기  (0) 2020.09.08
'NodeJS/생활코딩' Related Articles more
Comments