Express开发实例(2) —— Jade模板引擎
时间:2022-04-22
本文章向大家介绍Express开发实例(2) —— Jade模板引擎,主要内容包括安装相关模块、简单介绍本篇使用的api、代码预览、创建模板、添加样式文件、文件目录、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板。 关于Jade的用法,网上有很多,本篇参考: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既可运行样例。
- ios 开发,通讯录信息调用常用方法,这个比较全,不用再整理了
- 深入理解和应用Float属性
- 堆和栈的区别
- 深入理解和应用display属性(二)
- Philip S.Yu 讲的广度学习到底是什么?
- Kubernetes服务网格(第10部分):服务网格API
- 刚刚,同程与艺龙宣布合并!去你的大数据!
- 从蓝光到4K,腾讯视频高码率下载背后的技术
- 从开发者的角度比较IAAS与PAAS
- 图灵机器人郭家:以语义技术为核心驱动力,让机器更好地理解世界
- 静态条码设支付上限,500元封顶,海外支付尚未通知
- 如何自动地将代码从Git平台部署至组件容器
- 聂卫平说过人工智能不会取代人类 只会让我们生活的更加美好
- 万达裁员遭人大教授怒怼:员工如告了 王健林赔不少
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 被遗忘的 10 个Linux命令,很实用!
- Nginx配置中一个不起眼字符"/"的巨大作用,失之毫厘谬以千里
- 当一个http请求来临时,SpringMVC究竟偷偷帮你做了什么?SpringMVC视图处理器与视图篇章【终章】
- 求求你,别再开发的时候一用redis分布式锁,就急着去复制粘贴了!lua脚本的实现思路
- 全网最详细的 K8s Service 不能访问排查流程
- 团体程序设计天梯赛-练习集 L1-001 Hello World
- 团体程序设计天梯赛-练习集 L1-002 打印沙漏
- 团体程序设计天梯赛-练习集 L1-003 个位数统计
- 团体程序设计天梯赛-练习集 L1-004 计算摄氏温度
- 团体程序设计天梯赛-练习集 L1-007 念数字
- 团体程序设计天梯赛-练习集 L1-008 求整数段和
- K8s多租户场景下的多层级namespace规则解析
- 团体程序设计天梯赛-练习集 L1-010 比较大小
- 团体程序设计天梯赛-练习集 L1-012 计算指数
- 团体程序设计天梯赛-练习集 L1-013 计算阶乘和