准备工作:
工具: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 %>加载其他页面模版；