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

【nodejs】jade模板入门的更多相关文章

  1. nodejs jade 模板 引擎的使用方法

    1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...

  2. 使用express4.x版、Jade模板以及mysql重写《nodejs开发指南》微博实例

    最近阅读<nodejs开发指南>一书,书是不错的,然而其微博代码示例用的是express3.x,用些过时了,运行代码出现不少bug(我电脑安的是express4.x),于是用express ...

  3. jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)

    jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...

  4. Express框架之Jade模板引擎使用

    日期:2018-7-8  十月梦想  node.js  浏览:2952次  评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...

  5. jade——创建第一个jade模板

    什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...

  6. Jade 模板引擎使用

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...

  7. jade模板

    jade 模板使用 npm install jade -g      安装到全局 jade index.jade         导出一个 index.html 压缩后的 jade -P index. ...

  8. doT js模板入门

    doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...

  9. vue 使用Jade模板写html,stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

随机推荐

  1. ubuntu server 系统,更换阿里云源(用户更新源)

    Ubuntu安装完毕后,默认使用的是官方的源,在国内访问速度很慢,这里介绍更换为阿里云的源方法. 步骤如下: 1.备份源配置文件 sudo cp /etc/apt/sources.list /etc/ ...

  2. Kinect For Windows V2开发日志九:侦测并绘制人体骨架

    简介 在上一篇<侦测.追踪人体骨架>里,介绍了关节点的使用办法,这一篇记录将关节点与OpenCV结合的绘图方法. 代码 #include <iostream> #include ...

  3. Codeforces Round #200 (Div. 1) D Water Tree 树链剖分 or dfs序

    Water Tree 给出一棵树,有三种操作: 1 x:把以x为子树的节点全部置为1 2 x:把x以及他的所有祖先全部置为0 3 x:询问节点x的值 分析: 昨晚看完题,马上想到直接树链剖分,在记录时 ...

  4. IntelliJ IDEA 集成Tomcat后找不到HttpServlet问题(2015年06月13日)

    今天第一次用IntelliJ IDEA集成Tomcat做东西玩,在IntelliJ IDEA中配置好Tomcat之后,开始写Servlet,结果却找不到HttpServlet类,原因就是Intelli ...

  5. Bootstrap 基本用法

    使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href=& ...

  6. AngularJS 学习笔记(1)

    AngularJS是一款前端JS框架.AngularJS官网 http://angularjs.org [开发环境准备]: 1,下载AngularJS:JS and CSS in Solution 2 ...

  7. Jquery判断$("#id")获取的对象是否存在的方法

    如果是下面的 jquery 代码判断一个对象是否存在,是不能用的 if($("#id")){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object . 正 ...

  8. php连接到数据库

    html代码: <form action="php_mysql_add.php" method="post"> 用户名: <input typ ...

  9. 13款精彩实用的最新jQuery插件

    1.jQuery特色菜单 圆形动画菜单插件 jQuery是一个非常流行的WEB前端框架,尽管HTML5非常酷,但是如果HTML5结合jQuery的话就能实现更酷更实用的插件.今天分享的这款jQuery ...

  10. 记一次linux samba服务问题调试

    linux下samba服务加入windows域控后,samba共享名与合法用户名不应一致,否则无法访问此共享.