Express安装入门与模版引擎ejs的使用和语法

前言

  前面也学习了一些Node.js的基本入门知道,现在开始进入Web开发的部分;
  Node.js提供了http模块,这个模块中提供了一些底层接口,可以直接使用,但是直接开发网站那还是太累了,所以http模块也不单讲了,可以去看官方API:http://nodejs.org/api/http.html

  下面我们直接从Express框架着手去进行Web开发,它实现好了更高层的接口,让Web开发更简单快捷...

简介和安装

  Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架,它基于Node.js原有进行了很多Web开发所需的功能封装...
  http://expressjs.com/

  https://www.npmjs.org/package/express

安装express

npm install -g express-generator
注意:-g:表示全局安装,这样,后面才能使用express来安装ejs等框架。


到此express就在全局环境中安装成功!

PS:用npm安装有时可能进度不动,多试几次!

模版引擎 ejs

在上面创建的testWebApp中express默认使用的模版擎为jade,个人觉得jade虽然简洁但不直观,所以选择了更易上手的ejs。

  ejs:Embedded JavaScript

  https://github.com/visionmedia/ejs

创建一个express + ejs的项目
express -e testEjsWebApp
cd testEjsWebApp
npm install
创建成功后,打开app.js,添加8100端口监听
var server = app.listen(8100, function () {
    var host = server.address().address;
    var port = server.address().port;
    console.log("应用实例,访问地址为 http://%s:%s", host, port);
});
运行页面,查看结果


ejs使用和说明

ejs速度不是最快的,推荐最多大概是因为其简单的语法结构。主要通过<% %><%=%>来嵌套代码。比如符合阅读逻辑,同时也省去不少学习语法的成本。 
另有一些自定义的方法:如link_to(name, url),img_tag(url)等。 
还可以支持json。 

ejs的特性: 

  1. 缓存功能,能够缓存已经解析好的html模版; 
  2. <% code %>用于执行其中javascript代码; 
  3. <%= code %>会对code进行html转义; 
  4. <%- code %>将不会进行转义; 
  5. 支持自定义标签,比如'<%'可以使用'{{','%>'用'}}'代替; 
  6. 提供一些辅助函数,用于模版中使用 
  7. 利用<%- include filename %>加载其他页面模版; 
使用示例 
  1. ejs.compile(str, options); 将返回内部解析好的Function函数 
  2. ejs.render(str, options); 返回经过解析的字符串 

ejs的include的使用,引入对应的ejs文件

login.ejs的内容:

<!DOCTYPE html>
<html>
  <head>
    <title>用户登录</title>
    <% include ../inc/css.ejs %>
  </head>
  <body>
    <h1>登录</h1>
    <div>
        用户名:<input type="text" name="username" value=""/>
    </div>
    <div>
        密码:<input type="password" name="password" value=""/>
    </div>
    <div>
        <input type="button" name="login" value="登录"/>
    </div>
    <% include ../inc/js.ejs %>
  </body>
</html>

js.ejs内容为:

<script type="text/javascript" src="/statics/resources/js/jquery.min.js"></script>

这样运行的结果为:

<!DOCTYPE html>
<html>
  <head>
    <title>用户登录</title>
  <script type="text/javascript" src="http://gc.kis.scr.kaspersky-labs.com/1B74BD89-2A22-4B93-B451-1C9E1052A0EC/main.js" charset="UTF-8"></script></head>
  <body>
    <h1>登录</h1>
    <div>
        用户名:<input type="text" name="username" value=""/>
    </div>
    <div>
        密码:<input type="password" name="password" value=""/>
    </div>
    <div>
        <input type="button" name="login" value="登录"/>
    </div>
    <script type="text/javascript" src="/statics/resources/js/jquery.min.js"></script>
  </body>
</html>

从结果可以看出,login.ejs和js.ejs的内容都被编译问普通的html内容。


其中options的一些参数为: 
  1. cache:是否缓存解析后的模版,需要filename作为key; 
  2. filename:模版文件名; 
  3. scope:complile后的Function执行所在的上下文环境; 
  4. debug:标识是否是debeg状态,debug为true则会输出生成的Function内容; 
  5. compileDebug:标识是否是编译debug,为true则会生成解析过程中的跟踪信息,用于调试; 
  6. client,标识是否用于浏览器客户端运行,为true则返回解析后的可以单独运行的Function函数; 
  7. open,代码开头标记,默认为'<%'; 
  8. close,代码结束标记,默认为'%>'; 
其他的一些用于解析模版时提供的变量。 
    在express中使用时,options参数将由response.render进行传入,其中包含了一些express中的设置,以及用户提供的变量值。 


此外ejs还提供了一些辅助函数,用于代替使用javascript代码,使得更加方便的操纵数据。 

  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格式字符串 

感谢您的阅读,希望对您有帮助,本文版权归 #惊讶# 所有

评论 (0)