투케이2K

61. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 local json 로컬 json 파일 데이터 표시 수행 본문

NodeJs

61. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 local json 로컬 json 파일 데이터 표시 수행

투케이2K 2024. 1. 10. 20:38

[개발 환경 설정]

​

개발 툴 : VS CODE

개발 언어 :NodeJs

 

[방법 설명]

​

​

​

 

[app.js : 소스 코드]

​

// ----------------------------------------------------------------------------------------------

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

// ---------------------------------------

app.set('view engine', 'ejs') // [Page] : [Render]
app.set('views', './views') // [Page] : [Render]

// ---------------------------------------

var bodyParser = require('body-parser'); // [body-parser 사용]

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// ---------------------------------------

app.locals.cdata = require('./Files/user.json'); // [static json 사용]

// ----------------------------------------------------------------------------------------------

// [Get] : Path = [/] : http://localhost:3000/
app.get('/', function (req, res) {
    console.log("")
    console.log("==============================================================================")
    console.log("[Server] :: [App] :: [Path = /] :: [Start]")
    console.log("==============================================================================")
    console.log("")

    // [Web Return Response]
    res.send('Hello World !!')
})

// ----------------------------------------------------------------------------------------------

// [Get] : Path = [/getRender] : http://localhost:3000/getRender?id=admin
app.get('/getRender', function (req, res) {
    console.log("")
    console.log("==============================================================================")
    console.log("[Server] :: [Get] :: [Path = /getRender] :: [Start]")
    console.log("--------------------------------------------------------------------------")
    console.log("[INPUT] :: [Headers] :: " + JSON.stringify(req.headers))
    console.log("--------------------------------------------------------------------------")
    console.log("[INPUT] :: [Cookies] :: " + JSON.stringify(req.cookies))
    console.log("--------------------------------------------------------------------------")
    console.log("[INPUT] :: [Params] :: " + JSON.stringify(req.query))
    console.log("--------------------------------------------------------------------------")
    console.log("[INPUT] :: [Body] :: " + JSON.stringify(req.body))
    console.log("==============================================================================")
    console.log("")

    // [파라미터값 체크]
    if (req.query.id == "admin"){
        res.render("index", {localJson : app.locals.cdata})
    }
    else {
        res.status(403).json({ "result" : "error" });
    }

})

// ----------------------------------------------------------------------------------------------

// [Server] : [Start]
//*
app.listen(3000, function () {
    console.log("")
    console.log("==============================================================================")
    console.log("[Server] :: [Port = 3000] :: [Start]")
    console.log("==============================================================================")
    console.log("")
})
// */

// ----------------------------------------------------------------------------------------------
 

[index.ejs : 소스 코드]

​

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>WebTest</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    




    <!-- ================================================================================== -->
    <!-- [반응형 구조 만들기] -->
    <!-- ================================================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    




    <!-- ================================================================================== -->
    <!-- [자바 스크립트 및 j쿼리 파일] -->
    <!-- ================================================================================== -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 




    <!-- ================================================================================== -->
    <!-- [내부 CSS 스타일 지정] -->
    <!-- ================================================================================== -->
    <style>


        /* [전체 설정 실시] */
    	* {
            font-family : 'Noto Sans KR' , sans-serif;           
            margin : 0;
            padding : 0;
    	}
    	




        /* [html , body 설정] */
        html, body{			
            width : 100%;          
            height : 100%;
            margin : 0 auto;
            padding : 0;
            border : none;         

            /* [모바일 스크롤 시 부드럽게 처리] */
            overflow:scroll-y; 
            -webkit-overflow-scrolling:touch;
        }
        /* [body 스크롤바 메인 스타일 지정] */
        body::-webkit-scrollbar {           
            width: 20px;                 
            background-color: #c1c1c1;
        }
        /* [body 스크롤바 thumb 스타일 지정] */
        body::-webkit-scrollbar-thumb {                 
            background-color: #444444;
        }
                     
    </style>
    




    <!-- ================================================================================== -->
    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->    
    <!-- ================================================================================== -->
    <script>

        /* [dom 생성 및 이벤트 상시 대기 실시] */
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");
            console.log("=====================================================");
            console.log("[window ready] : [start]"); 
            console.log("=====================================================");           
            console.log("");
        }





        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("=====================================================");
            console.log("[window onload] : [start]");
            console.log("=====================================================");
            console.log(""); 

        };





        /* [html 화면 사이즈 변경 이벤트 감지] */
        window.onresize = function() {
            console.log("");
            console.log("[window onresize] : [start]");
            console.log(""); 
        };

    </script>
    
</head>





<!-- ================================================================================== -->
<!-- [body 콘텐츠 작성] -->
<!-- ================================================================================== -->
<body>

    <h1> <%= localJson.name %> </h1>
    <h1> <%= localJson.age %> </h1>
    <h1> <%= localJson.sex %> </h1>

</body>


</html>
 

[결과 출력]

​

 
 
반응형
저작자표시

'NodeJs' 카테고리의 다른 글

63. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 실시간 Time 시간 확인 수행  (0) 2024.01.11
62. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 local text 로컬 텍스트 파일 데이터 표시 수행  (0) 2024.01.10
60. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 while 문 사용해 순차 데이터 출력  (0) 2024.01.09
59. (NodeJs) [Mac Os] [EJS] : Node Js 에서 ejs 뷰 (view) 렌더링 및 for 문 수행 순차 데이터 출력  (0) 2024.01.09
58. (NodeJs) [Mac Os] [Response] : http 요청 시 static 정적 image 이미지 파일 반환 수행  (0) 2024.01.09
'NodeJs' Related Articles more
Comments