5.ejsテンプレート

5.1テンプレートエンジンとは何ですか？

ウェブサイトのテンプレートエンジンは、標準的なHTML文書を生成しますするための分離から生じたユーザーインターフェースとビジネスデータ（コンテンツ）を作るために、それは、特定の形式の文書を生成することができます。

バックエンドの開発では、コード、コードとデータの提示処理データが分離され、先に言われた、ユーザーインターフェースとビジネスデータがコンテンツとは別の、本当にすべてのデータとのインターフェイスを見るために、ユーザに、フロントエンドインターフェースを表示します一緒に、テンプレートエンジンの役割は、フロントエンド・ディスプレイへのソフトHTMLファイルの背面、またサーバ側レンダリングとして知られるこの手法を生成するために一緒にHTMLファイルとバックエンドデータです。

EJS 5.2を使用するテンプレートエンジン急行

最初のステップは、インストールEJS

npm install ejs --save

第二ステップ、app.jsでEJSの導入

var ejs = require('ejs')

第三のステップは、app.set方法を明示テンプレートフォルダを設定することで、属性名は、例えば、設定値を表す：設定ビューは、表現ビューパス手段を発現する、テンプレートファイルのパスの2番目のパラメータであります値

app.set('views', path.join(__dirname, 'views'))

第四の工程は、テンプレートエンジンとして明示EJS使用を伝えることで、テンプレートファイルの接尾辞を設定します

app.engine('html', ejs._express)

第五の工程と、登録されたテンプレートエンジン

app.set('view engine', 'html')

第6のステップは、テンプレートエンジンの最初の経験をEJS

「/」「のindex.html」ファイルをレンダリングされる経路、およびパラメーター1.

app.get('/', function (req, res){
  // res.sendFile(path.resolve('./views/index.html'))
  res.render('index.html', {title: '螺钉课堂！！！'})
})

2.「index.htmlを」データファイルを使用するには

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

一般的な文法を5.3.ejs

1.基本的な構文、背景データが調和して、HTMLテンプレート、最後にカスタムラベルやタグの形で区別HTML内のテンプレートは、EJS例えばHTMLタグです。

<%= title %>

共通のタグ：

1、<% if|for %> 这种叫做脚本标签，用于写流程控制  

2、<%= 变量 %> 这种标签的作用是把数据输出到html 

3、<%- %>这种标签的作用和<%= %>相同，区别是这种标签可以解析html，<%= %>这种标签会把html标签给转义了

2.フロー制御文

if文

// 1.后台传入一个 isLogin字段
app.get('/', function (req, res){
  // res.sendFile(path.resolve('./views/index.html'))
  res.render('index.html', {title: '螺钉课堂！！！', isLogin: false})
})

// 2.在模板中使用这个isLogin字段来做判断
<% if (isLogin) { %>
  <div id="wrap">
      <a href="/login">欢迎admin，登录！！！</a>
      <a href="/user">用户中心</a>
  </div>
<% } else { %> 
  <div id="wrap">
      <a href="/login">登录 | </a>
      <a href="/user">用户中心</a>
  </div>
<% } %>

ループをレンダリングするための

// 1.在后台传入一个数组
app.get('/', function (req, res){
  // res.sendFile(path.resolve('./views/index.html')) 
  var userList = [
    {name: '张飞', age: 29},
    {name: '关羽', age: 30},
    {name: '刘备', age: 31},
  ]
  res.render('index.html', {title: '螺钉课堂！！！', isLogin: false, userList: userList})
})

// 2.在模板中循环出这个数组
<ul>
  <% for (var i = 0; i < userList.length; i++) {%>
  <li><%= userList[i].name %> ----> <%= userList[i].age %></li>
  <% } %>
</ul>

// 3.也可以使用forEach方法来循环
<ul>
  <% userList.forEach(function (item){%>
    <li><%= item.name %> ----> <%= item.age%></li>
  <% }) %>
</ul>

スクリュー教室ビデオレッスン住所：http://edu.nodeing.com

効率的な入門チュートリアル（5）を発現

5.ejsテンプレート

5.1テンプレートエンジンとは何ですか？

EJS 5.2を使用するテンプレートエンジン急行

一般的な文法を5.3.ejs

おすすめ