您的位置：首页 > 其它

express3.x 无法使用layout模板解决方案

2013-07-08 16:49 381 查看

express3.x 无法使用layout模板解决方案解决方案，测试可行。
1.安装express-partials。

方法一：运行cmd用npm install express-partials

方法二：在package.json里面的dependencies添加"express-partials": "*"。然后运行cmd并切换至项目目录运行npm install获得最新版。

2.app.js里面引用express-partials。

步骤一：添加引用var partials = require('express-partials');

步骤二：在app.set('view engine', 'ejs');下面添加app.use(partials());

var express = require('express')
, routes = require('./routes/index')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, partials = require('express-partials');//这里
var app = express();
//all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(partials());//这里

3.在需要引用模板的地方调用layout:'模版名称'

app.get('/路径', function (req, res) {res.render('.ejs文件的名字', {title: '定义标题',});});
按照以上方案执行后，确实可以正常引用layout模板了，在Express3.x中，新建一个layout.ejs后，通过<%-body %>来引用其它内容。
具体实例：
1、用WebStorm新建一个Express项目，可以看到Express版本是3.3.3。

2、修改app.js如以下代码所示。

var express = require('express')
, routes = require('./routes')
, user = require('./routes/user')
, http = require('http')
, path = require('path')
, partials =require('express-partials');
var app = express();
// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(partials());//这里
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));
// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}

app.get('/', routes.index);
app.get('/users', user.list);

http.createServer(app).listen(app.get('port'), function(){
console.log('Express server listening on port ' + app.get('port'));
});

3、根据路由规则修改index.js、user.js和index.ejs、user.ejs如下。

//index.js
exports.index = function(req, res){
res.render('index', {title: '测试Express3.x使用Layout'});
};

//user.js
exports.list = function(req, res){
res.render('user', {title: 'user页面定义的title'});//转到
};

<h1><%= title %></h1>
<p>这里是index.ejs文件的内容<%= title %>，如果看到外部layout文件的内容，就说明成功了！</p>

<h1><%= title %></h1>
<p>这里是user.ejs的内容，为了区分和index.ejs各自的引用而建立的。</p>

4、新建layout.ejs页面，作为调用模板。

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<p>这里是layout.esj文件内容，如果没有看到其它内容就说明失败了。</p>
<%-body %>  <!-- -->
</body>
</html>

以上代码即完成了简单的调用layout模板，通过不同路径访问不同页面，显示出的内容都调用了这个layout.ejs模板。显示效果如下图所示：

学习资料：
Express2.x to 3.x所做出的改变：https://github.com/visionmedia/express/wiki/Migrating-from-2.x-to-3.x
Express中文入门引导手册：http://www.csser.com/board/4f77e6f996ca600f78000936#/post/4f77e772be3baa0d78001470
Ejs快速入门教程：http://www.csser.com/board/4fddc4f0b28ed7d857001674
Mongoose-让NodeJS更容易操作Mongodb数据库：http://www.csser.com/board/4f3f516e38a5ebc9780004fe

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航