16.
コントローラー
MVC
MVC とは
現状のルーティングファイルを修正し、MVCのアーキテクチャに対応します。
ファイル構造
express_mvc/
├── controllers/
│ ├── HomeController.js
│ ├── ItemController.js
│ └── UserController.js
├── data/
│ └── items.json
├── models/
│ └── item.js
├── node_modules
├── package-lock.json
├── package.json
├── public/
│ ├── images/
│ └── js/
├── routes.js
├── server.js
└── views/
├── components/
│ ├── footer.ejs
│ └── nav.ejs
├── index.ejs
├── item/
│ ├── index.ejs
│ └── show.ejs
├── layouts/
│ └── default.ejs
├── profile/
│ └── index.ejs
└── user/
└── index.ejs
トップページ
コントローラー作成
controllers/ にHomeControllerを作成します。
メソッド追加
index、profile メソッドを追加し、routes.js の処理を移植します。
controllers/HomeController.js
const user = require('../models/user')
exports.index = (req, res) => {
// routes.js から移植
var data = {}
data.title = 'トップページ';
res.render('index.ejs', data);
}
exports.profile = (req, res) => {
// routes.js から移植
var data = {};
data.title = 'プロフィール';
data.user = {
id: 1,
name: '横浜 太郎',
birthplace: '横浜',
hobby: ['旅行', 'グルメ', 'スポーツ'],
}
res.render('profile/index.ejs', data);
}
ルーティング
コントローラーモジュール読み込み
「routes.js」から、HomeController モジュールを読み込みます。
routes.js
const HomeController = require('./controllers/HomeController')
ルーティング修正
ルーティング処理で、HomeControllerのメソッドを実行するように修正します。
routes.js
const HomeController = require('./controllers/HomeController')
router.get('/', HomeController.index)
router.get('/profile', HomeController.profile)
商品画面
コントローラーの作成
controllers/ に ItemController を作成します。
モデル読み込み
Itemモデル models/item を読み込みます。
ItemController.js
const item = require('../models/item');
メソッド追加
index、show メソッドを追加し、routes.js の処理を移植します。
ItemController.js
const item = require('../models/item');
exports.index = (req, res) => {
var data = { items: item.values };
data.title = '商品一覧';
res.render('item/index.ejs', data);
}
exports.show = (req, res) => {
const id = req.params.id;
var data = {
item: item.find(id),
title: "商品情報",
message: "";
};
if (!data.item) data.message = '商品が見つかりませんでした';
res.render('item/show.ejs', data);
}
ルーティング
routes.js で、ItemController.js を読み込んでルーティングします。
const itemController = require('./controllers/ItemController')
router.get('/item', ItemController.index)
router.get('/item/:id', ItemController.show)
MVC の動作確認
各ページで MVC で動作するか確認をしてみましょう。
ソース
routes.js
const express = require('express')
const router = express.Router()
// Controller
const HomeController = require('./controllers/HomeController')
const ItemController = require('./controllers/ItemController')
const LoginController = require('./controllers/LoginController')
const UserController = require('./controllers/UserController')
//home
router.get('/', HomeController.index)
router.get('/profile', HomeController.profile)
//item
router.get('/item', ItemController.index)
router.get('/item/:id', ItemController.show)
//login
router.get('/login', LoginController.index)
router.post('/login/auth', LoginController.auth)
router.post('/login/logout', LoginController.logout)
//user
router.get('/user', UserController.index)
module.exports = router
controllers/HomeController.js
const user = require('../models/user')
exports.index = (req, res) => {
var data = {}
data.title = 'トップページ';
res.render('index.ejs', data);
}
exports.profile = (req, res) => {
var data = {};
data.title = 'プロフィール';
data.user = {
id: 1,
name: '横浜 太郎',
birthplace: '横浜',
hobby: ['旅行', 'グルメ', 'スポーツ'],
}
res.render('profile/index.ejs', data);
}
controllers/ItemController.js
const item = require('../models/item');
exports.index = (req, res) => {
var data = { items: item.values };
data.title = '商品一覧';
res.render('item/index.ejs', data);
}
exports.show = (req, res) => {
const id = req.params.id;
var data = {
item = item.find(id),
title = "商品情報",
message = "",
}
if (!data.item) data.message = '商品が見つかりませんでした';
res.render('item/show.ejs', data);
}
演習
問題1
「login/」にアクセスしたら、ログインページを表示するようにルーティングしてみましょう。
ファイル構造
express_mvc/
├── controllers/
│ ├── ...
│ └── UserController.js
└── views/
├── ...
├── login/
│ └── index.ejs