http://ynsoft.co.kr/y1 | 작업게시판 | 로그인 | 회원가입 | 장바구니(0) | 주문조회 | 온라인견적 | FAQ | 마이페이지 
 
    
    
자동로그인
쇼핑몰
IT
와이앤소프트업무
학원교육
프로젝트
개인의
전례음악
공부

Node.js
 
작성일 : 24-05-09 18:16
[일반] crud 기초 예제
 글쓴이 : 가우텔
조회 : 67  
(데이터베이스 생성)

create table musiclist (
  id int unsigned not null auto_increment primary key,
  name varchar(255) not null,
  artist varchar(255) not null,
  genre varchar(255) not null
);

INSERT INTO `musiclist` (`id`, `name`, `artist`, `genre`) VALUES
(1, 'Mirage a', 'Camel b', 'Progressive Rock'),
(2, 'Dogrel', 'Fontains D.C.', 'Post Punk Revival'),
(3, 'Heaven And Earth', 'kamasi Washington', 'Jazz');


(모듈 설치)
express
ejs
mysql2
fs <-- 설치해야 되는지 확인 필요
body-parser <-- 설치해야 되는지 확인 필요

(mysql.js)
const mysql = require("mysql2");

var db_info = {
    host: "localhost", // 데이터베이스 주소
    port: "3306", // 데이터베이스 포트
    user: "root", // 로그인 계정
    password: "", // 비밀번호
    database: "coding", // 엑세스할 데이터베이스명
  };

  module.exports = {
    init: function () {
      return mysql.createConnection(db_info);
    },
    connect: function (conn) {
      conn.connect(function (err) {
        if (err) console.error("mysql connection error : " + err);
        else console.log("mysql is connected successfully!");
      });
    },
  };

 

(index.js)
const express = require('express')
const fs = require('fs')
const ejs = require('ejs')
const mysql = require('mysql2')
const bodyParser = require('body-parser')

const client = mysql.createConnection({
  user: 'root',
  password: '', //본인의 db root 계정 비밀번호
  database: 'coding' //본인의 db
})

const app = express()

app.use(bodyParser.urlencoded({
  extended: false
}))

app.listen(3000, function () {
  console.log('Server is running at : http://127.0.0.1:3000')
})

app.get('/', function (req, res) {
  fs.readFile('list.ejs', 'utf8', function (err, data) {
    client.query('select * from MusicList', function (err, results) {
      if (err) {
        res.send(err)
      } else {
        res.send(ejs.render(data, {
          data: results
        }))
      }
    })
  })
})

app.get('/delete/:id', function (req, res) {
  client.query('delete from MusicList where id=?', [req.params.id], function () {
    res.redirect('/')
  })
})

app.get('/insert', function (req, res) {
  fs.readFile('insert.html', 'utf8', function (err, data) {
    res.send(data)
  })
})

app.post('/insert', function (req, res) {
  const body = req.body

  client.query('insert into MusicList (name, artist, genre) values (?, ?, ?);', [
    body.name,
    body.artist,
    body.genre
  ], function() {
    res.redirect('/')
  })
})

app.get('/edit/:id', function (req, res) {
  fs.readFile('edit.ejs', 'utf8', function (err, data) {
    client.query('select * from MusicList where id = ?', [req.params.id], function (err, result) {
      res.send(ejs.render(data, {
        data: result[0]
      }))
    })
  })
})

app.post('/edit/:id', function (req, res) {
  const body = req.body

  client.query('update MusicList SET name=?, artist=?, genre=? where id=?',[
    body.name, body.artist, body.genre, req.params.id
  ], function () {
    res.redirect('/')
  })
})

(list.ejs)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>List Page</title>
</head>
<body>
  <h1>Music List</h1>
  <a href="/insert">Add Music</a>
  <hr/>
  <table border="1">
    <tr>
      <th>DELETE</th>
      <th>EDIT</th>
      <th>id</th>
      <th>Name</th>
      <th>Artist</th>
      <th>Genre</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.artist %></td>
      <td><%= item.genre %></td>
    </tr>
    <% }); %>
  </table>
</body>
</html>

(insert.html)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>insert data</title>
</head>
<body>
  <h1>Add Music</h1>
  <hr/>
  <form method="post">
    <fieldset>
      <legend>Enter Music Data</legend>
      <table>
        <tr>
          <td><label>Name</label></td>
          <td><input type="text" name="name" /></td>
        </tr>
        <tr>
          <td><label>Artist</label></td>
          <td><input type="text" name="artist" /></td>
        </tr>
        <tr>
          <td><label>Genre</label></td>
          <td><input type="text" name="genre" /></td>
        </tr>
      </table>
      <input type="submit" value="Add It!">
    </fieldset>
  </form>
</body>
</html>

(edit.ejs)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Edit Music Data</title>
</head>
<body>
  <h1>Edit Music Info</h1>
  <hr/>
  <form method="post">
    <fieldset>
      <legend>Edit Music Info</legend>
      <table>
        <tr>
          <td><label>Id</label></td>
          <td><input type="text" name="id" value="<%= data.id %>" disabled /></td>
        </tr>
        <tr>
          <td><label>Name</label></td>
          <td><input type="text" name="name" value="<%= data.name %>" /></td>
        </tr>
        <tr>
          <td><label>Artist</label></td>
          <td><input type="text" name="artist" value="<%= data.artist %>" /></td>
        </tr>
        <tr>
          <td><label>Genre</label></td>
          <td><input type="text" name="genre" value="<%= data.genre %>" /></td>
        </tr>
      </table>
      <input type="submit" value="Submit!" />
    </fieldset>
  </form>
</body>
</html>

(end)






 
 

Total 8
번호 제   목 글쓴이 날짜 조회
8 [일반] crud 기초 예제 가우텔 05-09 68
7 [일반] html에서 post로 값 넘기고 express로 값을 받아서… 가우텔 04-05 52
6 [일반] html 에서 post 값을 받아서 mysql 에 저장하기 가우텔 03-21 56
5 [일반] file directory 생성, 수정, 삭제, 목록보기 가우텔 03-08 54
4 [일반] mysql2 사용하기 가우텔 03-07 57
3 [일반] mysql 사용법 가우텔 03-07 56
2 [일반] express 이용 get post 받기 가우텔 03-07 57
1 관련사이트 가우텔 04-03 59
회사소개 | 서비스이용약관 | 개인정보 취급방침
OO도 OO시 OO구 OO동 123-45 / 전화 : 02-123-4567 / 팩스 : 02-123-4568 / 운영자 : 가우텔
사업자 등록번호 : 123-45-67890 / 대표 : 대표자명 / 개인정보관리책임자 : 정보책임자명
통신판매업신고번호 : 제 OO구 - 123호 / 부가통신사업신고번호 : 12345호
Copyright © 2001-2005 회사명. All Rights Reserved.