开发者社区> 青夜之衫> 正文

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

简介:
+关注继续查看

安装相关模块

在实验代码前,应该先安装express和jade:

npm install express
npm install jade

简单介绍本篇使用的api

1 为了使用jade,先要设置express默认的模板引擎,用法如下:

app.set('view engine', 'jade');//设置默认的模板引擎

2 如果要进行样式的定义,就要创建静态文件目录,该目录中的内容,可以直接在浏览器中获取到:

app.use(express.static(路径));

比如路径为public,那么我们在访问localhost:3000/pubic/xxxx就可以得到相应的文件。

3 设置视图的对应目录

app.set('views',xxxx);

4 向特定路径的视图返回数据

res.render('视图的路径', { 返回的数据名称:返回的数据内容});

代码预览

创建index.js文件:

复制代码
var express = require('express');//引入express模块
var app = express();//创建应用

//定义public路径
var pub = __dirname + '/public';
app.use(express.static(pub));//设置静态目录为pubic
app.set('views', __dirname + '/views');//设置views路径映射到views文件夹

app.set('view engine', 'jade');//设置默认的模板引擎

function User(name, email) {
  this.name = name;
  this.email = email;
}

var users = [
    new User('tj', 'tj@vision-media.ca'), 
    new User('ciaran', 'ciaranj@gmail.com'),
    new User('aaron', 'aaron.heckmann+github@gmail.com')
];

app.get('/', function(req, res){
  res.render('users/test', { users: users });
});

app.use(function(err, req, res, next) {
  res.send(err.stack);
});

app.listen(3000);
console.log('Express started on port 3000');
复制代码

这段代码首先创建了express的应用实例,然后设置相关的静态目录、视图目录、模板引擎等等。

然后创建了几个user对象,返回给特定的视图。

创建模板

创建模板index.jade,注意创建的模版中,只能使用空格来进行格式化。不能同时使用制表符和空格。

复制代码
doctype html
html
  head
  title Jade Example
  link(rel="stylesheet", href="/stylesheets/style.css")

  body
    h1 Users
    #users
    for user in users
      h2= user.name
      .email= user.email
复制代码

语法参考其他的Jade语法说明即可。

添加样式文件

在静态目录中,添加样式文件style.css:

复制代码
body {
  padding: 50px 80px;
  font: 14px "Helvetica Nueue", "Lucida Grande", Arial, sans-serif;
}
.email{
    color: blue;
}
复制代码

文件目录

复制代码
根目录myqq
    \------node_modules
    |    \-------express
    |    \-------jade
    |
    \------public
    |    \------stylesheets
    |         \-------style.css
    \------views
    |    \------test
    |          \------index.jade
    index.js
复制代码

执行node index既可运行样例。

本文转自博客园xingoo的博客,原文链接:Express开发实例(2) —— Jade模板引擎,如需转载请自行联系原博主。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Spring开发】—— Spring Core
原文:【Spring开发】—— Spring Core 前言   最近由于一些工作的需要,还有自己知识的匮乏再次翻开spring。正好整理了一下相关的知识,弥补了之前对spring的一些错误认知。
919 0
Spring+Ibatis集成开发实例
http://blog.csdn.net/daryl715/article/details/1760793   首先简历数据库demo(本文选mysql) 数据库脚本:   CREATE...
833 0
使用IoT Studio经济高效地完成物联网应用开发(含DEMO)
IoT Studio原Link Develop,是阿里云整合在应用开发领域的丰富经验倾力打造的一站式、低成本、高稳定、易定制的物联网生产力工具,旨在帮助用户经济高效的完成物联网应用开发。
13019 0
115_《Delphi信息系统开发实例精选》
《Delphi信息系统开发实例精选》 Delphi 教程 系列书籍 (115) 《Delphi信息系统开发实例精选》 网友(邦)整理 EMail: shuaihj@163.
1271 0
基于ThingJS开发的WebGL H5停车场三维可视化管理Demo
随着社会的发展,城市中的汽车越来越多。车辆集中存放管理的场所被人类提出车辆进出的秩序、车辆存放的安全性、车辆存放管理的有偿性等要求。停车场系统应用现代机械电子及通讯科学技术,集控制硬件、软件于一体。随着科技的发展,停车场管理系统也日新月异,目前最为专业化的停车场系统为免取卡停车场。
3356 0
使用 WordPress 插件模板开发高质量插件
  WordPress 插件样板是标准化的,有组织的,面向对象的基础,用于构建高品质的 WordPress 插件。样板遵循编码标准和文件标准,所以你不必自己学习这些,根据注释编写代码即可。     官方网站      源码下载   您可能感兴趣的相关文章 网站开发中很有用的 j...
616 0
使用delphi 10.2 开发linux 上的Daemon
delphi 10.2 支持linux, 而且官方只是支持命令行编程,目地就是做linux 服务器端的开发。 既然是做linux服务器端的开发,那么普通的命令行运行程序,然后等待开一个黑窗口的方式就 太low了(目前就有个别语言大咖,经常在Windows 上开个黑窗口,看起来非常恶心),那么如果 避免这个尴尬的问题?     其实Linux 下也有类似windows 服务的功能,Linux Daemon 就是其中的一种方式,命令行运行后 直接返回,同时在后台建立一个同样的进程。
1453 0
+关注
1040
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载