最近由于工作需要全栈开发，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模板引擎（一）的更多相关文章

  1. Jade 模板引擎使用

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

  2. jade模板引擎学习笔记（WebsStorm9.0.3+ nodejs+express+jade）

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

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

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

  4. Jade模板引擎使用详解

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

  5. Express全系列教程之(十)：jade模板引擎

    一.前言 随着前端业务的不断发展,页面交互逻辑的不断提高,让数据和界面实现分离渐渐被提了出来.JavaScript的MVC思想也流行了起来,在这种背景下,基于node.js的模板引擎也随之出现. 什么 ...

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

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

  7. jade模板引擎

    最近用jade写了点东西,觉得挺有趣的,是一个有意思的模板引擎. 比如说,像这样的结构的html <span> <i class="icon-edit">& ...

  8. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

  9. Jade模板引擎学习（一）安装及基本语法

    Jade是一款高性能简洁易懂的模板引擎,Jade是Html的Javascript实现,在服务端(NodeJS)及客户端均有支持. 一.功能 客户端支持  超强的可读性 灵活易用的缩进 块扩展 代码默认 ...

随机推荐

  1. DOM知识梳理

    DOM 我们知道,JavaScript是由ECMAScript + DOM + BOM组成的.ECMAScript是JS中的一些语法,而BOM主要是浏览器对象(window)对象的一些相关知识的集合. ...

  2. servlet与Javabean之间的区别

    在JSP中调用JAVA类和使用JavaBean有什么区别? 可以像使用一般的类一样使用JavaBean,Bean只是一种特殊的类.特殊在可以通过<jsp:useBean/>调用JavaBe ...

  3. Apache和PHP环境配置

    最近闲来想学习一下PHP. 工欲善其事,必先利其器.我的PHP环境配置了三遍,才安装成功. 下面就分享一下我的安装经验. 1.Apache2.4,PHP5.6,MySql5.6这些都是从官网下载的. ...

  4. redis 对象

    redis通过前面几篇的数据结构构键了一个对象系统,这个对象系统包含了字符串对象,列表对象,哈希对象,集合对象,有序集合对象 每一个对象都是一个redisobject typedef struct r ...

  5. 安装Dubbo管理控制台

    样例参考视频:http://www.roncoo.com/course/view/f614343765bc4aac8597c6d8b38f06fd Dubbo管控台可以对注册到zookeeper注册中 ...

  6. CentOS下安装php的mbstring扩展

    php的mbstring扩展如果没有安装会导致一些问题: 例1:登陆phpMyAdmin的时候会提示没字符串编码和字符串处理库 php_mbstring,有些程序中会用到mb_substr函数没有ph ...

  7. Mysql按时间段分组查询

    Mysql按时间段分组查询来统计会员的个数,mysql个数 Mysql按时间段分组查询来统计会员的个数,mysql个数 1.使用case when方法(不建议使用)- 代码如下 复制代码SELECT ...

  8. mysql show processlist

  9. php后台数组foreach嵌套循环

    <?php foreach($list as $key=>$val){ ?> <tr class="over_odd"> <td align=& ...

  10. css清除浮动float

    css清除浮动float 1.分析HTML代码 <div class="outer"> <div class="div1">1</ ...