レコードの新規作成
以下のファイルを追加します。
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>
以下の処理を追記します。
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');
});
});
レコードの更新
以下のファイルを追加します。
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>
以下の処理を追記します。
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');
});
});
モデルを書き換えて更新
以下のように修正します。
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'));
});
});
処理の結果は同じです。
レコードの削除
以下のファイルを追加します。
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>
以下の処理を追記します。
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');
});
});
モデルを取り出して削除する
以下のように修正します。
routes/users.js
router.post('/delete',(req, res, next) => {
db.User.findByPk(req.body.id)
.then(usr => {
usr.destroy().then(() => res.redirect('/users'));
});
});
処理の結果は同じです。