静的ページの作成

静的ページを表示する

「 routes 」ディレクトリの中に「 mypage.js 」というファイルを作成します。

「 routes/express.js 」の内容

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/main', function(req, res, next) {
  res.render('myapge/main');
});

module.exports = router;

次に、「 views 」ディレクトリの中に「 mypage 」というディレクトリを作成し、その中に「 main.ejs 」というファイルを作成します。

「 views/mypage/main.ejs 」の内容

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>main paged</title>
</head>
<body>
  <h1>main page</h1>
</body>
</html>

次に、「 app.js 」ファイルに次の内容を追加します。

「 app.js 」に追加する内容

var mypageRouter = require('./routes/mypage');
app.use('/mypage', mypageRouter);

アプリケーションの起動

アプリケーションを起動して、ブラウザから「 http://localhost:3000/mypage/main 」を開いて画面が表示されれば成功です。

ページを追加したい場合

「 mypage 」というディレクトリの中に「 sub.ejs 」というファイルを作成します。

「 views/mypage/sub.ejs 」ファイルの内容

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>sub paged</title>
</head>
<body>
  <h1>sub page</h1>
</body>
</html>

「 routes/mypage.js 」を次のように編集します。

「 routes/mypage.js 」の内容

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/main', function(req, res, next) {
  res.render('myapge/main');
});

/* sub.ejs のルーティングの設定 */
router.get('/sub', function(req, res, next) {
  res.render('myapge/sub');
});

module.exports = router;

アプリケーションを起動したまま、「 routes/mypage.js 」を編集した場合は、アプリケーションを起動しなおす必要があります。

静的ページの作成 - Express