3줄요약
1. mysql 데이터 베이스 및 테이블 생성
2. 웹서버에 데이터 베이스를 연결 시키고, get, post 등 라우터를 구현해둔다.
3. HTML 로 입력 폼을 만들고 get 및 post 메시지로 데이터베이스 내용 추가 및 내용을 가져와서 보여준다.
MYSQL 서버에 미리 Company라는 데이터 베이스를 만듭니다.
mysql > CREATE DATABASE Company;
mysql > USE Company
그다음 products라는 테이블을 생성합니다.
mysql > CREATE TABLE products(
id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
modelnumber VARCHAR(15) NOT NULL,
series VARCHAR(30) NOT NULL
);
DESCRIBE products 를 하면 다음과 같은 화면을 볼 수 있습니다.
그 다음 Node.js로 구현한 웹서버 소스입니다.
express 버전은 @3.4.7 입니다.
server.js
var http = require('http');
var express = require('express');
var mysql = require('mysql');
var client = mysql.createConnection({
user : 'root',
password : 'apmsetup',
database : 'Company'
});
//웹서버를 생성합니다.
var app = express();
app.use(express.static('public'));
//app.use(express.bodyParser());
app.use(express.json());
app.use(express.urlencoded());
app.use(app.router);
/*client.query('SELECT * FROM products', function (error, result, fields) {
if (error) {
console.log('쿼리 문장에 오류가 있습니다.');
} else {
console.log(result); //매개변수 result로 결과 출력
}
});*/
app.get('/products', function (request, response) {
//데이터베이스 요청을 수행합니다.
client.query('SELECT * FROM products', function (error, data) {
//response.type('text/xml');
//response.header("Access-Control-Allow-Origin" , "*");
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
response.send(data);
});
});
app.get('/:id', function (request, response) {
//변수 선언
var id = Number(request.param('id'));
//데이터베이스 요청을 수행합니다.
client.query('SELECT * FROM products WHERE id=?', [id], function (error, data) {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
response.send(data);
});
});
app.post('/products', function (request, response) {
//변수를 선언합니다.
var name = request.param('name');
var modelnumber = request.param('modelnumber');
var series = request.param('series');
//데이터베이스 요청을 수행합니다.
client.query('INSERT INTO products(name, modelnumber, series) VALUES(?,?,?)', [name, modelnumber, series], function (error, data) {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
// response.send(data);
response.send({
message: '데이터를 추가했습니다.',
data: item
});
});
});
app.put('/products/:id', function (request, response) {
//변수를 선언합니다.
var id = Number(request.param('id'));
var name = request.param('name');
var modelnumber = request.param('modelnumber');
var series = request.param('series');
var query = 'UPDATA products SET';
//쿼리를 생성합니다.
if (name)
query += 'name="' + name + '" ';
if (modelnumber)
query += 'modelumber="' + modelnumber + '" ';
if (series)
query += 'series="' + series + '" ';
//데이터베이스 요청을 수행합니다.
client.query(query, function (error, data) {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
response.send(data);
});
});
app.del('http://127.0.0.1:52273/products/:id', function (request, response) {
//변수를 선언합니다.
var id = Number(request.param('id'));
//데이터베이스 요청을 수행합니다.
client.query(query, function (error, data) {
response.set('Access-Control-Allow-Origin', '*');
response.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH');
response.set('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Authorization');
response.send(data);
});
});
//웹서버를 실행
http.createServer(app).listen(52273, function () {
console.log('Server Running at http://127.0.0.1:52273');
});
그다음 HTML 파일입니다.
다음과 같은 포맷을 구성합니다.
html소스에서 가장 중요한 점은 tr태그에서 id 태그를 반드시 추가 시켜줘야
합니다. name 태그만 추가하면 input 에 입력한 값을 받을 수가 없습니다.
꼭 id 태그를 추가해줘야합니다.
ex22_14.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DB Basic</title>
<script src="http://code.jquery.com/jquery-1.11.1.js">
</script>
<script>
$(document).ready(function(){
//데이터를 보여주는 함수입니다.
function selectData(){
//#output 내부의 내용물을 제거합니다. output은 html body에 있다
$('#output').empty();
//Ajax를 수행합니다.
$.getJSON('http://127.0.0.1:52273/products', function(data){
$(data).each(function (index, item){
var output = '';
output += '<tr>';
output += ' <td>' + item.id + '</td>';
output += ' <td>' + item.name + '</td>';
output += ' <td>' + item.modelnumber + '</td>';
output += ' <td>' + item.series + '</td>';
output += '</tr>';
$('#output').append(output);
});
});
}
//데이터를 추가합니다.
$('#insert_form').submit(function (event){
//Ajax를 수행합니다.
var data = $(this).serialize();//입력한 값을 data에 다 넣음
$.post('http://127.0.0.1:52273/products', data, selectData);
// var name = $('#name').val();
/* $.ajax({
url: 'http://127.0.0.1:52273/products',
type: 'post',
dataType: 'text',
data : {
name : $('#name').val(),
modelnumber : $('#modelnumber').val(),
series : $('#series').val()
},
success : function(data){
alert(name);
}
});
*/
//기본 이벤트를 제거합니다.
event.preventDefault();
});
//초기화면에 데이터를 표시합니다.
selectData();
});
</script>
</head>
<body>
<div>
<form id="insert_form">
<fieldset>
<legend>데이터추가 </legend>
<table>
<tr>
<td><label>상품명 </label></td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td><label>모델 번호 </label></td>
<td><input type="text" name="modelnumber" id="modelnumber"/></td>
</tr>
<tr>
<td><label>시리즈 </label></td>
<td><input type="text" name="series" id="series"/></td>
</tr>
</table>
<input type="submit" id="post" value="추가" />
</fieldset>
</form>
</div>
<table id="output" border="1">
</table>
</body>
</html>
'프로그래밍 > Node.js' 카테고리의 다른 글
| Node.js - Node inspector를 통한 디버깅 방법 (0) | 2015.01.17 |
|---|---|
| Node.js - socket.io api 간단 설명 (펌자료) (0) | 2015.01.10 |
| Node.js - req.files이 동작을 안할때 - express (0) | 2015.01.06 |
| Node.js - response.end 한글 깨짐 현상 해결법 (0) | 2015.01.05 |
| Node.js - POST 요청 Node.js에서 처리 방법 (0) | 2015.01.02 |
| Node.js - URL별로 다른 HTML 페이지 제공하기 (0) | 2015.01.02 |
| Node.js - Location 속성을 이용한 페이지 강제 이동 시키기 (0) | 2015.01.02 |
| Node.js - 포트2개를 사용한 이미지와 음악파일 서버 만들기 (0) | 2015.01.02 |