Node.jsアプリケーションにおいてMySQLのデータに対する編集機能（UPDATE）を実装してみます。
本記事は下記関連ページの続きです。
編集機能を追加しています。MySQLにデータが登録されているとトップページ（localhost:3000/）にそのデータ一覧と削除ボタンおよび編集ボタンが表示されます。
編集ボタンをクリックすると編集画面（localhost:3000/edit?id=○○）に切り替わります。
前回の記事から、編集画面用のedit.ejsのファイルを新規作成しています。
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
const express = require('express'); const mysql = require('mysql'); const { check, validationResult } = require('express-validator/check'); const router = express.Router(); const mysql_setting = { host: '127.0.0.1', user: 'root', password: 'pass', database: 'sample01' } //localhost:3000/ router.get('/', function (req, res, next) { const connection = mysql.createConnection(mysql_setting); connection.connect(); connection.query('SELECT * FROM name', function (error, results, fields) { if (error) throw error; res.render('index', { content: results }); }); connection.end(); }); //localhost:3000/add router.get('/add', function (req, res, next) { const data = { errorMessage: '' } res.render('add', data); }); //localhost:3000/addへのPOST router.post('/add', [ check('name') .not().isEmpty().trim().escape().withMessage('名前を入力して下さい'), ], (req, res, next) => { const errors = validationResult(req); if (!errors.isEmpty()) { const errors_array = errors.array(); res.render('add', { errorMessage: errors_array, }) } else { const name = req.body.name; const post = { 'name': name }; const connection = mysql.createConnection(mysql_setting); connection.connect(); connection.query('INSERT INTO name SET ?', post, function (error, results, fields) { if (error) throw error; res.redirect('./'); console.log('ID:', results.insertId); }); connection.end(); } }) //localhost:3000/delete router.post('/delete', (req, res, next) => { const id = req.body.id; const connection = mysql.createConnection(mysql_setting); connection.connect(); connection.query('DELETE FROM name WHERE id=?', id, function (error, results, fields) { if (error) throw error; res.redirect('./'); }); connection.end(); }) //localhost:3000/edit router.get('/edit', function (req, res, next) { const id = req.query.id; const connection = mysql.createConnection(mysql_setting); connection.connect(); connection.query('SELECT * FROM name WHERE id=?', id, function (error, results, fields) { if (error) throw error; if (!results.length) { res.redirect('../'); } else { const data = { id: id, name: results[0].name, errorMessage: '' }; res.render('edit', data); } }); connection.end(); }); //localhost:3000/editへのPOST router.post('/edit', [ check('name') .not().isEmpty().trim().escape().withMessage('名前を入力して下さい'), ], (req, res, next) => { const errors = validationResult(req); if (!errors.isEmpty()) { const errors_array = errors.array(); res.render('edit', { id: req.body.id, name: '名前', errorMessage: errors_array }) } else { const id = req.body.id; const name = req.body.name; const post = { 'name': name }; const connection = mysql.createConnection(mysql_setting); connection.connect(); connection.query('UPDATE name SET ? WHERE id = ?', [post, id], function (error, results, fields) { if (error) throw error; res.redirect('../') }); connection.end(); } }); module.exports = router; |
index.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <a href="./add">追加</a> <table> <% for(let i in content) { %> <tr> <% let obj = content[i]; %> <td> <%= obj.id %> </td> <td> <%- obj.name %> </td> <td> <form action="./delete" method="post"> <input type="hidden" name="id" value="<%= obj.id %>"> <button type="submit" name="button">削除</button> </form> </td> <td> <form action="./edit" method="get"> <input type="hidden" name="id" value="<%= obj.id %>"> <button type="submit">編集</button> </form> </td> </tr> <% } %> </table> </body> </html> |
edit.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <head> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <form action="/edit" method="post"> <input type="text" name="name" value="<%- name %>"> <input type="hidden" name="id" value="<%= id %>"> <button type="submit" name="button">編集</button> </form> <% if(errorMessage) { %> <ul> <% for (let n in errorMessage) { %> <li> <%= errorMessage[n].msg %> </li> <% } %> </ul> <% } %> </body> </html> |
