Node.js＋MySQL＋ExpressでWebアプリをつくる　その2【データの追加と一覧表示】

NodeJS

app.js

app.get('/new', (req,res) => {
  res.render('new.ejs');
});

// フォームの値を受けとるために必要な定型文
// データをURLエンコーディングされたデータとして受け取り、req.bodyに格納する
app.use( express.urlencoded({extended: false}) );


// 画面を表示したい時はapp.getだが、
// データベースを変更したい時はapp.postを使うこと
app.post('/create', (req,res) => {
  
  // ひとまず、フォームの値を確認してみる
  console.log(req.body.itemName);
  
  // データを追加する処理
  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};
            //    }
            //);
            
            // 良い例
            res.redirect('/'); <---'/index'じゃないので注意
      }
  );
  
  

});

new.ejs(viewsディレクトリ内にnew.ejsを作成する)

// formのデータをapp.post('/create', (req,res) ...に送る
<form action='/create' method='post'>
  <input type='text' name='itemName'>
  <input type='suibmit' value='作成する'>
</form>

ーーーーー

解説1

<input type=’text’ name=’itemName’>に「とまと」と打ち込んで送信したとする

すると、app.post(‘/create’, (req,res)=>{}) の req は

req: {
  body: {
    itemName: 'とまと'
  }
}

となり、req.body.itemNameに「とまと」が入る

解説2

データを送信したら、その後に一覧画面を表示する場合

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

でもいい気がするが、ダメである

試しにnew.ejsでformタグに「とまと」という値を入力して送信し、index.ejsの一覧画面を見てみよう

「とまと」が一つ表示されている

この一覧画面でリロードすると何と「とまと」が2つ表示されてしまうのだ

リロードとは直前のリクエストを実行する機能なので、一覧表示と一緒に追加処理も実行されてしまうのだ

この問題を解決するためにres.redirectし「別のURLに再度リクエストさせる」必要がある

BACK