静的ページを表示する

「 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);

ページを追加したい場合

「 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 」を編集した場合は、アプリケーションを起動しなおす必要があります。

静的ファイルの読み込み

example
- bin
  - www
- node_modules
  - ...
- public
  - images
  - javascripts
  - stylesheets
    - style.css
- routes
  - index.js
  - users.js
- views
  - error.ejs
  - index.ejs
- app.js
- package-lock.json
- package.json

上記のようなディレクトリ構成の場合、ビューでの静的ファイルの読み込み方法は、以下のようになります。

スタイルシートの読み込み

<link rel="stylesheet" href="/stylesheets/style.css">

Javascript ファイルの読み込み

<script src="/javascripts/script.js"></script>

画像ファイルの読み込み

<img src="/images/foundation.png" alt="">