准备工作:

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

Node - EJS模板应用(node+express+ejs)的更多相关文章

  1. node+express搭建过程以及安装ejs模板引擎解决方案

    一.Node.js简介 1.Node.js是什么? Node.js 可以作为服务器向用户提供服务,与 PHP.Python.Ruby on Rails 相比,它跳过了 Apache.Nginx 等 H ...

  2. Koa 中 ejs 模板的使用

    ejs的基本使用 安装 koa-views 和 ejs npm install --save koa-views/cnpm install --save koa-views npm install e ...

  3. node（4）express 框架 EJS模板，cookie, session的学习

    一.EJS 概述:前端咱们使用过的一个模板套路,是underscore的套路.接下来EJS它属于后台工程师人的模板. https://www.npmjs.com/package/ejs 官网地址 特点 ...

  4. Node的express配置使用ejs模板

    注册ejs模板为html页.以.ejs为后缀的模板页,现在的后缀名可以是.html app.engine('.html', require('ejs').__express); 设置视图模板的默认后缀 ...

  5. node.js + express(ejs) + mongodb(mongoose) 增删改实例

    MongoDB 安装步骤总结: 1.解压目录到d盘 mongodb 2.安装目录的下新建文件mongo.config文件 ##store data here dbpath=D:\mongodb\dat ...

  6. node.js 模板 ejs 转

    node.js 模板引ejs. 搜了一把推荐用ejs的最多. 速度比对:http://www.cnblogs.com/fengmk2/archive/2011/04/28/2031971.html e ...

  7. node.js平台下，利用cookie实现记住密码登陆（Express+Ejs+Mysql）

    本博文需有node.js+express+mysql入门基础,若基础薄弱,可参考博主的其他几篇node.就是博文: 1.下载Mysql数据库,安装并配置 创建用户表供登录使用: 2.node.js平台 ...

  8. [js高手之路]node js系列课程-图解express+supervisor+ejs用法

    上文通过node js自带的http模块搭建了一个简易的服务器,实际在开发中,一般用的是express框架,本文我们就来讲讲项目开发中必备不可少的几样东西: 服务器( express ) 路由( ex ...

  9. Node.js模板引擎学习----ejs

    环境:windows+node.js+express 一.安装ejs 打开cmd窗口,输入npm install ejs -g,等待下载安装完成. 二.使用 调用过程中使用路由机制和模板,路由请求地址 ...

随机推荐

  1. POJ 3458 Colour Sequence

    水题. #include<cstdio> #include<cstring> #include<cmath> + ; char s[maxn], v[maxn], ...

  2. HUST 1605 Gene recombination

    简单广搜.4进制对应的10进制数来表示这些状态,总共只有(4^12)种状态. #include<cstdio> #include<cstring> #include<cm ...

  3. Vue.js与angular在数据实现的思考

    Vue.js,其简洁的API以及活跃的社区,对于打算从angular转向Vue还是挺友好的,打算最近一段时间去整理下Vue自己的一些思考,加深下对于此的印象. Vue与Angular同属于MVVM框架 ...

  4. 路由器、交换机学习之IP地址、使用网络掩码划分子网

    局域网子网划分 对于C类IP地址来说(192.168.1.X,其中前面的192.168.1为网络号,后面的X为主机号,这样的网络中可以有254台主机,其中.0为局域网地址,.255为广播地址)进行子网 ...

  5. http://www.cnblogs.com/gaojing/archive/2011/08/23/2413616.html

    http://www.cnblogs.com/gaojing/archive/2011/08/23/2413616.html

  6. C++ 句柄类

    一.容器与继承 在容器中保存有继承关系的对象时,如果定义成保存基类对象,则派生类将被切割,如果定义成保存派生类对象,则保存基类对象又成问题(基类对象将被强制转换成派生类对象,而派生类中定义的成员未被初 ...

  7. 【Xilinx-LVDS读写功能实现】-00-开始

    最近用到了一款LVDS接口的摄像头,640*480灰度图像,数据速率为600Mbps,位宽10bit,DDR双边沿采样. 实现数据的采集需要用到FPGA内的SERDES模块,现在已经仿真通过了,等到上 ...

  8. html5、css3及响应式设计入门

    一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...

  9. Angular - - $location 和 $window

    $location $location服务解析浏览器地址中的url(基于window.location)并且使url在应用程序中可用.将地址栏中的网址的变化反映到$location服务和$locati ...

  10. Javascript教程：js异步模式编程的4种解决方法

    随着人们对网站视觉效果及用户体验的要求越来越高,所以在未来网站的建设中,设计师们开始越来越多的使用了js文件来达到预期的效果,随着js文件的越来越多,令设计师们最头痛的事情也就来了,那就是Javasc ...