Notice
Recent Posts
Recent Comments
Link
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

9시 24분

MySQL 모듈 기본사용법, 홈페이지 구현, 상세보기 구현 본문

Javascript/Node.js

MySQL 모듈 기본사용법, 홈페이지 구현, 상세보기 구현

leeeee.yeon 2021. 7. 5. 20:18 
npm install --save mysql

dependencies에 mysql이 추가됨

 

< main.js >

var mysql = require('mysql');

var db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '비밀',
  database: 'web'
});
db.connect();
if(queryData.id === undefined){ // 메인 페이지
db.query(`SELECT * FROM topic`, function(error, topics){
console.log(topics);
var title = 'Welcome';
var description = 'Hello, Node.js';
var list = template.list(topics);
var html = template.HTML(title, list,
`<h2>${title}</h2>${description}`,
`<a href="/create">create</a>`
);

response.writeHead(200);
response.end(html);
});

< template.js >

module.exports = {
  HTML:function(title, list, body, control){
    return `
    <!doctype html>
    <html>
    <head>
      <title>WEB1 - ${title}</title>
      <meta charset="utf-8">
    </head>
    <body>
      <h1><a href="/">WEB</a></h1>
      ${list}
      ${control}
      ${body}
    </body>
    </html>
    `;
  },list:function(topics){
    var list = '<ul>';
    var i = 0;
    while(i < topics.length){
      list = list + `<li><a href="/?id=${topics[i].id}">${topics[i].title}</a></li>`;
      i = i + 1;
    }
    list = list+'</ul>';
    return list;
  }
}

 

위와 같이 코드를 추가 / 수정해주면

 

메인 화면 구현에 성공했다.

이제 상세 페이지 ( 각 글을 클릭했을 때 )를 수정해보자.

 

undefined 아래에 있는 else문을 아래와 같이 변경해준다.

else { // 상세 글
        db.query(`SELECT * FROM topic`, function(error, topics){
          if(error) throw error;
          db.query(`SELECT * FROM topic WHERE id=?`, [queryData.id],function(error2, topic){
            if(error2) throw error2;
            var title = topic[0].title;
            var description = topic[0].description;
            var list = template.list(topics);
            var html = template.HTML(title, list,
              `<h2>${title}</h2>${description}`,
              `<a href="/create">create</a>
              <a href="/update?id=${queryData.id}">update</a>
              <form action="delete_process" method="post">
                <input type="hidden" name="id" value="${queryData.id}">
                <input type="submit" value="delete">
              </form>`
            );
  
            response.writeHead(200);
            response.end(html);
          });
        });
      }

 

각 글을 클릭했을 때 해당 글로 잘 이동하는 모습을 볼 수 있다~

'Javascript > Node.js' 카테고리의 다른 글

저자 기능 추가 ( in 상세 글, 생성 )  (0) 2021.07.05
글 생성, 수정, 삭제 기능 구현  (0) 2021.07.05
실습 준비  (0) 2021.07.05
callback, 패키지 매니저와 PM2, 글 생성, POST 방식으로 전송된 데이터 받기, 파일 생성과 리다이렉션  (0) 2021.05.12
API & REST API  (0) 2021.05.12
'Javascript/Node.js' Related Articles more