Node.js（データベースを用いたWebアプリケーション）

プログラミングの勉強日記

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からデータベースに対してクエリを実行できる。
　クエリ実行後の処理は
　　第1引数の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メソッドの第2引数に{プロパティ:値}と書くことで、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');
  }
);