最近由于工作需要全栈开发，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. lucene全文搜索之三：生成索引字段，创建索引文档（给索引字段加权）基于lucene5.5.3

    前言:上一章中我们已经实现了索引器的创建,但是我们没有索引文档,本章将会讲解如何生成字段.创建索引文档,给字段加权以及保存文档到索引器目录 luncene5.5.3集合jar包下载地址:http:// ...

  2. Mac OSX 搭建 Apache php mySql phpMyAdmin 开发环境

    基本环境和配置 Mac 系统:  OS X EI Caption  10.11.4 当前Mac用户名: ceshi 需要熟知的几个基本概念和操作: 1. 新建一个终端默认的是路径是: /Users/当 ...

  3. Spring+SpringMVC+MyBatis深入学习及搭建(十二)——SpringMVC入门程序（一）

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6999743.html 前面讲到:Spring+SpringMVC+MyBatis深入学习及搭建(十一)——S ...

  4. string services

    string通用字符串操作: re,正则表达式 difflib,比较序列 stringIO:以文件的方式来读和写字符串 CstringIO:更快捷的stringIO版本 textwrap:文本包装和填 ...

  5. textarea的中文输入判断与搜狗输入法的特殊行为

    虽然要讲解的知识点是通用的,但是还是要介绍下我的应用场景和测试环境. 0.1 应用场景和测试环境 我的应用是一块使用Html Canvas开发的黑板,在黑板上实现简单的文字编辑功能. 操作系统:win ...

  6. 自动适配H5容器(UIViewView/WKWebView)，生成长图，防微信进度条

    前段时间撸代码猥琐发育的时候,设计师老王给了张截图某宝APP上一个生成长图分享的功能,正好公司有这个需求,于是在立马开始操练起来!在万能的度娘上搜集整理资料后发现很多文章介绍的方案对WKWebView ...

  7. ORA-12638: 身份证明检索失败 解决方法

    用PL/SQL或Navicat连接本地或远程Oracle数据库的时候报错:ORA-12638: 身份证明检索失败 解决方法: 开始 -> 所有程序 -> Oracle - Oracle_h ...

  8. ionic结合HTML5实现打电话功能

    HTML5中这样子可以实现打电话的功能,但是在ionic实际项目中,并不是直接就可以这样子用,需要配置一下config.xml文件就可以在手机上调用到自己的联系人打电话页面了, 因为项目是引用的Cor ...

  9. 如何在linux如何安装nginx服务器

    1.进入命令窗口: 2.进入nginx.org 网站 下载安装包nginx-1.8.0.tar.gz 3.进入下载的文件夹 4.加压下载的压缩包 tar  -zxvf nginx-1.8.0.tar. ...

  10. 【Android Developers Training】 15. 启动一个Activity

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...