Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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を実行できる。
node3.png

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');
  }
);
mzmz__02
大学3年生です。 2020年5月から毎日投稿しています。
https://www.instagram.com/bb___m13
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away