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

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

引子:

母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.

一.node.js开发,基于ejs引擎的母版页

二.前提环境 ,如何使用及示例介绍


  1. 就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,那么其他部分完全可以放到母版页中呈现.

    node.js 下的web应用开发有2种模板引擎 ejs 和 jade ,当然你可能直接用jquery 的前端模板后端ajax请求数据等等....(也算一种吧)

    ejs 下如何使用母版页?

  2. 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引擎的母版页使用方法,简单好用,提高效率- 一介布衣

回到顶部