파파스머프의 블로그: 비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4

2014년 11월 24일 월요일

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4	조회 : 233

나의 폴더 > ASP.NET MVC \| 2014-01-21 (Tue) 14:57	http://blog.dreamwiz.com/papasmf1/14019803

RESTful한 웹서비스를 만들어 보도록 한다.
앞에서 설치하고 생성한 mySQL의 Company데이터베이스에 접속해서 products테이블의 리스트를 출력하고
수정과 삭제가 가능하도록 CRUD메서드를 준비한다.
다음과 같은 파일들이 필요한다.

app.js      edit.html     insert.html list.html 파일들이 필요하다.

혹시 작업하는 폴더에서 모듈에서 에러가 나면 npm link mysql npm link ejsnpm link express를 실행해 주면 된다.
(app.js로 저장한다.)
//모듈을 추출한다.
var fs = require('fs');
var ejs = require('ejs');
var http = require('http');
var mysql = require('mysql');
var express = require('express');

//데이터베이스와 연결한다.
var client = mysql.createConnection({
    user: 'root',
    password: '1234',
    database: 'Company'
});;

//서버를 생성한다.
var app = express();
app.use(app.router);

//서버를 실행한다.
http.createServer(app).listen(52273, function () {
    console.log('Server running at http://127.0.0.1:52273');
});

//라우트를 실행한다.
app.get('/', function (request, response) {
    //파일을 읽는다.
    fs.readFile('list.html', 'utf8', function (error, data) {
        //데이터베이스 쿼리를 실행한다.
        client.query('select * from products', function (error, results) {
            //응답한다.
            response.send(ejs.render(data, {
                data: results
            }));
        });
    });
});
app.get('/delete/:id', function (request, response) {
    //데이터베이스 쿼리를 실행한다.
    client.query('delete from products where id=?', [request.param('id')], function () {
        //응답한다.
        response.redirect('/');
    });
});
app.get('/insert', function (request, response) { });
app.post('insert', function (request, response) { });
app.get('/edit/:id', function (request, response) { });
app.post('/edit/:id', function (request, response) { });

(list.html파일로 저장한다.)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <h1>List Page</h1>
    <a href="/insert">INSERT DATA</a>
    <hr />
    <table width="100%" border="1">
        <tr>
            <th>DELETE</th>
            <th>EDIT</th>
            <th>id</th>
            <th>name</th>
            <th>model number</th>
            <th>series</th>
        </tr>
        <% data.forEach(function (item, index) { %>
        <tr>
            <td><a href="/delete/<%= item.id%>">DELETE</a></td>
            <td><a href="/edit/<%= item.id%>">EDIT</a></td>
            <td><%= item.id %></td>
            <td><%= item.name %></td>
            <td><%= item.modelnumber %></td>
            <td><%= item.series %></td>
        </tr>
        <% }); %>
    </table>
</body>
</html>
실행하면 아래와 같은 형태로 실행된다.

댓글 없음:

댓글 쓰기

참고: 블로그의 회원만 댓글을 작성할 수 있습니다.

2014년 11월 24일 월요일

비주얼스튜디오 2013 웹 익스프레스(Visual Sudio 2013 Web Express)와 node.js을 사용한 개발 #4

댓글 없음:

댓글 쓰기

요즘 새로운 과정을 기획하면서 react.js + next.js를 OpenAI API와 같이 사용하는 과정을 만들고 있습니다. ㅎㅎ