初次入坑jade模板引擎（一）
最近由于工作需要全栈开发，nodejs做后端，在写一个后台管理系统的时候，我一直在考虑用怎样的方式去写，尝试过依然采用前后端分离的结构、使用json数据进行数据交互的模式，但是尝试过才知道，真的很花时间和精力，大部分精力都花在了前端构建上面了。
后来我想到了模板引擎，采用现成的UI框架直接套用，然后通过模板引擎直接在服务端生成HTML代码。node常用的模板引擎有ejs和jade，都说jade很牛逼，所以今天就尝试了一下。
首先安装jade
npm install jade
安装好后在express中添加对jade的支持
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
其实还有一种很偷懒的方法，就是直接全局安装express npm install -g express 然后命令行直接打开输入 express -v 就会自动生成express的项目目录，并且自动在app.js文件中添加了对jade的支持，屡试不爽。
为什么说jade很牛呢？因为jade里面不用写那么多代码，举个例子
doctype html
html
head
title hello world
body
这段jade代码最后会被翻译成HTML代码如下
<html><head><title>hello world</title></head><body data-ext-version="1.4.2"></body></html>
是不是很神奇，哈哈，就这样，感觉还是有点烦啊，特别是写样式，笔者是最不喜欢写样式代码的了，于是乎就想到了一个伟大的框架——bootstrap，按理说，应该是可以用到jade里面去的吧？于是笔者就尝试了一下
首先是引入bootstrap
doctype html
html
head
title= title
link(rel="stylesheet", href="/css/bootstrap.css")
script(src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js”')
script(src='/js/bootstrap.js')
body
ul.nav.nav-tabs
li(role='presentation' class='active')
a(href='#') 888
li(role='presentation')
a(href='#') 888
li(role='presentation')
a(href='#') 888
li(role='presentation')
a(href='#') 888
最后还真的出来了boostrap的样式，真是很方便啊！
敲黑板，划重点了！！
注意你的静态资源文件一定要放在你express对外暴露的文件夹中，比如说笔者的代码 app.use(express.static(path.join(__dirname, 'public'))); 对外暴露的是public这个文件夹，那么我所有的静态资源根目录都是基于这个文件夹的，那么我的路径应该是从这个文件夹算起的路径。
比如说我bootstrap.css放在了public里面的css这个文件夹中 /css/bootstrap.css
有童鞋可能要问了，为什么静态资源文件不和jade文件放在一起呢？因为你最终看到的HTML页面都是经过服务端解析过后编译而成的纯HTML代码，都是以缓存的形式放在了public文件夹下，所以你的相对路径也是相对于public文件夹而言的。
早点睡了，回头有时间继续学习jade并分享经验
初次入坑jade模板引擎（一）的更多相关文章
- Jade 模板引擎使用
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- 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模板引擎使用详解
在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...
- Express全系列教程之(十)：jade模板引擎
一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...
- nodejs jade 模板 引擎的使用方法
1.新建项目 2.使用模板引擎 app.set('view engine','jade'); 3.使用render渲染一个视图 res.render(用于指定需要被渲染的视图(必选),本地变量(可选) ...
- jade模板引擎
最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
- Jade模板引擎学习（一）安装及基本语法
Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认 ...
随机推荐
- python-广度优先搜索
广度优先搜索 下面我们来来BFS算法策略: 比如:我们要从双子峰---->金门大桥,最短路径如何? 我们利用广度优先搜索来一步步求解,注意广度优先搜索在于的关键在于"广",也 ...
- javaSE_05Java中方法（函数）与重载、递归
1.方法的声明和调用 什么是方法?为什么需要方法?代码复用,方便软件升级 什么是方法? 具备特定功能的一段独立的代码段 标准的方法格式:(注意格式的顺序) 修饰符 返回值类型 方法名(参数类型 参数名 ...
- 50几个photoshop快捷键
一.常用的热键组合 1.图层混合模式快捷键:正常(Shift + Option + N),正片叠底(Shift + Option + M),滤色(Shift + Option + S),叠加(Shif ...
- Pycon 2017： Python可视化库大全
本文首发于微信公众号“Python数据之道” 前言 本文主要摘录自 pycon 2017大会的一个演讲,同时结合自己的一些理解. pycon 2017的相关演讲主题是“The Python Visua ...
- 关于Myeclipse不能加载已有项目的问题
如果缺少.project文件,你可以新建一个同名项目,把Use default location 去掉,选择要加载的项目,完成
- PHP面向对象笔记解析
PHP的面向对象是很重要的内容,也是很常用的内容.所以现在就把PHP面向对象进行整理了一下. 顺带,我会在后面把我整理的一整套CSS3,PHP,MYSQL的开发的笔记打包放到百度云,有需要可以直接去百 ...
- 第2章 系统用户/组管理(2) su和sudo
本文目录: 2.1 su 2.2 sudo 2.2.1 /etc/sudoers文件 2.2.2 sudo和sudoedit命令 2.1 su 切换用户或以指定用户运行命令. 使用su可以指定运行命令 ...
- 深入理解 JavaScript 事件循环（一）— event loop
引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式 ...
- Linux命令 文件压缩及压缩命令
gzip [功能说明] 文件的压缩 #gizp属于GNU软件,总性能不错,是Linux系统首选的压缩工具,tar归档命令的-z参数也是利用gzip/gunzip来解压缩 [语法格式] Gip[选项][ ...
- cesium自定义气泡窗口infoWindow后续优化篇
http://www.cnblogs.com/giserhome/p/6248858.html该篇文章实现的自定义气泡窗口是基于修改cesium源代码基础上,这种做法只是援兵之计,凑合应付的,投机取巧 ...