node.js超入門ノート4(データを扱う機能編)

# クエリーパラメーターを扱う
routesのhello.jsを以下のように修正します。

```javascript: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;
```
以下のアドレスにアクセスします。
?以降はクエリーパラメーターになります。

http://localhost:3000/hello?name=test&mail=test@test.com

# フォームの送信
フォームの送信はBody Parserというパッケージをインストールしますが、Express Generatorでは標準でインストールされています。
まずはフォームを作成します。

```html: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を修正します。

```javascript: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;
```
以下にアクセスするとフォームを送信できます。

http://localhost:3000/hello

# セッション

セッションはExpress Sessionというパッケージを使うので以下のコマンドでインストールします。

```
npm install express-session
```

次にapp.jsを修正します。

```javascript: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);
```

次にセッションを使って値を読み書きする処理を書きます。

```javascript: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時間

http://localhost:3000/hello/

# 外部サイトにアクセスする
外部サイトからデータを取得します。
以下のコマンドでモジュールをインストールします。

```
npm install xml2js
```

今回はGoogleニュースのRSSデータを所得します。

https://news.google.com/rss?hl=ja&gl=JP&ceid=JP:ja

まずはルーティングを設定します。

```javascript: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;
```

次にテンプレートを修正します。

```html: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が一覧で表示されます。

http://localhost:3000/hello/

https://qiita.com/Glider2355/items/f5a40ecced953bf2403b