初次入坑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)及客户端均有支持. 一.功能 客户端支持 超强的可读性 灵活易用的缩进 块扩展 代码默认 ...
随机推荐
- Redis大幅性能提升之Batch批量读写
Redis大幅性能提升之Batch批量读写 提示:本文针对的是StackExchange.Redis 一.问题呈现 前段时间在开发的时候,遇到了redis批量读的问题,由于在StackExchange ...
- Java经典编程题50道之四十一
海滩上有若干个一堆桃子,五只猴子来分.第一只猴子把这堆桃子平均分为五份,多了一个,这只猴子把多的一个扔入海中,拿走了一份. 第二只猴子把剩下的桃子又平均分成五份,又多了一个,它同样把多的一个扔入海中, ...
- DDD理论学习系列（6）-- 实体
DDD理论学习系列--案例及目录 1.引言 实体对应的英语单词为Entity.提到实体,你可能立马就想到了代码中定义的实体类.在使用一些ORM框架时,比如Entity Framework,实体作为直接 ...
- 解决Linux下面Firefox无法播放mp3的问题
之前一直使用kali linux ,上班屏蔽噪音都用网易音乐.既然没有Linux客户端,那就网页版吧.不得不说,网易音乐的网页版做的真心赞. 在Kali Linux下面使用Firefox听歌一直都很正 ...
- 关于并发，关于IIS你真的了解吗？（一）
本文仅代表带个人观点及理解,本人只是一个编程小菜鸟,如果有不对的地方.请大佬轻喷! 前言:对于很多工作时间短或者编程经验不足的程序员来说,大多数会觉得并发这个词离自己太遥远,之所以知道并发也不过是因为 ...
- octomap中3d-rrt路径规划
路径规划 碰撞冲突检测 在octomap中制定起止点,目标点,使用rrt规划一条路径出来,没有运动学,动力学的限制,只要能避开障碍物. 效果如下: #include "ros/ros.h&q ...
- js传宗接代－－－继承
前几天重温了一下js的继承,今天分享给大家: 一,类式继承. 所谓的类式继承就是:第二个类的原型prototype被赋予了第一个类的实例,如subcals.prototype=new supercls ...
- Install Composer on CentOS
First you have to go to the /tmp directory cd /tmp Download the composer.phar file curl -sS https:// ...
- svg制作风车旋转
首先用ai画一个简单的风车 例如: svg代码: <animateTransform attributeName="transform" begin="0s&quo ...
- Example016实现下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...