반응형
Notice
Recent Posts
Recent Comments
Link
지구정복
[Node.js] 02/24 | Node.js http 사용(구구단, 우편번호검색기), express 사용(개념, middleware, 라우팅, next(), get과 post방식, 구구단, 우편번호) 본문
데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js
[Node.js] 02/24 | Node.js http 사용(구구단, 우편번호검색기), express 사용(개념, middleware, 라우팅, next(), get과 post방식, 구구단, 우편번호)
eeaarrtthh 2021. 2. 24. 17:35728x90
반응형
SMALL
복습 및 배울내용
프로젝트 준비
화상 -
스마트폰(zoom)에서 접속
주제 (한정 ...)
- nodejs
http client
= 브라우저 기능
= 크롤링(스크래핑)
1. ajax/로그인(o)
phantomjs + setTimeout
getElementById
2. ajax/로그인(x)
urllib / axios
* dom 처리
string
cheerio
http server
= tomcat + servlet의 기능을 포함시켜놓은 것
1. httpcreateServer().listen( 포트번호 )
2. controller기능은
let parseUrl = new URL( req.url );
parseUrl.pathname = ??
3. post / get의 자료처리방법
=> framework화 시켰음
1. Node.js Http 사용하기( 복습 : 구구단 )
더보기
먼저 새로운 패키지를 만들고 사용할 html파일들을 만들어준다.
[master@localhost ~]$ mkdir httpex2
[master@localhost ~]$ cd httpex2
[master@localhost httpex2]$ npm init -y
[master@localhost httpex2]$ mkdir public_html
[master@localhost httpex2]$ touch public_html/gugudan.html
[master@localhost httpex2]$ touch public_html/gugudan_ok.html
[master@localhost httpex2]$ touch public_html/error.html
[master@localhost httpex2]$ code
비주얼 스튜디오 코드에서 httpex2 디렉터리를 연다.
그리고 아래와 같이 코딩한다.
-gugudan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="./gugudan_ok" method="get">
단수 입력 <input type="text" name="dan" />
<input type="submit" value="구구단 출력" />
</form>
</body>
-gugudan_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
gugudan_ok.html<br>
<hr>
${ result }
</body>
-error.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
error.html
</body>
-server1.j>
"use strict"
const http = require( 'http' );
const fs = require( 'fs' );
const url = require( 'url' );
//서버
const server = http.createServer( (req, res) => {
//controller
let parseUrl = url.parse( req.url, true );
if( parseUrl.pathname == '/gugudan' ) {
fs.createReadStream( './public_html/gugudan.html' ).pipe( res );
} else if( parseUrl.pathname = '/gugudan_ok' ) {
if( req.method.toLocaleLowerCase() == 'get' ) {
let query = parseUrl.query;
//let result = query.dan;
let result = '<table width="800" border="1">';
for( let i=1; i<=9; i++ ) {
result += '<td>' + query.dan + ' X ' + i + ' = ' + ( parseInt(query.dan) * i) + '</td>';
}
result += '</table>';
const html = fs.readFileSync( './public_html/gugudan_ok.html' );
const tplHtml = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.end( tplHtml );
}
} else {
fs.createReadStream( './public_html/error.html' ).pipe( res );
}
}).listen( 8080, () =>{
console.log( '8080 포트에서 요청 대기중 ...' );
})
post방식일 경우 아래와 같이 수정한다.
-gugudan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<form action="./gugudan_ok" method="post">
단수 입력 <input type="text" name="dan" />
<input type="submit" value="구구단 출력" />
</form>
</body>
-sever2.js
"use strict"
const http = require( 'http' );
const fs = require( 'fs' );
const url = require( 'url' );
const querystring = require( 'querystring' );
//서버
const server = http.createServer( (req, res) => {
//controller
let parseUrl = url.parse( req.url, true );
if( parseUrl.pathname == '/gugudan' ) {
fs.createReadStream( './public_html/gugudan.html' ).pipe( res );
} else if( parseUrl.pathname = '/gugudan_ok' ) {
if( req.method.toLocaleLowerCase() == 'post' ) {
let data = '';
//data가 넘어오면
req.on( 'data', (chuck) => {
data += chuck;
});
//요청전송이 완료되면
req.on( 'end', () => {
const query = querystring.parse( data );
console.log( query.dan );
let result = '<table width="800" border="1">';
for( let i=1; i<=9; i++ ) {
result += '<td>' + query.dan + ' X ' + i + ' = ' + ( parseInt(query.dan) * i) + '</td>';
}
result += '</table>';
const html = fs.readFileSync( './public_html/gugudan_ok.html' );
const tplHtml = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.end( tplHtml );
})
}
} else {
fs.createReadStream( './public_html/error.html' ).pipe( res );
}
}).listen( 8080, () =>{
console.log( '8080 포트에서 요청 대기중 ...' );
})
실습) 우편번호 검색기 만들기 (get 이나 post 방식 아무거나)
파일 경로는 다음과 같다.
zipsearch public_html/zipsearch.html
zipsearch_ok public_html/zipsearch_ok.html
기타 public_html/error.html
먼저 node.js에 mariaDB 라이브러리를 다운받는다.
[master@localhost httpex2]$ npm install mariadb
-실행결과
-zipsearch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>우편번호검색기</h2><br>
<form action="./zipsearch_ok" method="get" name="frm">
동이름 검색 <input type="text" name="dong" />
<input type="submit" value="검색하기" />
</form>
</body>
</html>-zipsearch_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
zipsearch_ok.html
<hr><br>
${ result }
</body>
</html>-zipcode1.js
"use strict"
const http = require( 'http' )
const fs =require( 'fs' );
const url = require( 'url' );
const mariadb = require( 'mariadb/callback' );
//데이터베이스 커넥션풀
const pool = mariadb.createPool({
host: 'localhost',
user: 'root',
password: '!123456',
database: 'project'
});
//웹서버 생성
const server = http.createServer( (req, res) => {
//컨트롤러 생성
let parseUrl = url.parse( req.url, true ); //request의 url에서 8080이후 url만 추출
if( parseUrl.pathname == '/zipsearch' ) {
fs.createReadStream( './public_html/zipsearch.html' ).pipe( res );
} else if( parseUrl.pathname == '/zipsearch_ok' ) {
if( req.method.toLocaleLowerCase() == 'get' ) {
let query = parseUrl.query; //url의 쿼리부분만 추출
//sql 쿼리실행하기
const sql = "select * from zipcode where dong like ?";
pool.query( sql, [ query.dong + '%' ], (err, rows) => {
if( !err ) {
let result = '<table border="1">';
rows.forEach( row => {
result += '<tr align="center">';
for( let i in row ) {
result += '<td>' + row[i] + '</td>';
}
result += '</tr>';
})
result += '</table>';
console.log( result );
const html = fs.readFileSync( './public_html/zipsearch_ok.html' );
const tplHtml = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.end( tplHtml );
} else {
console.error( 'sql오류 : ', err.message );
}
})
pool.end();
}
} else {
fs.createReadStream( './public_html/error.html' ).pipe( res );
}
}).listen( 8080, () => {
console.log( '8080 포트에서 요청 대기중 ...' );
})
2. express 사용하기
더보기
1. Express란?
HTTP 웹 프레임워크의 종류
- express
- koa
- hapi
express는 웹서버에 필요한 기능을 편리하게 만들어 놓은 프레임워크이다. express모듈을 사용함으로써 사이트가 커지거나 코드가 복잡해진 서버를 효율적으로 운영할 수 있고 코드의 수도 줄일 수 있도록 도와준다.
2. express설치하고 사용
먼저 패키지를 만들고 설치한다.
[master@localhost httpex2]$ cd
[master@localhost ~]$ mkdir express1
[master@localhost ~]$ cd express1/
[master@localhost express1]$ npm init -y
[master@localhost express1]$ npm install express
먼저 3000번 포트를 개방해줘야한다.
[master@localhost express1]$ su - root
암호:
[root@localhost ~]# cd /usr/lib/firewalld/services/
[root@localhost services]# vi http.xml
#vi
<?xml version="1.0" encoding="utf-8"?>
<service>
<short>WWW (HTTP)</short>
<description>HTTP is the protocol used to serve Web pages. If you plan to make your Web server publicly available, enable this option. This option is not required for viewing pages locally or developing Web pages.</description>
<port protocol="tcp" port="80"/>
<port protocol="tcp" port="8080"/>
<port protocol="tcp" port="3000"/>
</service>
:wq
[root@localhost services]# firewall-cmd --zone=public --add-service=http --permanent
[root@localhost services]# firewall-cmd --reload
비쥬얼스튜디오 코드에서 폴더를 바꿔준다.
먼저 요청을 해보자.
"use strict"
const express = require( 'express' );
const app = express();
//console.log( app );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
3. 요청에 대한 처리(middleware)
middleware를 사용한다.
미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다.
미들웨어 함수는 다음과 같은 태스크를 수행할 수 있습니다.
- 모든 코드를 실행.
- 요청 및 응답 오브젝트에 대한 변경을 실행.
- 요청-응답 주기를 종료.
- 스택 내의 그 다음 미들웨어를 호출.
현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여 그 다음 미들웨어 함수에 제어를 전달해야 합니다. 그렇지 않으면 해당 요청은 정지된 채로 방치됩니다.
기본예제를 살펴보자.
"use strict"
const express = require( 'express' );
const app = express();
//console.log( app );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//기본 localhost:3000/ 페이지일 경우의 처리
app.get( '/', (req, rep) => {
rep.send( 'Hello Express' );
})
미들웨어 사용하기
"use strict"
const express = require( 'express' );
const app = express();
//console.log( app );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//미들웨어 메서드
app.use( (req, rep, next) => {
console.log( 'Middleware')
next(); //미들웨어 호출하고 다음 메서드 호출하라는 명령어
})
//기본 localhost:3000/ 페이지일 경우의 처리
app.get( '/', (req, rep) => {
rep.send( 'Hello Express' );
})
미들웨어 메서드를 따로 메서드 선언해서 사용할 수 있다.
"use strict"
const express = require( 'express' );
const app = express();
//console.log( app );
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//middleware메서드 따로 선언
const myMiddleware = (req, rep, next) => {
console.log( 'Middleware')
next();
}
//미들웨어 메서드호출해서 사용
app.use( myMiddleware );
//기본 localhost:3000/ 페이지일 경우의 처리
app.get( '/', (req, rep) => {
rep.send( 'Hello Express' );
})
4. 라우팅 사용하기
라우팅은 애플리케이션 엔드 포인트(URI)의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말합니다.
라우트 메소드는 HTTP 메소드 중 하나로부터 파생되며, express 클래스의 인스턴스에 연결됩니다.
라우트 요청 방식은 GET 과 POST 메소드 또는 get과post 둘 다 사용하는 all 이 있다.
예제를 살펴보자.
"use strict"
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
// get method
app.get( '/', (req, rep) => { rep.send( '/ get 요청' ); });
app.get( '/users', (req, rep) => { rep.send( '/users get 요청' ); });
app.get( '/items', (req, rep) => { rep.send( '/items get 요청' ); });
// post method
app.post( '/', (req, rep) => { rep.send( '/ post 요청' ); });
또한 문자열을 기반으로 하는 라우트 경로를 만들 수 있다.
/ab?cd 는 acd, abcd와 일치
/ab+cd 는 abcd, abbcd, abbbcd와 일치
/ab*cd 는 abcd, abxcdm abRABOMcd, ab123cd와 일치
/ab(cd)?e 는 abc, abcde와 일치한다.
"use strict"
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
// Routing
// get method
app.get('/ab?cd', function(req, res) { res.send('ab?cd'); });
// app.get('/ab+cd', function(req, res) { res.send('ab+cd'); });
// app.get('/ab*cd', function(req, res) { res.send('ab*cd'); });
// app.get('/ab(cd)?e', function(req, res) { res.send('ab(cd)?e'); });
라우트 핸들러 사용
어떠한 것을 진행하고 다음으로 또 다른 것을 진행하는 순서를 만들고 싶을 때 사용한다.
빨간색 동그라미는 처리 순서이다.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//Route Handler
app.get( '/', (req, res, next) => {
console.log( 'Hello Middleware' ); //첫 번째 처리(Middleware 역할)
next();
}, (req, res) => {
res.send( 'Hello Express' ) //두 번째 처리
});
또는 배열에 여러 개의 콜백함수를 담고 하나의 라우트를 처리할 수 있다.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//Route Handler
let c0 = (req, res, next) => {
console.log( 'C0' );
next();
}
let c1 = (req, res, next) => {
console.log( 'c1' );
next();
}
let c2 = (req, res, next) => {
res.send( 'Hello Express' );
}
app.get( '/', [c0, c1, c2] );
또한 배열로된 콜백함수의 독립적인 콜백함수를 같이 사용할 수 있다.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
//Route Handler
let c0 = (req, res, next) => {
console.log( 'C0' );
next();
}
let c1 = (req, res, next) => {
console.log( 'c1' );
next();
}
app.get( '/', [c0, c1], (req, res, next) => {
console.log( 'the response will be sent by the next function...' );
next();
}, (req, res) => {
res.send( 'Hello Express' );
} );
에러처리하기
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
//res.status( 403 ).end();
res.status( 404 ).send( 'Bad Request' );
});
다른 페이지로 이동시키기
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
//res.status( 403 ).end();
//res.status( 404 ).send( 'Bad Request' );
res.redirect( 'https://www.daum.net' );
});
html파일을 만들어서 보여지도록 해보자.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
//res.status( 403 ).end();
//res.status( 404 ).send( 'Bad Request' );
//res.redirect( 'https://www.daum.net' );
//백탭사용
const html =`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Node.js 웹 서버</h1>
</body>
</html>`
res.set( 'Content-Type', 'text/html' );
res.send( html );
});
이번에는 외부html을 보여지도록 해보자.
-index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Node.js 웹 서버</h1>
</body>
</html>-express6.js
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
//res.status( 403 ).end();
//res.status( 404 ).send( 'Bad Request' );
//res.redirect( 'https://www.daum.net' );
const html =`
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Node.js 웹 서버</h1>
</body>
</html>`
res.set( 'Content-Type', 'text/html' );
res.send( html );
});
app.get( '/html', (req, res) => {
console.log( __dirname );
res.sendFile( __dirname + '/index.html' );
})
다음으로는
/form public_html/form.html
/form_ok puhlic_html/form_ok.html
처리가 되도록 만들어보자.
-index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>index.html</h1>
</body>
</html>-public_html/form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>form.html</h1>
</body>
</html>-public_html/form_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>form_ok.html</h1>
</body>
</html>-server.js
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
console.log( req.headers ) //클라이언트나 서버의 정보 얻기
res.sendFile( __dirname + '/index.html' );
})
app.get( '/form', (req, res) => {
res.sendFile( __dirname + '/public_html/form.html' );
})
app.get( '/form_ok', (req, res) => {
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
5. 데이터 전송방식을 get과post
-form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>form.html</h1>
<form action="./form_ok" method="get">
get방식 : <input type="text" name="data1" />
<input type="submit" value="전송" />
</form>
<form action="./form_ok" method="post">
post방식 : <input type="text" name="data2" />
<input type="submit" value="전송" />
</form>
</body>
</html>-server.js
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
console.log( req.headers ) //클라이언트나 서버의 정보 얻기
console.log( req.headers['user-agent'] );
console.log( req.ip );
res.sendFile( __dirname + '/index.html' );
})
app.get( '/form', (req, res) => {
res.sendFile( __dirname + '/public_html/form.html' );
})
app.get( '/form_ok', (req, res) => {
console.log( 'get' );
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
app.post( '/form_ok', (req, res) => {
console.log( 'post' );
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
get과 post 합쳐서 all로 사용해보자.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
console.log( req.headers ) //클라이언트나 서버의 정보 얻기
console.log( req.headers['user-agent'] );
console.log( req.ip );
res.sendFile( __dirname + '/index.html' );
})
app.get( '/form', (req, res) => {
res.sendFile( __dirname + '/public_html/form.html' );
})
// app.get( '/form_ok', (req, res) => {
// console.log( 'get' );
// res.sendFile( __dirname + '/public_html/form_ok.html' );
// })
// app.post( '/form_ok', (req, res) => {
// console.log( 'post' );
// res.sendFile( __dirname + '/public_html/form_ok.html' );
// })
app.all( '/form_ok', (req, res) => {
console.log( 'all' );
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
넘어오는 데이터를 확인하기 이때 넘어오는 데이터는 json형태로 넘어온다.
"use strict"
const { response } = require('express');
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/', (req, res) => {
console.log( req.headers ) //클라이언트나 서버의 정보 얻기
console.log( req.headers['user-agent'] );
console.log( req.ip );
res.sendFile( __dirname + '/index.html' );
})
app.get( '/form', (req, res) => {
res.sendFile( __dirname + '/public_html/form.html' );
})
app.get( '/form_ok', (req, res) => {
console.log( 'get', req.query ); //json형태로 넘어온다.
console.log( req.query.data1 );
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
app.use( express.urlencoded( {extended: true } ) ); //post방식일때는 이 구문 처리가 되어야한다.
app.post( '/form_ok', (req, res) => {
console.log( 'post', req.body );
console.log( req.body.data2 );
res.sendFile( __dirname + '/public_html/form_ok.html' );
})
// app.all( '/form_ok', (req, res) => {
// console.log( 'all' );
// res.sendFile( __dirname + '/public_html/form_ok.html' );
// })
실습) express를 통해서 구구단 만들기
-실행결과
코드
-public_html/gugudan.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>구구단 단수 확인</h2>
<hr><br>
<form action="./gugudan_ok" method="get">
단수 입력 : <input type="text" name="dan"/>
<input type="submit" value="출력" />
</form>
</body>
</html>-public_html/gugudan_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>gugudan_ok.html</h2>
<hr><br>
${ result }
</body>
</html>-gugudan1.js (get 방식)
"use strict"
const fs = require( 'fs' );
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/gugudan', (req, res) => {
res.sendFile( __dirname + '/public_html/gugudan.html' );
})
app.get( '/gugudan_ok', (req, res) => {
console.log( req.query.dan );
let result = `
<table border="1">
<tr align="center">`;
for( let i=1; i<=9; i++ ) {
result += `<td>` + parseInt( req.query.dan ) + ` X ` + i + ` = ` + ( parseInt( req.query.dan )*i ) + `</td>`;
}
result += `
</tr>
</table>`
let html = fs.readFileSync( './public_html/gugudan_ok.html' );
html = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.send( html );
})-gugudan1.js (post 방식)
"use strict"
const fs = require( 'fs' );
const express = require( 'express' );
const app = express();
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/gugudan', (req, res) => {
res.sendFile( __dirname + '/public_html/gugudan.html' );
})
app.use( express.urlencoded( {extended: true} ) )
app.post( '/gugudan_ok', (req, res) => {
console.log( req.body.dan );
let result = `
<table border="1">
<tr align="center">`;
for( let i=1; i<=9; i++ ) {
result += `<td>` + parseInt( req.body.dan ) + ` X ` + i + ` = ` + ( parseInt( req.body.dan )*i ) + `</td>`;
}
result += `
</tr>
</table>`
let html = fs.readFileSync( './public_html/gugudan_ok.html' );
html = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.send( html );
})
실습) express를 이용하여 우편번호 검색기 만들기
-실행결과
코드
-public_html/zipsearch.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>우편번호검색기</h2><br>
<form action="./zipsearch_ok" method="get" name="frm">
동이름 검색 <input type="text" name="dong" />
<input type="submit" value="검색하기" />
</form>
</body>
</html>-public_html/zipsearch_ok.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<h2>zipsearch_ok.html</h2>
<hr><br>
${ result }
</body>
</html>-zipsearch.js
"use strict"
const fs = require( 'fs' );
const mariadb = require( 'mariadb/callback' );
const express = require( 'express' )
const app = express();
const pool = mariadb.createPool({
host: 'localhost',
user: 'root',
password: '!123456',
database: 'project'
});
app.listen( 3000, () => {
console.log( '3000번 포트에서 요청 대기중...' );
})
app.get( '/zipsearch', (req, res) => {
res.sendFile( __dirname + '/public_html/zipsearch.html' );
})
app.get( '/zipsearch_ok', (req, res) => {
console.log( req.query.dong );
const sql = 'select * from zipcode where dong like ?';
pool.query( sql, [ req.query.dong+'%' ], (err, rows) => {
if( !err ) {
let result = `<table border="1">`;
rows.forEach( row => {
result += `<tr align="center">`;
for( let i in row ) {
result += `<td>` + row[i] + `</td>`;
}
result += `</tr>`;
})
result += `</tr></table>`;
let html = fs.readFileSync( './public_html/zipsearch_ok.html' );
html = eval( '`' + html.toString().replace( /`/g, '\\`' ) + '`' );
res.send( html );
} else {
console.error( 'sql오류 : ', err.message );
}
})
pool.end();
})
728x90
반응형
LIST
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
'데이터 엔지니어링 정복/HTML-CSS-JavaScript-Spring-Node.js' Related Articles
more
Comments