前回の記事の続きです
こちらの記事を元に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に由来するものです。
↧