Expressポストルータに送信されたデータをレンダリングします

Question

私はExpressから始まりますが、私は質問があります。私はセットアップとすべてを持っている、私はいくつかの簡単なことを作ったが、私は私がそれを取得したいデータにする必要があることをするために、APIと対話したいと知っているinputフィールドからです。送信されたデータをメイン（/）ページに更新したいと思います。クライアント側のAjaxリクエストと同様です。私はポストルータに送られたデータを、別のリンク（すなわち、localhost：3000/link）に行く必要なく、ルータを経由して送る方法を知らないので、リクエストが行われたのと同じページにとどまりたい。

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

/* GET home page. */ 
router.get('/', (req, res, next) => { 
    res.render('index'); 
}); 

/* POST HANDLER */ 
router.post('/link', function(req, res, next) { 
    console.log(req.body); 
}); 

module.exports = router; 

jQueryの：私は、テンプレート

Expressでパグ（ヒスイ）を使用してい

$('#shortLink').on('click',() => { 
    $.ajax({ 
     type: 'POST', 
     url: '/link', 
     data: $('linkInput').val() 
    }); 
}); 

だから、明確にします。ユーザーは何かを入力フィールドに置きます。そのデータをポストルータに送信すると、ポストルータに送信された情報を、リクエストが行われたページを離れることなく、取得ルータに送信されるようにしたいと考えています。私が自分自身をとてもうまく説明していないかどうかを教えてください。

Answer 1

body parserがセットアップされていて、テンプレートの仕組みがどのようになっているかを理解しています。

これで、何らかの理由でサーバーのどこかにデータを保存することができます。今、あなたはちょうどそれを変数に保存することができ、非常に単純な場合には：

var data = null; 
router.get('/', (req, res, next) => { 
    res.render('index', { data: null }); 
}); 

router.post('/link', function(req, res, next) { 
    data = req.body 
    res.send(''); 
}); 

次に、あなたのテンプレートで、あなたはp= dataを行うことができます。

postから/linkに変更した後、次回の更新時に/にデータが表示されます。

しかし、ほとんどのWebアプリケーションでは、人々はこれらのことをデータベースに保存します。ここan example for MongoDBは、特定の文書にデータを保存します：

router.get('/', (req, res, next) => { 
    collection.findOne({ id: 'specificDoc'}, function (err, result) { 
     if (err) { 
      next(err); 
      return; 
     } 
     res.render('index', { data: result.data }); 
    }); 
}); 

router.post('/link', function(req, res, next) { 
    collection.update({ id: 'specificDoc', { data: req.data }, { upsert: true }, function (err, result) { 
     if (err) { 
      next(err); 
      return; 
     } 
     res.send(''); 
    }); 
}); 

おそらく、あなたはまた、セッションの使用を開始し、クッキーや他の方法を使用して、ユーザーに応じて、データを保存することがあります。 expressでセッションを使用する場合はHere's a toturialです。