按照自己的思路学习Node.Js 随心出发。EJS是Node.js中express框架中使用的一个模版引擎，当然还有Jade

我的学习就靠网上查资料，没有买书系统学，自己整理，如果有用了哪位大神的代码，还请原谅，表森气.奴婢知错了

标签：AaronYang 茗洋 Node.Js Javascript

本篇博客地址：http://www.cnblogs.com/AaronYang/p/4060189.html

开发准备(AaronYang原味)

1你需要一个Node.js开发工具

使用过SublimeText3和vs2013，还有eclipse搭建的方式，最终还是喜欢Webstorm的搭建，然后开始编写node.js

至于为什么，我不想多说，体验就知道了，这里Node.js开发环境搭建就不想说了，有时间额外写一个吧，网上资料也很多

这里我使用的是Express4.9版本，当前博客时间是2014年10月30日18:44:06

2基础回顾,Ejs,因为我是开发ASP.NET MVC的，所以更靠近微软的一边，更多的都会和.NET做对比

创建一个基于Express的node.js的项目是必须的。模版选择Ejs，不要用默认的Jade

这是最基本的结构，我们开始吧。我也是自己琢磨找资料学习，如有错误，还望指出，奴婢一定会改的。

3GO GO GO！

1、缓存功能，能够缓存已经解析好的html模版；
2、<% code %>用于执行其中javascript代码；
3、<%= code %>会对code进行html转义；
4、<%- code %>将不会进行转义；
5、支持自定义标签，比如'<%'可以使用'{{'，'%>'用'}}'代替；
6、提供一些辅助函数，用于模版中使用
7、利用<%- include filename %>加载其他页面模版；

1.测试数组（写完只有一句尼玛，回到了jsp...的感觉）

先在routes文件夹下的index.js文件，修改默认的home page,get 根目录的那个，我加了一个goods数组

/* GET home page. */

router.get('/', function(req, res) {

  res.render('index', {

      title: 'Express',

      goods:['裤子','内衣','上衣','小三角']

  });

});

我们在对应的views中的index.ejs网页中，代码如下：

<!DOCTYPE html>

<html>

<head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css'/>

    <link rel="stylesheet" href="/stylesheets/cssreset.css"/>

    <style>

        body {

            background-image: url('/images/1.jpg');

        }

    </style>

</head>

<body>

<h1><%= title %></h1>

<p>Welcome to <%= title %></p>

<!--简单数组遍历-->

<!--<ul>-->

<!--<li>裤子</li>-->

<!--<li>裤子</li>-->

<!--<li>裤子</li>-->

<!--</ul>-->

<% for(var i = 0;i < goods.length;i++){ %>

<li>

    <a href='http://<%= goods[i] %>'><%= goods[i] %></a>

</li>

<% } %>

</body>

</html>

我们直接可以使用goods对象了，我们通过<%%>这种方式来配合html方式遍历输出对象中的值

<%= %>是直接输出对象的值，你就理解<% js代码 %>中是js代码就OK啦

在jsp中是上面import后，输出对象的值，在.net的对比 razor中的@对象.属性就行了

2.局部视图，类似.net mvc的PartialView,Ejs中也有类似，在早期使用partial('ejs文件',传给视图的对象值)，现在2014年10月30日18:39:45已经淘汰了

推荐使用include，当然include是不用传参的，所以你在render页面传递过来的对象叫什么名字，就在分页面使用那个对象就行了

2.1 在index.js文件中，增加一个变量，键值对类型的productlists

Tip:这里额外讲个path.dirname的使用，需要require引入 path包才可以使用，这里返回最后一个/ 前面的内容

var path = require('path');
    router.get('/', function(req, res) {

    console.log(path.dirname('/pro/code/aaronyang'))

    res.render('index', {

      title: 'Express',

      goods:['裤子','内衣','上衣','小三角'],

      productlists:[

          {

             "name":"aaronyang裤子","price":"129元"

          },{

              "name":"aaronyang内衣","price":"199元"

          },{

              "name":"aaronyang外套","price":"1098元"

          },{

              "name":"aaronyang小三角","price":"99元"

          }

      ]

  });

});

在views文件夹中增加一个productItem.ejs文件,默认webstorm只有jade，但是你可以Edit File Template增加一个Ejs File，这个很简单，不讲了

代码如下：

 <!--以下代码是aaronyang摸索出来的，博客来自:http://aaronyang.cnblogs.com-->

 <% if (productlists.length) {

         productlists.forEach(function(value,index){

 %>

     <div>

         <span> <%= value.name%></span>:<span><%= value.price %></span>

     </div>

 <%})}%>

Aaronyang nodejs代码

这里可以直接使用productlists对象，集合可以使用forEach方法，然后配合<%%>的使用就可以了

这里forEach的index参数可以省略，就是个索引0,1,2,3...的东西

效果如下：

OK！创建一个数据源productlists，然后一个模板页，使用了数据源的对象，然后页面中重复使用这段代码，OK，运行吧！让奴婢看下

当然，include后面也可以跟路径，但是不要加引号，后缀名ejs可有可无

<% include productItem %>

附一份css重置html5样式css的文件，以后有用

 /*

 html5doctor.com Reset Stylesheet v1.6.1

 Last Updated: 2010-09-17

 Author: Richard Clark - http://richclarkdesign.com

 */

 html, body, div, span, object, iframe,

 h1, h2, h3, h4, h5, h6, p, blockquote, pre,

 abbr, address, cite, code,

 del, dfn, em, img, ins, kbd, q, samp,

 small, strong, sub, sup, var,

 b, i,

 dl, dt, dd, ol, ul, li,

 fieldset, form, label, legend,

 table, caption, tbody, tfoot, thead, tr, th, td,

 article, aside, canvas, details, figcaption, figure,

 footer, header, hgroup, menu, nav, section, summary,

 time, mark, audio, video {

     margin:;

     padding:;

     border:;

     outline:;

     font-size:100%;

     vertical-align:baseline;

     background:transparent;

 }

 body {

     line-height:;

 }

 article,aside,details,figcaption,figure,

 footer,header,hgroup,menu,nav,section {

     display:block;

 }

 nav ul {

     list-style:none;

 }

 blockquote, q {

     quotes:none;

 }

 blockquote:before, blockquote:after,

 q:before, q:after {

     content:'';

     content:none;

 }

 a {

     margin:;

     padding:;

     font-size:100%;

     vertical-align:baseline;

     background:transparent;

 }

 /* change colours to suit your needs */

 ins {

     background-color:#ff9;

     color:#000;

     text-decoration:none;

 }

 /* change colours to suit your needs */

 mark {

     background-color:#ff9;

     color:#000;

     font-style:italic;

     font-weight:bold;

 }

 del {

     text-decoration: line-through;

 }

 abbr[title], dfn[title] {

     border-bottom:1px dotted;

     cursor:help;

 }

 table {

     border-collapse:collapse;

     border-spacing:;

 }

 /* change border colour to suit your needs */

 hr {

     display:block;

     height:1px;

     border:;

     border-top:1px solid #cccccc;

     margin:1em 0;

     padding:;

 }

 input, select {

     vertical-align:middle;

 }

aaronyang css重置

3. express4.x 的 include的版本layout方式

以前express3.x创建项目都有layout.ejs文件，然后render时候，可以指定layout参数，也就是相当于.net的母版页

好了，既然使用了express4.x，那么自己建立一个吧，我们写一个header.ejs和footer.ejs

header.ejs

<!DOCTYPE html>

<html>

<head>

    <title><%= title %></title>

    <link rel='stylesheet' href='/stylesheets/style.css'/>

    <link rel="stylesheet" href="/stylesheets/cssreset.css"/>

    <style>

body {
background-image: url('/images/1.jpg');
}

   </style>

</head>

<body>

footer.ejs

</body>

</html>

然后我们修改index.ejs文件

<% include header%>

<h1><%= title %></h1>

<p>Welcome to <%= title %></p>

<!--简单数组遍历-->

<!--<ul>-->

<!--<li>裤子</li>-->

<!--<li>裤子</li>-->

<!--<li>裤子</li>-->

<!--</ul>-->

<% for(var i = 0;i < goods.length;i++){ %>

<li>

    <a href='http://<%= goods[i] %>'><%= goods[i] %></a>

</li>

<% } %>

<hr/>

<% include productItem %>

<% include footer%>

效果还是一样的~

4. 使用Ejs自带的一些方法,增加一个对象testSelfMethod，用于测试，这里使用了Ejs的filter知识中的 upcase

res.render('index', {

      title: 'Express',

      goods:['裤子','内衣','上衣','小三角'],

      productlists:[

          {

             "name":"aaronyang裤子","price":"129元"

          },{

              "name":"aaronyang内衣","price":"199元"

          },{

              "name":"aaronyang外套","price":"1098元"

          },{

              "name":"aaronyang小三角","price":"99元"

          }

      ],

      testSelfMethod:["Aaronyang1","Aaronyang2","Aaronyang3","Aaronyang4","hello aaronyang2014"]

  });

使用<%=: %>

<hr/>

<%=: testSelfMethod[0] | upcase %>

这里网页输出的是 AARONYANG1

upcase方法就是转换成大写，更多的方法可以参考https://github.com/tj/ejs

<p><%=: testSelfMethod | last | capitalize %></p>

输出

从testSelfMethod对象中，最后一个值，将字符串转换成首字母为大写的字符串，本来hello 变成了Hello

下面我也列出来了几个，看名字大致也知道几个怎么用了

first        返回数组的第一个元素

last             返回数组的最后一个元素

capitalize       返回首字母大写的字符串

downcase         返回字符串的小写

upcase           返回字符串的大写

sort             排序

sort_by:'prop'   照指定的prop属性进行升序排序

size             返回长度，即length属性，不一定非是数组才行

length

plus:n           加上n，将转化为Number进行运算

minus:n          减去n，将转化为Number进行运算

times:n          乘以n，将转化为Number进行运算

divided_by:n     除以n，将转化为Number进行运算

join:'val'       将数组用'val'最为分隔符，进行合并成一个字符串

truncate:n       截取前n个字符，超过长度时，将返回一个副本

truncate_words:n 取得字符串中的前n个word，word以空格进行分割

replace:pattern,substitution    字符串替换，substitution不提供将删除匹配的子串

prepend:val      如果操作数为数组，则进行合并；为字符串则添加val在前面

append:val       如果操作数为数组，则进行合并；为字符串则添加val在后面

map:'prop'       返回对象数组中属性为prop的值组成的数组

reverse          翻转数组或字符串

get:'prop'       取得属性为'prop'的值

Tip：

在Ejs中，可以通过以下方式拓展一个 filter，在node.js中我还不知道怎么加上

ejs.filters.last = function(obj) {

  return obj[obj.length - 1];

};

OK!

结尾话(AaronYang Ending)

具体Express4.x框架的小逻辑，有机会再说，如果你对Express感兴趣，你可以去http://expressjs.com/4x/api.html

看他的api说明，不过是英文版的，那个我已经看完了，基本消化了，有机会奴婢再讲给大家听。

node.js感觉学习方向推荐: 安装node官方exe，然后使用webstorm开发，千万别尝试其他方式了，vs2013的那个工具生成的是express3.x的，如果你喜欢用，你就去用吧。sublimetext我也搭建过使用过一段时间，发现真心没有webstorm好用。接着你需要安装express和express-generator,这是express4.x的。OK假设你的环境好了。现在你是做web开发，需要了解express框架的大致原理，去看几篇博客讲解，看看官方api文件，如果你对路由这个概念不理解，那么说明你以前没有mvc的框架经验。接着学一个网页模板，当然你也可以不学，这篇文章简单讲了一下ejs，做web开发，把js文件中处理后得到的json对象给页面，然后利用ejs把数据呈现就可以了。最后一步，就是完整的麻烦事。

node的官网有个node.js自带了一些api方法，具体参考 http://nodejs.org/api/net.html

node.js有很多node包，你使用了node自带的api不带的功能时候，你就需要require其他包了，就需要通过npm install node包名

npm的包在线地址:https://www.npmjs.org/

来安装，每个包都是别人开发的，所以怎么使用其他包，你又要学习了。

哎~好比 .net中有很多namespace，每个namespace中的方法，有时候你要学，所以学习成本差不多。

npm基本命令，npm基本使用，node.js中一些关键字使用module,require等，这些算入门知识吧。

express3.x和4.x的区别，自己用就知道了，我是基于Express 4.x了，遇到一些问题，只能靠自己琢磨了..

网上3.x的书很多，似乎京东上卖的关于node.js书都是基于3.x的，2.x也有，所以不推荐买书，从头学。

网上有基本3.x的pdf书，可以下载下来看，不推荐买实体书看

先写到这里吧~祝君们晚安

[AaronYang]那天有个小孩跟我说Js-NodeJS[AY0]-EJS的更多相关文章

[AaronYang]那天有个小孩跟我说Js正则
按照自己的思路学习Node.Js 随心出发.突破正则冷门知识点,巧妙复习正则常用知识点标签:AaronYang 茗洋 Node.Js 正则 Javascript 本篇博客地址:http://ww ...
那天有个小孩教我WCF[一][2/3]
接着上次的继续讲吧我们开始吧 9.创建数据库 use master go --创建库 if exists(select * from sysdatabases where name='NewsDB' ...
那天有个小孩教我WCF[一][1/3]
那天有个小孩教我WCF[一][1/3] 既然是小孩系列,当然要有一点基础才能快速掌握,归纳,总结的一个系列,哈哈前言: 第一篇嘛,不细讲,步步教你创建一个简单SOA案例,对WCF有个基本的认识,我不 ...
（转）那天有个小孩教我WCF[一][1/3]
原文地址:http://www.cnblogs.com/AaronYang/p/2950931.html 既然是小孩系列,当然要有一点基础才能快速掌握,归纳,总结的一个系列,哈哈前言: 第一篇嘛,不 ...
那天有个小孩跟我说LINQ（五）转载
2 LINQ TO SQL(代码下载) 我们以一个简单的销售的业务数据库为例子表结构很简单:Users(购买者(用户)表),Products(产品信息表),Sales(销 ...
那天有个小孩跟我说LINQ（三）转载
1 LINQ TO Objects续2(代码下载) 新建项目 linq_Ch3控制台程序 1.1 操作字符串 ①查找字符串中包含的大写字母,字符串是由多个char类型组 ...
那天有个小孩跟我说LINQ（八）学会Func
文章已经迁移到:http://www.ayjs.net/2013/08/68/ 文章已经迁移到:http://www.ayjs.net/2013/08/68/ 文章已经迁移到:http://www.a ...
那天有个小孩跟我说LINQ（七）转载
1 LINQ TO XML(代码下载) 准备:新建项目 linq_Ch7控制台程序,新建一个XML文件夹,我们就轻松地学习一下吧 XDocument ...
那天有个小孩跟我说LINQ（六）转载
2 LINQ TO SQL完结(代码下载) 我们还是接着上次那个简单的销售的业务数据库为例子,打开上次那个例子linq_Ch5 2.1 当数据库中的表建立了主外键 ①根据主键获取子表信息 ...

随机推荐

百度未授权使用地图API
百度地图管理员的回复:这是KEY服务升级的问题, 给您造成的不便,非常抱歉.但我们昨日已修复,你可以再审核一番.若不可以,请提供一下您的系统ak,邮箱或qq发送至(wangwenhai@baidu.c ...
hdu 4738 Caocao's Bridges 求无向图的桥【Tarjan】
<题目链接> 题目大意: 曹操在长江上建立了一些点,点之间有一些边连着.如果这些点构成的无向图变成了连通图,那么曹操就无敌了.周瑜为了防止曹操变得无敌,就打算去摧毁连接曹操的点的桥.但是诸 ...
HDU 1025 城市供应【LIS】
题目链接:https://vjudge.net/contest/228455#problem/A 题目大意: 有2n个城市,其中有n个富有的城市,n个贫穷的城市,其中富有的城市只在一种资源富有,且富有 ...
[CodeForces-1036E] Covered Points 暴力 GCD 求交点
题意: 在二维平面上给出n条不共线的线段,问这些线段总共覆盖到了多少个整数点解法: 用GCD可求得一条线段覆盖了多少整数点,然后暴力枚举线段,求交点,对于相应的整数交点,结果-1即可 #inclu ...
Stream 与 byte[] 互转
public byte[] StreamToBytes(Stream stream) { byte[] bytes = new byte[stream.Length]; stream.Read(byt ...
查找最大或最小的 N 个元素
使用内置的heapd模块 In [1]: import heapq In [2]: nums = [1,8, 2, 23, 7, -4, 18, 23, 42, 37, 2] In [3]: prin ...
Python解释数学系列——分位数Quantile
跳转到我的博客 1. 分位数计算案例与Python代码案例1 Ex1: Given a data = [6, 47, 49, 15, 42, 41, 7, 39, 43, 40, 36],求Q1, ...
Java内存区域与内存溢出异常--运行时数据区
Java与C之间有一堵由内存动态分配和垃圾收集技术所围成的“高墙”. C.C++程序开发在内存管理区域,既拥有每一个对象的“所有权”,又担负着每一个对象声明开始到终结的责任,而Java在虚拟机自动管理 ...
修改button的可点击区域
需求:在cocos2dx引擎中,button的点击区域和button图片的大小是一样的,但是我需要修改可点击区域的大小和位置,需要修改引擎源码: button提供的接口中并没有和touch相关,but ...
C# 论接口的意义---共享协议
我对接口的理解: 接口是一种协议.是一种模型. 我认为接口的意义: 接口更好的实现了项目资源共享 , 指定了可共享的范围 , 允许可使用而不可篡改的项目资源 . 我认为接口和模型是一类的: 接口一般与 ...

[AaronYang]那天有个小孩跟我说Js-NodeJS[AY0]-EJS

开发准备(AaronYang原味)

结尾话(AaronYang Ending)

[AaronYang]那天有个小孩跟我说Js-NodeJS[AY0]-EJS的更多相关文章

随机推荐

热门专题