javascript - 生の HTML をレンダリングする

Question

.html次のように、Express 3 を使用して raw ページをレンダリングしたいと考えています。

server.get('/', function(req, res) {
    res.render('login.html');
}

これは、生のHTMLページをレンダリングするようにサーバーを構成した方法です（この時代遅れの質問から着想を得ました）：

server
    .set('view options', {layout: false})
    .set('views', './../')
    .engine('html', function(str, options) {
        return function(locals) {
             return str;
        };
    });

残念ながら、この構成ではページがハングし、適切にレンダリングされません。私は何を間違えましたか？Jade や EJS などの高度なレンダリングエンジンを使用せずに、Express 3 を使用して生の HTLM をレンダリングするにはどうすればよいですか?

score 46 · Accepted Answer

あなたが言おうとしていると思うのは、どうすれば静的なhtmlファイルを提供できますか?

それに取り掛かりましょう。

まず、私自身のプロジェクトからのいくつかのコード:

app.configure(function() {
    app.use(express.static(__dirname + '/public'));
});

これは、アプリフォルダー内に public という名前のフォルダーがあることを意味します。css、js、さらには html ページなどの静的コンテンツはすべてここにあります。

実際に静的な html ページを送信するには、これをアプリファイルに追加するだけです

app.get('/', function(req, res) {
  res.sendFile(__dirname + '/public/layout.html');
});

したがって、xyz.com というドメインがあるとします。誰かがそこに行くたびに、ブラウザで layout.html が提供されます。

編集

Express 4 を使用している場合は、状況が少し異なります。ルートとミドルウェアは、配置された順序とまったく同じ順序で実行されます。

良いテクニックの 1 つは、コードを提供する静的ファイルをすべての標準ルートの直後に配置することです。このような：

// All standard routes are above here
app.post('/posts', handler.POST.getPosts);

// Serve static files
app.use(express.static('./public'));

これは、コードのボトルネックを潜在的に取り除くため、非常に重要です。このstackoverflowの回答を見てください（彼が最適化について話している最初のもの）

Express 4.0 のもう 1 つの大きな変更点は、 app.configure() を使用する必要がないことです。

score 20 · Accepted Answer

実際にテンプレートにデータを挿入する必要がない場合、エクスプレスで最も簡単な解決策は、静的ファイルサーバー ( express.static()) を使用することです。

ただし、手動でページへのルートを接続したい場合 (たとえば、'/' を 'login.html' にマッピングする例)、res.sendFile()html ドキュメントを送信してみてください:

http://expressjs.com/api.html#res.sendfile

score 19 · Accepted Answer

fs モジュールを使ってみましたか?

server.get('/', function(req, res) {
    fs.readFile('index.html', function(err, page) {
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.write(page);
        res.end();
    });
}

score 7 · Accepted Answer

ドキュメントが言うように:「Express が期待する: (パス、オプション、コールバック)」 app.engin(...) のフォーマット関数。

以下のようにコードを書くことができます（簡単にするためですが、動作します）：

server
.set('view options', {layout: false})
.set('views', './../')
.engine('html', function(path, options, cb) {
    fs.readFile(path, 'utf-8', cb);
});

もちろん、2# と 3# が言ったように、静的ファイル転送には express.static() を使用する必要があります。上記のコードは本番環境には適していません

score 6 · Accepted Answer

まず、あなたがした間違いは、Express2.xコードスニペットを使用してExpress3.0で生のHTMLをレンダリングしようとしたことでした。Express 3.0以降では、ファイルコンテンツではなく、ファイルパスのみがビューエンジンに渡されます。

解決に向けて、

シンプルなビューエンジンを作成する

var fs = require('fs'); 

function rawHtmlViewEngine(filename, options, callback) {
    fs.readFile(filename, 'utf8', function(err, str){
        if(err) return callback(err);

        /*
         * if required, you could write your own 
         * custom view file processing logic here
         */

        callback(null, str);
    }); 
}

このように使用してください

server.engine('html', rawHtmlViewEngine)
server.set('views', './folder');
server.set('view engine', 'html');

参照

OfficialExpress2.xから3.xへの移行ガイド

このURLの「テンプレートエンジンの統合」セクションを参照してくださいhttps://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x

score 2 · Accepted Answer

Express の最新バージョンの新規インストール後

express the_app_name

app.jsを含むスケルトンディレクトリを作成します。

app.jsには次の行があります。

  app.use(express.static(path.join(__dirname, 'public')));

したがって、 publicという名前のフォルダーで魔法が起こります...

ルーティングは、次のようにモデル化された関数によって行われます。

app.get('/', function(req,res) {
      res.sendfile('public/name_of_static_file.extension');
    });

*例: * public フォルダー内の index.html は、次の行で呼び出されると提供されます。

   app.get('/', function(req,res) {
  res.sendfile('public/index.html');
});

アセットに関する限り: css および javascript ファイルがpublicフォルダーに関連するフォルダーから呼び出されることを確認してください。

通常の Express インストールには、フォルダーを開始するためのstylesheets、javascripts、およびimagesがあります。そのため、スクリプトと css シートのindex.htmlに正しいパスがあることを確認してください。

例:

<link href="stylesheets/bootstrap.css" rel="stylesheet">

また

<script src="javascripts/jquery.js"></script>

score 0 · Accepted Answer

数年後、新しい答えがここにあります。

実際、このアプローチはskypecakes答えのようです。

var fs = require('fs');

app.get('/', function(req, res, next) {
    var html = fs.readFileSync('./html/login.html', 'utf8')
    res.send(html)
})

それで全部です...

また、EJS または Jade を使用する場合は、以下のコードを使用できます。

var fs = require('fs');

app.get('/', function(req, res, next) {
    var html = fs.readFileSync('./html/login.html', 'utf8')
    res.render('login', { html: html })
})

ファイルviews/login.ejsには次のコードのみが含まれています。

<%- locals.html %>

score 0 · Accepted Answer

次のコードを使用して、.html ページをエクスプレスでレンダリングできます。

var app = express();

app.engine('html', ejs.__express);

また、レンダリング中に次のコードを使用できます:-

response.render('templates.html',{title:"my home page"});

score 0 · Accepted Answer

app.get('/', function(req, res) {
  returnHtml(res, 'index');
});

function returnHtml(res, name) {
  res.sendFile(__dirname + '/' + name + '.html');
}

index.html をルートページに配置します。もちろん、たとえば /views フォルダーを作成して returnHtml() 関数を拡張することもできます。

score 0 · Accepted Answer

res.sendFile() を使用してファイルを送信できます。ビューフォルダーにすべてのhtmlファイルを保持し、オプション変数にパスを設定できます。

app.get('/', (req, res)=>{
    var options = {  root: __dirname + '/../views/' };
      var fileName = 'index.html';
      res.sendFile(fileName, options);
});

javascript - 生の HTML をレンダリングする

11 に答える 11

Related

Reference