Blog Content

  1. Home

    티스토리 뷰

    04.Node.js - MongoDB 연결하기 + 저장된 내용 출력하기 (수정)

    Posted by Godffs on 2013. 10. 3. 03:18 in Vue.js | Node.js /

    반응형

    이제 화면에서 입력한 데이터를 MongoDB에 저장하는 방법입니다.

    먼저 현재 DB에 저장된 내용을 화면에 보여지게 하기 위해 디자인을 수정합니다.

     input.html
     <!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <table border="1">

            <tr>

                <td>

                    <input type="text" id="txt" />

                </td>

                <td>

                    <input type="button" id="btnOK" value="input" />

                </td>

            </tr>

        </table>

        <!--기존 파일에서 추가된 내용입니다. 수정하세요-->

        <!--코드 설명은...생략합니다...;;;-->

        <br />

        <b>List</b>

        <table width="100%" border="1">

            <tr>

                <th>NAME</th>

            </tr>

            <% for (var temp  in data){%>

            <tr>

                <td><%=data[temp].name%></td>

            </tr>

            <%} %>

        </table>

    </body>

    </html>

     


    이제 서버에서 input.html에 데이터를 보내주는 코드를 작성합니다.
    이전에 새로 만들어준 server.js 파일을 수정합니다.
    connect를 사용해서 데이터를 가지고 오는데요.  아래 블로그에 정리된 내용을 가지고 왔습니다.

    http://uiandwe.tistory.com/entry/nodejs-mongojs-를-이용한-웹페이지-출력 

     server.js
     

    var connect = require('connect');
    var fs = require('fs');
    var ejs = require('ejs');
    var db = require('mongojs').connect('DB_Godffs', ['TB_BOARD']);

    function get(path, cd) {
        return function (req, res, next) {
            if (req.method != 'GET' || req.url != path)
                return next();
            cd(req, res, next);
        }
    }

    var app = connect()
        .use(get('/', function (req, res, next) {
            fs.readFile('views/input.html', 'utf8', function (error, data) {
                db.TB_BOARD.find({}, { name: 1 }, function (error, cursor) {
                    res.writeHead(200, { 'Content-Type': 'text/html' });
                    res.end(ejs.render(data, { data: cursor }));
                });
            });
        })).listen(3000, function () { console.log("서버 연결 : 3000") });

     


    var connect = require('connect');
    var fs = require('fs');
    var ejs = require('ejs');
    var db = require('mongojs').connect('memo', ['TB_DATA']);

    function get(path, cd) {
        return function (req, res, next) {
            if (req.method != 'GET' || req.url != path)
                return next();
            cd(req, res, next);
        }
    }

    var app = connect()
        .use(get('/', function (req, res, next) {
            fs.readFile('views/input.html', 'utf8', function (error, data) {
                db.TB_BOARD.find({}, { name: 1 }, function (error, cursor) {
                    res.writeHead(200, { 'Content-Type': 'text/html' });
                    res.end(ejs.render(data, { data: cursor }));
                });
            });
        })).listen(3000, function () { console.log("서버 연결 : 3000") });


    여기서 server.js 코드를 모두 새로 작성했는데요. 추가된 모듈들입니다.
    Connect : Http 기반, 웹서버
    Mongojs : MongoDB 모듈중 많은 사람들이 사용합니다...ㅡ_ㅡ;;
    Ejs : Html 페이지를 생성하는모듈로 동적으로 html 페이지 생성할때 사용


    추가된 모듈을 설치합니다.

    [그림 4-1]

    결과 확인하기

    [그림 4-2]


    아 어렵다~!!!!
    반응형
    저작자표시 비영리 변경금지

    'Vue.js | Node.js' 카테고리의 다른 글

    visual studio 2017 에서 vue.js 실행  (0) 2019.05.19
    Vue.js 시작...  (0) 2019.05.18
    03.Node.js - MongoDB 설치 + 데이터 저장  (6) 2013.04.29
    02.Node.js - 입력 화면 만들기  (5) 2013.04.28
    01.Node.js - 기본 구성하기  (2) 2013.04.28

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바