Node.js データベースの利用

Node.jsの学習の備忘録と振り返りの記事です。
何かの参考になれば幸いです。
付け足しや訂正などある場合ご教授いただけると
大変嬉しく思います！！

利用準備

1.データベース管理ツールインストール
2.Node.jsからツールに接続するnpm install ツール名
3.ツールパッケージの読み込み　const ツール = require('ツール名')

4.データベースに接続するための情報を定数connectionに代入
const connection = ツール名.createConnection({
データベース名、パスワードなど
});

//const mysql = require('mysql');
//app.use(express.static('pablic'));
const connection = mysql.createConnection({
データベース名、パスワードなど
});

データベースのデータを表示

1.クエリの実行

connection.query('クエリ', クエリ実行後の処理)
と書くことで、Node.jsからデータベースに対してクエリを実行することができる。

//const connection = mysql.createConnection({
//});
//app.get('/index',(req,res) =>{
 connection.query(
   'select * from items',
   //↓↓↓クエリ実行後の処理は2つの引数を取ることができる
   (error,results) => {
    //第1引数のerrorにはクエリが失敗したときのエラー情報
    //第2引数のresultsにはクエリの実行結果が入る
     console.log(results);
     res.render('index.ejs');
   }
 );
//});

2.取得した値の表示(データベースから取得したデータをindex.ejsに渡し一覧画面に表示する)

renderメソッドの第2引数に{プロパティ : 値}と書くことで、EJS側に値を渡すことができる

//app.get('/index',(req,res) =>{
 //connection.query('select * from items',
   //(error,results) => {
     //console.log(results);
     res.render('indexejs',{items: results});
  // }
// );
//});

ejsではrenderメソッドから取得した値を、オブジェクトのプロパティで使える。
<%取得したオブジェクトのプロパティ名.forEach((item) => {%>

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

作成機能の作成

作成機能の処理の流れ
フォームの送信　→　データ追加　→　一覧画面表示

作成手順

1.作成画面の表示app.get('URL',(req,res) => {res.render('ファイル名')})

作成した作成画面へのリンクの用意

遷移したい画面へのリンクを遷移前の画面のリンクタグに用意する<a href="遷移したい画面のリンク">遷移ボタン</a>

<a href="/new">遷移ボタン</a>

2.フォームの送信

メモ作成のルーティングを用意

Webでは、サーバーへリクエストするときに、どんな処理をしたいかをメソッドで伝えるようにルールで決まっている ・画面表示``get`` ・データベースを変更したい時``post``

app.post('/url',(req,res) => {
 //メモを追加する処理 
 //一覧画面を表示する処理
})

フォームの用意<form action="/URL" method="postかget">

フォームを作るときはHTMLの＜form＞タグを用いる

<!--- action属性には送信先のURL --->
<form action="/creat" method="post">
<!--- method属性には「post」か「get」をルーティングに合わせて指定 --->

一覧画面を表示

//app.post('/creat',(req,res) =>{
  //メモを追加する処理

  //一覧画面を表示する処理
 //connection.query('select * from items',
   //(error,results) => {
     res.render('index.ejs',{items: results});
  // }
// );
//});

3.フォームに入力した値を受け取る
ejsでinput要素にname属性を指定<input name="name属性">

app.jsでapp.use(express.urlencoded({extended:false});の定形文を追加する

//app.use(express.static('public'))
//↓↓↓↓追加
app.use(express.urlencoded({extended:false})//定形文

//app.post('/URL',(req,res) => {
   console.log(req.body.itemName);//⇦フォームの値を取得する
//});

4.データベースへの追加

app.jsのqueryメソッドでINSERTを実行→第二引数に渡したい配列の指定
INSERT INTO テーブル名　(カラム名) VALUES(？)
→[req.body.itemName]

フォームからの値をクエリに使うときは、VALUESに「?」を含める

//app.post('/URL',(req,res) => {
   //connection.query(
      'INSERT INTO table (caram) VALUES(?)',
      [req.body.itemName],
      (error,results) => {//クエリ実行後の処理}
//});

5.リダイレクトの指定

メモ追加後にres.redirectメソッドを用い、引数にURLを指定する
res.redirect('/URL')

//app.post('/URL',(req,res) => {
   //connection.query(
      //'INSERT INTO table (caram) VALUES(?)',
      //[req.body.itemName],
     // (error,results) => {
        res.redirect('/URL');
         }
//});