Node.js〜Progate🐥Node.js Ⅱ

＜queryについて＞
🐽SQL

⚠️「，」忘れ
app.get('/index', (req, res) => {
　connection.query(
　　'SELECT * FROM items',
　　(error, results) => {
// res.renderの第２引数にオブジェクトを追加してください
　　res.render('index.ejs' , {items : results});　});
　　　　　　　　　　　⚠️↑           ↑

＜「作成画面」について＞
①URLに対応するルーティングを用意
②ルーティングの処理の中でビューファイルを指定
③ビューファイルを用意

＜「作成機能」について＞
⚠️データベースの「変更」でPostを用いる！！！

＜「フォームに入力した値の受け取り」について＞

の使い方とtype属性の一覧をサンプル付きで紹介

Express.jsで、配列型のフォームデータを受け取る方法 - Qiita

＜「データベースへの追加」について＞

＜問題解決（ブラウザをリロードするとメモが増える）について＞
リロード：直前のリクエストを実行する機能
→リダイレクト

🐥ここまで、なんと一週間かかりました☠️😱☠️
　　否、正確には、全然、時間の確保が出来なかった。。。また、取れてもｍ単位で、どこまでやったんだっけかなぁ〜な復習も毎回入るから効率悪くって…

全体の復習で、もう一回、全体像を掴みます！

＜👣🐾👣＞

// データベースからデータを取得する処理
app.get('/index', (req, res) => {
       connection.query( 'select*from items' , (error,results) => {
                                                                       console.log(results);
                                                                 🐽 res.render('index.ejs'); });

// res.renderの第２引数にオブジェクトを追加してください
                                 🐽 res.render('index.ejs' , {items:results});

// 作成画面を表示するルーティングを作成してください
app.get('/new' , (req,res) => {  res.render('new.ejs');      });
                                                             ⚠️「/」入れない！！

// メモを追加するルーティングを作成してください
app.post('/create' ,(req,res) => {
     connection.query('SELECT * FROM items', (error, results) => {
                                   res.render('index.ejs', {items: results}); }); });

new.ejs  <!-- formタグを追加してください --> 
<form action="/creat"  method="post">
    <input type="text">
    <input type="submit" value="作成する">    </form>

app.use(express.static('public'));
// フォームから送信された値を受け取れるようにしてください
app.use(express.urlencoded({extended:false}));

// フォームから送信された値を出力してください
app.post('/create', (req, res) => {
                           console.log(req.body.itemName);
                        connection.query('SELECT * FROM items',
                       (error, results) => {res.render('index.ejs', {items: results}); }); });

new.ejs <!-- name属性を追加してください -->
<input name="itemName" type="text">

// データベースに追加する処理を書いてください
app.post('/create', (req, res) => { connection.query(
                                          'insert into items (name) values (?)' ,⚠️
                                                                  [req,body,itemName] ,⚠️
                         (error,results) => {connection.query(
                                               'select * from items' ,
                         (error,results) => {                                           
                                            res.render('index.ejs' , {items:results});

  });   });   });

// 一覧画面にリダイレクトしてください
app.post('/create', (req, res) => {connection.query(
                                  'INSERT INTO items (name) VALUES (?)' ,⚠️
                                                                  [req.body.itemName] ,⚠️
                              (error, results) => {
                                                        res.redirect('/index'); }); });

＜まとめ＞
やっと、やっと修了です…
自分で1から作れる状態ではありませんが、概要を理解して、繰り返し復習します！！