Express框架view对象如何使用
李中冰 2023-09-11编程经验
第一段:在Express框架中,view对象是用来指定模版引擎并设置视图文件夹路径,这样就可以在路由中使用这些视图文件了。下面我们就来看一下如何使用view对象。首先
第一段:
在Express框架中,view对象是用来指定模版引擎并设置视图文件夹路径,这样就可以在路由中使用这些视图文件了。下面我们就来看一下如何使用view对象。首先,需要安装一个模版引擎,比如EJS:
npm install ejs --save然后在app.js文件中引入EJS模版引擎:
const express = require('express'); const app = express(); app.set('view engine', 'ejs'); app.set('views', './views');在上面的代码中,使用app.set()方法设置了模版引擎为EJS,同时指定了视图文件夹的路径为./views。 第二段: 接着,我们来看如何在路由中使用视图文件。假设我们需要渲染一个名为home的视图文件,在路由中只需要将视图文件名传递给res.render()方法即可:
app.get('/', function(req, res) { res.render('home'); });在上面的例子中,会在./views目录下查找名为home的视图文件,并将其渲染成HTML代码返回给客户端。 第三段: 除了传递视图文件名外,还可以向视图文件传递变量。在路由中,可以通过第二个参数传递一个对象,这个对象中定义的所有属性会成为视图文件中的全局变量。例如:
app.get('/about', function(req, res) { res.render('about', { title: '关于我们', message: '这是我们的公司网站' }); });在上面的例子中,向名为about的视图文件传递了title和message两个变量。在视图文件中可以直接使用这两个变量,并且不需要使用模版引擎的语法:
第四段: 最后,还有一个常用的功能是使用布局文件。布局文件是指一个页面的公共部分,比如顶部导航栏、底部版权信息等等。在Express框架中,可以使用一个叫做express-ejs-layouts的模块来实现布局文件的功能。首先需要安装这个模块:<%= title %>
<%= message %>
npm install express-ejs-layouts --save然后在app.js文件中引入它,并设置布局文件的路径:
const express = require('express'); const app = express(); const expressLayouts = require('express-ejs-layouts'); app.set('view engine', 'ejs'); app.set('views', './views'); app.use(expressLayouts); app.set('layout', 'layout');在上面的代码中,使用app.use()方法将express-ejs-layouts中间件加载到app中,然后使用app.set()方法设置布局文件的路径,即layout.ejs文件。在layout.ejs文件中可以定义公共部分的HTML代码,在视图文件中可以使用layout.ejs中定义的<%- body %>标签来插入视图文件的内容。 总结: 以上就是Express框架中view对象的使用方法了。首先需要设置模版引擎和视图文件夹的路径,然后在路由中使用res.render()方法渲染视图文件,并可以向视图文件传递变量。如果需要使用布局文件,可以使用express-ejs-layouts模块来实现。掌握好这些知识,可以让你更加灵活地处理前端页面的渲染和展示。
很赞哦! ()