您的位置：首页 > Web前端 > JavaScript

ejs母版

2016-07-26 00:39 609 查看

ejs母版页让你的node.js应用开发更快更有效- 一介布衣

一介布衣 2014-11-25 nodejs 10452

分享到：QQ空间新浪微博腾讯微博人人网微信

引子:
母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.
一.node.js开发,基于ejs引擎的母版页
二.前提环境 ,如何使用及示例介绍

就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,那么其他部分完全可以放到母版页中呈现.
node.js 下的web应用开发有2种模板引擎 ejs 和 jade ,当然你可能直接用jquery
的前端模板后端ajax请求数据等等....(也算一种吧)
ejs 下如何使用母版页?

ejs的母版页功能支持需要依赖一个第三方包 ejs-mate 可以根据npm
install ejs-mate 直接安装 Express 需要4.0以上
安装后使用方法如下:

var app = express();
app.set('view engine', 'html');
app.engine('html', require('ejs-mate'));
app.locals._layoutFile = 'layout.html';

上面指定ejs引擎渲染html 文件,接着指定使用 ejs-mate 做母版页引擎,最后指定母版页是 layout.html
这里有个 app.locals 这个变量,提一句,可以把 locals 理解成客户端的一个全局变量,我们现在给变量的_alyoutFile 属性赋值 'layout.html'
这样在后端指定母版页的好处是,你不需要在view中的html页面里特定指定谁是你的母版页.

如果上面最后一句你不写,需要在前端每个页面指定渲染的母版页,假设 index.ejs 套用母版页前代码如下:

<% layout('layout.html') -%>
<span>Hello World!</span>

如果你的母版页是这样的:

<!DOCTYPE html>
<html>
  <head>
    <title>It's title</title>
  </head>
  <body>
    <section>
      <%-body -%>
    </section>
  </body>
</html>

上面的<%-body %> 就是每个页面的变体,就是你要专心关注的东西.
上面的 index.ejs 套用母版页之后渲染出的html如下:

<!DOCTYPE html>
<html>
  <head>
    <title>It's title</title>
  </head>
  <body>
    <section>
      <span>Hello World!</span>
    </section>
  </body>
</html>

可以看出来上面index.ejs 里的全部代码 (除去母版页引用声明代码 <% layout('layout.html') -%> ) 都填充到了母版页的 <%-body %>处.

到这里就简单的介绍完了node.js下ejs引擎的母版页使用方法,简单好用,提高效率- 一介布衣

你可能感兴趣

node-webkit 项目中的 package.json 格式
mac 系统下如何彻底删除 node.js
node.js AES/ECB/PKCS5Padding 与其他语言的加密解密通用
ejs母版页让你的node.js应用开发更快更有效- 一介布衣
node.js 实现一个简单的登录拦截器

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航