【nodejs】jade模板入門

使用jetbrians webstom創建空項目

1.創建package.json 引用依賴配置

{
  "name": "demojade",
  "description": "jade模板",
  "version": "1.11.0",
  "author": "viewcozy",
  "license": "MIT",
  "scripts": {
    "start": "node dynamicscript.js"
  },
  "dependencies": {
    "jade": "latest"
  }
}

2.轉到項目目錄下 使用 "npm install" 命令（管理員）進行安裝，會根據package.json配置安裝依賴。

  這樣依賴就會放到項目目錄下。

 ps:由於之前沒加package ，導致在node目錄下npm后項目下舊版本node_modules依然無法更新（先檢查項目下的node_modules，后檢查全局）

 

常用方法：

var jade = require('jade');

// 渲染字符串
jade.render('.csser.com 字符串', { options: 'here' });

// 渲染文件
jade.renderFile('path/to/csser.com.jade', { options: 'here' }, function(err, html){
// 這里的options是可選的
// 回調函數可以作為第二個參數
});

// 編譯一個函數
var fn = jade.compile('string of jade', options);
fn(locals);

// 編譯一個函數文件（模板內可以寫函數）
var fn = jade.compileFile(temple.jade, options);
fn(locals);

 

jade模板的一般寫法：

-var item1= templatedata.items[0],item2= templatedata.items[1];
div(id="#{templatedata.templateid}",class="TwoImgAverage18 grid-one cf",title="#{templatedata.templatename}")
   div.img-1
      a(class="" sku="" promotionactiveid="" quantity="1" seckillid="0" href="javascript:alert('h5站點未實現此功能 ，請使用yt網客戶端。')" target="_self")
         img(alt="#{item1.imgname}" width="100%" src="#{item1.imgurl}")
   div.img-2
      a(class="dd" sku="" promotionactiveid="" quantity="1" seckillid="0" href="javascript:alert('h5站點未實現此功能 ，請使用yt網客戶端。')" target="_self")
         img(alt="#{item2.imgname}" width="100%" src="#{item2.imgurl}")

這兩種寫法是等價的：

input.input-control(spellcheck="false", placeholder="Input", type="text")
input(class="input-control" spellcheck="false", placeholder="Input", type="text")

 

 

 

獲取一個接口數據：

var http =require("http");
http.get('http://.ts/Services/Proxy.ashx?r=0.45927956653758883&os=HTML5&pageid=104001&client_v=1.0.0&previewtime=0&methodName=products.template.getpage_1.0.0&method=products.template.getpage&apptype=10&ver=1.0.0&pageindex=1',function(res){
console.log('get response Code :' + res.statusCode);
res.setEncoding('utf8');
res.on('data', function (chunk) {
console.log(chunk);
});
}).on('error',function(e){
console.log("Got error: " + e.message);
})

 

 

編碼統一設置：

搜索配置選項 ps好用