准備工作:
工具:Webstorm
1. 新建一個文件夾為blogs(隨意). 一個js文件app.js. 一個文件夾views,文件夾內一個index.ejs文件,文件夾asstes內style.css
2.使用Termimal工具安裝所需要的插件(Node環境):
2.1 初始化: npm init -y
2.2 安裝express: npm install express --save
2.3 安裝ejs: npm install ejs --save
2.4 安裝自動工具:npm install nodemon -g --save (可選)
開始寫代碼嘍:
ejs部分:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>EJS模板</title> <link rel="stylesheet" href="../assets/style.css"> </head> <body> <h1>EJS模板引擎</h1> <p>這是很簡單的一個小流程就不在一一的標注流程了,注釋的很清楚了</p> <p>這里是姓名: <span><%= name %></span></p><!--這里顯示js文件傳過來的name值:webarn-->
<p>這里是性別: <span><%= sex %></span></p><!--這里顯示js文件傳過來的sex值:'男'-->
<p>這里是性別: <span><%= content %></span></p><!--這里顯示js文件傳過來的content值,可以死是json,接受服務器所傳的東西,方便前段展示-->
</body>
</html>
css部分:
h1{ text-align: center; } p{ font-size:20px; } span{ font-size:25px; color: red; }
JavaScript部分:
//引入所需要的插件 var express = require('express'); var ejs = require('ejs'); //為express設置接受參數 var app = express(); //識別ejs代碼 app.set('view engine','ejs'); //識別css樣式,不引入將不知道外部樣式表 app.use('/assets',express.static('assets')); var data={ name : 'webarn', sex : '男', content : '參數,可以更改' }; //交互方式 app.get('/',function (req, res) { res.render('index',data) });
//另外一種方式:
// app.get('/:id',function (req, res) {
// res.render('parfile',{person:req.params.id});
// });
//監聽 app.listen(3000);
EJS可以更易於維護,使網頁動態獲取.
注釋:JavaScript部分注釋部分解釋:
'/:id'和{person:req.params.id}關系為:'/:id'=={person:req.params.id}
以上代碼非常簡單,只是模板的運用,沒有涉及較深的東西,非常適合初次接觸的人群,如果有問題或錯誤,歡迎大家及時提問糾正,會隨時回復大家
功能:
1、緩存功能，能夠緩存已經解析好的html模版；
2、<% code %>用於執行其中javascript代碼。
3、<%= code %>會對code進行html轉義；
4、<%- code %>將不會進行轉義；，這一行代碼不會執行，像是被注釋了一樣，然后顯示原來的html。也不會影響整個頁面的執行
5、支持自定義標簽，比如'<%'可以使用'{{'，'%>'用'}}'代替；
6、提供一些輔助函數，用於模版中使用
1)、first，返回數組的第一個元素；
2)、last，返回數組的最后一個元素；
3)、capitalize，返回首字母大寫的字符串；
4)、downcase，返回字符串的小寫；
5)、upcase，返回字符串的大寫；
6)、sort，排序（Object.create(obj).sort()？）；
7)、sort_by:'prop'，按照指定的prop屬性進行升序排序；
8)、size，返回長度，即length屬性，不一定非是數組才行；
9)、plus:n，加上n，將轉化為Number進行運算；
10)、minus:n，減去n，將轉化為Number進行運算；
11)、times:n，乘以n，將轉化為Number進行運算；
12)、divided_by:n，除以n，將轉化為Number進行運算；
13)、join:'val'，將數組用'val'最為分隔符，進行合並成一個字符串；
14)、truncate:n，截取前n個字符，超過長度時，將返回一個副本
15)、truncate_words:n，取得字符串中的前n個word，word以空格進行分割；
16)、replace:pattern,substitution，字符串替換，substitution不提供將刪除匹配的子串；
17)、prepend:val，如果操作數為數組，則進行合並；為字符串則添加val在前面；
18)、append:val，如果操作數為數組，則進行合並；為字符串則添加val在后面；
19)、map:'prop'，返回對象數組中屬性為prop的值組成的數組；
20)、reverse，翻轉數組或字符串；
21)、get:'prop'，取得屬性為'prop'的值；
22)、json，轉化為json格式字符串
7、利用<%- include filename %>加載其他頁面模版；