Alex Ronin
狂おしい技術家
原文:https://frontnet.eu/node-js-v...
無断転載は厳禁です.
Node jsビューエンジンはLaravelのBladeのようです.その基本的な定義は、ビューエンジンは、通常より短く、より簡単な方法でHTMLコードを作成し、再利用するためのツールです.また、サーバーからデータを導入して、最終的なHTMLをレンダリングすることもできます.Node.jsプロジェクトのいくつかの一般的なビューエンジンは以下の通りです.
Nod.jsビューエンジンとは?

EJS

Pug(Formerly Jade)

Handlebars

Haml.js

Nunjucks

…

今日は上のテンプレートを試してみます.どちらが使いやすいか見てみます.始めましょう
EJS
まず、本論文のためにデモンストレーションプログラムを作成するには、ExpressJSでプロジェクトを作成する必要があります.このプロジェクトはexpress-generatorを使って迅速に作成できます.

sudo npm install express-generator -g
express --view=ejs Demo_EJS

上記のコマンドを実行してNode.js ejsビューエンジンでプロジェクトを作成する時、私達のプロジェクトは以下のディレクトリ構造を持っています.
上記の命令により、EJSビューエンジンでExpressプロジェクトを作成しました.このビューエンジンは、ap.jsファイルに以下のように設定されています.

//...
//view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
 
//...

次にどのように使うかを説明します.ウェブサイトの基本レイアウトを作成し、サーバーからデータをレンダリングします.まず、サーバからデータをレンダリングします.
routes/index.jsファイルを編集します.

var express = require('express');
var router = express.Router();
 
/* GET home page. */
router.get('/', function(req, res, next) {
 
  let list = [
      {name: 'PHP'},
      {name: 'Ruby'},
      {name: 'Java'},
      {name: 'Python'},
      {name: 'dotNet'},
      {name: 'C#'},
      {name: 'Swift'},
      {name: 'Pascal'},
  ]
  res.render('index', {title: 'Demo Ejs', list: list});
});
 
module.exports = router;

index.ejsファイルの内容:

  
    
    
  
  
    {{> header}}
    {{{body}}}
    {{> footer}}
  

 
// file /views/partials/header.hbs
This is header
 
 //file /views/partials/footer.hbs 
 
 This   is   footer 
 
 
 //file index.hbs 
 
 {{title}} 
 
 List of programming languages 
 
 
   {{#each list}} 
     
 {{name}} 
 
   {{/each }} 
 

結論
Nodejsプロジェクトで人気のあるビューエンジンをテストしました.あなたの開発作業でPugを選ぶことができます.とても分かりやすいからです.
この記事の最初のWeChat公式アカウント:フロントエンドのパイオニア
QRコードをスキャンして公衆番号に注目してください.毎日新鮮な先端技術文章を送ります.
このコラムの他の高賛記事を読み続けてください.

Shadow DOM v 1

を深く理解する.

一歩教えます.WebVRでバーチャルリアリティーを実現します.

13個の開発効率を向上させる現代CSSフレーム

クイックハンドオーバBootstraphue

JavaScriptエンジンはどのように働きますか?コールスタックからPromiseまでは知っておく必要があります.

Websocket実戦:NodeとReactの間でリアルタイム通信を行う

Gitに関する20の面接問題

Node.jsのconsolie.log

を深く解析します.

Node.jsは一体何ですか?

分、Node.jsでAPIサーバ

を構築する.

Javascriptのオブジェクトコピー

プログラマは30歳前の月給は30 Kに達しませんでした.

14の最も良いJavaScriptデータ可視化ライブラリ

8個のフロントエンドへの最上位VS Code拡張プラグイン

Node.jsマルチスレッド完全ガイド

HTMLをPDFに変換する4つの案と

を実現する.

もっと多い文章…