【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好用
【nodejs】jade模板入门的更多相关文章
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- 使用express4.x版、Jade模板以及mysql重写《nodejs开发指南》微博实例
最近阅读<nodejs开发指南>一书,书是不错的,然而其微博代码示例用的是express3.x,用些过时了,运行代码出现不少bug(我电脑安的是express4.x),于是用express ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- Express框架之Jade模板引擎使用
日期:2018-7-8 十月梦想 node.js 浏览:2952次 评论:0条 前段时间讲说了ejs模板引擎,提到了jade的效率等等问题!今天在这里简单提一下jade的使用方式!结合expr ...
- jade——创建第一个jade模板
什么是jade? jade是node.js的一个模板引擎,参考了haml的语法,是简写的html语言. 使用单个标签代替双标签,类似于Python,通过缩进来确定从属关系,没有结束符号,非常简洁,使用 ...
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- jade模板
jade 模板使用 npm install jade -g 安装到全局 jade index.jade 导出一个 index.html 压缩后的 jade -P index. ...
- doT js模板入门
doT.js github地址: doT.js 官方站点 实例1:简单 <!DOCTYPE html> <html lang="en"> <head& ...
- vue 使用Jade模板写html,stylus写css
vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...
随机推荐
- ubuntu server 系统,更换阿里云源(用户更新源)
Ubuntu安装完毕后,默认使用的是官方的源,在国内访问速度很慢,这里介绍更换为阿里云的源方法. 步骤如下: 1.备份源配置文件 sudo cp /etc/apt/sources.list /etc/ ...
- Kinect For Windows V2开发日志九:侦测并绘制人体骨架
简介 在上一篇<侦测.追踪人体骨架>里,介绍了关节点的使用办法,这一篇记录将关节点与OpenCV结合的绘图方法. 代码 #include <iostream> #include ...
- Codeforces Round #200 (Div. 1) D Water Tree 树链剖分 or dfs序
Water Tree 给出一棵树,有三种操作: 1 x:把以x为子树的节点全部置为1 2 x:把x以及他的所有祖先全部置为0 3 x:询问节点x的值 分析: 昨晚看完题,马上想到直接树链剖分,在记录时 ...
- IntelliJ IDEA 集成Tomcat后找不到HttpServlet问题(2015年06月13日)
今天第一次用IntelliJ IDEA集成Tomcat做东西玩,在IntelliJ IDEA中配置好Tomcat之后,开始写Servlet,结果却找不到HttpServlet类,原因就是Intelli ...
- Bootstrap 基本用法
使用bootstrap框架的步骤: 1.引用bootstrap的css框架,这样可以通过bootstrap来布局: <link rel="stylesheet" href=& ...
- AngularJS 学习笔记(1)
AngularJS是一款前端JS框架.AngularJS官网 http://angularjs.org [开发环境准备]: 1,下载AngularJS:JS and CSS in Solution 2 ...
- Jquery判断$("#id")获取的对象是否存在的方法
如果是下面的 jquery 代码判断一个对象是否存在,是不能用的 if($("#id")){ }else{} 因为 $(“#id”) 不管对象是否存在都会返回 object . 正 ...
- php连接到数据库
html代码: <form action="php_mysql_add.php" method="post"> 用户名: <input typ ...
- 13款精彩实用的最新jQuery插件
1.jQuery特色菜单 圆形动画菜单插件 jQuery是一个非常流行的WEB前端框架,尽管HTML5非常酷,但是如果HTML5结合jQuery的话就能实现更酷更实用的插件.今天分享的这款jQuery ...
- 记一次linux samba服务问题调试
linux下samba服务加入windows域控后,samba共享名与合法用户名不应一致,否则无法访问此共享.