首页 > 代码库 > 初次入坑jade模板引擎（一）

初次入坑jade模板引擎（一）

2024-11-01 13:32:39   213人阅读

最近由于工作需要全栈开发，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

 1 doctype html
 2 html
 3   head
 4     title= title
 5     link(rel="stylesheet", href="http://www.mamicode.com/css/bootstrap.css")
 6     script(src=http://www.mamicode.com/‘http://libs.baidu.com/jquery/2.1.1/jquery.min.js”‘)
 7     script(src=http://www.mamicode.com/‘/js/bootstrap.js‘)    
 8   body
 9     ul.nav.nav-tabs
10       li(role=‘presentation‘ class=‘active‘)
11         a(href=http://www.mamicode.com/‘#‘) 888"color: #008080">12       li(role=‘presentation‘)
13         a(href=http://www.mamicode.com/‘#‘) 888"color: #008080">14       li(role=‘presentation‘)
15         a(href=http://www.mamicode.com/‘#‘) 888"color: #008080">16       li(role=‘presentation‘)
17         a(href=http://www.mamicode.com/‘#‘) 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模板引擎（一）


联系
我们