前提
以下のサイトを見ながらTodoアプリを作っています。
Webアプリを作るのは初めてで、コードの内容が正確に理解できているかは微妙なところですが、とりあえず最後まで完成し、機能を追加してみようと思っています。
https://zenn.dev/wkb/books/node-tutorial
実現したいこと
作成したtodoを削除する機能をつけたいです。
以下のようにindex.ejsの各todoに削除ボタンをつけて、クリックして消せるようにしようと考えています。
index.ejs
1... 2... 3<div class="container"> 4 <div class="row"> 5 <form action="/" method="post"> 6 <label>タスクの追加</label> 7 <input required type="text" name="add" placeholder="何をする?"/> 8 <input type="submit" value="追加"/> 9 </form> 10 <ul> 11 <% for(let todo of todos){ %> 12 <li><span><%= todo.content %></span></li> 13 <form method="post" action="/delete"> 14 <input type="hidden" name="delete_id" value="<%= todo.id %>"> 15 <input type="submit" value="DELETE" class="btn btn-primary"> 16 </form> 17 <% } %> 18 </ul> 19 </div> 20</div> 21... 22...
postで削除するリクエストを送信し、以下のようにdelete.jsで受け取って処理しています。
delete.js
1const express = require('express'); 2const router = express.Router(); 3const knex = require('../db/knex'); 4 5router.post('/', function (req, res, next) { 6 const id = req.body.delete_id; 7 console.log(id); 8 knex('tasks') 9 .where({id: id}) 10 .del(); 11 res.redirect('/'); 12}); 13 14module.exports = router;
発生している問題・エラーメッセージ
コンソールに削除対象のtodoのidは表示されているので、postリクエストは設計した通りに処理されていると思うのですが、データベースからデータが消えません。
試したこと
knexのGithubを見るとdeleteに関しては以下のような記載があり、使い方は合っていると思うのですが、、、
補足情報(FW/ツールのバージョンなど)
一応、index.js, app.js, index.ejsの全体を載せておきます。
delete以外の機能に関しては問題なく動いています。
index.js
1const express = require('express'); 2const router = express.Router(); 3const knex = require('../db/knex'); 4 5router.get('/', function (req, res, next) { 6 const isAuth = req.isAuthenticated(); 7 if(isAuth) { 8 const userId = req.user.id; 9 knex("tasks") 10 .select("*") 11 .where({user_id:userId}) 12 .then(function (results) { 13 res.render('index', { 14 title: 'ToDo App', 15 todos: results, 16 isAuth: isAuth, 17 }); 18 }) 19 .catch(function (err) { 20 console.error(err); 21 res.render('index', { 22 title: 'ToDo App', 23 isAuth: isAuth, 24 }); 25 }); 26 }else { 27 res.render('index', { 28 title: 'ToDo App', 29 isAuth: isAuth, 30 }); 31 } 32}); 33 34router.post('/', function (req, res, next) { 35 const isAuth = req.isAuthenticated(); 36 const todo = req.body.add; 37 const userId = req.user.id; 38 knex("tasks") 39 .insert({user_id: userId, content: todo}) 40 .then(function () { 41 res.redirect('/') 42 }) 43 .catch(function (err) { 44 console.error(err); 45 res.render('index', { 46 title: 'ToDo App', 47 isAuth: isAuth, 48 }); 49 }); 50}); 51 52router.use('/signup', require('./signup')); 53router.use('/signin', require('./signin')); 54router.use('/logout', require('./logout')); 55router.use('/delete', require('./delete')); 56 57module.exports = router;
app.js
1const createError = require('http-errors'); 2const express = require('express'); 3const path = require('path'); 4const cookieParser = require('cookie-parser'); 5const logger = require('morgan'); 6const flash = require('connect-flash'); 7 8const app = express(); 9 10app.use(flash()); 11 12// view engine setup 13app.set('views', path.join(__dirname, 'views')); 14app.set('view engine', 'ejs'); 15 16app.use(logger('dev')); 17app.use(express.json()); 18app.use(express.urlencoded({ extended: false })); 19app.use(cookieParser()); 20app.use(express.static(path.join(__dirname, 'public'))); 21 22// authorization 23require("./config/passport")(app); 24 25// router 26app.use('/', require('./routes')); 27 28// catch 404 and forward to error handler 29app.use(function(req, res, next) { 30 next(createError(404)); 31}); 32 33// error handler 34app.use(function(err, req, res, next) { 35 // set locals, only providing error in development 36 res.locals.message = err.message; 37 res.locals.error = req.app.get('env') === 'development' ? err : {}; 38 39 // render the error page 40 res.status(err.status || 500); 41 res.render('error'); 42}); 43 44module.exports = app;

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。