メモ（Node.js II）

HTML側

<!--　EJSにてitemsを引っ張ってくる -->
<ul class="table-body">
  <% items.forEach((item) => { %>
    <li>
      <div class="item-data">
        <span class="id-column"><%= item.id %></span>
        <span class="name-column"><%= item.name %></span>
      </div>
    </li>
  <% }) %>
</ul>

<!--　フォーム側 -->
<form action="/create" method="post">
  <input type="text" name="itemName">
  <input type="submit" value="作成する">
</form>

mysqlを読み込む

const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'progate',
  password: 'password',
  database: 'list_app'
});

DBから拾ってくる

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

フォームから送信された値を受け取り、表示する

// フォームから送信された値を受け取れるようにしてください
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});
    }
  );
});

DBへの追加とリダイレクト

app.post('/create', (req, res) => {
  connection.query(
    'INSERT INTO items (name) VALUES (?)',
    [req.body.itemName],
    (error, results) => {

      // 一覧画面にリダイレクトしてください
      res.redirect('/index');
      
    }
  );
});