NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图

如果你也在看Node.js开发指南,如果你也在一步一步实现 microBlog 项目!也许你会遇到本文提到的问题,如果你用的是Express
3.0

本书实例背景是 Express 2.0 而如今升级到 3.0后去掉了一些老的方法也更新了一些新的,所以变化还是蛮大的.

首先上一篇博客提到的一个问题:

如何用Express 3.0 生成一个 ejs 模板项目

前提是你已经下载了ejs包,如何下载,运行cmd 输入 npm install ejs -g

2.0 下的语法是:express -t ejs microblog

3.0下的语法是:express -e ejs microblog  (-t已经失效,取而代之的是 -e ,而3.0默认生成的是 jade
模板,此模板作者正是Express作者)

如何用Express 3.0 使用片段视图

就像asp.net里面的用户自定义控件,可以代码重用,相同的视图片段可以直接调用

2.0下的语法是:ejs模板文件里直接这样写 <ul><%- partial(‘listitem’,items)
%></ul>    partial()
正是调用片段视图函数,接受2个参数,参数一表示模板名,参数二表示出入的对象数据.

3.0下使用相对麻烦点:

此方法在3.0下独立成了一个Express 的插件,所以要提前下载

(1)运行cmd 输入:npm install express-partials -g

(2)下载成功后.在app.js 中引用此插件   var partials =
require(‘express-partials’);

(3)然后再开启此插件, 在app.js 中 app.set(‘view engine’, ‘ejs’);  代码后添加如下代码:
 app.use(partials());

(4)package.json 里 dependencies 配置项添加  ”express-partials”: “*”  
注意格式,下面列出 package.json 全部内容





1

2

3

4

5

6

7

8

9

10

11

12

13

{

"name""application-name",

"version""0.0.1",

"private"true,

"scripts": {

"start""node app.js"

},

"dependencies": {

"express""3.3.4",

"ejs""*",

"express-partials""*"

}

}

你可以直接复制上面的内容覆盖 package.json元内容

截止到此处你的Express 3.0下就可以使用 partial 片段视图了.

在view模板文件夹下新建 list.ejs 文件,内容是: <ul><%- partial(‘listitem’,items)
%></ul>  和 listitem.ejs  内容是:<li><%= listitem
%></li>

然后app.js 里添加一个路由来运行 list 模板创建的html页面.

添加路由控制如下:





1

2

3

4

5

app.get(‘/list‘,function(req,res){

res.render(‘list‘,{title:‘List‘,

items:[‘xiaoxiao‘,‘moke‘,‘isoso‘,‘webUI‘]

});

});

保存,运行 app.js ,请求路径:localhost:3000/list

时间: 2024-10-21 00:32:52

NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图的相关文章

nodejs 返回html页面--使用 ejs 模板

nodejs 返回html页面--使用 ejs 模板 nodejs 可以直接在返回中使用html标签,例如下面的格式,返回 hello world 将会使用 h1 字体. app.get('/html',function(req,res){ res.status(200).send('<h1>hello world</h1>');}); "E" is for "effective." EJS is a simple templating la

在express站点中使用ejs模板引擎

在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎    1 前言1 1.1         安装    1 1.2修改app.js  2 1.3创建测试页面2 前言 使用 vs创建的express站点,默认使用的是jade模板引擎,但是我不太喜欢这种方式,因为我觉得html本身的语义特性是我喜欢的,另外html本身也足够简洁,使用html自身做为模板语言更符合我的喜好,所以我选择ejs. 欢迎访问玄魂的博客 1.1        安装 在网站根目

NodeJS -Express 4.0 用include取代partial

express 3.x 版本的 转换为4.x 版本的,要用include替代partial(用于迭代一个数组) 果断抛弃partial插件,在Express 3.x中加入了include方法,可以把原来的代码: 1 <ul><%- partial('listitem', items) %></ul> 换成如下代码: <ul><% items.forEach(function(listitem){ %> <% include listitem

nodejs之egg框架整合ejs模板

config/plugin.js ejs: { enable: true, package: 'egg-view-ejs' } config/config.default.js config.view = { mapping: {'.html': 'ejs'} //左边写成.html后缀,会自动渲染.html文件 }; ejs应用 <% items.forEach(function(item){%> <li><div style="width: auto !impo

Express 4.x 使用 ejs 模板引擎时,view改变后缀为.ejs为.html

在app.js中修改加入如下两行代码: app.engine('.html', require('ejs').renderFile); app.set('view engine', 'html');

【Node.js基础篇】(八)安装Express 3.2框架以及ejs模板

Html模板以及路由文件等服务器必备的功能虽然我们都可以自己实现,但在稳定性.可靠性.全面性方面肯定是有所遗漏的,所以,从今天起,Node的学习就进入了框架学习部分. 维基百科: 框架就是制定一套规范或者规则(思想),大家(程序员)在该规范或者规则(思想)下工作.或者说使用别人搭好的舞台来做编剧和表演. 第一个要学习的框架是在Node中被广泛应用的框架--Express. 安装Express 如果你使用的Node开发环境是WebStorm的话,在新建工程的时候可以直接选新建Node工程,它会给你

Nodejs开发框架Express3.0开发手记–从零开始

转载请注明出处: http://blog.fens.me/nodejs-express3/ 程序代码已经上传到github有需要的同学,自行下载. https://github.com/bsspirit/nodejs-demo 从零开始nodejs系列文章 从零开始nodejs系列文章, 将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的 Javascript引擎.chrome浏览器就基于V8,同时打开20-30个网

Nodejs express中创建ejs项目,解决express下默认创建jade,无法创建ejs问题

最近在看<Node.js开发指南>,看到使用nodejs进行web开发的时候,准备创建ejs项目遇到问题了, 书上命令为: ? 1 express -t ejs microblog 可是执行后,仍旧创建的是jade项目. 原来,express3.x,express4.x中创建ejs命令更新为: express -e microblog //即ejs,-j(即jade)  当然,最直接的,你也可以修改package.json里的定义来实现安装ejs. PS:建立工程过程 1.必须得安装expre

Windows环境下,从零开始搭建Nodejs+Express+Ejs框架(二)---安装Express,ejs

安装Express,ejs的前提是一定要先安装nodejs,具体安装方法请查看 http://www.cnblogs.com/tfiremeteor/p/8973105.html 安装Express和ejs的前提是先要创建一个项目,因为我采用的并不是全局安装的方式,顺序为,创建项目,安装Express,再安装ejs. 一.  准备工作. 关于Nodejs的所有操作都必须通过命令行来实现,并且需要进入项目所在的目录.所以,首先运行cmd,打开命令提示符.如下图 这个是默认的路径,现在要进入项目路径