OKAKI

バイク，キャンプ，日本酒，ガジェット，ソフトウェア，Word Press

NEW ARTICLE
Express と Passport と Express-Session と…

Expressでページ作成とルーティング処理

Expressでページ作成とルーティング処理

今回は Express Generator で作成したテンプレートにページを追加します。

環境：
・Windows10
・WSL2（Ubuntu20.04）
・Windows Terminal
・VSCode
・Express + ejs (Express Generator)

目標：
・Express Generator で作成したテンプレートを使用
・新規画面の追加

注意事項：
多々間違いがあると思いますが，ご了承ください。

目次

表示ページを作成

表示するページファイル sample.ejs を以下の場所に作成します。

~/vscode/webappl/appl/views/

作成したファイルに以下のようなページ内容を記述します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>sample</title>
    </head>
    <body>
        <p>Sample Page</p>
    </body>
</html>

ルーティング処理を作成

ルーティング処理のために以下の場所へ sample.js ファイルを作成します。

~/vscode/webappl/appl/routes/

作成したファイルに以下の様に処理を追加します（テンプレートファイルで作成された index.js を参考）。

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

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

module.exports = router;

ルーティング処理を登録

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 sampleRouter = require('./routes/sample');  // <-- 追加

var app = express();

/*～ 省略 ～*/

app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/sample', sampleRouter);  // <-- 追加

/*～ 省略 ～*/

動作確認

アプリケーションを起動して，localhost:3000/sample にアクセスしてみます。

画面が表示されると成功です。

最後に

今回はここまで。

これで，Expressを使用してたページ作成ができました。
これからもExpressを使用したWebアプリケーションを少し触っていきたいと思います。