1

これは複数の部分からなる質問であり、私はNodeの完全な初心者なので、優しくしてください:)

ルーティングを使用せずにindex.htmlを返す非常に単純なNode/expressアプリを設定しています...

var app = express();
var port = process.env.PORT || 1337;


app.use('/i', express.static(__dirname + '/i'));
app.use('/Stylesheets', express.static(__dirname + '/Stylesheets'));
app.use(express.static(__dirname));


app.listen(port);
console.log('listening on port ' +  port);

index.htmlは静的ファイルとして提供されます。

私の次の仕事は、適切なルーティングで数ページを返すことです。ルートをroutes.jsファイルに入れ、そのファイルをserver.jsファイルに「要求」する必要があると考えていますが、できます。ルートの設定に頭を悩ませないでください。オンラインで表示されるすべての例/デモは、異なる方法で実行されているようです。これを行う方法の決定的な例は本当にありがたいです。

問題の次の部分は、動的ページを含めたいが、テンプレートエンジンをどこに使用すればよいかわからないことです。ブラウザーで表示したときに元のHTMLファイルが引き続き意味をなすように、「目立たない」ものを使用したいと思います。

フロントエンドでは、最初にセレクターを使用し、次に.html（）メソッドを使用してHTMLをページに挿入するだけで、JSONデータをテンプレートにバインドし、それを見て適切な場所に挿入できます。クラス名などの場合。これはまったく目立たず、醜い{}ブラケット、インラインjavascript、またはディレクティブを必要としません。疑似コード...

var data  = {"name":"John"};
var result = templateEngine.bind("/template.html", data)


$('.person').html(result);

そうすれば、次のように、元のHTMLをクリーンで表示可能な状態に保つことができます...

<div class="person">
    My Name is FirstName
</div>

私が見つけることができる最も近いものはPURE（http://beebole.com/pure）ですが、NODEで（または互換性があるとしても）それを機能させる方法がわかりません。

さらに複雑にするために、使用するテンプレートエンジンはすべて、サブテンプレート（部分？）を使用できる必要があります。これにより、すべてのページで同じヘッダー/フッターなどを含めることができます。これは、必要に応じて各メインテンプレート内からサブテンプレートを参照することで再帰的に実行できると思いますか？

あなたがまだこれを読んでいるなら、明らかにあなたは私がここで新しい技術に悩まされていることを理解しているでしょう、そしてどんな助けも本当にありがたいです！

4

2 に答える 2

2

しかし、ルートの設定に頭を悩ませることはできず、オンラインで見るすべての例/デモは別の方法でそれを行っているようです. これを行う方法の決定的な例があれば、本当に感謝しています。

例で何が違うのかわかりませんが、一般的なパターンは次のようになります。

app.**[HTTP VERB]**(**[URL]**, function(req, res){
    res.end('<html>hello world</html>');
});

次のコードは、サイトのルート URL へのすべての HTTP GET 要求を受け入れます。

app.get('/', function(req, res){
    res.end('<html>hello world</html>');
});

次のコードは、サイトの /test へのすべての HTTP GET 要求を受け入れますが、

app.get('/test', function(req, res){
    res.end('<html>hello world from the test folder</html>');
});

HTTP POST リクエスト用に別のルートを持つのが一般的です (たとえば、ユーザーがデータをサーバーに送信するとき)。この場合、HTTP 動詞は次の例のように POST です。

app.post('/test', function(req, res){
    res.end('<html>Thanks for submitting your info</html>');
});

この場合、この質問の例をより明確にするために、外部のroutes.jsを参照するのではなく、リクエストを直接処理するコードを埋め込んでいます。実際のアプリケーションでは、外部関数を参照することでこれを行い、app.js をスリムでクリーンな状態に保ちます。

app.get('/test', routes.NameOfFunctionToHandleGetForSlashTest);
app.post('/test', routes.NameOfFunctionToHandlePostForSlashTest);
于 2012-11-29T14:52:43.223 に答える
1

これは古い質問であることは知っていますが、最近このトピックを調査し、次の解決策を思いつきました。

私の元の質問

次の構成を ejs に配置しました。

 var ejs = require('ejs');

 server.configure(function(){
    server.set("view options", {layout: false});  
    server.engine('html', require('ejs').renderFile); 
    server.use(server.router);
    server.set('view engine', 'html');
    server.set('views', __dirname + "/www");
 });

これにより、ビュー エンジンが ejs として設定され、ビュー ディレクトリが static public html ディレクトリとして設定され、.ejs ではなく .html ファイルを処理するように ejs に指示されます。

ルートは次のように処理できます。

 server.all("*", function(req, res, next) {
      var request = req.params[0];

          if((request.substr(0, 1) === "/")&&(request.substr(request.length - 4) === "html")) {
          request = request.substr(1);
          res.render(request);
      } else {
          next();
      }

  });

 server.use(express.static(__dirname + '/www'));

これにより、すべての html リクエストがビュー エンジンを介してルーティングされ、他のすべてのリクエストがスタックに渡されて静的ファイルとして送信されます。

HTML は次のようになります。

  <%include head.html%>
  <%include header.html%>

  <p class="well">Hello world!</p>

  <%include footer.html%>

インクルードをネストして、変数をインクルードに渡すことができます。たとえば、インクルード ヘッドは次のように呼び出すことができます。

 <title> <%= title %> </title>

インデックス ページの上部に、次のようなオブジェクトを含めることができます。

 {var title: "Home"}

とにかく、これは、通常の html に固執しながらインクルードを処理するための超簡単な方法を探している人を助けるかもしれません。

于 2013-05-10T01:25:11.530 に答える