端午节3天说没就没了，自己的脚伤都快一个月了还没好，原本想着去桂林或者厦门呢，可计划赶不上变化，看自己公司C#软件工程师的招聘条件有要求MongoDb,年前就打算自己学习下，买的这本书就叫Node.js+MongoDB+AngularJs Web开发。自己也大致看了下，和SQL Server差不多，可能一些名词定义等不一样，但Node.js还剩Express这块没学完，所以还是先把Express学完了再学MongoDb吧。

一、Express模板引擎介绍

今天看了下Express实现模板引擎部分，模板大家都很常见，在asp.net中也有模板，例如GridView中的模板、页面模板等，模板体现了复用的思想。在Express中也有模板。Express常见的模板引擎主要有两种：Jade和内嵌的Javascript(EJS).下面是它们两个的区别:

Jade使用HTML的速记符号模板，看上去并不像HTML，但模板文件非常小，易于掌握，缺点是需要学习另一种语言

EJS使用特殊的符号在正常的HTML文档中嵌入Javascript，这更容易从正常的HTML过渡，不足之处是HTML文档比原始文档要复杂得多。

二、模板引擎的使用

1.安装jade和ejs模块

npm install jade  npm install ejs

2.定义模板引擎

1)、定义模板引擎第一步是为Express定义一个默认的模板引擎。可以通过express()应用程序对象上对View Engine设定进行设置。

2)、把views设定位置为你的模板文件被存放的位置。

3)、为自己希望使用app.engine(ext,callback)方法来处理的模板扩展名注册模板引擎。ext参数是用于模板文件的文件扩展名，callback参数是支持Express的呈现功能的函数。许多引擎在一个_express函数中提供回调功能.例如:

app.engine('jade',require('jade')._express)

_express功能往往只能在默认的文件扩展名上工作，这种情况可以使用一个不同的函数。例如EJS提供了renderFile函数用于这一目的。可以使用下面的语句为ejs扩展名注册EJS：app.engine('ejs',require('ejs')._express).不过当想为HTML扩展名注册EJS需要使用：app.engine('html',require('ejs').renderFile).

一旦扩展名被注册，引擎回调函数被调用来呈现具有该扩展名的模板

3.加入本地对象

在呈现一个模板时，可能需要包括动态数据，这种情况下，可以生成一个locals对象，它包含映射到模板中定义的变量名称的属性。express()app对象提供了app.locals属性来存储本地变量。app.locals实际是一个函数对象，所以可以用两种不同的方式设置变量。

1.点语法

2.调用app.locals(object)来设置本地本地模板变量，其中object是一个javascript对象，它具有要设置的变量。 app.locals({title:'My App'},version:10).

4.创建模板

创建模板和创建类一样。要注意它的可重用性、规模和层次。

EJS模板比较简单，类似C#访问服务端变量一样通过<%=%><%-%><%%>来实现数据的呈现。类似C#中MVC的View

<%=%>是转义后的变量值

<%-%>不转义的变量值

<%%>javascript的逻辑代码

对于Jade模板这个我现在也没整明白，暂且放下，等以后再好好研究。

5.呈现模板

定义了一个模板也有数据了，怎么把数据显示到模板上呢?这就需要在响应中呈现模板。可以使用Express app对象或使用respons对象发送一个呈现后的模板，要呈现在Express app对象中的模板可以使用app.render()方法。

app.render(view,[locals],callback)

view参数指定views目录中的视图文件名，如果该文件没有包含扩展名，就尝试默认的扩展名。

locals参数允许传递一个locals对象

回调函数在模板被呈现后执行，并应该接受错误对象作为第一个参数，并以呈现后的模板的字符串形式作为第二个参数。

要直接把一个模板呈现为一个响应，则可以使用res.render()函数，它工作原理和app.render()完全一样，不同之处是不必有回调函数。所呈现的结果在响应中自动发送。如果不需要在发送之前对数据做任何处理，就可以使用res.render()方法，以避免需要额外的代码调用res.send()来发送数据。

6.demo

EJS模板

<!DOCTYPE html>

<html lang="en">

<head>

<title>EJS Template</title>

</head>

<body>

    <h1>User using EJS Template</h1>

    <%=title%>

    <%-title%>

    <ul>

        <li>Name: <%= uname %></li>

        <li>Vehicle: <%= vehicle %></li>

        <li>Terrain: <%= terrain %></li>

        <li>Climate: <%= climate %></li>

        <li>Location: <%= location %></li>

    </ul>

</body>

</html>

Jade模板

doctype html

html(lang="en")

  head

    title="Jade Template"

  body

    block content
extends main_jade

block content

  h1 User using Jade Template

  ul

    li Name: #{uname}

    li Vehicle: #{vehicle}

    li Terrain: #{terrain}

    li Climate: #{climate}

    li Location: #{location}

呈现

var express = require('express'),

    jade = require('jade'),

    ejs = require('ejs');

var app = express();

app.set('views', './views');

app.set('view engine', 'jade');

app.engine('jade', jade.__express);

app.engine('html', ejs.renderFile);

app.listen();

app.locals.uname = "Brad";

app.locals.vehicle = "Jeep";

app.locals.terrain = "Mountains";

app.locals.climate = "Desert";

app.locals.location = "Unknown";

app.get('/ejs', function (req, res) {

  app.locals.title="<h1>Jade<h1/>";

  app.render('user_ejs.html', function(err, renderedData){

    res.send(renderedData);

  });

});

app.get('/jade', function (req, res) {

  res.render('user_jade');

});

Node.js之Express三的更多相关文章

  1. Node.js、express、mongodb 实现分页查询、条件搜索

    前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...

  2. node.js和express.js安装和使用步骤 [windows]

    PS: NODEJS:https://nodejs.org NPM:https://www.npmjs.com/ 一.node.js安装与配置 到https://nodejs.org/en/downl ...

  3. Node.js基于Express框架搭建一个简单的注册登录Web功能

    这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注 ...

  4. Node.js系列-express(上)

    前言 Node.js系列的第一篇:http,大概描述了通过使用node.js内置的api创建一个服务并监听request实现简单的增删改查.现在,我们就通过通读express官网及使用express框 ...

  5. node.js之express框架

    之前学习过node.js接触过express框架,最近为了编写一个mock server正好用到了express.下面正好就跟大家介绍一下关于express.今天的内容主要围绕这么几个方面? expr ...

  6. Node.js、express、mongodb 入门(基于easyui datagrid增删改查)

    前言 从在本机(win8.1)环境安装相关环境到做完这个demo大概不到两周时间,刚开始只是在本机安装环境并没有敲个Demo,从周末开始断断续续的想写一个,按照惯性思维就写一个增删改查吧,一方面是体验 ...

  7. node.js框架express的安装

    node.js框架express的安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通 ...

  8. node.js，express入门看详细篇

    先最简单的代码 安装 npm install express app.js 代码内容 const express = require('express') const app = express() ...

  9. node.js使用express框架进行文件上传

    关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...

随机推荐

  1. EGOCache缓存框架详细讲解

    EGOCache是一个轻量级的缓存框架.用法简单方便,在现在的项目中,我就用到EGOCache来缓存下载过的照片和字符串. 有人可能会问到,缓存照片还需要用EGOCache吗?AFNetworking ...

  2. 使用base64转码的方式上传图片

    1.前端html代码 <input style="width:100%" onchange="loadpicture(1)" type="fil ...

  3. 解决 EntityFrameworkCore 执行 Add-Migration命令提示无法识别转义符的错误

    版本.asp.net core 2.0   EntityFrameworkCore2,0,. 之前执行Add-Migration 命令 提示无法识别的转义序列,各种不成功, 解决办法,找到 项目里面的 ...

  4. ABP框架入门踩坑-配置User Secrets

    配置User Secrets ABP踩坑记录-目录 起因 因为以往习惯在User Secrets中保存连接字符串之类信息,但当我把连接字符串移到secrets.json中后,却发现在迁移过程中会报如下 ...

  5. 虚幻4随笔 三 从UE3到UE4

    笔者有幸参与过两个UE3项目,完全不同的使用方法,总共用了5.6年.引擎学习最好还是能参与项目,自己看的话往往容易纠结到一些细节上去,而引擎之所以是引擎,重要的恰恰是在容易被人忽视的工作流上.单从细节 ...

  6. CSS2.1SPEC：视觉格式化模型之width属性详解(下)

    本文承接CSS2.1SPEC:视觉格式化模型之width属性详解(上),继续分析CSS视觉格式化模型中width以及相关值的计算问题: 注:与上节不同,本节的demo中由于出现了float,absol ...

  7. DateTimeField如何自动设置为当前时间并且能被修改 ——django日期时间字段的使用

    参考于:https://www.cnblogs.com/huchong/p/7895263.html 创建django的model时,有DateTimeField.DateField和TimeFiel ...

  8. python os.path 的使用

    import os #该文件所在位置:D:\第1层\第2层\第3层\第4层\第5层\test11.py path1 = os.path.dirname(__file__) print(path1)#获 ...

  9. 比特、字节、K

    比特(bit) 比特,计算机专业术语,是信息量单位,由英文BIT音译而来.BIT为Binary digit(二进制数)位的缩写.二进制数的一位所包含的信息就是一比特,如二进制数0100就是4比特. 字 ...

  10. Android逆向进阶——让你自由自在脱壳的热身运动(dex篇)

    本文作者:HAI_ 0×00 前言 来看看我们今天的主题. 让你自由自在脱壳的热身运动. 现在很多第厂家都是使用第三方的加固方式来进行加固的.或者使用自己的加固方式进行加固. 那么我们必不可少的就是脱 ...