接下来我们要使用视图引擎进行开发
express比较偏好视图引擎为Jade,Jade对于html模板的精简程度非常高,没有尖括号和结束标签,对于前端开发来说并不容易适应
因此我们选择一个叫做Handlebars的模板框架
1.使用npm安装handlebars模板框架:
npm install --save express-handlebars
2.在代码中设置视图引擎
var handlebars = require('express-handlebars').create({defaultLayout:'main'});
app.engine('handlebars',handlebars.engine);
// 设置模板引擎字段
app.set('view engine','handlebars');
这样就创建了一个视图引擎,并且对express进行了配置,将其设置为默认的视图引擎
接下来在项目根目录下创建views目录,并且在其中创建子目录layouts,其中layouts保存所有页面通用框架
并且在layouts中创建文件main.handlebars ,在views目录下创建about home 404 和500页面
目录结构如图所示
3.挂载之后,通过res.render方法渲染创建的模板:
app.get('/',function(req,res){
res.render('home')
// res.type('text/plain'); 注意 在挂载模板引擎后,不需要再手动设置返回类型
// res.send('Meadowlark Travel');
})
现在我们在main.handlebars中写模板框架html代码:
其中{{{body}}}表示其它页面要嵌套模板的位置
在home.handlebars中编写需要显示的页面的内容:
而静态文件img则需要在根目录下创建public目录
在所有路由之前配置static中间件:
app.use(express.static(__dirname + '/public'));
在配置好static中间件后,项目的静态资源请求就会以public作为根路径(main.handlebars中的link标签与img标签均以/public作为根路径)
再次启动项目,可以发现/about路径变成了这样
4.使用模板引擎的动态渲染功能
与php,jsp的功能类似,视图模板可以动态渲染网页的内容,动态渲染字符串的方式类似vue:
修改about.handlebars文件:
在服务器文件中设置fortune的值,并通过render方法传入:
刷新页面 进入'http://127.0.0.1:3001/about'
可以发现,字符串变为了动态
项目的gitlab地址:
https://gitlab.com/njuxjn/express-temp.git