node + express + mongdb 활용한 rest 공부하기

// 문서정보 : http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/
// http://jade-lang.com/ 

1. node 설치
2. express 설치 
     - npm install -g express-generator
     - express nodetest2

3. tree
Package.json

{
  "name": "nodetest2",  // 프로젝트명
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"  // 스크립트 
  },
  "dependencies": {   // jar, dll 같은 의존 파일 묶음
    "body-parser": "~1.13.2",  // 인코딩
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",  
    "express": "~4.13.1",
    "jade": "~1.11.0", // html (템플릿) 생성 프레임워크
    "morgan": "~1.6.1",
    "serve-favicon": "~2.3.0"
  }
}

4. cd nodetest2 -> npm install ( 팩캐지를 이용하여 웹사이트 틀을 만들어준다. )
5. mkdir data  // 데이터베이스 파일이 담겨지는 위치  ( 몽고 DB )


6. views / jade . jquery, script 추가
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js')
    script(src='/javascripts/global.js')

7. /public/javascripts/global.js 생성

8. css 변경

9. index.jade 수정 ( 문법 중요!. 들어씌기 부터 ) 
extends layout

block content
  h1= title
    p Welcome to our test
    // Wrapper
    #wrapper
        // USER LIST
        h2 User List
        #userList
            table
                thead
                    th UserName
                    th Email
                    th Delete?
                tbody
        // /USER LIST
    // /WRAPPER

9 .npm start

10. 몽고 디비 설치

https://mylko72.gitbooks.io/node-js/content/chapter12/chapter12_1.html  설치 참고 

11. 몽고 접속

use nodetest2

-점속 db.userlist.insert({'username' : 'test1','email' : 'test1@test.com','fullname' : 'Bob Smith','age' : 27,'location' : 'San Francisco','gender' : 'Male'})
//http://jsbeautifier.org/ 참고

12. npm start  후

http://localhost:3000/users/userlist 접속 후 출력확인 



13. REST 는 ? 
   13-1. HTTP 메서드 를 명시한거다. ( POST, GET, OPTIONS. DELETE , PUT ... ) 메서드
   13-2. 상태값이 없다. ( bestateless ) 
   13-3. URL 를 디렉토리 구조처럼 uri 를 구성한다.  : type=video&game=skyrim&pid=68 ==> files/viedo/skyrim/68
   13-4. XML, JSON 방식으로 데이터를 전송 한다. 



14. showUserInfo 구현

// Show User Info
function showUserInfo(event) {

    // Prevent Link from Firing
    event.preventDefault();

    // Retrieve username from link rel attribute
    var thisUserName = $(this).attr('rel');

    // Get Index of object based on id value
    var arrayPosition = userListData.map(function(arrayItem) { return arrayItem.username; }).indexOf(thisUserName);

    // Get our User Object
    var thisUserObject = userListData[arrayPosition];

    //Populate Info Box
    $('#userInfoName').text(thisUserObject.fullname);
    $('#userInfoAge').text(thisUserObject.age);
    $('#userInfoGender').text(thisUserObject.gender);
    $('#userInfoLocation').text(thisUserObject.location);

};


15. index.jade 수정
extends layout

block content
    h1= title
    p Welcome to our test

    // Wrapper
    #wrapper

        // USER INFO
        #userInfo
            h2 User Info
            p
                strong Name:
                |  
                br
                strong Age:
                |  
                br
                strong Gender:
                |  
                br
                strong Location:
                |  
        // /USER INFO

        // USER LIST
        h2 User List
        #userList
            table
                thead
                    th UserName
                    th Email
                    th Delete?
                tbody
        // /USER LIST

    // /WRAPPER


16. User 추가 소스 삽입 
/*
 * POST to adduser.
 */
router.post('/adduser', function(req, res) {
    var db = req.db;
    var collection = db.get('userlist');
    collection.insert(req.body, function(err, result){
        res.send(
            (err === null) ? { msg: '' } : { msg: err }
        );
    });
});