Express下ejs的視圖模板引擎的創建

 寫在前面

因爲Express升級到4.0,將ejs的用法忽略,改成用戶自定義形式,因此要引入庫index.js做爲引擎,來支持ejs的模板引擎(點擊下載)。html

首先是創建一個名字叫nodeitem,引擎爲ejs的express模板node

$ express  -e nodeitemexpress

$     cd nodeitemnpm

自動安裝所指定的依賴json

$     npm install                 vim

$     lscookie

把index.js文件上傳到expand_modules/ejs裏面去,上傳文件可安裝lrzszapp

$     tree  expand_modules/函數

$     vim  app.jspost

由於我使用的的express3,個人app.js不是入口文件,退出vim

$    cat package.json

個人入口文件是 ./bin/www,想要修改也不難,只須要在app.js文件裏添加以下代碼便可

 app.set("port",process.env.PORT || 3000);
  http.createServer(app).listen(app.get("port"),function (){
  console.log("this is"+app.get("port"));
  })

    $    node app.js 

   創建模板

 $     vim  app.js

//引入引擎
var engine = require("./expand_modules/ejs/index.js");
//改變中間量及參數
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set("port",process.env.PORT  || 2000);
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser()); 
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
//在app中調用engine函數改造引擎,模板引擎在顯示層的名字叫layout.ejs
app.engine("ejs",engine);
app.locals._layoutFile="layout";
//路由控制w
app.get('/', routes.index);
app.get("/abc",routes.abc);
app.get("/u/:user",routes.user);
app.get("/post",routes.post)
app.get("/reg",routes.reg);
app.get("/doReg",routes.doReg);
app.get("/login",routes.login);
app.get("/doLogin",routes.doLogin);
app.get("/logout",routes.logout);
app.get('/users', users.list);

    路由選擇

       $     cd routes && vim index.js

  

  查看顯示層

  $     cd views  &&  ls 

      

   $    vim layout.js

   ejs文件相似於html文件,只須要在html文件的<body>標籤裏面加入本身設置的模板元素便可。下面是一個例子,最關鍵的是要在<body>標籤裏面加入<%-body%>  爲了顯示原始HTML內容

   

  $     vim  login.ejs

      

   只須要把你想要添加到layout模板裏面的html文件的<body>標籤內容寫入ejs文件便可   模板layout中<%-body%> 會自動解析爲html,並予以顯示。上面文件只是一個例子。

  寫在最後

     ejs引擎書寫方式特別像html,可是他有一個缺點就是不支持模板繼承,想要模板繼承能夠使用jada引擎。要想知道二者更加詳細的區別,這是飛機票

相關文章
相關標籤/搜索