Express + sequelize でCRUDアプリを作る

前回の記事の続きです

こちらの記事を元にCRUDアプリを作っていきます。

ejsをインストール

これでejsファイルが使えるようになりました。

$ npm install ejs --save

ディレクトリ直下のapp.jsを修正

以下のようにしてください。コピペで大丈夫です。

app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
let db = require("./models/");
var app = express();

// view engine setup
app.set('views', './views');
app.set('view engine', 'ejs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// app.use('/', indexRouter);
app.get('/', (req, res, next) => {
  db.user.findAll({}).then((users) => {
    res.render('index.ejs', {users: users});
  });
});

//新規作成画面のルーティング
app.get('/new', (req, res) => {
  res.render('new.ejs');
});

//新規作成アクション
app.post('/create', (req, res) => {
  db.user.create({
    firstName: req.body.firstName,
    lastName: req.body.lastName,
    email: req.body.email,
    createdAt: new Date(),
    updatedAt: new Date()
  });
  res.redirect('/')
});

//編集画面へのルーティング
app.get('/edit/:id', (req, res, next)=> {
  db.user.findByPk(req.params.id).then(user => {
    res.render('edit.ejs', {user: user});
  });
});

//更新アクション
app.post('/update/:id', (req, res) => {
  db.user.findByPk(req.params.id).then(user => {
    user.id = req.params.id,
    user.firstName = req.body.firstName,
    user.lastName = req.body.lastName,
    user.email = req.body.email,
    user.createdAt = new Date(),
    user.updatedAt = new Date()
    user.save();  
    res.redirect('/');
  });
});

//削除
app.post('/delete/:id', (req, res) => {
  db.user.findByPk(req.params.id).then(user => {
    user.destroy();
    res.redirect('/');
  });
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

ディレクトリ構造を確認&追加

こんな感じでviewsディレクトリ直下にindex.ejs、edit.ejs、new.ejsを新規作成してください。
.
│
├views
│ ├── index.ejs
│ ├── edit.ejs
│ └── new.ejs
│
└── app.js

index.ejsの中身

views/index.ejs

<% users.forEach((user) => { %>
    <li>
        <div>
        <span><%= user.firstName %></span>
        <span><%= user.lastName %></span>
        <span><%= user.email %></span>
        <a href="/edit/<%= user.id %>">詳細</a>
        <form action="/delete/<%= user.id %>" method="post">
            <input type="submit" value="削除">
        </form>
        </div>
    </li>
<% }) %>

new.ejsの中身

view/new.ejs

<form action="/create" method="post">
    <input type="text" placeholder="名前" name="firstName">
    <input type="text" placeholder="苗字" name="lastName">
    <input type="text" placeholder="e-mail" name="email">
    <input type="submit" value="登録する">
</form>

edit.ejsの中身

views/edit.ejs

<form action="/update/<%= user.id %>" method="post">
    <input type="text" placeholder=<%= user.firstName %> name="firstName">
    <input type="text" placeholder=<%= user.lastName %> name="lastName">
    <input type="text" placeholder=<%= user.email %> name="email">
    <input type="submit" value="更新する">
</form>

まとめ

app.jsでルーティングを受け取り、各種アクションを行っています。
途中で出てくるfindAll()やcreate()、findByPkなどは、sequelizeに由来するものです。