Node - EJS模板应用(node+express+ejs)

时间:2023-11-26 12:59:08

准备工作:

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