[JavaScript] 비동기 통신으로 DB 데이터 받아오기

현재 DB에 넣은 더미 데이터는 mockaroo를 이용하여 만든 임의의 외국인 정보가 100개 들어가 있는 상태이다.

 

화면에 비동기 통신으로 데이터를 뿌리기 위해서 웹에서 로그인 유저의 세션 정보를 인지하여 DB에 셀렉문을 날리고, 관련 데이터를 JSON으로 리턴하는 api를 만들어보았다.

 

// root의 index.js
server.get("/user-info-api", function (request, response) { 
        var title = null;
        async.waterfall([
        function(callback) {
                title = mysql.escape(request.body.title);
                callback();
        },
        function(callback) {
            if(title !== undefined) {
                const uid = request.session.uid;
                console.log(uid);
                var param = {
                    'param' : uid
                }
                var format = {language:'sql', indent:' '};
                var query = 
                mybatisMapper.getStatement
                ('testMapper','testBasic1', param, format);
                console.log(query);
                Connection.connect();
                Connection.query(query,
                function(error,result, fields) {
                    if(error) {
                        console.log(error);
                    }
                    const data = JSON.stringify(result);
                    console.log(JSON.stringify(result));
                    const json = JSON.parse(data);
                    console.log('회원 정보 조회 완료');
                    return response.json({json});
                    });
                } else {
                    console.log('err');
                }
}])
})

nlonie5@opera.com 계정으로 로그인한 후 localhost:8181/user-info-api에 접속한 결과

 

뷰 단에서는 url이 리턴하는 JSON을 읽기위해 제이쿼리를 이용하였다.  넌적스 템플릿 엔진을 이용한 데이터 처리, 패치, 엑시오스 도전해보았지만 결국 돌고돌아 제이쿼리를.. 하단 퀵 모달에 쓰이는 draggable UI를 지원하기도 하고 비동기 처리가 손쉽기도 해서 이번 프로젝트에서 제이쿼리를 적극적으로 사용했다.

 

 // user-info-api를 받아오는 "회원 정보 수정 화면"의 js코드
$(document).ready(function(){ 
$.ajax({
type:'GET',
url: 'http://localhost:8181/user-info-api',
dataType:'JSON'
}).done(function(data){
console.log(data);
$.each(data, function(i,item) {
let user_num = JSON.stringify(item[0].user_num);
let email = JSON.stringify(item[0].email).replace(/"/g,'');
let name= JSON.stringify(item[0].uname).replace(/"/g,'');
let address= JSON.stringify(item[0].address).replace(/"/g,'');
let phoneNum = JSON.stringify(item[0].phoneNum).replace(/"/g,'');

document.querySelector('#input_email').innerHTML = `${email}`;
document.querySelector('#input_name').innerHTML = `${name}`;
document.querySelector('#input_address').innerHTML = `${address}`;
document.querySelector('#input_phoneNum').placeholder = `${phoneNum}`;
document.querySelector('#input_phoneNum_re').placeholder = `${phoneNum}`;
         });
     });
});