初次入坑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)及客户端均有支持. 一.功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认 ...
随机推荐
- Java常用类之String类练习
1.编程. 已知字符串:"this is a test of java". 按要求执行以下操作: (1) 统计该字符串中字母s出现的次数 (2) 取出子字符串"test& ...
- laravel中的多对多关系详解
数据表之间是纵横交叉.相互关联的,laravel的一对一,一对多比较好理解,官网介绍滴很详细了,在此我就不赘述啦,重点我记下多对多的关系 一种常见的关联关系是多对多,即表A的某条记录通过中间表C与表B ...
- struts2+hibernate+spring注解版框架搭建以及简单测试（方便脑补）
为了之后学习的日子里加深对框架的理解和使用,这里将搭建步奏简单写一下,目的主要是方便以后自己回来脑补: 1:File--->New--->Other--->Maven--->M ...
- 每篇半小时1天入门MongoDB——2.MongoDB环境变量配置和Shell操作
上一篇:每篇半小时1天入门MongoDB——1.MongoDB介绍和安装 配置环境变量 Win10系统为例 右键单击“此电脑”——属性——高级系统设置——高级——环境变量,添加C:\Program F ...
- MyBB 18 SQL Injection Vulnerability
<?php error_reporting(0); ?> <form method="post" action=""> Input a ...
- Context源码分析
我们做安卓开发,时时都在和Context打交道,那么Context到底是什么?有什么作用?如何与Application,Activity,Service等实例发生联系的?等等 Context是什么? ...
- 《Python编程从入门到实践》_第四章_操作列表
for循环遍历整个列表 pizzas = ['pizzahut','dicos','KFC'] for pizza in pizzas: print ("I like "+ piz ...
- Chapter2：Discrete-Time Signal Processing and Short-Time Fourier Analysis
作者:桂. 时间:2017-05-24 08:44:53 主要是<Speech enhancement: theory and practice>的读书笔记,全部内容可以点击这里. 这一 ...
- 我们为什么要使用AOP？
原文地址http://www.cnblogs.com/xrq730/p/7003082.html,转载请注明出处,谢谢 前言 一年半前写了一篇文章Spring3:AOP,是当时学习如何使用Spring ...
- Python模块之ConfigParser - 读写配置文件
Python 标准库的 ConfigParser 模块提供一套 API 来读取和操作配置文件. 配置文件的格式 a) 配置文件中包含一个或多个 section, 每个 section 有自己的 opt ...