프로그래밍 공부 일기

2020년 6월 18일 Progate Lv.130
Node.jsⅡ,Ⅲ

MySQL

데이터베이스를 관리하는 도구이다. Node.js에서 MySQL을 조작하려면 Node.js에서 MySQL에 연결합니다. 이를 위해 mysql 패키지를 이용한다.

터미널

$npm install mysql

app.js

//mysqlパッケージの読み込み
const mysql=require('mysql');
//接続情報をcreateConnectionメソッドを用いて定数connectionに代入
const connection=mysql.createConnection({
  //データベース名、パスワードなどを記述
});

쿼리 실행

connection.query('クエリ',クエリ実行後の処理) 라고 쓰는 것으로, Node.js로부터 데이타베이스에 대해서 쿼리를 실행할 수 있다.
쿼리 실행 후의 처리는
첫 번째 인수의 error: 쿼리가 실패했을 때의 에러 정보
2번째 인수의 results: 쿼리의 실행후가 들어간다

app.js

connection.query(
  'SELECT * FROM items'
  (error,results)=>{
    console.log(results);
    res.render('index.ejs');
  }
);

터미널

[{id:1, name:'じゃがいも'},
 {id:2, name:'キャベツ'},
 {id:3, name:'にんじん'} ]

획득한 값 표시

EJS는 render 메소드로부터 값을 받을 수 있다. render 메소드의 두 번째 인수에 {プロパティ:値}를 쓰면 EJS 측에 값을 전달할 수 있습니다.

app.js

app.get('/index', (req,res)=>{
  connection.query( 'SELECT * FROM items',
    (error,results)=>{
      res.render('index.ejs',{items:results}); //オブジェクトを渡す
    }
  );
};

{items:results} 는 객체를 건네주고 있으므로, 배열 results로부터 1번째의 요소를 꺼낼 때는, res.render('index.ejs',{items:results[0]});`라고 한다.

index.ejs

<% items.forEach((item)=>{ %>

post 메소드

URL에 대응하는 처리 (라우팅)를 행한다. get 메소드와 같은 형태로 실시한다.

app.js

app.post('/create', (req,res)=>{
  //処理
});

get과 post의 구분
get 메소드 : 파일을 이미지에 표시하고 싶을 때 사용
Post 메서드 : 데이터베이스를 변경하고 싶을 때 사용

양식 만들기

폼을 만들 때는 HTML <form> 태그를 사용한다. action 속성에는 송신처의 URL을 method 속성에는 post 또는 get를 지정한다.

new.ejs

<form action="/create" method="post">
  <input type="text">
  <input type="submit" values="作成する">
</form>

양식 값 받기

input 요소에 name 속성을 지정하면, 오브젝트의 형태로 정보가 서버에 송신된다. 서버측에서는 req.body.name 속성의 값으로 폼의 값을 취득할 수 있다.

name 속성 지정

<input type="text" name="itemName">

app.js

//フォームの値を受け取るために必要な典型文
app.use(express.urlencoded ({express:false}));
app.post('/create', (req,res)=>{
  console.log(req.body.itemName); //フォームの値を取得
});

데이터베이스에 추가

SELECT와 같이 query 메소드를 사용하는 것으로, INSERT를 실행할 수 있다.


app.js

connection.query(
  //idカラムはAUTO INCREMENTが実行されるので不要。
  'INSERT INTO items (name) VALUE ("とまと")',
  (error,results)=>{
  ...

app.js (폼의 값을 쿼리에 사용)

connection.query(
  'INSERT INTO items (name) VALUE (?)', //配列の値が?に入る
  [req.body.itemName], 
  (error,results)=>{
  ...

리디렉션

서버는 다음에 지정하는 URL을 응답할 수 있다. 이 응답을 받은 브라우저는 지정된 URL에 요청을 한다. 이렇게 다른 URL에 다시 요청되는 메커니즘입니다. 사용자가 이동 전의 페이지를 방문했을 때에, 자동적으로 전송 후의 페이지에 전송하는 구조.

리디렉션 후 리로드

리디렉션을 사용하면 추가 처리 후 /index에 요청하여 목록 화면을 표시 할 수 있습니다. 따라서, INSERT 후에 리로드해도 추가 처리가 실행되지 않기 때문에 INSERT로 더 증가하지 않는다.

리디렉션 사용

리디렉션을 하려면, res.redirect 메소드를 사용해 인수에 URL를 지정한다. POST일 때는 리디렉션을 사용한다. (get 라우팅으로 리디렉션)

app.js

//INSERTした後に`/index`（一覧画面）にリダイレクトする
app.post('/create', (req,res)=>{
  connection.query(
    'INSERT INTO items (name) VALUES (?)'
    [req.body.itemName],
    (error,results)=>{
      res.redirect('/index'); //URLを指定してリダイレクトする
    }
  );
});

id 전달

데이터베이스를 삭제하거나 갱신할 때는 WHERE로 id를 지정할 필요가 있다. 이 ID를 전달하려면 URL을 사용합니다. URL에는 /delete/id:3 와 같이 id를 포함하도록 하고, 라우팅의 URL은 /delete/:id 와 같이 지정한다. 이 /:id의 부분을 루트 파라미터라고 한다.

index.ejs

<form action="/delete/<%= item.id %>" method="post">
  <input type="submit" value="削除">
</form>

<%= item.id %> 로 하여 목적지 URL에 id를 포함한다.

app.js

app.post('/delete/:id', (req,res)=>{
  console.log(req.params.id);
  res.redirect('/index');
});

req.params.パラメータ名 로 루트 파라미터의 값을 받을 수 있다. id는 루트 파라미터와 params로 전달한다. 업데이트하는 값은 양식과 body로 전달됩니다.

쿼리 실행

app.js

connection.query(
  'DELETE FROM items WHERE id=?',
  [req.params.id],
  (error,results)=>{
    res.redirect('/index');
  }
);