node.js超入門ノート10(SequelizeでのCRUD編)

# レコードの新規作成
以下のファイルを追加します。

```html:views/users/add.ejs
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">

        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>
        <div role="main">
            <form action="/users/add" method="post">
                <div class="form-group">
                    <label for="name">NAME</label>
                    <input type="text" name="name" id="name" class="form-control">
                </div>
                <div class="form-group">
                    <label for="pass">PASSWORD</label>
                    <input type="password" name="pass" id="pass" class="form-control">
                </div>
                <div class="form-group">
                    <label for="mail">MAIL</label>
                    <td><input type="text" name="mail" id="mail" class="form-control">
                </div>
                <div class="form-group">
                    <label for="age">AGE</label>
                    <td><input type="number" name="age" id="age" class="form-control">
                </div>
                <input type="submit" value="作成" class="btn btn-primary">
            </form>
        </div>
    </body>
</html>
```
以下の処理を追記します。

```javascript:routes/users.js
router.get('/add',(req, res, next) => {
  var data = {
    title: 'Users/Add'
  }
  res.render('users/add', data);
});

router.post('/add',(req, res, next) => {
  db.sequelize.sync()
    .then(() => db.User.create({
    name: req.body.name,
    pass: req.body.pass,
    mail: req.body.mail,
    age: req.body.age
    }))
    .then(usr => {
      res.redirect('/users');
    });
});
```
http://localhost:3000/users/add

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111200/3384db5b-aab1-357c-18e6-2ed910887dbd.png)

# レコードの更新
以下のファイルを追加します。

```html:views/users/edit.ejs
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">

        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>
        <div role="main">
            <form action="/users/edit" method="post">
                <input type="hidden" name="id" value="<%= form.id %>">
                <div class="form-group">
                    <label for="name">NAME</label>
                    <input type="text" name="name" id="name" class="form-control" value="<%= form.name %>">
                </div>
                <div class="form-group">
                    <label for="pass">PASSWORD</label>
                    <input type="text" name="pass" id="pass" class="form-control" value="<%= form.pass %>">
                </div>
                <div class="form-group">
                    <label for="mail">MAIL</label>
                    <td><input type="text" name="mail" id="mail" class="form-control" value="<%= form.mail %>">
                </div>
                <div class="form-group">
                    <label for="age">AGE</label>
                    <td><input type="number" name="age" id="age" class="form-control" value="<%= form.age %>">
                </div>
                <input type="submit" value="更新" class="btn btn-primary">
            </form>
        </div>
    </body>
</html>
```
以下の処理を追記します。

```javascript:routes/users.js
router.get('/edit',(req, res, next) => {
  db.User.findByPk(req.query.id)
  .then(usr => {
    var data = {
      title: 'Users/Edit',
      form: usr
    }
    res.render('users/edit', data);
  });
});

router.post('/edit',(req, res, next) => {
  db.sequelize.sync()
    .then(() => db.User.update({
    name: req.body.name,
    pass: req.body.pass,
    mail: req.body.mail,
    age: req.body.age
    },
    {
      where:{id:req.body.id}
    }))
    .then(usr => {
      res.redirect('/users');
    });
});
```

http://localhost:3000/users/edit?id=1

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111200/03c53506-b4cf-6ca7-6712-bb364bf63dd6.png)

## モデルを書き換えて更新
以下のように修正します。

```javascript:routes/users.js
router.post('/edit',(req, res, next) => {
  db.User.findByPk(req.body.id)
    .then(usr => {
    usr.name = req.body.name;
    usr.pass = req.body.pass;
    usr.mail = req.body.mail;
    usr.age = req.body.age;
    usr.save().then(() => res.redirect('/users'));
    });
});
```
処理の結果は同じです。

# レコードの削除
以下のファイルを追加します。

```html:views/users/delete.ejs
<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">
        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>

        <div role="main">
            <table class="table">
                <tr>
                    <th>NAME</th>
                    <td><%= form.name %></td>
                </tr>
                <tr>
                    <th>PASSWORD</th>
                    <td><%= form.pass %></td>
                </tr>
                <tr>
                    <th>MAIL</th>
                    <td><%= form.mail %></td>
                </tr>
                <tr>
                    <th>AGE</th>
                    <td><%= form.age %></td>
                </tr>
                <tr>
                    <th></th>
                    <td></td>
                </tr>
            </table>
            <form action="/users/delete" method="post">
                <input type="hidden" name="id" value="<%= form.id %>">
                <input type="submit" value="削除" class="btn btn-primary">
            </form>
        </div>
    </body>
</html>
```
以下の処理を追記します。

```javascript:routes/users.js
router.get('/delete',(req, res, next) => {
  db.User.findByPk(req.query.id)
  .then(usr => {
    var data = {
      title: 'Users/Delete',
      form: usr
    }
    res.render('users/delete', data);
  });
});

router.post('/delete',(req, res, next) => {
  db.sequelize.sync()
    .then(() => db.User.destroy({
      where:{id:req.body.id}
    }))
    .then(usr => {
      res.redirect('/users');
    });
});
```

http://localhost:3000/users/delete?id=5

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1111200/733e8e19-f9bb-3f62-52d5-1a9689e03eef.png)

## モデルを取り出して削除する
以下のように修正します。

```javascript:routes/users.js
router.post('/delete',(req, res, next) => {
  db.User.findByPk(req.body.id)
    .then(usr => {
      usr.destroy().then(() => res.redirect('/users'));
    });
});
```
処理の結果は同じです。

https://qiita.com/Glider2355/items/9b3038ce797eb8da975c