nodejs 및 jQuery 를 이용한 서버와의 통신 참고하기

동해둘리 2016. 8. 5. 17:28

향후, 참고를 위해 좋은 자료가 있는 포스팅을 기록으로 남김니다.

자료출처 : http://cafe.naver.com/jjdev/1714

[step1] mysql database:ksmart

member table

[step2] nodejs server 코드

// mysql dbms연결
var mysql = require('mysql');
var client = mysql.createConnection({
    user:'root',
    password:'java1234',
    database:'ksmart'
});
var http = require('http');
var express = require('express');
var app = express();
app.use(express.static('public'));
app.use(express.bodyParser());
app.use(app.router);
// 멤버 목록
app.all('/list',function(request,response){
    var sql = 'select * from member';
    client.query(sql,function(error,result){       
    //  console.log(result);
        response.send(result)
    });
});
// 멤버 추가
app.all('/add',function(request,response){
    var id = request.param('id');
    var pw = request.param('pw');
    var name = request.param('name');
    var age = request.param('age');
    var gender = request.param('gender');
   
    var sql = "insert into member(id,pw,name,age,gender) values(?,?,?,?,?)";
    client.query(sql,
                [id,pw,name,age,gender],
                function(error,result){
                    response.send(id);
    });
});
// 멤버 삭제
app.all('/remove',function(request,response){
    var ck = request.param('ck'); // 배열
    for(var i=0; i<ck.length;i++){
        var sql = 'delete from member where id=?';
        client.query(sql,[ck[i]],function(){});
    }
    response.send(ck);
});
// 멤버 수정
app.all('/modifyById',function(request,response){
    var id = request.param('id');
    var pw = request.param('pw');
    var name = request.param('name');
    var age = request.param('age');
    var gender = request.param('gender');
   
    var sql = "update member set pw=?,name=?,age=?,gender=? where id=?";
    client.query(sql,
                [pw,name,age,gender,id],
                function(error,result){
                    response.send(id);
    });
});
 
http.createServer(app).listen(80,function(){
    console.log('Server Running at http://127.0.0.1');
});

[step3] client 코드

<!DOCTYPE>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(document).ready(function(){
    // 삭제
    $('#btn_remove').on('click',function(){
        var ck = new Array();
        $('.ck:checked').each(function(index,item){
            ck.push($(item).val());
        });
        $.ajax({
            url:'/remove',
            type:'GET',
            data:{ck:ck},
            success:function(data){
                alert(data+'삭제');
                $('#btn_list').trigger('click');
            }
        });
    });
 
    // 수정
    $('#btn_add').on('click',function(){
        var id = $('#id').val();
        var pw = $('#pw').val();
        var name = $('#name').val();
        var age = $('#age').val();
        var gender = $('#gender').val();
 
        $.ajax({
            url:'/add',
            type:'POST',
            data:{id:id,pw:pw,name:name,age:age,gender:gender},
            success:function(data){
                alert(data+'님 추가');
                $('#btn_list').trigger('click');
            }
        });
    });
    // 추가
    $('#btn_modify').on('click',function(){
        var id = $('#id').val();
        var pw = $('#pw').val();
        var name = $('#name').val();
        var age = $('#age').val();
        var gender = $('#gender').val();
 
        $.ajax({
            url:'/modifyById',
            type:'POST',
            data:{id:id,pw:pw,name:name,age:age,gender:gender},
            success:function(data){
                alert(data+'님 수정');
                $('#btn_list').trigger('click');
            }
        });
    });
    // 목록
    $('#btn_list').on('click',function(){
        $.ajax({
            url:'/list',
            type:'GET',
            success:function(data){
                $('#list').empty();
                $(data).each(function(index,item){
                    $('#list').append('<tr>');
                    $('#list').append('<td><input type="checkbox" class="ck" value="'+item.id+'"></td>');
                    $('#list').append('<td>'+item.id+'</td>');
                    $('#list').append('<td>'+item.pw+'</td>');
                    $('#list').append('<td>'+item.name+'</td>');
                    $('#list').append('<td>'+item.age+'</td>');
                    $('#list').append('<td>'+item.gender+'</td>');
                    $('#list').append('</tr>');
                });
            }
        });
    });
});
</script>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>pw</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
                <th>추가</th>
                <th>수정</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="text" id="id"></td>
                <td><input type="password" id="pw"></td>
                <td><input type="text" id="name"></td>
                <td><input type="text" id="age"></td>
                <td>
                    <select id="gender">
                        <option value="m">남</option>
                        <option value="f">여</option>
                    </select>
                </td>
                <td><button id="btn_add">add</button></td>
                <td><button id="btn_modify">modify</button></td>
            </tr>
        </tbody>
    </table>
 
    <button id="btn_list">회원리스트</button>
    <table border="1">
        <thead>
            <tr>
                <th></th>
                <th>id</th>
                <th>pw</th>
                <th>name</th>
                <th>age</th>
                <th>gender</th>
            </tr>
        </thead>
        <tbody id="list">
        </tbody>
    </table>
    <button id="btn_remove">remove</button>
</body>
</html>

[실행화면]

[출처] jquery(ajax) + nodejs(server) + mysql 을 이용한 CRUD 구현 (JAVA, JAVASCRIPT 개발자 (자바, 자바스크립트)) |작성자zeroDay

저작자표시 (새창열림)