【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好用