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>
실행하면 아래와 같은 형태로 실행된다.


댓글 없음:

댓글 쓰기

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

Xcode 26기반의 교재를 업데이트하면서 들었던 생각입니다.

  앞으로는 교육이 좀 바뀌어야 할 것 같습니다. ㅎㅎ 저도 대부분의 교육에서 AI기반의 llm을 사용하는 방식을 사용하고 있습니다. 아마 강사님들은 대부분 이렇게 수업을 진행하고 계실 것 같습니다. 개발 환경을 셋팅하는 것을 알려주고, 기본 언어와 ...