Javascript/node.js

node.js - express, route, ejs (210225)

꿀먹는매미 2021. 2. 25. 13:22

* 애플리케이션 서버(구형)

jsp

     - model2

 

* 내장 웹서버 (최신)

es

     - express

 

1. 서버 시작법

const express = require( 'express' );

//console.log( express );

 

const app = express();

 

app.listen( 3000, () => {

           console.log( '3000번 포트에서 요청 대기 중 ...' );

});

 

2. 컨트롤러 -> 라우팅

app.all( '경로', ( req, res ) =>

          { res.send( '' );

});

 

app.get / post( '경로', ( req, res ) =>

          { res.send( '' );

});

 

url 주소에서

? : 문자 존재하거나 생략

+ : 1번이상 반복

* : 임의의 문자

 

3. 미들웨어 (중간 처리)

app.use       - next()

 

 

express

 

use를 사용해서 연결처리하기

// express6.js
"use strict";

const express = require( 'express' );

const app = express();

app.listen( 3000, () => {
	console.log( '3000번 포트에서 요청 대기 중 ...' );
});

app.use( '/', (req, res) => {
	if( req.method.toLocaleLowerCase == 'post' ) {
            res.send( 'Root Post' );
      } else {
            res.send( 'Root Get' );
      }

});

 

연결 완성과 router 파일 분리

// router.js
"use strict";

const express = require( 'express' );

const router = express.Router();

/*
router.get( '/hello', (req, res) => {
      res.send( 'Hello Router' );
});
*/

const sayHello = (req, res) => {
      res.send( 'Hello Router' );
};

router.get( '/hello', sayHello );

module.exports = router;

 router 파일을 가져와서 연결

// express7.js
"use strict";

const express = require( 'express' );

const app = express();

app.use( require( './router' ) );

app.listen( 3000, () => {
      console.log( '3000번 포트에서 요청 대기 중 ...' );
});

express 정적파일(이미지, html) 처리

public/html 폴더 생성

그 폴더에 hello.html 파일 생성

<!-- hello.html -->
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            <h1>hello.html</h1>
      </body>
</html>
// static.js
"use strict";

const express = require( 'express' );

const app = express();

app.use( '/static', express.static( 'public' ) );

app.listen( 3000, () => {
      console.log( '3000번 포트에서 요청 대기 중 ...' );
});

 public 대신 static으로 주소 입력해서 접근

static/html/hello.html

 

경로에 해당 파일만 있으면 다 접근 가능함

데이터를 받아들일때

다른 미들웨어 사용( server.js 때의 사용, template 엔진 )

https://blog.naver.com/ksh44820/221702705655

 

template

        ejs

              https://ejs.co

        pug(jade)

 

ejs 사용하기

 

mkdir ejs

cd ejs

npm init -y

npm install express

npm install ejs

 

html의 특정 태그부분을 치환시켜서 보여줌

// ejs1.js
"use strict";

const ejs = require( 'ejs' );

const people = [ 'greddy', 'neail', 'alex' ];
const html = ejs.render( '<%=people.join( ", "); %>', { people: people } );

console.log( html );

 

 views 폴더 생성

cat.ejs

ejs 파일의 태그

<% 실행

<%= 출력

<!-- cat.ejs -->
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            <h1>cat.ejs</h1>
            <hr /><br />
            title : <%=title %><br />
            result : <%=cats.length %><br /> 
            
            <% cats.forEach( (item) => { %>
                  <li>
                        <img src="./<%= item.image %>">
                        <%= item.title %>
                  </li>
            <% }); %>
      </body>
</html>

cat.ejs 를 출력하는 서버

app.set으로 읽을 위치와 파일의 종류를 설정

// server.js
"use strict";

const express = require( 'express' );

const app = express();

// ejs
app.set( 'views', __dirname + '/views' );
app.set( 'view engine', 'ejs' );

app.use( express.static( './' ) );

const data = [
      { title: 'cat1', image: 'google1.png' },
      { title: 'cat2', image: 'google2.png' },
      { title: 'cat3', image: 'google3.png' }
];

app.listen( 3000, () => {
      console.log( '3000번 포트에서 서버 대기중입니다.' );
});

app.get( '/', (req, res) => {
      res.render( 'cat', { title: 'Cats', cats: data } );
});

구구단 만들기

ejs2 폴더 생성

     server.js                         - server 실행

     routes

                    main.js            - routing

     views                             - view page

                    gugudan.ejs

                    gugudan_ok.ejs

 

gugudan.html / gugudan_ok.html

<!-- gugudan.html -->
<!DOCTYPE html>
<html lang="ko">
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            Hello gugudan.html
      </body>
</html>
<!-- gugudan_ok.html -->
<!DOCTYPE html>
<html lang="ko">
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            Hello gugudan_ok.html
      </body>
</html>

gugudan.ejs / gugudan_ok.ejs

<!-- gugudan.ejs -->
<% include( './header.ejs' ) %>
<body>
      Hello <%=title %>
      <br /><hr /><br />
      <form action='gugudan_ok' method='post' >
            dan : <input type="text" name="dan" />
            <input type="submit" value="전송" />
      </form>
</body>
<% include( './footer.ejs' ) %>
<!-- gugudan_ok.ejs -->
<% include( './header.ejs' ) %>
<body>
      Hello <%=title %>
      <br /><hr /><br />
</body>
<% include( './footer.ejs' ) %>

include 시킬 header.ejs 와 footer.ejs -> html 태그를 일부 대신함

<!-- header.ejs -->
<!DOCTYPE html>
<html lang="ko">
      <head>
            <meta charset="utf-8" />
            <link rel="stylesheet" type="text/css" href="./css/style.css" />
      </head>
<!-- footer.ejs -->
</html>

css도 따로 넣어줄수 있음

body {
      background-color: gray;
      color: black;
}

server.js

app.set으로 ejs파일 서버 연결설정

// server.js
"use strict";

const express = require( 'express' );
const app = express();

const route = require( './routes/main' )( app );

app.set( 'views', __dirname + '/views' );
app.set( 'view engine', 'ejs' );

// 정적파일을 가져올때 static 사용해야함
app.use( express.static( 'public' ) );

app.listen( 3000, () => {
      console.log( '3000번 포트에서 서버가 대기중입니다.' );
});

main.js

html 연결과 ejs 연결 다름

네비게이터 역할

// main.js
"use strict";

module.exports = (app) => {
      app.all( '/gugudan', (req, res) => {
            //res.sendFile( '/home/master/ejs2/views/gugudan.html' );
            //res.render( 'gugudan', { title: "gugudan" } );

            const data = "gugudan";
            res.render( 'gugudan', { title: data } );
      });

      app.all( '/gugudan_ok', (req, res) => {
            //res.sendFile( '/home/master/ejs2/views/gugudan_ok.html' );
            //res.render( 'gugudan_ok',  { title: "gugudan_ok" } );

            const data = "gugudan_ok";
            res.render( 'gugudan_ok', { title: data } );
            
      });
}

package.json

파일 수정해서 시작파일을 모르고도 명령어 입력만으로 실행할 수 있게 할 수 있다.

npm test

 

명령어 지정

"start" : "node server.js"

npm start

<-- package.json -->
{
  "name": "ejs2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ejs": "^3.1.6",
    "express": "^4.17.1"
  }
}

하지만 gugudan_ok에서 값을 받아서 출력하는 것은 쉽지 않음

객체형태의 값만 넘길 수 있음

 

 

 

Express 애플리케이션 생성기(ganerator)

express 애플리케이션의 골격을 빠르게 만들 수 있음

 

루트 계정에서 설치

su - root

npm i -g express-generator

 

설치확인

ls /usr/local/lib/node_modules/

 

원래 계정에서

exit

express --view=ejs sample

cd sample/

ls                        - 확인용

npm install

ls                         - 확인용

cat package.json     - start 명령 등록되어있음

npm start

 

브라우저로 접속해보면

 

기본적으로 필요한 구성이 다 갖춰져서

필요한 ejs파일과 js파일만 추가해서 넣어주면 웹페이지를 구성할 수 있다.

 

views 폴더에

gugudan.ejs

<!-- gugudan.ejs -->
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            <h1>gugudan.ejs</h1><br />
            <form action="./gugudan_ok" method="post">
                  단수 : <input type="text" name="dan" />
                  <input type="submit" value="전송" />
            </form>
      </body>
</html>

gugudan_ok.ejs

<!-- gugudan_ok.ejs -->
<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8" />
      </head>
      <body>
            <h1>gugudan_ok.ejs</h1>
            <hr /><br />

            <table width="900" border="1">
                  <tr>
                  <% results.forEach( item => { %>
                        <td> <%=item.dan %> X <%=item.i %> = <%=item.result %></td>
                  <% }); %>
                  </tr>          
            </table>
      </body>
</html>

routes 폴더에

gugudans.js

// gugudans.js
var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/gugudan', function(req, res, next) {
      //res.send( '/gugudans/gugudan' );
      res.render( 'gugudan' );
});

router.post('/gugudan_ok', function(req, res, next) {
      //res.send( '/gugudans/gugudan_ok' );
      //res.render( 'gugudan_ok' );

      //const result = req.body.dan;
      //console.log( result );

      // 순수하게 데이터만 -> 배열/객체로 만들어서
      /*
            const data = [
                  { title:'cat1', image:'cat1.png' },
                  { title:'cat2', image:'cat2.png' },
                  { title:'cat3', image:'cat3.png' }
            ];
      */
      
      let result = [];
      for( let i=1; i<=9; i++ ) {
            let obj = {}
            obj.dan = req.body.dan;
            obj.i = i;
            obj.result = parseInt( req.body.dan ) * i;
            result.push( obj );
      }

      console.log( result );

      res.render( 'gugudan_ok', { results: result } );
});

module.exports = router;

 

 jsp 프로그램에서는 이렇게 쓰지만 (html을 담은 string 객체를 넘기지만)

let result = '<table width="800" border="1">';

result += '<tr>';

for( let i=1; i<=9; i++ ) {

    result += '<td>' + req.body.dan + 'X' + i + ' = ' + ( parseInt( req.body.dan ) * i ) + '</td>';

}

result += '</tr>';

result += '</table>';

순수하게 데이터만( 객체, 배열 ) 로만 전송되므로

node.js - express에서는 다르게 작성

gugudan_ok.ejs도 그에 맞게 html 태그는 미리 넣어두고 데이터만 forEach로 받아서 쓰는 방식으로 구현

 

 

app.js 에 추가

// app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var gugudans = require('./routes/gugudans');   // 새로 추가 한 부분

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
//app.use('/users', usersRouter);
app.use('/gugudans', gugudans);   // 새로 추가 한 부분

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

 console.log( result );

'Javascript > node.js' 카테고리의 다른 글

node.js - jade, express-generator (210226)  (0) 2021.02.26
node.js - http, express (210224)  (0) 2021.02.24
node.js - phantomjs, http (210223)  (0) 2021.02.23

'Javascript/node.js'의 다른글

  • 현재글node.js - express, route, ejs (210225)

관련글

댓글

티스토리툴바