# ejs 的使用

## 安裝 與 使用

* 安裝 ejs-locals 與 body-parser
* npm install ejs-locals body-parser --save
* 在專案router js檔加入

```javascript
var express = require('express');
var app = express();
var engine = require('ejs-locals');
var bodyParser = require('body-parser');

app.engine('ejs',engine);

//統一將樣板放入views資料夾
app.set('views','./views');

//用ejs template方式呈現
app.set('view engine','ejs');

//增加body解析
app.use(bodyParser.json());//可解析json資料
app.use(bodyParser.urlencoded({extended:false}))

app.get('/',function(req,res){
    res.render('index',{
        'isShow':true,
        'title':'就學習',
        'me':'<h1>chin</h1>',
        'array':['aaa','bbb','ccc','ddddd']
    });
})
```

* 說明 :&#x20;
  * app.engine('ejs',engine) : 表示使用ejs當渲染引擎
  * app.set('views','./views') : 統一將樣板放入views資料夾
  * app.set('view engine','ejs') :　用ejs template方式呈現
  * res.render('index',{'title':"12378"}) : 對 index.ejs 渲染,並提交數據(title)
  * 常見的四種content-type
    * application/x-www-form-urlencoded 常见的form提交
    * multipart/form-data 文件提交
    * application/json 提交json格式的資料
    * text/xml 提交xml格式的資料
  * app.use(bodyParser.json()) :　解析json資料(req.body)
    * 也就是header中包含：Content-Type: application/json
  * app.use(bodyParser.urlencoded({extended:false})):用来解析form表单提交的資料
    * 也就是header中包含：Content-Type: application/x-www-form-urlencoded
    * 屬性: extended -> extended選項允許使用querystring(false)或qs(true)來解析，默認值是true
      * querystring 用來字符串化對像或解析字符串 :&#x20;
        * querystring.parse("name=henry\&age=30") => { name: 'henry', age: '30' }
      * qs是一個querystring的庫，在qs的功能基礎上，支持更多的功能優化了一些安全性

```
// 內建對象 querystring
querystring.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
{ 
    'info[name]': 'henry',
    'info[age]': '30',
    'hobby[1]': 'sport',
    'hobby[2]': 'coding'
}

// 第三方插件 qs
qs.parse("info[name]=henry&info[age]=30&hobby[1]=sport&hobby[2]=coding") => 
{
    info: {
    name: 'henry',
    age: '30'
    },
    hobby: [ 'sport', 'coding' ]
}
```

* 建立 views資料夾
* 在資料夾裡 建立 index.ejs :

```
<% if(isShow){ %>
        <span>友秀出來</span>
<%}%>
<%=title%>
<%-me%>

<ul>
    <% for(var i=0;i<array.length;i++){ %>
        <li><%= array[i]%></li>
    <% } %>
</ul>
```

* 說明 :&#x20;
  * %= % => 輸出字串
  * %- % => 輸出網頁文本
  * %  % => 進行邏輯與其他運算
* 執行 : node 你的.js 並到127.0.0.1:3000即可看到成果


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnprogramming.gitbook.io/programlearned/node/begin-1/ejs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.