はじめに
前回の投稿でExpressのひな型を生成しました。
今回は新規ページ（Hello World）を作成します。
環境
OS:Windows 10 Pro 64bit
node.js:v12.16.1
npm:v6.13.4
Express:v4.16.1
jsファイル作成
routesフォルダにhello.jsを作成します。
hello.js
var express = require('express');
var router = express.Router();
router.get('/', function(req, res, next) {
res.render('hello', {
msg: 'Hello World'
});
});
module.exports = router;
ejsファイル作成
viewsフォルダにhello.ejsを作成します。
hello.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<%= msg %>
</body>
</html>
app.jsの修正
ルート直下にあるapp.jsに次の2行を追加します。
var hello = require('./routes/hello');
app.use('/hello', hello);
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var hello = require('./routes/hello'); // ←追加
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/hello', hello); // ←追加
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
以上で追加作業は終わりです。サーバーを実行して動作確認をします。
動作確認
コマンドプロンプトで次のコマンドを実行します。
npm start
ブラウザで「http://localhost:3000/hello」にアクセスします。
次のキャプチャが表示されればOKです。
まとめ
このような流れでページ追加をすることが出来ます。