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模板引擎,如需转载请自行联系原博主。
相关文章
|
7月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
128 3
|
7月前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
85 1
|
前端开发 JavaScript 数据可视化
2023最新Vue3全家桶+Express全栈开发通用后台管理系统
后台管理系统是适用于各类企业数字化转型的综合性管理平台,可将企业从传统的纸质化工作转型成无纸化线上统一管理工作,可涵盖对企业的整体管理、对项目的进度、成本、质量、范围管理,对项目执行过程的风险管控、对业务合作的合同管理、对企业内部人员安排的用户管理等
190 0
2023最新Vue3全家桶+Express全栈开发通用后台管理系统
|
1月前
|
Web App开发 JavaScript 前端开发
探索后端开发:Node.js与Express的完美结合
【10月更文挑战第33天】本文将带领读者深入了解Node.js和Express的强强联手,通过实际案例揭示它们如何简化后端开发流程,提升应用性能。我们将一起探索这两个技术的核心概念、优势以及它们如何共同作用于现代Web开发中。准备好,让我们一起开启这场技术之旅!
41 0
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
55 0
|
4月前
|
JSON JavaScript 中间件
深入浅出Node.js后端开发之Express框架应用
【8月更文挑战第29天】本文将带领读者快速了解并掌握使用Express框架进行Node.js后端开发的基础和进阶知识。我们将一起探索Express的安装、基本使用方法,并通过实际代码示例学习如何搭建一个简单的Web服务器。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供有价值的指导和灵感。
|
7月前
|
前端开发 小程序 Java
基于Node+Vue+Express开发实现商城系统
基于Node+Vue+Express开发实现商城系统
167 0
|
JavaScript 前端开发 中间件
python web 开发与 Node.js + Express 创建web服务器入门
python web 开发与 Node.js + Express 创建web服务器入门
187 0
|
JavaScript NoSQL 中间件
【Node.js实战】一文带你开发博客项目之Express重构(博客的增删查改、morgan写日志)
【Node.js实战】一文带你开发博客项目之Express重构(博客的增删查改、morgan写日志)
172 0
|
存储 NoSQL JavaScript
【Node.js实战】一文带你开发博客项目之Express重构(初始化环境,处理 session,连接 redis)
【Node.js实战】一文带你开发博客项目之Express重构(初始化环境,处理 session,连接 redis)
202 0