著者：しょっさん
プログラミング言語「JavaScript」の実行環境「Node.js」と「Express」フレームワークを使って、基本となるWebアプリの開発手法を習得しましょう。第1回は「MVC」（Model View Controller）で「見た目」と「ロジック」を分離したWebアプリの開発手順を紹介します。
記事本文掲載のシェルスクリプトマガジンvol.55は以下のリンク先でご購入できます。
|
1 2 3 4 5 |
var indexRouter = require('./routes/index'); var usersRouter = require('./routes/users'); （略） app.use('/', indexRouter); app.use('/users', usersRouter); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
{ "name": "express-crud", "version": "0.0.0", "private": true, "scripts": { "start": "node ./bin/www" }, "dependencies": { "cookie-parser": "~1.4.3", "debug": "~2.6.9", "ejs": "~2.5.7", "express": "~4.16.0", "http-errors": "~1.6.2", "morgan": "~1.9.0", "pg": "^7.4.2", "sequelize": "^4.37.6", "sequelize-cli": "^4.0.0", "sqlite3": "^4.0.0" } } |
|
1 2 3 4 5 6 7 8 9 10 |
{ "development": { "dialect": "sqlite", "storage": ".db.development.sql" }, "production": { "use_env_variable": "DATABASE_URL" } } |
|
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 |
// モデル情報の読み込み const models = require('../models'); // Expressルーターの記述 var express = require('express'); var router = express.Router(); // データを10件読み込んで、Web画面をレンダリングする router.get('/', function(req, res) { models.User.findAll({ order: [ ['id', 'desc'] ], limit: 10 }).then(function(users) { res.render('users', { title: 'Node.js/Express入門: CRUD サンプル', users: users }); }); }); // 新規追加ユーザーの作成 router.post('/create', function(req, res) { models.User.create({ first_name: req.body.first_name, last_name: req.body.last_name, email: req.body.email }).then(function() { res.redirect('/users'); }); }); // 対象IDのユーザー情報を更新 router.post('/update/:id', function(req, res) { models.User.update({ first_name: req.body.first_name, last_name: req.body.last_name, email: req.body.email }, { where: { id: req.params.id } }).then(function() { res.redirect('/users'); }); }); // 対象IDのユーザー情報を削除 router.get('/destroy/:id', function(req, res) { models.User.destroy({ where: { id: req.params.id } }).then(function() { res.redirect('/users'); }); }); // 外部から利用する場合の指定 module.exports = router; |
|
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 |
<!DOCTYPE html> <html> <head> <title><%= title %></title> <link rel='stylesheet' href='/stylesheets/style.css' /> </head> <body> <h1><%= title %></h1> <form action="/users/create" method="post"> <label for="last_name">名前(姓): </label> <input id="last_name" type="text" name="last_name" value=""> <label for="first_name">名前(名): </label> <input id="first_name" type="text" name="first_name" value=""> <label for="email">メールアドレス: </label> <input id="email" type="text" name="email" value=""> <input type="submit" value="新規追加"> </form> <table> <tr> <th>ID</th> <th>名前(姓)</th> <th>名前(名)</th> <th>メールアドレス</th> <th></th> </tr> <% users.forEach(function (user) { %> <tr> <form action="/users/update/<%= user['id'] %>" method="post"> <td><%= user["id"] %></td> <td><input type="text" name="last_name" value="<%= user['last_name'] %>"></td> <td><input type="text" name="first_name" value="<%= user['first_name'] %>"></td> <td><input type="text" name="email" value="<%= user['email'] %>"></td> <td><input type="submit" value="更新"><a href="/users/destroy/<%= user['id'] %>">削除</a></td> </form> </tr> <% }); %> </table> </body> </html> |
