検索ボックス - Express

検索ボックスを作る

app.js

var searchRouter = require('./routes/search');
app.use('/search', searchRouter);

routes/search.js

const express = require('express');
const router = express.Router();
const mysql = require('mysql2/promise');

const pool = mysql.createPool({
  host: 'localhost',
  user: 'root',
  database: 'users',
  password: 'password',
});

router.get('/search', (req, res, next) => {
  res.render('search/search');
});

router.post('/search', (req, res, next) => {
  (async () => {
    try {
      let search = req.body.search;
      const [results, fields] = await pool.query('SELECT * FROM users WHERE name LIKE ?', [search]);
      let data;
      
      if(results.length == 0){
        data = { cheak: false, users: results };
      } else {
        data = { cheak: true, users: results };
      }
      res.render('search/search', data);
    } catch (err) {
      console.log(err);
    }
  })();
});
  
module.exports = router;

views/search/search.ejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <title>Member Search</title>
</head>
<body>
  <h1>Member Search</h1>
  <form method="post" action="/search/search">
    <p><input type="text" name="search" id="search"></p>
    <p><input type="submit" value="作成"></p>
  </form>
  <% if (typeof cheak === 'undefined') { cheak = "" }%>
  <% if (cheak == false) { %>
    <p>データがありません。</p>
  <% } else if(cheak == true) { %>
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <% for(let i in users){ %>
        <% let obj = users[i]; %>
        <tr>
          <td><%= obj.id %></td>
          <td><%= obj.name %></td>
          <td><%= obj.age %></td>
        </tr>
      <% } %>
    </table>
    <% } %>
</body>
</html>