クエリーパラメーターを扱う
routesのhello.jsを以下のように修正します。
routes/hello.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', (req, res, next) => {
var name = req.query.name;
var mail = req.query.mail;
var data = {
title: 'Hello!',
content: 'あなたの名前は、' + name + '。<br>' + 'メールアドレスは、' + mail + 'です。'
};
res.render('hello', data);
});
module.exports = router;
以下のアドレスにアクセスします。
?以降はクエリーパラメーターになります。
フォームの送信
フォームの送信はBody Parserというパッケージをインストールしますが、Express Generatorでは標準でインストールされています。
まずはフォームを作成します。
views/hello.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<header>
<h1 class="display-4"><%= title %></h1>
</header>
<div role="main">
<p class="h6"><%- content %></p>
<form action="/hello/post" method="post">
<div class="form-group">
<label for="msg">Massage:</label>
<input type="text" name="message" id="msg" class="form-control">
</div>
<input type="submit" value="送信" class="btn btn-primary">
</form>
</div>
</body>
</html>
次にroutesのhello.jsを修正します。
routes/hello.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', (req, res, next) => {
var name = req.query.name;
var mail = req.query.mail;
var data = {
title: 'Hello!',
content: '※何か書いて送信してください。'
};
res.render('hello', data);
});
router.post('/post', (req, res, next) => {
// 送信内容をmsgにまとめる。
var msg = req.body['message'];
var data = {
title: 'Hello!',
content: 'あなたは、「' + msg + '」と送信しました。'
}
res.render('hello', data);
});
module.exports = router;
以下にアクセスするとフォームを送信できます。
セッション
セッションはExpress Sessionというパッケージを使うので以下のコマンドでインストールします。
npm install express-session
次にapp.jsを修正します。
app.js
const session = require('express-session');
var app = express();
// セッション
var session_opt = {
//秘密キーのテキスト(任意)
secret: 'keboard cat',
// セッションストアに強制的に値を保存するためのもの
resave: false,
// 初期化されていない値を強制的に保存するためのもの
saveUninitialized: false,
// クッキーの設定(maxAgeで保管期間1時間に設定)
cookie: { maxAge: 60 * 60 * 1000 }
};
app.use(session(session_opt));
// ルーター
app.use('/', indexRouter);
次にセッションを使って値を読み書きする処理を書きます。
routes/hello.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', (req, res, next) => {
var msg = '※何か書いて送信してください。';
// セッションの値を取り出す
if (req.session.message != undefined) {
msg = "Last Message: " + req.session.message;
}
var data = {
title: 'Hello!',
content: msg
};
res.render('hello', data);
});
router.post('/post', (req, res, next) => {
// セッションに値を保存
var msg = req.body['message'];
req.session.message = msg;
var data = {
title: 'Hello!',
content: "Last Message: " + req.session.message
};
res.render('hello', data);
});
module.exports = router;
以下にアクセスしフォーム送信後、再度アクセスしても送信されたメッセージが保存されています。
保存の有効期間はクッキーの保管期間で設定した1時間
外部サイトにアクセスする
外部サイトからデータを取得します。
以下のコマンドでモジュールをインストールします。
npm install xml2js
今回はGoogleニュースのRSSデータを所得します。
まずはルーティングを設定します。
routes/hello.js
const express = require('express');
var router = express.Router();
const http = require('https');
const parseString = require('xml2js').parseString;
router.get('/', (req, res, next) => {
var opt = {
host: 'news.google.com',
// httpsは443番ポート番号(httpは80番)
port: 443,
path: '/rss?hl=ja&ie=UTF-8&oe=UTF-8&gl=JP&ceid=JP:ja'
};
http.get(opt, (res2) => {
var body = '';
res2.on('data', (data) => {
body += data;
});
res2.on('end', () => {
parseString(body.trim(), (err, result) => {
console.log(result);
var data = {
title: 'Google News',
content: result.rss.channel[0].item
};
res.render('hello', data);
});
});
});
});
module.exports = router;
次にテンプレートを修正します。
views/hello.ejs
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html">
<title><%= title %></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="/stylesheets/style.css" />
</head>
<body class="container">
<header>
<h1 class="display-4"><%= title %></h1>
</header>
<div role="main">
<% if (content != null) { %>
<ol>
<% for(var i in content) { %>
<% var obj = content[i]; %>
<li><a href="<%=obj.link %>">
<%= obj.title %>
</a></li>
</tr>
<% } %>
</ol>
<% } %>
</div>
</body>
</html>
以下のURLにアクセスするとGoogle Newsが一覧で表示されます。