티스토리 뷰

Web

[Node.js] Express Framework 사용하기

Aaron 2020. 6. 22. 15:40
반응형


.Install Express Framework

- Install Express from npm  npm i express 

- Node.JS 를 위한 가장 인기있는 웹 어플리케이션 프레임워크

- 웹 페이지를 위한 서버 및 웹 기반 어플리케이션 개발에 사용


.Using Express Framework


- expressServer.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
const express = require('express')
const path = require('path');   // 기본 라이브러리의 path 
 
const app = express()
 
//////////////////////////
// EJS : Front-End
//////////////////////////
app.set('views', __dirname + '/views/viewSample');  // ejs directory
app.set('view engine', 'ejs');  // html 파일을 따로 분리(.ejs)
 
// express 에서 body 데이터를 받을 수 있도록 설정
app.use(express.json());    // json 형태로 데이터를 얻음
app.use(express.urlencoded({extended:false}));
 
///////////////////////////
// Express : Back-End
//////////////////////////
app.get('/', function (req, res) {
  res.send('Hello World')
})
 
// /views/viewSample/test
app.get('/test', function (req, res) {
    res.render('test');     // 확장자 필요 없이 파일 이름만
})
 
// views/viewSample/test2
app.get('/test2', function (req, res) {
    res.render('test2');     
})
 
app.get('/intro', function (req, res) {
    res.send('My name is Cristoval.');
})
 
// 웹 브라우져는 get으로만 요청
app.get('/inputTest', function(req, res) {
    res.render('inputTest');
})
 
// 사용자 데이터를 front에 보여주지 않고, 서버단에서 확인
app.post('/inputTest', function(req, res){
    console.log('request!!');
    console.log(req.body.userIdBody);
    console.log(req.body.userPasswordBody);
})
 
app.listen(3000)
cs


line 1) express module 불러오기

line 9~14) express setting

line 19) main page

line 24) test.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
 
<table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
  </table>
  
</body>
</html>
cs

line 29) test2.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
 
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
  
</body>
</html>
cs

line 38) inputTest.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <input type="text" id="userId"><br>
    <input type="text" id="userPassword">
    <button id="loginBtn">login</button>
</body>
<!-- jquery 가 등록되어야 java script 사용 가능 -->
<script
  src="https://code.jquery.com/jquery-2.2.4.js"
  integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
  crossorigin="anonymous"></script>
<script>
    console.log('test');
    $("#loginBtn").click(function(){
        var userIdInput = $("#userId").val();
        var userPasswordInput = $("#userPassword").val();
        console.log('사용자 입력값은 :',userId, userPassword);
        // ajax로 서버에 데이터를 보내줄 수 있음
        // 데이터를 넘기는 과정에서 이름을 잘 확인
        //------------------ajax----------------
        $.ajax({
            url:'/inputTest',
            type : 'POST',
            data : {
                userIdBody : userIdInput,
                userPasswordBody : userPasswordInput
            },
            success:function(data){
                console.log(data);
            }
        })
        //------------------ajax----------------
    })    
</script>
</html>
cs

line 43) 사용자가 입력한 데이터를 서버에서 확인



반응형
저작자표시

'Web' 카테고리의 다른 글

[JDBC] JAVA JDBC(select, insert, delete, update)  (2) 2020.10.22
[Node.js] cheerio module 로 크롤링하기  (0) 2020.06.23
[Node.js] mySQL 연동  (0) 2020.06.22
[Node.js] NPM(Nodejs package manager) 활용하기  (0) 2020.06.22
[Node.js] http 클래스를 활용한 기본 서버 구성  (0) 2020.06.22
댓글
최근에 올라온 글
최근에 달린 댓글
링크
Total
Today
Yesterday
TAG more