【Node】複数ページの作成(クエリパラメータ、フォーム)

こんにちは。
本日は複数のページを作成する方法です。
今回はあえてExpress Generatorを使わずに作成します。
Express Generatorは以下の記事で紹介しています。

nandakagoodvibes.hatenablog.com

では、見ていきましょう。

概要
フォルダ構成
各ソースの説明
- app.js
- index.js
- query.js
- form.js
- index.ejs
- query.ejs
- form.ejs

概要

ページは3つ用意。

index : 基本的なページ
query : クエリパラメータで受け取った値を表示
form : フォーム送信画面、フォームで受信した値を表示する画面

フォルダ構成

--sample
  -- public
    -- style.css
  -- router
    -- index.js
    -- query.js
    -- form.js
  -- views
    -- index.ejs
    -- query.ejs
    -- form.ejs
 -- app.js

各ソースの説明

簡単ではありますが各ソースの紹介をします。
style.cssは省略します。

app.js

このファイルで行っていることは以下。

routerフォルダ配下のファイルrequireして読み込み
アクセスに応じた処理を設定
必要なモジュールの読み込み

var express = require('express');

// routerフォルダ配下のファイルrequireして読み込み。
var indexRouter = require('./router/index');
var queryRoter = require('./router/query');
var formRouter = require('./router/form');

var app = express();

// エンジンがejsであることを設定
app.set('view engine', 'ejs');

// フォーム用モジュールの読み込み
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended : false}));

// アクセスに応じた処理を設定
app.use('/', indexRouter);
app.use('/query', queryRoter);
app.use('/form', formRouter);
app.use(express.static('public'));

var server = app.listen(3000, () => {
    console.log('Server start!');
});

index.js

「/」アクセス時の処理。
titleとcontentを返します。

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

router.get('/', (req, res) => {
    res.render('index.ejs', {
        title : 'Index Page',
        content : 'Hello!'});
})

module.exports = router;

query.js

「/query」アクセス時の処理。
クエリパラメータに設定された値を取得して
titleとcontentを返します。

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

router.get('/', (req, res) => {
    var name = req.query.name;
    res.render('query.ejs', {
        title : 'Query Page.',
        content : 'Hello ' + name + '.'
    });
})

module.exports = router;

form.js

「/form」アクセス時の処理。
getとpostの処理があります。
postの処理でフォーム送信された値を取得します。

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

router.get('/', (req, res) => {
    res.render('form.ejs', {
        title : 'Form Page.',
        content : '何か入力してください。'
    });
});

router.post('/', (req, res) => {
    var msg = req.body['message'];

    res.render('form.ejs', {
        title : 'Form Page.',
        content : 'あなたは「' + msg + '」と入力しました。'
    });
});

module.exports = router;

index.ejs

indexページのテンプレートです。
titleとcontentを受け取って表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="texl/html; charset=UTF-8">
    <title><%= title %></title>
    <link type="text/css" href="./style.css" rel="stylesheet">
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
    </div>
</body>
</html>

query.ejs

queryページのテンプレートです。
titleとcontentを受け取って表示します。

<!DOCTYPE html>
<html lang="ja">
<head>
※index.ejsと同様のため省略
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
    </div>
</body>
</html>

form.ejs

formページのテンプレートです。
titleとcontentを受け取って表示します。
formタグでフォームの作成をしています。

<!DOCTYPE html>
<html lang="ja">
<head>
※index.ejsと同様のため省略
</head>

<body>
    <head>
        <h1><%= title %></h1>
    </head>
    <div role="main">
        <p><%- content %></p>
        <form action="/form" method="POST">
        <p><input type="text" name="message">
            <input type="submit" value="送信"></p>
        </form>
    </div>
</body>
</html>

以上です。
まだまだ改善の余地はあるのですが
この方法でページを作成することができます。
Generatorが使えないときの備えて知っておくといいですね。

なんだかGoodVibes

日々の勉強メモです。